点击查看代码
import { isEmpty, validate } from '../../utils/util';
const icon = 'none', duration = 3000
const component = {
properties: {
vehicleNo: { type: String, value: undefined } // 车牌号
},
data: {
provinces: [ // 省份键盘
['京', '沪', '粤', '津', '冀', '晋', '蒙', '辽', '吉', '黑'],
['苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘'],
['桂', '琼', '渝', '川', '贵', '云', '藏'],
['陕', '甘', '青', '宁', '新']
],
numbers: [ // 数字键盘
['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']
],
letters: [ // 字母键盘
['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K'],
['L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V'],
['W', 'X', 'Y', 'Z', '挂', '港', '澳', '学']
],
specialChar: ['挂', '港', '澳', '学'], // 特殊字符
carNum: Array(8).fill({ value: undefined, focus: false }),
focusIndex: 0, // 输入库焦点索引
showNewPower: false, // 是否新能源车牌
KeyboardState: false // 是否弹出虚拟键盘
},
attached() {
const v = this
const vehcles = v.data.vehicleNo.split('')
const carNum = v.data.carNum
vehcles.forEach((m, i) => { carNum[i].value = m })
v.setData({ carNum })
},
/**
* 组件的方法列表
*/
methods: {
// 车牌输入框点击展开车牌键盘
openKeyboard(e) {
const v = this
const focusIndex = e.target.dataset.index
let carNum = v.data.carNum
let showNewPower = v.data.showNewPower
// 添加新能源尾数
if (focusIndex === 7) {
if (isEmpty(v.data.carNum[6].value)) return wx.showToast({ title: '为新能源车牌时，前几位车牌号不能为空', icon, duration })
if (v.data.specialChar.includes(v.data.carNum[6].value)) return wx.showToast({ title: `为新能源车牌时，第6位车牌号不能为'${v.data.carNum[6].value}'`, icon, duration })
showNewPower = true
v.setData({ showNewPower, KeyboardState: true })
}
// 当前点击获得焦点，其余失去焦点
carNum[focusIndex].focus = true
carNum = carNum.map((item, index) => {
return { ...item, focus: index === focusIndex ? item.focus : false }
})
// 点击索引不为新能源时
if (focusIndex !== 7) showNewPower = false
v.setData({ KeyboardState: true, focusIndex, carNum, showNewPower })
},
// 键盘选中点击设置
bindChoose(e) {
const v = this
const val = e.target.dataset.val
const carNum = v.data.carNum
let focusIndex = v.data.focusIndex
if (focusIndex !== 6 && v.data.specialChar.includes(val)) return
// 当前选中车牌无值时更新为输入值
if (isEmpty(carNum[focusIndex].value)) {
carNum[focusIndex].value = val
carNum[focusIndex].focus = false
const validate = v.data.showNewPower ? 7 : 6
// 上一位车牌取消聚焦
if (focusIndex < validate) focusIndex++
carNum[focusIndex].focus = true
v.setData({ carNum, focusIndex })
}
},
// 删除
bindDelChoose() {
const v = this
const carNum = v.data.carNum
let focusIndex = v.data.focusIndex
let showNewPower = v.data.showNewPower
// 如果删除第6位后继续删除 则focusIndex后退一位并删除第5位车牌 依此类推
// 当删除至省份位车牌时，界面会控制取消删除按钮
if (isEmpty(carNum[focusIndex].value)) {
// 如果当前索引是新能源车牌
if (focusIndex == 7) showNewPower = false
focusIndex--
carNum[focusIndex].value = undefined
carNum[focusIndex].focus = true
// 后一位车牌取消聚焦
carNum[focusIndex + 1].focus = false
}
else {
carNum[v.data.focusIndex].value = undefined
carNum[v.data.focusIndex].focus = true
}
v.setData({ carNum, focusIndex, showNewPower })
},
// 关闭虚拟键盘
confirmKeyboard() {
const v = this
const vheicleNo = v.data.carNum.map(m => m.value).join('');
if (!validate.vehicle(vheicleNo)) return wx.showToast({ title: '请输入正确的车牌', icon, duration })
v.setData({ KeyboardState: false })
v.triggerEvent('confirm', { vheicleNo })
}
}
}
Component(component);
经验首页