You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
427 lines
11 KiB
427 lines
11 KiB
1 year ago
|
<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>
|