访客信息增加车牌号

2026-05-06 10:12:36 +08:00
parent 85dca5c7a1
commit 57243dfdf3
11 changed files with 387 additions and 15 deletions
@@ -0,0 +1,134 @@
+// 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([])
+    }
+  }
+})