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

<template>
	<view class="wrap">
		<ujp-navbar title="添加车牌">
 		</ujp-navbar>
		<!-- <p class="car-num" style="padding: 10px  40px;" >根据平台要求,车牌号码输入后暂时<span style="color:red">不可以修改</span>,后续修改需要联系客服人员，请认真填写</p>
		 -->
		<view class="key-input">
			<umessageInput :focus="true" 
			@selectIndex="getSelectIndex"
			:value="form.carNum" :maxlength="maxlength" :disabled-keyboard="true"></umessageInput>
		
		
		</view>
		<ucarkeyboard ref="uKeyboard" mode="car" :showTips="true" :confirmBtn="false" :mask-close-able="false" :tooltip="false" v-model="keyShow" @change="valChange" @backspace="backspace"></ucarkeyboard>
		<view class="default">
			<!-- <u-checkbox-group>
				<u-checkbox class="tips" v-model="form.defaultFlag" shape="circle" @change="checkboxChange()">设为默认车辆</u-checkbox>
			</u-checkbox-group> -->
		</view>
		<u-button class="login-btn" type="success" shape="circle" @click="keepCar">保存</u-button>
	</view>
</template>

<script>
	import * as userApi from '@/apis/user.js'
	import ucarkeyboard from '@/components/Ucarkeyboard.vue'
	import umessageInput from '@/components/UmessageInput.vue'

	export default {
		components: {
			ucarkeyboard,umessageInput
		},
		data() {
			return {
				isLogin:false,
				maxlength:8,
				keyShow: true,
				code:"",
				codeId:"",
				form: {
					carNum: '鄂',
					defaultFlag: true,
				},
				selectIndex:-1
			}
		},
		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.login){
				this.isLogin=true;
			}
		},
		onReady() {
			this.$refs.uKeyboard.changeCarInputMode();
		},
		methods: {
			
			gotoLink(){
				if (this.code == 'A') {
					uni.redirectTo({
						url: '/pages/searchPile/stationAndPile/chargingPileDetails?id=' + this.codeId
					})
				} else if (this.isLogin){
					uni.redirectTo({
						url: '/pages/index/index'
					})
				}else {
					uni.navigateBack({
						url: '/pages/user/car/index'
					})
				}
			},
			
			checkboxChange() {
				this.form.defaultFlag = !this.form.defaultFlag;
			},
			getSelectIndex(i){
				this.selectIndex=i;
				if(i==0){
					var aaa =	this.$refs.uKeyboard.changeCarInputValue();
					
					if( aaa) {
						this.$refs.uKeyboard.changeCarInputMode();
					}
				}
			},
			// 按键被点击(点击退格键不会触发此事件)
			valChange(val) {
				
				if(this.form.carNum.length>=this.maxlength&&this.selectIndex==-1){
					return
				}
				
				if(this.selectIndex==-1){
					this.form.carNum += val;
				}else{
					const replaceStr = (str, index, char) => {
					 const strAry = str.split('');
					 if(index<strAry.length){
						  strAry[index] = char;
					 }
					
					 return strAry.join('');
					 }
					 
					this.form.carNum=replaceStr(this.form.carNum,this.selectIndex,val) ;
					this.selectIndex=-1;
				}
				// 将每次按键的值拼接到form.carNum变量中，注意+=写法
				
				//(this.form.carNum);
			
				var aaa =	this.$refs.uKeyboard.changeCarInputValue();
				if((this.form.carNum.length == 0) && aaa) {
					this.$refs.uKeyboard.changeCarInputMode();
				}else if(!aaa){
					this.$refs.uKeyboard.changeCarInputMode();
				}
			},
			// 退格键被点击
			backspace() {
				// 删除form.carNum的最后一个字符
				if(this.form.carNum.length){
					if(this.selectIndex==-1){
						
						this.form.carNum = this.form.carNum.substr(0, this.form.carNum.length - 1);
						
					}else{
 						const replaceStr = (str, index, char) => {
						 const strAry = str.split('');
						 if(index<strAry.length){
							  strAry[index] = char;
						 }
						
						 return strAry.join('');
						 }
						 
						this.form.carNum=replaceStr(this.form.carNum,this.selectIndex,'') ;
						
						//this.selectIndex=-1;
					}
				}
				
				
				
				
				//(this.form.carNum);
				
				var aaa =	this.$refs.uKeyboard.changeCarInputValue();
				if(this.form.carNum.length == 0 && aaa) {
					this.$refs.uKeyboard.changeCarInputMode();
				}
			},
			keepCar() {
				//(this.form)
				if(this.form.carNum.length != 8) {
					uni.showToast({
						title:"请填写新能源车牌"
					})
					return
				}
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				userApi.addRegUserCar(this.form).then((res) => {
					uni.hideLoading();
					
					this.gotoLink()
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.u-char-item{
		width: 29px !important;
	}
	.u-drawer{
		z-index: -1 !important;
	}
	/deep/.u-char-item {
		width: 30px !important;
		height: 40px !important;
		font-size: 18px !important;
	}

	.key-input {
		padding-top: 24px;
	}

	.default {
		margin: 16px 28px;
	}

	.login-btn {
		margin: 28px;
		background-color: #00B962 !important;
		border-color: #00B962 !important;
		color: #fff !important;
	}
</style>