SmartParks_uniapp/components/CarBindDialog.vue

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