template-parking-h5/src/components/plate-number/plateNumber.vue

<template>
  <div class="plate-keyboard">
    <!-- 选择车牌号 首个汉字键盘 弹出层 -->
    <van-popup v-model="chinese_popup" position="bottom" class="uni-popup plate_number" :close-on-click-overlay="false" :maskClick="false">
      <div class="plate_number_wrap">
        <!-- 提示区域 -->
        <div class="event-box">
          <div class="close" @click.stop="close_keyboard">取消</div>
          <div>车牌键盘</div>
          <div class="sure" @click.stop="close_keyboard">确认</div>
        </div>
        <div class="plate_chinese_box">
          <button size="small" :class="[item.id === 99 && 'del']" v-for="(item, index) in ChineseList" :key="item.id" :disabled="disabledKeyboard(index)" @click="checkChinese(index)">
            <span v-if="item.id !== 99">{{ item.name }}</span>
            <img v-else :src="require(`../../static/images/close.png`)" alt="" />
          </button>
        </div>
      </div>
    </van-popup>
    <!-- 英文 数字 键盘 -->
    <van-popup v-model="allBoard_popup" position="bottom" class="uni-popup allBoard" :maskClick="false" :close-on-click-overlay="false">
      <div class="allBoard_wrap">
        <!-- 提示区域 -->
        <div class="event-box">
          <div class="close" @click.stop="close_keyboard">取消</div>
          <div>全拼键盘</div>
          <div class="sure" @click.stop="close_keyboard">确认</div>
        </div>
        <div class="close-box">
          <div class="plate_number_box">
            <!-- :disabled="item.id === 45 || item.id === 46 ? true : false" -->
            <button :disabled="item.id === 45 || item.id === 46 ? true : false" size="small" v-for="(item, index) in English_Number" :key="item.id" :class="[item.id === 99 && 'del', item.id === 66 && 'mini']"  @click="checkEnglish_num(index)">
              <span v-if="item.id !== 99">{{ item.name }}</span>
              <img v-else :src="require(`../../static/images/back.png`)" alt="" />
            </button>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import uniPop from '../uni-popup/uni-popup.vue';

export default {
  components: {
    uniPop,
  },
  props: {
    carType: {
      type: Number,
      default: 0,
    },
    ind: {
      type: Number,
      default: 0,
    },
    active: {
      type: Number,
      default: -1,
    },
    numArr: {
      type: Array,
      default() {
        return ['', '', '', '', '', '', ''];
      },
    },
    disBtn:{
      type: Array,
      default() {
        return [];
      },
    },
    noDisBtn:{
      type: Array,
      default() {
        return [];
      },
    }
  },
  data() {
    return {
      chinese_popup: false,
      allBoard_popup: false,
      ChineseList: [
        {
          name: '京',
          id: 1,
        },
        {
          name: '沪',
          id: 2,
        },
        {
          name: '粤',
          id: 3,
        },
        {
          name: '津',
          id: 4,
        },
        {
          name: '冀',
          id: 5,
        },
        {
          name: '晋',
          id: 6,
        },
        {
          name: '蒙',
          id: 7,
        },
        {
          name: '辽',
          id: 8,
        },
        {
          name: '吉',
          id: 9,
        },
        {
          name: '黑',
          id: 10,
        },
        {
          name: '苏',
          id: 11,
        },
        {
          name: '浙',
          id: 12,
        },
        {
          name: '皖',
          id: 13,
        },
        {
          name: '闽',
          id: 14,
        },
        {
          name: '赣',
          id: 15,
        },
        {
          name: '鲁',
          id: 16,
        },
        {
          name: '豫',
          id: 17,
        },
        {
          name: '鄂',
          id: 18,
        },
        {
          name: '湘',
          id: 19,
        },
        {
          name: '桂',
          id: 20,
        },
        {
          name: '琼',
          id: 21,
        },
        {
          name: '渝',
          id: 22,
        },
        {
          name: '川',
          id: 23,
        },
        {
          name: '贵',
          id: 24,
        },
        {
          name: '云',
          id: 25,
        },
        {
          name: '藏',
          id: 26,
        },
        {
          name: '陕',
          id: 27,
        },
        {
          name: '甘',
          id: 28,
        },
        {
          name: '青',
          id: 29,
        },
        {
          name: '宁',
          id: 30,
        },
        /* {
          name: 'ABC',
          id: 66,
        }, */
        {
          name: '新',
          id: 31,
        },
        {
          name: '使',
          id: 32,
        },
        {
          name: '领',
          id: 33,
        },
        {
          name: '警',
          id: 34,
        },
        {
          name: '学',
          id: 35,
        },
        {
          name: '港',
          id: 36,
        },
        {
          name: '澳',
          id: 37,
        },
        {
          name: '台',
          id: 38,
        },
        {
          name: '临',
          id: 39,
        },
        {
          name: '←',
          id: 99,
        },
      ],
      English_Number: [
        {
          name: '1',
          id: 28,
        },
        {
          name: '2',
          id: 29,
        },
        {
          name: '3',
          id: 30,
        },
        {
          name: '4',
          id: 31,
        },
        {
          name: '5',
          id: 32,
        },
        {
          name: '6',
          id: 33,
        },
        {
          name: '7',
          id: 34,
        },
        {
          name: '8',
          id: 35,
        },
        {
          name: '9',
          id: 36,
        },
        {
          name: '0',
          id: 37,
        },
        {
          name: 'Q',
          id: 38,
        },
        {
          name: 'W',
          id: 39,
        },
        {
          name: 'E',
          id: 40,
        },
        {
          name: 'R',
          id: 41,
        },
        {
          name: 'T',
          id: 42,
        },
        {
          name: 'Y',
          id: 43,
        },
        {
          name: 'U',
          id: 44,
        },
        {
          name: 'I',
          id: 45,
        },
        {
          name: 'O',
          id: 46,
        },
        {
          name: 'P',
          id: 47,
        },
        {
          name: 'A',
          id: 48,
        },
        {
          name: 'S',
          id: 49,
        },
        {
          name: 'D',
          id: 50,
        },
        {
          name: 'F',
          id: 51,
        },
        {
          name: 'G',
          id: 52,
        },
        {
          name: 'H',
          id: 53,
        },
        {
          name: 'J',
          id: 54,
        },
        {
          name: 'K',
          id: 55,
        },
        {
          name: 'L',
          id: 56,
        },
        {
          name: '地区',
          id: 66,
        },
        {
          name: 'Z',
          id: 57,
        },
        {
          name: 'X',
          id: 58,
        },
        {
          name: 'C',
          id: 59,
        },
        {
          name: 'V',
          id: 60,
        },
        {
          name: 'B',
          id: 61,
        },
        {
          name: 'N',
          id: 62,
        },
        {
          name: 'M',
          id: 63,
        },
        {
          name: '←',
          id: 99,
        },
      ],
      carnoIndex: 0,
      activeIndex: -1,
      carnoArr: ['', '', '', '', '', '', ''],
    };
  },
  computed: {
    init() {
      console.log(406, this.ind, this.active, this.numArr);
      console.log(406, this.carnoIndex, this.activeIndex, this.carnoArr);
      return 99900;
    },
    // ChineseList() {
    //   if (this.carType === 2) {
    //     return this.chinese.filter(item => item.id >= 32 && item.id <= 99);
    //   }
    //   return this.chinese.filter(item => item.id <= 32 || item.id === 66 || item.id === 99);
    // }
  },
  watch: {
    ind(val) {
      this.carnoIndex = val;
    },
    active(val) {
      this.activeIndex = val;
    },
    numArr(val) {
      console.log(432, val);
      this.carnoArr = val;
    },
  },
  methods: {
    disabledKeyboard(index) {
      let dis = this.x !== 2 && index >= 32 && index <= 37;
      if(this?.disBtn?.length && this.disBtn.indexOf(index) > -1) {
        dis = true;
      }
      // 
      if(this?.noDisBtn?.length && this.noDisBtn.indexOf(index) > -1) {
        dis = false;
      }
      return dis;
    },
    // 选择车牌号前面的汉字
    checkChinese(index) {
      // 点击删除键
      if (this.ChineseList[index].id == 99) {
        this.carnoArr[this.carnoIndex] = '';
        if (this.carnoIndex === 7 && this.carnoArr[this.carnoIndex] === '') {
          this.carnoArr.pop();
        }
        this.carnoIndex--;
        this.activeIndex = this.carnoIndex;
        if (this.carnoIndex === -1) {
          return this.close_keyboard();
        }
      } else if (this.ChineseList[index].id == 66) {
        //切换英文
        this.closeKeyboardCN();
        this.openKeyboardEN();
      } else {
        // 把选中的字赋值
        this.$set(this.carnoArr, this.carnoIndex, this.ChineseList[index].name);
        if (this.carnoIndex === this.carnoArr.length - 1) {
          this.close_keyboard();
        } else {
          this.carnoIndex++;
          this.activeIndex = this.carnoIndex;
          this.closeKeyboardCN();
          this.openKeyboardEN();
        }
      }
      this.$emit('carnoArr', {
        numArr: this.carnoArr,
        active: this.activeIndex,
        ind: this.carnoIndex,
      });
    },
    // 选择车牌号后面的数字和字母
    checkEnglish_num(index) {
      // 点击删除键
      if (this.English_Number[index].id == 99) {
        this.carnoArr[this.carnoIndex] = '';
        if (this.search_price == true) {
          this.search_price = false;
          this.vehicleMgt_content_index = index;
        }
        if (this.carnoIndex === 7 && this.carnoArr[this.carnoIndex] === '') {
          this.carnoArr.pop();
        }
        this.carnoIndex--;
        this.activeIndex = this.carnoIndex;
        if (this.carnoIndex === -1) {
          this.close_keyboard();
        }
      } else if (this.English_Number[index].id == 66) {
        //切换中文
        this.closeKeyboardEN();
        this.openKeyboardCN();
      } else {
        // 把选中的字赋值
        this.$set(this.carnoArr, this.carnoIndex, this.English_Number[index].name);
        if (this.carnoIndex === this.carnoArr.length - 1) {
          this.close_keyboard();
        } else {
          this.carnoIndex++;
          this.activeIndex = this.carnoIndex;
          this.closeKeyboardCN();
          this.openKeyboardEN();
        }
      }
      this.$emit('carnoArr', {
        numArr: this.carnoArr,
        active: this.activeIndex,
        ind: this.carnoIndex,
      });
    },
    openKeyboardCN() {
      this.closeKeyboardEN();
      this.chinese_popup = true;
      this.allBoard_popup = false;
    },
    closeKeyboardCN() {
      this.chinese_popup = false;
    },
    openKeyboardEN() {
      this.openKeyboardCN();
      this.allBoard_popup = true;
      this.chinese_popup = false;
    },
    closeKeyboardEN() {
      this.allBoard_popup = false;
    },
    // 关闭虚拟键盘
    close_keyboard() {
      this.activeIndex = null;
      this.closeKeyboardCN();
      this.closeKeyboardEN();
    },
  },
};
</script>

<style lang="less">
.class-van-button-small {
  min-width: 0;
  border-radius: 10px;
  margin: 6px 3px;
  box-shadow: 0px 2px 0px #9da0a3;
}
 .van-overlay {
   background-color: rgba(0,0,0,0.1);
 }
.event-box {
  display: flex;
  justify-content: space-around;
  background: #ffffff;
  & > * {
    flex: 1;
    text-align: center;
    padding: 26px 0;
    color: #333;
    font-size: 34px;
  }
  .close {
    text-align: left;
    padding-left: 44px;
  }
  .sure {
    text-align: right;
    padding-right: 44px;
  }
}
.plate_number {
  width: 100%;
  display: flex;
  flex-direction: column;

  .plate_number_wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #D1D5DB;
    padding: 0;
    box-sizing: border-box;

    .close-box {
      width: 100%;
      font-size: 24px;
      color: #3e67ff;
      text-align: right;
      margin-right: 1.25rem;

      div {
        padding: 10px;
      }
    }

    .plate_chinese_box {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      background-color: #d1d5db;
      box-sizing: border-box;
      padding-top: 18px;
      margin-bottom: calc(13px + 59px);
      // padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS<11.2 */
      // padding-bottom: env(safe-area-inset-bottom); /* 兼容iOS>= 11.2 */

      button {
        width: 9%;
        height: 85px;
        line-height: 85px;
        text-align: center;
        padding: 0;
        color: #000;
        font-weight: 400;
        font-size: 36px;
        margin: 6px;
        background: #ffffff;
        .class-van-button-small;

        &.del {
          background-color: #adb3bc;
          img {
            width: 43px;
            height: 30px;
          }
        }
      }
      button[disabled='disabled'] {
        color: #9da0a3;
      }
    }
  }
}

.allBoard {
  width: 100%;
  display: flex;
  flex-direction: column;
  // margin-bottom: 19px;

  .allBoard_wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    // background: #eaf1f9;
    background: #D1D5DB;
    // padding: 0 0 10px;
    box-sizing: border-box;
    
    // padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS<11.2 */
    // padding-bottom: env(safe-area-inset-bottom); /* 兼容iOS>= 11.2 */
  }

  .close-box {
    padding-top: 18px;
    box-sizing: border-box;
    font-size: 24px;
    text-align: right;
    background: #d1d5db;
    padding-bottom: calc(13px + 59px);
    // padding-bottom: 24px;
  }

  .plate_number_box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    button {
      width: 9%;
      height: 85px;
      line-height: 85px;
      text-align: center;
      padding: 0;
      font-size: 36px;
      background: #ffffff;
      .class-van-button-small;

      &.del {
        img {
          width: 33px;
          height: 22px;
        }
      }
      &.mini {
        font-size: 28px;
      }
    }
    button[disabled='disabled'] {
      color: #9da0a3;
    }
  }
}
</style>