1.我的车牌页面 录入车牌弹窗封装

components/CarBindDialog.vue

@@ -0,0 +1,254 @@
+<template>
+  <view v-if="visible" class="pay-dialog-mask" @click.self="closeDialog">
+    <view class="pay-dialog-box">
+      <view class="pay-dialog-title-row">
+        <view class="pay-dialog-title">请输入车牌号</view>
+        <image src="/static/ic_close_01.png" class="pay-dialog-close" @click="closeDialog" />
+      </view>
+
+      <view class="pay-dialog-input-row">
+        <!-- 省份简称，readonly -->
+        <input
+          class="pay-dialog-input province-input"
+          :value="carNumArr[0]"
+          readonly
+          @click="showProvinceKeyboard = true"
+        />
+
+        <!-- 后6位 -->
+        <input
+          v-for="(item, idx) in 6"
+          :key="idx"
+          maxlength="1"
+          class="pay-dialog-input"
+          v-model="carNumArr[idx + 1]"
+          @input="onCarInput($event, idx)"
+        />
+      </view>
+
+      <button class="pay-dialog-btn" @click="saveCar">保存</button>
+
+      <!-- 省份自定义键盘 -->
+      <view v-if="showProvinceKeyboard" class="province-keyboard-mask" @click.self="showProvinceKeyboard = false">
+        <view class="province-keyboard-box">
+          <view class="province-keyboard-title">选择省份简称</view>
+          <view class="province-keyboard-grid">
+            <view
+              v-for="(item, idx) in provinceList"
+              :key="idx"
+              class="province-keyboard-btn"
+              @click="selectProvince(item)"
+            >
+              {{ item }}
+            </view>
+          </view>
+          <button class="province-keyboard-cancel" @click="showProvinceKeyboard = false">取消</button>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "CarBindDialog",
+  props: {
+    visible: Boolean,
+    carNumber: {
+      type: Array,
+      default() {
+        return ["渝", "", "", "", "", "", ""];
+      },
+    },
+  },
+  data() {
+    return {
+      carNumArr: [...this.carNumber],
+      showProvinceKeyboard: false,
+      provinceList: [
+        "京",
+        "津",
+        "沪",
+        "渝",
+        "冀",
+        "豫",
+        "云",
+        "辽",
+        "黑",
+        "湘",
+        "皖",
+        "鲁",
+        "新",
+        "苏",
+        "浙",
+        "赣",
+        "鄂",
+        "桂",
+        "甘",
+        "晋",
+        "蒙",
+        "陕",
+        "吉",
+        "闽",
+        "贵",
+        "粤",
+        "青",
+        "藏",
+        "川",
+        "宁",
+        "琼",
+      ],
+    };
+  },
+  watch: {
+    carNumber(newVal) {
+      this.carNumArr = [...newVal];
+    },
+  },
+  methods: {
+    onCarInput(e, idx) {
+      let val = e.detail.value.toUpperCase().replace(/[^A-Z0-9]/g, "");
+      this.$set(this.carNumArr, idx + 1, val);
+    },
+    selectProvince(item) {
+      this.$set(this.carNumArr, 0, item);
+      this.showProvinceKeyboard = false;
+    },
+    saveCar() {
+      this.$emit("save", this.carNumArr);
+      this.$emit("update:visible", false);
+    },
+    closeDialog() {
+      this.$emit("update:visible", false);
+    },
+  },
+};
+</script>
+
+<style>
+.pay-dialog-mask {
+  position: fixed;
+  z-index: 9999;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.5);
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.pay-dialog-box {
+  width: 90vw;
+  max-width: 400px;
+  background-color: #fff;
+  border-radius: 20rpx;
+  padding: 30rpx;
+  box-sizing: border-box;
+}
+
+.pay-dialog-title-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20rpx;
+}
+
+.pay-dialog-title {
+  font-size: 36rpx;
+  font-weight: bold;
+}
+
+.pay-dialog-close {
+  width: 40rpx;
+  height: 40rpx;
+}
+
+.pay-dialog-input-row {
+  display: flex;
+  gap: 10rpx;
+  margin-bottom: 30rpx;
+}
+
+.pay-dialog-input {
+  width: 40rpx;
+  height: 60rpx;
+  text-align: center;
+  font-size: 36rpx;
+  border: 1rpx solid #ccc;
+  border-radius: 8rpx;
+}
+
+.province-input {
+  width: 60rpx;
+  background-color: #eee;
+  cursor: pointer;
+}
+
+.pay-dialog-btn {
+  width: 100%;
+  height: 70rpx;
+  background-color: #007aff;
+  color: white;
+  border-radius: 35rpx;
+  font-size: 32rpx;
+}
+
+/* 自定义省份键盘样式 */
+.province-keyboard-mask {
+  position: fixed;
+  z-index: 10000;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.4);
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.province-keyboard-box {
+  width: 90vw;
+  max-width: 400px;
+  background-color: #fff;
+  border-radius: 20rpx;
+  padding: 20rpx;
+}
+
+.province-keyboard-title {
+  font-size: 32rpx;
+  font-weight: 600;
+  margin-bottom: 20rpx;
+}
+
+.province-keyboard-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10rpx;
+}
+
+.province-keyboard-btn {
+  flex: 1 0 18%;
+  background-color: #f0f0f0;
+  text-align: center;
+  padding: 10rpx 0;
+  border-radius: 10rpx;
+  font-size: 28rpx;
+  user-select: none;
+  cursor: pointer;
+}
+
+.province-keyboard-cancel {
+  margin-top: 20rpx;
+  width: 100%;
+  height: 60rpx;
+  background-color: #aaa;
+  color: white;
+  font-size: 28rpx;
+  border-radius: 15rpx;
+}
+</style>