JP-ChargeTeam51/pages/user/car/carAdd.vue

<template>
	<view>
		<ujp-navbar title="车辆管理">
			<view class="slot-wrap">
				<span class="navBtn oldTextjp2" oldstyle="font-size: 16px;" @click="showDelete">删除</span>
			</view>
		</ujp-navbar>
		<view>
			<u-modal v-model="show" @confirm="confirmDelete" confirm-color="#fa3534" :show-cancel-button="true" ref="uModal" :asyncClose="true" :title="title" 
				:content="content" :confirm-text="confirmText"></u-modal>
		</view>
		
		<view class="carDet">
			<u-form :model="form" ref="uForm">
				<ucarkeyboard ref="uKeyboard" mode="car" @confirm="confirm" @cancel="cancel" v-show="keyShow" @change="valChange" @backspace="backspace"></ucarkeyboard>
				<u-form-item label="车牌号码" label-width="200rpx" :label-style="elderStatus ? {fontSize: '18px'} : {}">
					<u-input input-align="right" placeholder="请输入车牌号" v-model="form.carNum" :custom-style="elderStatus ? {fontSize: '18px'} : {}" @click="keyClick" />
				</u-form-item>
				<u-form-item v-show="false" label="车辆类型" label-width="200rpx" :label-style="elderStatus ? {fontSize: '18px'} : {}">
					<u-input input-align="right" v-model="carName" :custom-style="elderStatus ? {fontSize: '18px'} : {}" placeholder="请输入正确车牌号" disabled />
				</u-form-item>
				<!-- <u-form-item label="设为默认车辆" label-width="230rpx" :label-style="elderStatus ? {fontSize: '18px'} : {}">
					<u-switch slot="right" v-model="form.defaultFlag"></u-switch>
				</u-form-item> -->
			</u-form>
		</view>
		<u-button class="login-btn" type="success" shape="circle" @click="keepCar">保存</u-button>
		
		<p class="car-num" style="padding: 10px  40px;" >根据平台要求,车牌号码输入后暂时<span style="color:red">不可以修改</span>,后续修改需要联系客服人员，请认真填写</p>
		
	</view>
</template>

<script>
	import * as userApi from '@/apis/user.js'
	import ucarkeyboard from '@/components/Ucarkeyboard.vue'
	
	export default {
		components: {
			ucarkeyboard
		},
		data() {
			return {
				carName: '',
				keyShow: false,
				show: false,
				title: '删除车辆',
				content: '是否删除此车牌号?',
				confirmText: '删除',
				form: {
					id: '',
					carNum: '',
					defaultFlag: true,
				},
				carList: [],
				elderStatus: false,
			}
		},
		onLoad(op) {
			if (op.jpcode) {
				var str1 = op.jpcode.slice(0, 19);
				var str2 = op.jpcode.slice(20, 21);
				var str3 = op.jpcode.slice(22);
				
				if (str1 == 'jp_team51_charge_id') {
					if (str2 == 'A') {
						this.code = str2;
						this.codeId = str3;
					}
				}
			}
			if(op.id){
				this.form.id = op.id;
				this.getCarList();
			}
		},
		onReady() {
			this.$refs.uKeyboard.changeCarInputMode();
			
			if(this.carhelp.get("getElderModeClass") == "长辈模式") {
				this.elderStatus = true;
			} else {
				this.elderStatus = false;
			}
		},
		methods: {
			cancel() {
				this.keyShow = false;
			},
			confirm() {
				this.keyShow = false;
			},
			keyClick() {
				this.keyShow = true;
				uni.hideKeyboard();
			},
			// 按键被点击(点击退格键不会触发此事件)
			valChange(val) {
				// 将每次按键的值拼接到form.carNum变量中，注意+=写法
				if(this.form.carNum.length < 8) {
					this.form.carNum += val;
					//(this.form.carNum);
					if(this.form.carNum.length == 1) {
						this.$refs.uKeyboard.changeCarInputMode();
					}
					if(this.form.carNum.length == 8) {
						this.carName = '新能源车';
					} else if (this.form.carNum.length == 7) {
						this.carName = '燃油车';
					} else {
						this.carName = '';
					}
				}		
			},
			// 退格键被点击
			backspace() {
				// 删除form.carNum的最后一个字符
				if(this.form.carNum.length) this.form.carNum = this.form.carNum.substr(0, this.form.carNum.length - 1);
				//(this.form.carNum);
				
				var aaa =	this.$refs.uKeyboard.changeCarInputValue();
				if(this.form.carNum.length == 0 && aaa) {
					this.$refs.uKeyboard.changeCarInputMode();
				}
				if(this.form.carNum.length == 8) {
					this.carName = '新能源车';
				} else if (this.form.carNum.length == 7) {
					this.carName = '燃油车';
				} else {
					this.carName = '';
				}
			},
			getCarList() {	
				uni.showLoading({
					title: "加载中",
					mask: true,
				})		
				userApi.regUserCarList().then((res) => {
					uni.hideLoading();
					this.carList = res.data;

					for(var i=0;i<this.carList.length;i++) {
						var carId = this.carList[i].id
						if(this.form.id == carId) {			
							this.form.carNum = this.carList[i].carNum;
							this.form.defaultFlag = this.carList[i].defaultFlag;
							if(this.form.carNum.length == 8) {
								this.carName = '新能源车';
							} else if (this.form.carNum.length == 7) {
								this.carName = '燃油车';
							} else {
								this.carName = '';
							}
						}
					}
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			showDelete() {
				this.show = true;
				this.keyShow = false;
			},
			confirmDelete() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})		
				userApi.deleteRegUserCar({
					id: this.form.id
				}).then((res) => {
					uni.hideLoading();
					
					this.show = false;
					uni.navigateBack({
						//url: '/pages/user/car/index'
					})
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			keepCar() {
				this.keyShow = false;
				if(this.form.carNum.length != 8) {
					uni.showToast({
						title:"请填写新能源车牌"
					})
					return
				}
				uni.showLoading({
					title: "加载中",
					mask: true,
				})		
				userApi.addRegUserCar(this.form).then((res) => {
					uni.hideLoading();				
							
					if(this.code == 'A') {
						uni.reLaunch({
							url: '/pages/searchPile/stationAndPile/chargingPileDetails?id=' + this.codeId
						})
					} else {
						uni.navigateBack({
							// url: '/pages/user/car/index'
						})
					}
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
		}
	}
</script>
<style>
	page{
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.slot-wrap{
		flex: 1;
	}
	.navBtn{
		float: right;
		margin-right: 15px;
		color:#FF6666;
	}
	.carDet{
		padding: 0 16px;
	}
	
	.login-btn {
		margin: 28px ;
		background-color:#00B962!important;
		border-color: #00B962!important;
		color:#fff!important;
	}
</style>