count-pass-app/components/carKeyboard/carKeyboard.vue

<template>
	<!--车牌号输入组件-->
	<view v-if="show" class="trailer-keyboard">
		<u-popup :show="show">
			<view class="trailer-keyboard">
				<view class="keyBoard_content">
					<!-- header -->
					<view class="top-part flex">
						<view class="font-30 close" @click="closeKeyboard">
							<u-icon name="close"></u-icon>
						</view>
						<view class="message color-333">{{$t('order.PleaseEnterTheLicensePlateNumber')}}</view>
						<view class="font-30 confirm" :class="{'confirm-active': confirmBtnFocus}"
							@click="confirmKeyboard">{{$t('settings.confirmText')}}
						</view>
					</view>

					<!-- input checkbox -->
					<view class="input-and-checkbox">
						<!-- input -->
						<view class="license flex">
							<view v-for="(item,index) in codeList" :key="index" class="edit-text"
								:class="{'border-active': currentFocus === index,'space-left': index === 2}">
								<view>{{item.value}}</view>
							</view>
						</view>
						<!-- checkbox -->
						<view v-if="vehicleType === 'car' && checkboxShow" class="checkbox-box">
							<!--  -->
							<u-checkbox-group class="uCheckbox" v-model="checkboxList" @change="checkboxChange">
								<u-checkbox :label="$t('settings.newEnergyAutomobile')" :name="$t('settings.newEnergyAutomobile')" shape="circle" activeColor="#27B57D"
									:checked="isNewEnergy">
								</u-checkbox>
							</u-checkbox-group>
						</view>
					</view>


					<!-- 键盘 -->
					<view class="keyboard-content">
						<!-- 省份键盘 -->
						<template v-if="isProvince && provinceBoardShow">
							<view class="province-keyboard flex">
								<view class="td td-nor color-333" v-for="(item,index) in provincesKeyList" :key="index"
									@click="provinceKeyClick(item,index)" hover-class="board-active"
									hover-start-time="0" hover-stay-time="80">
									{{item}}
								</view>
							</view>
						</template>

						<!--数字键盘-->
						<template v-if="!isProvince || !provinceBoardShow">
							<view class="number-keyboard flex between">
								<template>
									<view class="td td-num color-333" :class="numberIsDis ? 'board-active' : ''"
										v-for="(item,index) in numberKeyList" :key="index"
										@click="numberKeyClick(item,index)"
										:hover-class="numberIsDis ? '' : 'board-active'" hover-start-time="0"
										hover-stay-time="80">
										{{item}}
									</view>
								</template>
							</view>
						</template>

						<!--字母键盘-->
						<template v-if="!isProvince || !provinceBoardShow">
							<view class="english-keyboard flex between">
								<template>
									<view class="td td-num color-333" :class="englishIsDis ? 'board-active' : ''"
										v-for="(item,idx) in englishKeyOneList" :key="idx"
										@click="englishKeyClick(item,idx)"
										:hover-class="englishIsDis ? '' : 'board-active'" hover-start-time="0"
										hover-stay-time="80">
										{{item}}
									</view>
								</template>
							</view>
							<!-- 第二行 -->
							<view class="english-keyboard flex englishtTwo">
								<template>
									<view class="td td-num color-333" :class="englishIsDis ? 'board-active' : ''"
										v-for="(item,index) in englishKeyTwoList" :key="index"
										@click="englishKeyClick(item,index)"
										:hover-class="englishIsDis ? '' : 'board-active'" hover-start-time="0"
										hover-stay-time="80">
										{{item}}
									</view>
								</template>
							</view>
							<!-- 最后一行 -->
							<view class="english-keyboard flex englishtThree">
								<template>
									<view class="td td-num color-333" :class="englishIsDis ? 'board-active' : ''"
										v-for="(item,index) in englishKeyThreeList" :key="index"
										@click="englishKeyClick(item,index)"
										:hover-class="englishIsDis ? '' : 'board-active'" hover-start-time="0"
										hover-stay-time="80">
										{{item}}
									</view>
									<!--清除按钮-->
									<view @click="backspace" class="delete flex" hover-class="board-active"
										hover-start-time="0" hover-stay-time="80">
										<!-- <image class="deleteImg" src="../../static/my/clear.png" /> -->
										<u-icon name="backspace" size='32'></u-icon>
									</view>
								</template>

								<!-- 挂字键 -->
								<template v-if="vehicleType === 'trailer'">
									<view @click="trailerFiledClick('挂')" class="td td-num color-333"
										:class="trailerFiledIsDis ? 'board-active' : ''"
										:hover-class="trailerFiledIsDis ? '' : 'board-active'" hover-start-time="0"
										hover-stay-time="80">挂</view>
								</template>
							</view>
						</template>


					</view>

				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		name: 'carKeyboard',
		props: {
			// 组件显示
			show: {
				type: Boolean,
				default: false
			},
			// 初始传入车牌号
			vehicleNo: {
				type: String,
				default: ''
			},
			/**
			 * 车辆牌照类型 默认挂车
			 * trailer  挂车
			 * car      汽车
			 */
			vehicleType: {
				type: String,
				default: 'trailer'
			},
			// 是否展示新能源切换按钮
			checkboxShow: {
				type: Boolean,
				default: true,
			},
			//是否影藏省份
			isProvince: {
				type: Boolean,
				default: true,
			}
		},
		data() {
			return {
				/**
				 * currIndex 初始化为零  控制确定按钮高亮
				 * currentFocus 初始化为零 控制输入框高亮
				 */
				numberIsDis: true, // 输入键盘不可点击 true为不可点击
				englishIsDis: false, // 字母键盘可点击
				provinceBoardShow: true, // 省键盘
				isNewEnergy: false, // 是否新能源
				checkboxList: [],
				trailerFiledIsDis: true, // 挂字禁用
				provincesKeyList: '京津冀晋蒙辽吉黑沪苏浙皖闽赣鲁豫鄂湘粤桂琼渝川贵云藏陕甘青宁新',
				numberKeyList: '0123456789',
				englishKeyOneList: 'QWERTYUIOP',
				englishKeyTwoList: 'ASDFGHJKL',
				englishKeyThreeList: 'ZXCVBNM',
				englishKeyForList: 'WXYZ',
				currentFocus: 0,
				currIndex: 0,
				plateLimit: 7, // 车牌号位数
				codeList: [],

				// codeReset: []
			};
		},
		watch: {
			show: {
				handler(val) {
					this.initData()
				},
				immediate: true,
			}
		},
		computed: {
			confirmBtnFocus() {
				return this.currIndex === this.codeList.length || this.currIndex == 0
			}
		},
		methods: {
			// 省份键盘
			provinceKeyClick(val, index) {
				this.currentFocus++;
				this.currIndex++;
				this.codeList[0].value = val;
				this.provinceBoardShow = false;
				this.numberIsDis = true;
				this.englishIsDis = false;
			},

			// 数字键盘
			numberKeyClick(val, idx) {
				if (this.numberIsDis) return
				if (this.currIndex >= this.codeList.length) return
				this.currIndex++;
				this.currentFocus = this.currIndex;
				this.codeList[this.currIndex - 1].value = val;
				if (this.vehicleType === 'trailer') {
					this.setTrailerKeyboardDis()
				}
			},

			// 字母键盘
			englishKeyClick(val, idx) {
				if (this.englishIsDis) return
				if (this.currIndex >= this.codeList.length) return
				this.currIndex++;
				this.currentFocus = this.currIndex;
				this.codeList[this.currIndex - 1].value = val;
				if (this.currIndex === 2) this.numberIsDis = false;
				if (this.vehicleType === 'trailer') {
					this.setTrailerKeyboardDis()
				}
			},

			// 挂字点击
			trailerFiledClick(val) {
				if (this.trailerFiledIsDis) return
				if (this.currIndex > this.codeList.length - 1) return
				this.currIndex++;
				this.currentFocus = this.currIndex + 1;
				this.codeList[this.currIndex - 1].value = val;
			},

			// 设置挂车键盘禁用（最后一个只能选择挂）
			setTrailerKeyboardDis() {
				if (this.currIndex + 1 === this.codeList.length) {
					this.numberIsDis = true;
					this.englishIsDis = true;
					this.trailerFiledIsDis = false;
				}
			},

			// 退格
			backspace() {
				if (!this.currIndex) return
				this.currIndex--;
				this.codeList[this.currIndex].value = '';
				this.currentFocus = this.currIndex;
				this.provinceBoardShow = this.currIndex === 0;
				if (this.currIndex === 1) this.numberIsDis = true;
				if (this.vehicleType === "trailer" && this.currIndex === this.codeList.length - 2) {
					this.numberIsDis = false;
					this.englishIsDis = false;
					this.trailerFiledIsDis = true;
				}
			},

			// 关闭
			closeKeyboard(e) {
				this.$emit('update:show', false)
				this.$emit('close')
			},

			// 确定
			confirmKeyboard(e) {
				if (this.currIndex < this.codeList.length && this.currIndex != 0) return
				let plate = ''
				this.codeList.map(item => (plate += item.value))
				this.$emit('confirm', plate)
				this.closeKeyboard()
			},

			// 是否新能源车牌checkbox change
			checkboxChange(val) {
				console.log(val, 'checkbox change');
				this.isNewEnergy = val.length ? true : false;

				if (val.length) {
					this.codeList.push({
						value: ''
					})
					// this.codeReset.push({value: ''})
				} else {
					this.codeList.splice(this.codeList.length - 1, 1)
					// this.codeReset.splice(this.codeList.codeReset - 1,1)
					let vehicleNo = "";
					this.codeList.map(item => (vehicleNo += item.value))
					if (vehicleNo.length === this.codeList.length && this.currIndex > this.codeList.length) {
						this.currIndex--;
						this.currentFocus--
					}
				}
			},

			initData() {
				console.log('initData', this.isNewEnergy);
				console.log(this.checkboxList);
				let temp = []
				// let reset = []
				const vehicleNoTrim = this.vehicleNo.trim()
				const Leng = vehicleNoTrim ? vehicleNoTrim.length : 0;

				// 新能源checkbox回显
				this.isNewEnergy = Leng > 7 ? true : false;
				this.checkboxList = Leng > 7 ? [{
					text: '新能源车',
					value: 1
				}] : []

				if (Leng) {
					let arr = vehicleNoTrim.split('')
					arr.forEach(item => {
						temp.push({
							value: item
						})
						// reset.push({value: ''})
					})
				} else {
					// 初始化设置数据
					for (let index = 0; index < this.plateLimit; index++) {
						temp.push({
							value: ''
						})
						// reset.push({value: ''})
					}
				}

				// 解决车牌号回显位数不够问题
				if (Leng > 0 && Leng < 7) {
					let num = 7 - Leng;
					for (let i = 0; i < num; i++) {
						temp.push({
							value: ''
						})
					}
				}
				// 禁用设置
				this.isNewEnergy = Leng > 7 ? true : false;
				this.provinceBoardShow = Leng > 0 ? false : true;
				this.numberIsDis = Leng < 2 ? true : false;
				this.englishIsDis = false;
				if (this.vehicleType === 'trailer') {
					if (Leng >= 6) {
						this.numberIsDis = true;
						this.englishIsDis = true;
					}
					this.trailerFiledIsDis = Leng < 6 ? true : false;
				}

				this.codeList = temp;
				// this.codeReset = reset;
				this.currentFocus = Leng;
				this.currIndex = vehicleNoTrim ? vehicleNoTrim.length : 0;
			}
		},
	}
</script>
<style lang="scss" scoped>
	.flex {
		display: flex;
	}

	.between {
		justify-content: space-between;
	}

	.font-30 {
		font-size: 30rpx;
	}

	.color-333 {
		color: #333333;
	}

	.trailer-keyboard {}

	.keyBoard_content {
		z-index: 9999;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: auto;
		background: #fff;

		.top-part {
			width: 100%;
			padding: 25rpx 40rpx;
			height: 92rpx;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
			border-bottom: 1rpx solid #EAEAEA;
			margin-bottom: 15rpx;
			text-align: center;

			.close {
				width: 10%;
				font-size: 47rpx;
				color: #A0A0A0;
			}

			.message {
				font-size: 15px;
				width: 80%;
				text-align: center;
				font-weight: Semibold;
			}

			.confirm {
				width: 10%;
				color: #A0A0A0;
				font-weight: Regular;

				&.confirm-active {
					color: #27B57D;
				}
			}
		}

		.input-and-checkbox {

			.license {
				box-sizing: border-box;
				justify-content: space-around;
				margin: 72rpx 86rpx 30rpx;

				.edit-text {
					height: 80rpx;
					line-height: 80rpx;
					width: 60rpx;
					border: 1rpx solid #A0A0A0;
					border-radius: 8rpx;
					text-align: center;
					font-size: 36rpx;

					&.space-left {
						// margin-left: 30rpx;
					}

					&.border-active {
						border: 1rpx solid #5BCA92;
					}
				}
			}

			.checkbox-box {
				margin: 25rpx 86rpx 28rpx;
				display: flex;
				justify-content: flex-end;

				.uCheckbox {}
			}
		}

		.keyboard-content {
			width: 100%;
			height: 510rpx;
			box-sizing: border-box;
			position: relative;

			.td {
				font-family: "PingFangSC";
				font-size: 32rpx;
				color: #333333;
				font-weight: 500;
				margin: 12rpx 2rpx;
				border: 1rpx solid #E0E0E0;
				border-radius: 8rpx;
				height: 84rpx;
				line-height: 84rpx;
				text-align: center;
			}

			.province-keyboard {
				margin: 0 50rpx;
				flex-wrap: wrap;

				.td-nor {
					flex: 0 1 9%;
					margin-right: 3px;
				}
			}

			.number-keyboard {
				margin: 0 5rpx;

				.td-num {
					flex: 0 1 8%;
				}
			}

			.english-keyboard {
				margin: 0 5rpx;
				flex-wrap: wrap;

				&.englishtTwo {
					display: flex;
					justify-content: center;

					.td-num {
						margin-right: 5px;
						flex: 0 1 8%;
					}
				}

				&.englishtThree {
					display: flex;
					justify-content: center;
					align-items: center;

					.td-num {
						margin-right: 5px;
						flex: 0 1 8%;
					}
				}

				.td-num {
					flex: 0 1 8%;
				}
			}

			.board-active {
				box-shadow: 0 0 0 #e5e5e5;
				background: #e5e5e5;
			}

			.delete {
				width: 95rpx;
				height: 84rpx;
				margin-left: 10px;
				text-align: center;
				background-color: #D8D8D8;
				border-radius: 8rpx;
				// position: absolute;
				// right: 73rpx;
				// bottom: 32rpx;
				justify-content: center;
				align-items: center;

				.deleteImg {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}

	}
</style>