402 lines
12 KiB
Vue
402 lines
12 KiB
Vue
<template>
|
||
<!-- 车牌组件 -->
|
||
<view class="plate-content">
|
||
<view class="plate-popup" v-show="plateShow">
|
||
<view class="plate-close flex jw" style="padding: 0 20rpx;box-sizing: border-box;">
|
||
<text @click="close(1)">关闭</text>
|
||
<text @click="close(2)" v-if="plateNumber.length > 6">确定 </text>
|
||
</view>
|
||
<view class="numbox" v-if="isShow">
|
||
<block v-for="(item, index) in 7" :key="index">
|
||
<input v-model="plateNumber[index]" disabled class="numInput" maxlength="1" type="text" value="" @click="carInputClick(index)"/>
|
||
</block>
|
||
<input v-model="plateNumber[7]" disabled class="newnumInput" maxlength="1" type="text" value="" placeholder="新能源" placeholder-class="newpl" @click="carInputClick(7)" />
|
||
</view>
|
||
<!-- 汉字键盘 -->
|
||
<view v-show="!plateNumber" :class="safeArea ? 'isPhoneX' : ''">
|
||
<view class="plate-popup-item">
|
||
<view class="plate-popup-item-list" v-for="(item, itemIndex) in keyVehicle1" :key="itemIndex" @click="plateHead(item)">{{ item }}</view>
|
||
</view>
|
||
<view class="plate-popup-item">
|
||
<view class="plate-popup-item-list" v-for="(item, itemIndex) in keyVehicle2" :key="itemIndex" @click="plateHead(item)">{{ item }}</view>
|
||
</view>
|
||
<view class="plate-popup-item">
|
||
<view class="plate-popup-item-list" v-for="(item, itemIndex) in keyVehicle3" :key="itemIndex" @click="plateHead(item)">{{ item }}</view>
|
||
</view>
|
||
<view class="plate-popup-item">
|
||
<view class="plate-popup-item-list" v-for="(item, itemIndex) in keyVehicle4" :key="itemIndex" @click="plateHead(item)">{{ item }}</view>
|
||
<!-- 删除 -->
|
||
<view class="plate-popup-item-list delImg" @click="plateDel">
|
||
<image :src="src" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 数字字母键盘 -->
|
||
<view v-show="plateNumber" :class="safeArea ? 'isPhoneX' : '' ">
|
||
<view class="plate-popup-item">
|
||
<!-- 数字选择 -->
|
||
<view class="plate-popup-item-list" :class="plateNumber.length < 2 || isInputZh ? 'plate-popup-item-disabled' : ''" v-for="(item, itemIndex) in keyNumber" :key="itemIndex" @click="plateNum(item)">{{ item }}</view>
|
||
</view>
|
||
<view class="plate-popup-item">
|
||
<view class="plate-popup-item-list" :class="!isInputZh ? '' : 'plate-popup-item-disabled'" v-for="(item, itemIndex) in keyEnInput1" :key="itemIndex" @click="plateInput(item)"> <view :class="item =='I' || item == 'O' ? 'plate-popup-item-disabled' : ''">{{ item }}</view></view>
|
||
</view>
|
||
<view class="plate-popup-item">
|
||
<view class="plate-popup-item-list" :class="!isInputZh ? '' : 'plate-popup-item-disabled'" v-for="(item, itemIndex) in keyEnInput2" :key="itemIndex" @click="plateInput(item)">{{ item }}</view>
|
||
</view>
|
||
<view class="plate-popup-item">
|
||
<view class="plate-popup-item-list" :class="!isInputZh ? '' : 'plate-popup-item-disabled'" v-for="(item, itemIndex) in keyEnInput3" :key="itemIndex" @click="plateInput(item)">{{ item }}</view>
|
||
</view>
|
||
<view class="plate-popup-item">
|
||
<!-- 车牌最后一位-->
|
||
<view class="plate-popup-item-list del2" :class="(plateNumber.length === 6 || plateNumber.length === 7) && !isInputZh ? '' : 'plate-popup-item-disabled'" v-for="(item, itemIndex) in keyEnInput4" :key="itemIndex" @click="plateLast(item)">{{ item }}</view>
|
||
<!-- 删除 -->
|
||
<view class="plate-popup-item-list delImg" @click="plateDel">
|
||
<image :src="src" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
/*
|
||
* @change By:CkCode
|
||
* @logs:
|
||
* 1:将键盘和输入框整合到了一起
|
||
* 2:适配苹果X
|
||
* 3:增加校验规则
|
||
* 4:增加了错误提示
|
||
* @Last Modified time: 2022-10-17
|
||
*/
|
||
import plateDel from './KeyboardDelete.png'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
plateNumber: '', //输入的车牌
|
||
plateShow: false, //车牌选择是否打开
|
||
keyVehicle1: ['京', '沪', '粤', '津', '冀', '豫', '云', '辽', '黑', '湘'],
|
||
keyVehicle2: ['皖', '鲁', '新', '苏', '浙', '赣', '鄂', '桂', '甘'],
|
||
keyVehicle3: ['晋', '蒙', '陕', '吉', '闽', '贵', '渝', '川'],
|
||
keyVehicle4: ['青', '藏', '琼', '宁', '使'],
|
||
keyNumber: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
|
||
keyEnInput1: ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
|
||
keyEnInput2: ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
|
||
keyEnInput3: ['Z', 'X', 'C', 'V', 'B', 'N', 'M'],
|
||
keyEnInput4: ['港', '澳', '学', '警', '临','挂'],
|
||
isInputZh: false, //是否输入了特殊字符
|
||
src: '',
|
||
};
|
||
},
|
||
props: {
|
||
//是否开启输入框
|
||
isShow:{
|
||
type:Boolean,
|
||
default:true
|
||
},
|
||
//是否适配安全线（iphone X）
|
||
safeArea: {
|
||
type:Boolean,
|
||
default:false
|
||
},
|
||
},
|
||
mounted() {
|
||
this.src = plateDel;
|
||
},
|
||
onShow() {},
|
||
watch:{
|
||
plateNumber(num){
|
||
this.$emit('update:plateNum', num);
|
||
}
|
||
},
|
||
methods: {
|
||
/**
|
||
* @desc 初始化
|
||
*/
|
||
init() {
|
||
this.plateNumber = '';
|
||
},
|
||
/**
|
||
* @desc 打开下拉栏
|
||
*/
|
||
open() {
|
||
this.plateShow = true;
|
||
},
|
||
/**
|
||
* @desc 关闭弹出的车牌
|
||
*/
|
||
close(e) {
|
||
if ((this.plateNumber && this.plateNumber.length < 7) || e==1 ) {
|
||
return uni.showModal({
|
||
title: '温馨提示',
|
||
content: '关闭将会清空您已输入的内容',
|
||
success: res => {
|
||
if (res.confirm) {
|
||
this.init();
|
||
this.plateShow = false;
|
||
//传值到父组件
|
||
this.$emit('change', {
|
||
value:this.plateNumber
|
||
})
|
||
} else if (res.cancel) {
|
||
}
|
||
},
|
||
});
|
||
}
|
||
if(this.isVehicleNumber(this.plateNumber)){
|
||
this.plateShow = false;
|
||
//传值到父组件,写成对象，方便后期改造
|
||
this.$emit('change', {
|
||
value:this.plateNumber
|
||
})
|
||
}else if(this.plateNumber){
|
||
uni.showToast({
|
||
title: '车牌号输入错误,请重新输入',
|
||
duration: 2000,icon:'none'
|
||
});
|
||
|
||
}else{
|
||
this.plateShow = false;
|
||
}
|
||
},
|
||
/**
|
||
* @desc 车牌号验证方法
|
||
*/
|
||
isVehicleNumber(vehicleNumber) {
|
||
var xreg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF]$)|([DF][A-HJ-NP-Z0-9][0-9]{4}$))/;
|
||
var creg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳临]{1}$/;
|
||
if (vehicleNumber.length == 7) {
|
||
return creg.test(vehicleNumber);
|
||
} else if (vehicleNumber.length == 8) {
|
||
return xreg.test(vehicleNumber);
|
||
} else {
|
||
return false;
|
||
}
|
||
},
|
||
/**
|
||
* @desc 汉字选择
|
||
*/
|
||
plateHead(plate) {
|
||
if (!this.plateNumber) {
|
||
this.plateNumber = this.plateNumber + plate;
|
||
}
|
||
},
|
||
/**
|
||
* @desc 字母选择
|
||
*/
|
||
plateInput(plate) {
|
||
//判断是否输入了字母
|
||
if (this.isInputZh || plate =='I' || plate == 'O') {
|
||
return;
|
||
}
|
||
if (this.plateNumber.length < 8) {
|
||
this.plateNumber = this.plateNumber + plate;
|
||
}
|
||
},
|
||
/**
|
||
* @desc 数字选择
|
||
*/
|
||
plateNum(plate) {
|
||
//判断是否输入了字母
|
||
if (this.isInputZh) {
|
||
return;
|
||
}
|
||
if (this.plateNumber.length >= 2 && this.plateNumber.length < 8) {
|
||
this.plateNumber = this.plateNumber + plate;
|
||
}
|
||
},
|
||
/**
|
||
* @desc 最后一位选择
|
||
*/
|
||
plateLast(plate) {
|
||
//判断是否输入了字母
|
||
if (this.isInputZh) {
|
||
return;
|
||
}
|
||
if (this.plateNumber.length === 6 || this.plateNumber.length === 7) {
|
||
this.plateNumber = this.plateNumber + plate;
|
||
this.isInputZh = true;
|
||
}
|
||
},
|
||
/**
|
||
* @desc 删除
|
||
*/
|
||
plateDel() {
|
||
if (this.plateNumber) {
|
||
this.plateNumber = this.plateNumber.substring(0, this.plateNumber.length - 1);
|
||
}
|
||
|
||
if (this.plateNumber.length === 6 || this.plateNumber.length === 7) {
|
||
this.isInputZh = false;
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
/*宽度转换vw*/
|
||
@function vww($number) {
|
||
@return ($number / 375) * 750 + rpx;
|
||
}
|
||
.isPhoneX {
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
}
|
||
.numbox {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
background: #fff;
|
||
padding: 0 24rpx 32rpx;
|
||
|
||
.numInput {
|
||
width: 76rpx;
|
||
height: 96rpx;
|
||
line-height: 92rpx;
|
||
text-align: center;
|
||
background: #ffffff;
|
||
border-radius: 4rpx;
|
||
border: 2rpx solid #e6e6e6;
|
||
font-size: 44rpx;
|
||
font-family: SourceHanSansCN-Regular, SourceHanSansCN;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
|
||
.numInputon {
|
||
position: relative;
|
||
border: 2rpx solid #377cff;
|
||
|
||
&::after {
|
||
width: 56rpx;
|
||
height: 4rpx;
|
||
background: #377cff;
|
||
border-radius: 2rpx;
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 6rpx;
|
||
left: 12rpx;
|
||
}
|
||
}
|
||
|
||
.newnumInput {
|
||
width: 76rpx;
|
||
height: 96rpx;
|
||
line-height: 92rpx;
|
||
text-align: center;
|
||
border-radius: 4rpx;
|
||
font-size: 44rpx;
|
||
font-family: SourceHanSansCN-Regular, SourceHanSansCN;
|
||
font-weight: 400;
|
||
background: #e7faf1;
|
||
border: 2rpx dashed #0fd07e;
|
||
color: #0fd07e;
|
||
}
|
||
|
||
.newnumInputon {
|
||
position: relative;
|
||
border: 2rpx solid #0fd07e;
|
||
|
||
&::after {
|
||
width: 56rpx;
|
||
height: 4rpx;
|
||
background: #0fd07e;
|
||
border-radius: 2rpx;
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 6rpx;
|
||
left: 12rpx;
|
||
}
|
||
}
|
||
|
||
.newpl {
|
||
font-size: 24rpx;
|
||
font-family: SourceHanSansCN-Regular, SourceHanSansCN;
|
||
font-weight: 400;
|
||
color: #00bf6e;
|
||
line-height: 36rpx;
|
||
}
|
||
}
|
||
|
||
.plate-popup {
|
||
position: fixed;
|
||
z-index: 999;
|
||
background-color: #e3e2e7;
|
||
-webkit-box-shadow: 0 0 30upx rgba(0, 0, 0, 0.1);
|
||
box-shadow: 0 0 30upx rgba(0, 0, 0, 0.1);
|
||
bottom: 0;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
text-align: center;
|
||
$height: vww(35);
|
||
|
||
//关闭
|
||
.plate-close {
|
||
width: calc(100% - vww(10));
|
||
background: #ffffff;
|
||
line-height: vww(30);
|
||
font-size: vww(12);
|
||
text-align: right;
|
||
padding-right: vww(10);
|
||
color: #00a7ea;
|
||
}
|
||
|
||
//键盘主体内容-单行
|
||
.plate-popup-item {
|
||
margin: 0 auto;
|
||
overflow: hidden;
|
||
display: inline-block;
|
||
display: table;
|
||
|
||
&:last-child {
|
||
margin-bottom: 2vw;
|
||
}
|
||
}
|
||
|
||
//键盘主体内容-单个
|
||
.plate-popup-item-list {
|
||
float: left;
|
||
font-size: vww(14);
|
||
width: 8vw;
|
||
margin: 0 1vw;
|
||
margin-top: 2vw;
|
||
height: $height;
|
||
line-height: $height;
|
||
background: #ffffff;
|
||
border-radius: 5px;
|
||
color: #4a4a4a;
|
||
overflow: hidden;
|
||
|
||
//删除键
|
||
&.del {
|
||
width: 14vw;
|
||
}
|
||
&.del2 {
|
||
width: 12vw;
|
||
}
|
||
&.delImg {
|
||
width: 14vw;
|
||
display: flex;
|
||
//删除键图片
|
||
image {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
margin: 0 auto;
|
||
display: block;
|
||
vertical-align: middle;
|
||
align-self: center;
|
||
}
|
||
}
|
||
|
||
//特殊字符（港澳学）
|
||
&.special {
|
||
background: #f0f2f4;
|
||
}
|
||
}
|
||
.plate-popup-item-disabled {
|
||
background: #f0f2f4;
|
||
}
|
||
}
|
||
</style>
|