parking_h5/pages/myCars/myCars.vue

<template>
	<view>
		<u-navbar
		 title-color="#fff" 
		 :custom-back="customBack" 
		 :border-bottom="false" 
		 back-icon-color="#CCE8FF" 
		 :background="{background: '#008CFF' }" title="车辆管理"></u-navbar>
		<view class="header">
			<view class="header-title">我的车辆</view>
		</view>
		<view class="wrap">
			<view class="statistics">
				<view class="statistics-title">车辆</view>
				<view class="statistics-center"></view>
				<view class="statistics-number-wrap"><span class="number">{{mycarsTotal}}</span>辆</view>
			</view>
			<view class="new-plate-number">
				<view class="message-input-wrap" @click="messageInputClick">
					<u-message-input :maxlength="8" width="70" font-size="50" :disabled-keyboard="true" v-model="newPlateNumber"></u-message-input>
				</view>				
				<u-keyboard ref="uKeyboard" mode="car" @change="keyboardChange" @confirm="keyboardConfirm" @backspace="backspace" v-model="keyboardshow"></u-keyboard>
			</view>
			<view class="add-car-btn" @click="handleAddCar">添加车辆</view>
			<view class="mycars">
				<view class="mycars-item" v-for="(item, index) in mycars" :key="index">
					<view class="mycars-item-name">{{item.vehicleNo}}</view>
					<view class="mycars-item-type">{{item.energyTpye | energyTpye}}</view>
					<view class="mycars-item-sign" v-if="item.contractStatus==1">已签约</view>
					<view class="mycars-item-sign1" v-if="item.contractStatus==0">未签约</view>
					<view class="mycars-item-tool">
						<span class="default" v-if="item.isDefault == 1" :class="{'isDefault':item.isDefault == 1}" @click="handlesetDefault(item.id)">默认</span>
						<span class="default" v-else @click="handlesetDefault(item.id)">设为默认</span>
						<span @click="handleDelCar(item.id, item.vehicleNo)">删除</span>
					</view>
				</view>
			</view>
		</view>
		
		<u-toast ref="uToast" />
		<u-modal v-model="delCarshow" :show-cancel-button="true" @confirm="confirmDelCar" :content="delCarContent"></u-modal>
		<u-action-sheet :list="colorList" @click="confirmColor" v-model="colorShow"></u-action-sheet>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				keyboardshow:false,
				delCarshow:false,
				delCarId:null,
				delCarContent:'',
				newPlateNumber:'',
				vehicleColor:0,
				mycars:[],
				mycarsTotal:0,
				colorShow:false,
				colorList:[
					{text:'蓝色',colorCode:0}
					,{text:'黄色',colorCode:1}
					,{text:'黑色',colorCode:2}
					,{text:'白色',colorCode:3}
					,{text:'绿色',colorCode:4}
					,{text:'其他',colorCode:99}
				],
			}
		},
		onLoad(){
			this.handlegetMycars();
		},
		methods:{
			customBack(){
				uni.getStorage({
				    key: 'messageBack',
				    success: (res) => {
							this.$u.route({
								type: 'switchTab',
								url: res.data
							})
				    },
					fail:()=> {
						this.$u.route({
							type: 'switchTab',
							url: 'pages/index/index'
						})
					}
				})
			},
			// 获取车辆列表
			handlegetMycars(){
				this.$u.api.getMycars()
					.then(res=>{
						if (res.code === 200) {
							this.mycars = res.data.rows;
							this.mycarsTotal = res.data.total;
						} else {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'error'
							})
						}
					})
					.catch(err=>{
						this.$refs.uToast.show({
							title: '操作失败!',
							type: 'error'
						})
					});
			},
			// 添加车辆
			handleAddCar(){
				if(!this.$u.test.carNo(this.newPlateNumber)){
					this.$refs.uToast.show({
						title: '请正确填写车牌号',
						type: 'error',
					});
					return
				}
				let param = {
					vehicleNo: this.newPlateNumber,
					vehicleColor: this.vehicleColor
				};
				this.$u.api.addCar(param)
					.then(res=>{
						if (res.code === 200) {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'success',
							});
							this.handlegetMycars();
						} else {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'error',
							});
						}
					})
					.catch(err=>{
						this.$refs.uToast.show({
							title: '操作失败!',
							type: 'error',
						});
					});
			},
			// 删除车辆
			handleDelCar(id, content){
				this.delCarContent = `是否删除${content}`;
				this.delCarId = id;
				this.delCarshow = true;
				
			},
			// 确认删除
			confirmDelCar(){
				this.$u.api.delCar(this.delCarId)
					.then(res=>{
						if (res.code === 200) {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'success',
							});
							this.handlegetMycars();
						} else {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'error',
							});
						}
					})
					.catch(err=>{
						this.$refs.uToast.show({
							title: '操作失败!',
							type: 'error',
						});
					});				
			},
			// 点击输入框
			messageInputClick(){
				this.keyboardshow = true;
			},
			// 按键被点击(点击退格键不会触发此事件)
			keyboardChange(val) {
				// 将每次按键的值拼接到value变量中，注意+=写法
				this.newPlateNumber += val;
			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if(this.newPlateNumber.length) this.newPlateNumber = this.newPlateNumber.substr(0, this.newPlateNumber.length - 1);
			},
			// 键盘输入完成后确认
			keyboardConfirm(){
				this.colorShow = true;
			},
			// 确认颜色
			confirmColor(e){
				this.vehicleColor = this.colorList[e].colorCode;
			},
			// 设置默认车辆操作
			handlesetDefault(id){
				this.$u.api.setDefaultCar({id:id})
				.then(res=>{
					if (res.code === 200) {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'success',
						});
						this.handlegetMycars();
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error',
						});
					}
				}).catch(err=>{
					this.$refs.uToast.show({
						title: '操作失败!',
						type: 'error',
					});
				});	
			}
			
		},
	}
</script>

<style lang="scss" scoped>
	@import url("./myCars.scss");
</style>