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
<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> |