chenglijuan
135 lines
3.4 KiB
JavaScript
135 lines
3.4 KiB
JavaScript
// plate-input.js
|
|
// 车牌号输入组件：先选省份简称 → 再选城市代码 → 最后键盘输入号码
|
|
Component({
|
|
properties: {
|
|
value: { type: String, value: '' }
|
|
},
|
|
|
|
data: {
|
|
plateChars: [],
|
|
numValue: '',
|
|
inputFocus: false,
|
|
showProvince: false,
|
|
showCity: false,
|
|
hasValue: false,
|
|
provinces: [
|
|
'京', '津', '沪', '渝', '冀', '豫', '云', '辽', '黑', '湘',
|
|
'皖', '鲁', '新', '苏', '浙', '赣', '鄂', '桂', '甘', '晋',
|
|
'蒙', '陕', '吉', '闽', '贵', '粤', '川', '青', '藏', '琼', '宁'
|
|
],
|
|
cityLetters: [
|
|
'A', 'B', 'C', 'D', 'E', 'F', 'G',
|
|
'H', 'J', 'K', 'L', 'M', 'N', 'P',
|
|
'Q', 'R', 'S', 'T', 'U', 'V', 'W',
|
|
'X', 'Y', 'Z'
|
|
],
|
|
numSlots: [0, 1, 2, 3, 4, 5]
|
|
},
|
|
|
|
observers: {
|
|
'value': function (val) {
|
|
if (val && val !== this._lastEmitted) {
|
|
this._parseValue(val)
|
|
}
|
|
}
|
|
},
|
|
|
|
lifetimes: {
|
|
attached() {
|
|
if (this.data.value) {
|
|
this._parseValue(this.data.value)
|
|
}
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
_parseValue(val) {
|
|
const chars = val.split('')
|
|
const numValue = chars.slice(2).join('')
|
|
this.setData({
|
|
plateChars: chars,
|
|
numValue: numValue,
|
|
hasValue: chars.length > 0
|
|
})
|
|
},
|
|
|
|
_emit(chars) {
|
|
const value = chars.filter(Boolean).join('')
|
|
this._lastEmitted = value
|
|
this.triggerEvent('change', { value })
|
|
},
|
|
|
|
// 点击省份格
|
|
onProvinceTap() {
|
|
this.setData({ showProvince: true, showCity: false, inputFocus: false })
|
|
},
|
|
|
|
// 选择省份
|
|
selectProvince(e) {
|
|
const code = e.currentTarget.dataset.value
|
|
const chars = [code, this.data.plateChars[1]].filter(Boolean)
|
|
this.setData({ plateChars: chars, showProvince: false, showCity: true, hasValue: true })
|
|
this._emit(chars)
|
|
},
|
|
|
|
// 点击城市格
|
|
onCityTap() {
|
|
if (!this.data.plateChars[0]) {
|
|
this.setData({ showProvince: true })
|
|
return
|
|
}
|
|
this.setData({ showCity: true, showProvince: false, inputFocus: false })
|
|
},
|
|
|
|
// 选择城市代码
|
|
selectCity(e) {
|
|
const letter = e.currentTarget.dataset.value
|
|
const numPart = this.data.plateChars.slice(2).join('')
|
|
const chars = [this.data.plateChars[0], letter].concat(numPart.split(''))
|
|
this.setData({
|
|
plateChars: chars,
|
|
showCity: false,
|
|
numValue: numPart,
|
|
inputFocus: true,
|
|
hasValue: true
|
|
})
|
|
this._emit(chars)
|
|
},
|
|
|
|
// 点击号码格 → 弹出键盘
|
|
onNumTap() {
|
|
if (!this.data.plateChars[0] || !this.data.plateChars[1]) {
|
|
this.setData({ showProvince: true })
|
|
return
|
|
}
|
|
this.setData({ inputFocus: true, showProvince: false, showCity: false })
|
|
},
|
|
|
|
// 键盘输入号码
|
|
onNumInput(e) {
|
|
const raw = e.detail.value.toUpperCase().replace(/[^A-Z0-9]/g, '').slice(0, 6)
|
|
const chars = [this.data.plateChars[0], this.data.plateChars[1]].concat(raw.split(''))
|
|
this.setData({ plateChars: chars, numValue: raw, hasValue: true })
|
|
this._emit(chars)
|
|
},
|
|
|
|
// 关闭弹窗
|
|
hidePicker() {
|
|
this.setData({ showProvince: false, showCity: false })
|
|
},
|
|
|
|
noop() {},
|
|
|
|
// 清除车牌号
|
|
clearPlate() {
|
|
this.setData({
|
|
plateChars: [],
|
|
numValue: '',
|
|
inputFocus: false,
|
|
hasValue: false
|
|
})
|
|
this._emit([])
|
|
}
|
|
}
|
|
})
|