停车缴费demo 代码

<template>
  <div class="keyboards">
    <div class="keyboards_title">
      输入车牌<span>(绿色背景为新能源车牌)</span>
    </div>
    <div>
      <ul class="input_box">
        <span class="point">•</span>
        <li
          :class="[nowIndex == index ? 'now' : '']"
          v-for="(item, index) in 7"
          :key="index"
          @click="showKeyboardFun(index)"
        >
          {{ carNumJson[index].text }}
        </li>
        <!-- 新能源 -->
        <li :class="[nowIndex == 7 ? 'now' : '']" @click="showKeyboardFun(7)">
          <template v-if="carNumJson[7].text != ''">{{
            carNumJson[7].text
          }}</template>
          <template v-if="carNumJson[7].text == '' && nowIndex != 7"
            ><div class="xin">新能源</div></template
          >
        </li>
      </ul>
    </div>
    <div class="keySure" @click="submitNumber">确定</div>
    <!-- 键盘-中英文 -->
    <van-popup
      v-model="showKeyboards"
      position="bottom"
      :overlay="false"
      overlay-class="displayNone"
    >
      <div class="keyboards_keys">
        <div class="finish_key"><span @click="hidekeyboards">完成</span></div>
        <div class="finish_line"></div>
        <div class="key_box">
          <!-- 中文 -->
          <div v-if="checkLangages" class="chinese">
            <ul v-for="(item, index) in chineseList" :key="index">
              <li
                v-for="val in item"
                :key="val.id"
                :class="{ del: val.id === 99 }"
                @click="chooseChinese(val)"
              >
                {{ val.name }}
              </li>
            </ul>
          </div>
          <!-- 数字英文 -->
          <div v-else class="english">
            <ul v-for="(item, index) in englishList" :key="index">
              <li
                v-for="val in item"
                :key="val.id"
                :class="{
                  del: val.id === 99,
                  disableClass: val.disable == true,
                }"
                @click="chooseEnglish(val)"
              >
                {{ val.name }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
const wx = require("weixin-js-sdk");
import { getQueryString, isWeiXin, isZhiFuBao } from "@/config/utils";

import { Toast } from "vant";

export default {
  data() {
    return {
      nowIndex: null,
      carNumJson: [
        { text: "粤" },
        { text: "" },
        { text: "" },
        { text: "" },
        { text: "" },
        { text: "" },
        { text: "" },
        { text: "" },
      ],

      showKeyboards: false,
      checkLangages: true,
      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: "新", id: 31 },
          { name: "使", id: 32 },
          { name: "领", id: 33 },
          { name: "警", id: 34 },
          { name: "学", id: 35 },

          { name: "删除", id: 99 },
        ],
      ],
      englishList: [
        [
          { name: "1", id: 36, disable: false },
          { name: "2", id: 37, disable: false },
          { name: "3", id: 38, disable: false },
          { name: "4", id: 39, disable: false },
          { name: "5", id: 40, disable: false },
          { name: "6", id: 41, disable: false },
          { name: "7", id: 42, disable: false },
          { name: "8", id: 43, disable: false },
          { name: "9", id: 44, disable: false },
          { name: "0", id: 45, disable: false },
        ],
        [
          { name: "Q", id: 46, disable: false },
          { name: "W", id: 47, disable: false },
          { name: "E", id: 47, disable: false },
          { name: "R", id: 49, disable: false },
          { name: "T", id: 50, disable: false },
          { name: "Y", id: 51, disable: false },
          { name: "U", id: 52, disable: false },
          { name: "O", id: 53, disable: false },
          { name: "P", id: 54, disable: false },
          { name: "港", id: 55, disable: false },
        ],
        [
          { name: "A", id: 56, disable: false },
          { name: "S", id: 57, disable: false },
          { name: "D", id: 58, disable: false },
          { name: "F", id: 59, disable: false },
          { name: "G", id: 60, disable: false },
          { name: "H", id: 61, disable: false },
          { name: "J", id: 62, disable: false },
          { name: "K", id: 63, disable: false },
          { name: "L", id: 64, disable: false },
          { name: "澳", id: 65, disable: false },
        ],
        [
          { name: "Z", id: 66, disable: false },
          { name: "X", id: 67, disable: false },
          { name: "C", id: 68, disable: false },
          { name: "V", id: 69, disable: false },
          { name: "B", id: 70, disable: false },
          { name: "N", id: 71, disable: false },
          { name: "M", id: 72, disable: false },
          { name: "学", id: 73, disable: false },
          { name: "领", id: 74, disable: false },
          { name: "删除", id: 99, disable: false },
        ],
      ],
      carNUmber: "",
    };
  },
  methods: {
    // 点击第一个框【地区】
    showKeyboardFun(index) {
      console.log("index", index);
      this.nowIndex = index;
      this.showKeyboards = true;
      if (index == 0) {
        this.checkLangages = true;
      } else {
        this.checkLangages = false;
      }
      this.initDiableKeyboardFun();
    },

    // 选择地区中文
    chooseChinese(val) {
      if (val.id === 99) {
        this.carNumJson[0].text = "";
      } else {
        // 把选中的字赋值给第一个格，并且切换键盘
        this.carNumJson[0].text = val.name;
        this.checkLangages = false;
        this.nowIndex = 1;
        this.initDiableKeyboardFun();
      }
    },

    // 处理英文键盘不能点击事件
    initDiableKeyboardFun: function () {
      let disAbleId = [];
      if (this.nowIndex == 1) {
        disAbleId = [36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 55, 65, 73, 74];
      } else if (
        (this.nowIndex > 1 && this.nowIndex < 6) ||
        this.nowIndex == 7
      ) {
        disAbleId = [53, 55, 65, 73, 74];
      } else if (this.nowIndex == 6) {
        disAbleId = [53];
      }

      for (var i = 0; i < this.englishList.length; i++) {
        let item = this.englishList[i];
        for (var j = 0; j < item.length; j++) {
          if (disAbleId.includes(item[j].id)) {
            item[j].disable = true;
          } else {
            item[j].disable = false;
          }
        }
      }
    },

    // 选择车牌后面的数字和字母
    chooseEnglish(val) {
      if (!val.disable) {
        if (val.id === 99) {
          this.carNumJson[this.nowIndex].text = "";
          this.nowIndex = this.nowIndex - 1;

          if (this.nowIndex == 0) {
            this.checkLangages = true;
          }
        } else {
          //把选中的值push到numArr里面
          this.carNumJson[this.nowIndex].text = val.name;
          if (this.nowIndex < 7) {
            this.nowIndex = this.nowIndex + 1;
          }
        }
        this.initDiableKeyboardFun();
      }
    },
    // 完成,隐藏键盘
    hidekeyboards() {
      this.showKeyboards = false;
    },
    // 提交车牌号
    submitNumber() {
      const carNumberReg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-HJ-NP-Z]-[A-HJ-NP-Z0-9]{4,5}[A-HJ-NP-Z0-9挂学警港澳]$/;
      let carNUmber = "";
      this.carNumJson.forEach((item, index) => {
        if (index != 2) {
          carNUmber = carNUmber + item.text;
        } else {
          carNUmber = carNUmber + "-" + item.text;
        }
      });
      this.carNUmber = carNUmber;

      console.log(this.carNUmber, "确定按钮");
      if (carNumberReg.test(this.carNUmber)) {
        // this.show_chinese = false;
        this.showKeyboards = false;
        this.$emit("sendCarNumber", this.carNUmber);
        // 清空上一次输入的车牌
        this.first = "";
        this.numArr = [];
      } else {
        Toast("请输入正确的车牌号");
      }
      this.first = "";
      this.numArr = [];
      this.checkLangages = true;
    },
  },
};
</script>
<style lang="less" scoped>
.keyboards {
  width: 100%;
  box-sizing: border-box;

  .keyboards_title {
    margin: 0.3rem 0.5rem;
    font-size: 0.35rem;
    span {
      margin-left: 5px;
      font-size: 0.3rem;
      color: #45b94d;
    }
  }

  .input_box {
    display: flex;
    justify-content: center;
    width: 6.5rem;
    height: 0.9rem;
    margin: 0 auto 0.5rem;
    box-sizing: border-box;
    position: relative;
    .point {
      width: 0.3rem;
      position: absolute;
      left: 1.55rem;
      top: 0;
      font-size: 0.5rem;
      line-height: 0.9rem;
      color: #ced0d2;
      text-align: center;
    }
    li {
      flex: 1;
      border: 1px solid #ced0d2;
      border-radius: 4px;
      margin: 2px;
      text-align: center;
      line-height: 0.8rem;
      font-size: 0.45rem;
      .xin {
        font-size: 0.2rem;
      }
    }
    li.now {
      border: 1px solid orange;
    }
    li:nth-child(4) {
      margin-left: 0.3rem;
    }

    li:last-child {
      background-color: #9eefa4;
    }

    // 动态样式
    .li_focus {
      border: 1px solid orange;
    }
  }

  .keySure {
    margin: auto;
    font-size: 0.4rem;
    width: 6.5rem;
    height: 0.9rem;
    text-align: center;
    line-height: 0.9rem;
    color: #fff;
    border-radius: 0.45rem;
    background-color: #333333;
  }

  .keyboards_keys {
    width: 7.5rem;
    margin: 0.2rem auto 0rem;
    // padding-bottom: .5rem;
    height: 5.7rem;
    background-color: rgb(211, 214, 221);

    .finish_key {
      width: 7.5rem;
      font-size: 0.3rem;
      // font-weight: 700;
      height: 0.6rem;
      line-height: 0.6rem;
      color: rgb(104, 105, 105);

      span {
        position: absolute;
        right: 0.38rem;
      }
    }

    .finish_line {
      width: 7.5rem;
      border-bottom: 1px solid rgb(178, 179, 180);
    }

    .key_box {
      ul {
        display: flex;
        justify-content: center;
        width: 7rem;
        height: 0.9rem;
        margin: 0.2rem auto 0.2rem;
        box-sizing: border-box;

        li {
          // flex: 1;
          width: 0.63rem;
          font-size: 0.35rem;
          // border: 1px solid red;
          background-color: #fff;
          border-radius: 5px;
          box-shadow: 1px 3px 1px #aaa;
          text-align: center;
          line-height: 0.78rem;
          margin: 2px;
          padding: 2px;
        }

        .del {
          width: 0.96rem;
          background-color: rgb(177, 183, 197);
        }
        .disableClass {
          color: #cccccc;
        }

        .area {
          width: 0.9rem;
        }
      }
      .chinese .del {
        margin-left: 2.3rem;
      }
    }
  }
}
</style>