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 in mycars">
					<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" :class="{'isDefault':item.isDefault == 1}" @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();
		},
		onShow() {
			this.handlegetMycars();
		},
		methods:{
			customBack(){
				this.$u.route({
					type:'switchTab',
					url: 'pages/index/index'
				});
			},
			handlegetMycars(){
				this.$u.api.getMycars()
				.then(res=>{
					this.mycars = res.data.rows;
					this.mycarsTotal = res.data.total;
					console.log('this.mycars',this.mycars)
				}).catch(err=>{
					console.log('getMycars ',err)
				});
			},
			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=>{
					this.$refs.uToast.show({
						title: res.msg,
						type: 'success',
					});
					this.handlegetMycars();
					console.log('getMycars',res)
				}).catch(err=>{
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
					});
					console.log('getMycars ',err)
				});
			},
			handleDelCar(id,content){
				this.delCarContent = `是否删除${content}`;
				this.delCarId = id;
				this.delCarshow = true;
				
			},
			confirmDelCar(){
				console.log(this.delCarId);
				this.$u.api.delCar(this.delCarId)
				.then(res=>{
					this.$refs.uToast.show({
						title: res.msg,
						type: 'success',
					});
					this.handlegetMycars();
					console.log('getMycars',res)
				}).catch(err=>{
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
					});
					console.log('getMycars ',err)
				});				
			},
			messageInputClick(){
				this.keyboardshow = true;
			},
			// 按键被点击(点击退格键不会触发此事件)
			keyboardChange(val) {
				// 将每次按键的值拼接到value变量中，注意+=写法
				this.newPlateNumber += val;
				console.log(this.newPlateNumber);
			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if(this.newPlateNumber.length) this.newPlateNumber = this.newPlateNumber.substr(0, this.newPlateNumber.length - 1);
				console.log(this.newPlateNumber);
			},
			keyboardConfirm(){
				this.colorShow = true;
			},
			confirmColor(e){
				this.vehicleColor = this.colorList[e].colorCode;
			},
			// 设置默认车辆
			handlesetDefault(id){
				this.$u.api.setDefaultCar({id:id})
				.then(res=>{
					this.$refs.uToast.show({
						title: res.msg,
						type: 'success',
					});
					this.handlegetMycars();
					console.log('handlesetDefault',res)
				}).catch(err=>{
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
					});
					console.log('handlesetDefault err',err)
				});	
			}
			
		},
	}
</script>

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