BJ_web_developers / codeScanning

<template>
  <div id="page">
    <div class="wrap">
      <!-- 输入区域：初始隐藏，缓存查询失败后显示 -->
      <div v-if="showInputArea">
        <p style="margin-bottom: 18px;margin-top: 18px;">
          {{formData.commonCard == "3"?"请输入入场时的虚拟临时车牌":"请输入车牌号码"}}
        </p>

        <div v-if="formData.commonCard == '3'">
          <input type="text" class="iphone-box" v-model="carNum" maxlength="8">
        </div>

        <div class="num-box" v-else>
          <div class="num0" @click="clickFirstWrap()">
            <span>{{formData.num0}}</span>
          </div>
          <div class="num1" @click="clickKeyWordWrap(1)"><span>{{formData.num1}}</span></div>
          <div class="num1" @click="clickKeyWordWrap(2)"><span>{{formData.num2}}</span></div>
          <div class="num1" @click="clickKeyWordWrap(3)"><span>{{formData.num3}}</span></div>
          <div class="num1" @click="clickKeyWordWrap(4)"><span>{{formData.num4}}</span></div>
          <div class="num1" @click="clickKeyWordWrap(5)"><span>{{formData.num5}}</span></div>
          <div class="num1" @click="clickKeyWordWrap(6)"><span>{{formData.num6}}</span></div>
          <div v-if="formData.commonCard == '2'" class="num1" @click="clickKeyWordWrap(7)"><span>{{formData.num7}}</span></div>
        </div>

        <div class="radio-box">
          <label class="flex-items-center" @click="keyBoardStatus = true">
            <img v-if="formData.commonCard == 1" src="../assets/images/icon_chose_s@2x.png" alt="">
            <img v-else src="../assets/images/icon_chose_n@2x.png" alt="">
            <input type="radio" v-model="formData.commonCard" value="1"/>普通车牌
          </label>
          <label class="flex-items-center" @click="keyBoardStatus = true">
            <img v-if="formData.commonCard == 2" src="../assets/images/icon_chose_s@2x.png" alt="">
            <img v-else src="../assets/images/icon_chose_n@2x.png" alt="">
            <input type="radio" v-model="formData.commonCard" value="2"/>新能源车牌
          </label>
          <label class="flex-items-center" @click.self="changeTab">
            <img v-if="formData.commonCard == 3" src="../assets/images/icon_chose_s@2x.png" alt="">
            <img v-else src="../assets/images/icon_chose_n@2x.png" alt="">
            <input type="radio" v-model="formData.commonCard" value="3"/>无牌车
          </label>
        </div>

        <div class="submit-box" @click="submitFn()">
          查询
        </div>
      </div>

      <!-- 加载提示 -->
      <div v-if="loading" style="text-align: center; padding: 30px 0; font-size: 16px; color: #666;">
        {{ loadingText }}
      </div>
    </div>

    <!-- 省份选择/自定义键盘区域（原有代码不变） -->
    <div class="first-word-wrap" v-if="firstWrapStatus">
      <div class="first-word" @click="selectFirstWord($event)">
        <div class="word"><span>蒙</span></div>
        <div class="word"><span>湘</span></div>
        <div class="word"><span>津</span></div>
        <div class="word"><span>鄂</span></div>
        <div class="word"><span>沪</span></div>
        <div class="word"><span>粤</span></div>
        <div class="word"><span>渝</span></div>
        <div class="word"><span>琼</span></div>
      </div>
      <div class="first-word" @click="selectFirstWord($event)">
        <div class="word"><span>冀</span></div>
        <div class="word"><span>川</span></div>
        <div class="word"><span>晋</span></div>
        <div class="word"><span>贵</span></div>
        <div class="word"><span>辽</span></div>
        <div class="word"><span>云</span></div>
        <div class="word"><span>吉</span></div>
        <div class="word"><span>陕</span></div>
      </div>
      <div class="first-word" @click="selectFirstWord($event)">
        <div class="word"><span>黑</span></div>
        <div class="word"><span>甘</span></div>
        <div class="word"><span>苏</span></div>
        <div class="word"><span>青</span></div>
        <div class="word"><span>浙</span></div>
        <div class="word"><span>皖</span></div>
        <div class="word"><span>藏</span></div>
        <div class="word"><span>闽</span></div>
      </div>
      <div class="first-word" @click="selectFirstWord($event)">
        <div class="word"><span>京</span></div>
        <div class="word"><span>赣</span></div>
        <div class="word"><span>桂</span></div>
        <div class="word"><span>鲁</span></div>
        <div class="word"><span>宁</span></div>
        <div class="word"><span>豫</span></div>
        <div class="word"><span>新</span></div>
        <div class="word bordernone"></div>
      </div>
    </div>
    <div class="keyboard-wrap" v-show="keyBoardStatus == true">
      <div class="keyboard" v-if="activeKeyWordIndex !== 1">
        <span v-for="(item,index) in allKeyWord._1" :key="index" @click="clickKeyBoard(item)">{{item}}</span>
      </div>
      <div class="keyboard" v-if="activeKeyWordIndex !== 1">
        <span v-for="(item,index) in allKeyWord._2" :key="index" @click="clickKeyBoard(item)">{{item}}</span>
        <span class="bordernone"></span>
        <span class="bordernone"></span>
        <span class="bordernone"></span>
        <span class="bordernone"></span>
      </div>
      <div class="keyboard">
        <span v-for="(item,index) in allKeyWord._3" :key="index" @click="clickKeyBoard(item)">{{item}}</span>
      </div>
      <div class="keyboard">
        <span v-for="(item,index) in allKeyWord._4" :key="index" @click="clickKeyBoard(item)">{{item}}</span>
      </div>
      <div class="keyboard">
        <span v-for="(item,index) in allKeyWord._5" :key="index" @click="clickKeyBoard(item)">{{item}}</span>
      </div>
      <div class="keyboard">
        <span v-for="(item,index) in allKeyWord._6" :key="index" @click="clickKeyBoard(item)">{{item}}</span>
        <span class="bordernone"></span>
        <span class="bordernone"></span>
        <span class="bordernone"></span>
      </div>
      <div class="keyboard" v-if="activeKeyWordIndex !== 1">
        <span v-for="(item,index) in allKeyWord._7" :key="index" @click="clickKeyBoard(item)">{{item}}</span>
        <span class="bordernone"></span>
        <span class="delete" @click="deleteWord"><img src="../assets/images/icon-delete.png" alt=""></span>
      </div>
      <div class="cancel">
        <span @click="keyBoardStatus = false">完成</span>
      </div>
    </div>
  </div>
</template>

<script>
import { noCarQRcodeInOutPark } from "@/api/plateNumber/plateNumber";
export default {
  data() {
    return {
      colorList: [
        { name: "蓝牌", id: "1" },
        { name: "黄牌", id: "2" },
        { name: "绿牌", id: "3" },
        { name: "白牌", id: "4" },
        { name: "黑牌", id: "5" }
      ],
      currentColor: 0,
      activeBG: "#0054C0",
      formData: {
        commonCard: "1",
        num0: "",
        num1: "",
        num2: "",
        num3: "",
        num4: "",
        num5: "",
        num6: "",
        num7: ""
      },
      allKeyWord: {
        _1: [1, 2, 3, 4, 5, 6, 7],
        _2: [8, 9, 0],
        _3: ["A", "B", "C", "D", "E", "F", "G"],
        _4: ["H", "J", "K", "L", "M", "N", "O"],
        _5: ["P", "Q", "R", "S", "T", "U", "V"],
        _6: ["W", "X", "Y", "Z"],
        _7: ["港", "澳", "学", "领", "警"]
      },
      activeKeyWordIndex: 1,
      keyBoardStatus: false,
      firstWrapStatus: false,
      carNum: "",
      // 新增核心状态
      showInputArea: false, // 是否显示输入框
      loading: true, // 加载状态
      loadingText: "正在查询订单费用...", // 加载提示文本
      queryType: "url" // 当前查询类型：url/缓存/manual
    };
  },
  mounted() {
    const params = this.$route.query;
    // URL有参数时，启动「URL参数→缓存→手动」查询流程
    if (Object.keys(params).length > 0) {
      this.queryByUrlParams();
    } else {
      this.loading = false;
      this.showInputArea = true;
    }
  },
  methods: {
    // 步骤1：用URL参数查询费用
    queryByUrlParams() {
      this.loadingText = "正在查询订单费用...";
      const params = this.$route.query;
      // 组装接口参数
      const apiParams = {
        ...params,
        payType: this.$utils.IsWeixinOrAlipay(),
        terminalSource: "7",
        app_id: 1,
        salt: 2,
        deviceInfo: 3,
        sign_type: "md5",
        sign: 4,
        token: "666",
        carNumber: params.carNumber || "" // URL中的车牌（如果有）
      };

      noCarQRcodeInOutPark(apiParams).then(res => {
        if (res.code === 0 && res.data) {
          // URL参数查询到费用 → 跳支付页
          sessionStorage.setItem('tmpObjCookie', JSON.stringify(res.data));
          this.$router.push({ path: "pay" });
        } else {
          // URL参数未查询到费用 → 执行步骤2：缓存车牌查询
          this.queryByCachePlate();
        }
      }).catch(err => {
        console.error("URL参数查询失败：", err);
        // URL查询异常 → 执行步骤2：缓存车牌查询
        this.queryByCachePlate();
      });
    },

    // 步骤2：用缓存车牌查询费用
    queryByCachePlate() {
      this.loadingText = "正在尝试缓存车牌查询...";
      const cachePlate = localStorage.getItem('virtualCarPlate');
      // 无缓存车牌 → 直接显示输入框
      if (!cachePlate) {
        this.loading = false;
        this.showInputArea = true;
        this.$msgbox("提示", "未查询到订单信息，请手动输入车牌查询");
        return;
      }

      const params = this.$route.query;
      // 组装接口参数（用缓存车牌）
      const apiParams = {
        ...params,
        payType: this.$utils.IsWeixinOrAlipay(),
        terminalSource: "7",
        app_id: 1,
        salt: 2,
        deviceInfo: 3,
        sign_type: "md5",
        sign: 4,
        token: "666",
        carNumber: cachePlate
      };

      noCarQRcodeInOutPark(apiParams).then(res => {
        this.loading = false;
        if (res.code === 0 && res.data) {
          // 缓存车牌查询到费用 → 跳支付页
          sessionStorage.setItem('tmpObjCookie', JSON.stringify(res.data));
          this.$router.push({ path: "pay" });
        } else {
          // 缓存车牌未查询到费用 → 显示输入框
          this.showInputArea = true;
          this.$msgbox("提示", `缓存车牌【${cachePlate}】未查询到订单，请手动输入车牌查询`);
        }
      }).catch(err => {
        this.loading = false;
        console.error("缓存车牌查询失败：", err);
        // 缓存查询异常 → 显示输入框
        this.showInputArea = true;
        this.$msgbox("提示", "缓存车牌查询失败，请手动输入车牌重试");
      });
    },

    // 步骤3：用户手动输入车牌查询
    submitFn() {
      // 校验输入
      let plateLicense = "";
      if (this.formData.commonCard === "1") {
        plateLicense = this.palindrome(this.plate_license_1);
        if (plateLicense.length < 7) {
          this.$msgbox("提示", "请输入正确的普通车牌号（7位）");
          return;
        }
      } else if (this.formData.commonCard === "2") {
        plateLicense = this.palindrome(this.plate_license_2);
        if (plateLicense.length < 8) {
          this.$msgbox("提示", "请输入正确的新能源车牌号（8位）");
          return;
        }
      } else if (this.formData.commonCard === "3") {
        plateLicense = this.carNum.trim();
        if (!plateLicense) {
          this.$msgbox("提示", "请输入虚拟临时车牌");
          return;
        }
      }
      this.carNum = plateLicense;

      // 调用接口查询
      this.loading = true;
      this.loadingText = "正在查询...";
      const params = this.$route.query;
      const apiParams = {
        ...params,
        payType: this.$utils.IsWeixinOrAlipay(),
        terminalSource: "7",
        app_id: 1,
        salt: 2,
        deviceInfo: 3,
        sign_type: "md5",
        sign: 4,
        token: "666",
        carNumber: plateLicense
      };

      noCarQRcodeInOutPark(apiParams).then(res => {
        this.loading = false;
        if (res.code === 0 && res.data) {
          // 手动输入查询到费用 → 跳支付页
          sessionStorage.setItem('tmpObjCookie', JSON.stringify(res.data));
          this.$router.push({ path: "pay" });
        } else {
          // 手动输入未查询到费用 → 提示
          this.$msgbox("提示", res.message || "未查询到该车牌的订单信息");
        }
      }).catch(err => {
        this.loading = false;
        console.error("手动查询失败：", err);
        this.$msgbox("提示", "查询失败，请稍后重试");
      });
    },

    // 原有辅助方法（不变）
    getUrlParam(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },
    changeTab() {
      this.keyBoardStatus = false;
      this.firstWrapStatus = false;
    },
    clickFirstWrap() {
      this.firstWrapStatus = true;
      this.keyBoardStatus = false;
      this.formData.num0 = "";
    },
    selectFirstWord(event) {
      if (event.target.localName !== "span") return;
      this.formData.num0 = event.target.innerText;
      this.firstWrapStatus = false;
      this.keyBoardStatus = true;
      this.activeKeyWordIndex = 1;
    },
    clickKeyBoard(item) {
      this.formData["num" + this.activeKeyWordIndex] = item;
      const maxIndex = this.formData.commonCard === "1" ? 6 : 7;
      if (this.activeKeyWordIndex < maxIndex) {
        this.activeKeyWordIndex++;
      } else {
        this.keyBoardStatus = false;
      }
    },
    deleteWord() {
      if (this.activeKeyWordIndex > 1) {
        this.formData["num" + (this.activeKeyWordIndex - 1)] = "";
        this.activeKeyWordIndex--;
      }
    },
    clickKeyWordWrap(activeKeyWordIndex) {
      this.keyBoardStatus = true;
      this.activeKeyWordIndex = activeKeyWordIndex;
      this.formData["num" + this.activeKeyWordIndex] = "";
    },
    palindrome(str) {
      var arr = str.split("");
      arr = arr.filter(function(val) {
        return (
          val !== " " && val !== "," && val !== "." && val !== "?" && val !== ":" &&
          val !== ";" && val !== "`" && val !== "'" && val !== "_" && val !== "/" &&
          val !== "-" && val !== "\\" && val !== "" && val !== "(" && val !== ")"
        );
      });
      return arr.join("");
    },
    checkIsHasSpecialStr(str) {
      var flag = false;
      var arr = str.split("");
      arr.forEach(val => {
        if (
          val === "!" || val === "}" || val === "{" || val === "]" || val === "[" ||
          val === "&" || val === "$" || val === "@" || val === " " || val === "," ||
          val === "." || val === "?" || val === ":" || val === ";" || val === "`" ||
          val === "'" || val === "_" || val === "/" || val === "-" || val === "\\" ||
          val === "" || val === "(" || val === ")"
        ) {
          flag = true;
        }
      });
      return flag;
    },
    checkIsHasChineseStr(str) {
      var Reg = /.*[\u4e00-\u9fa5]+.*/;
      return Reg.test(str);
    }
  },
  computed: {
    plate_license_1() {
      return this.formData.num0 + this.formData.num1 + this.formData.num2 +
        this.formData.num3 + this.formData.num4 + this.formData.num5 + this.formData.num6;
    },
    plate_license_2() {
      return this.formData.num0 + this.formData.num1 + this.formData.num2 +
        this.formData.num3 + this.formData.num4 + this.formData.num5 + this.formData.num6 + this.formData.num7;
    }
  }
};
</script>

<style lang="scss" scoped>
.flex-items-center {
  display: flex;
  align-items: center;
}
.wrap {
  padding: 0 18px;
  .radio-box {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 18px;
    text-align: right;
    font-size:16px;
    input[type="radio"] {
      display: none;
    }
    label {
      padding-left: 0.6rem;
      cursor: pointer;
      img {
        width:1rem;
        margin-right: 0.1rem;
      }
    }
  }
  .num-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    & > div {
      width: 1.8rem;
      height: 1.8rem;
      border: 1px solid #e4e4e4;
      span {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        font-size: 1rem;
        color: #828282;
      }
    }
  }
  .submit-box {
    width: 100%;
    height: 44px;
    line-height: 44px;
    border-radius: 4px;
    font-size: 20px;
    margin-top: 18px;
    background: linear-gradient(180deg, #3885D9 0%, #4194EF 100%);
    color: #fff;
    text-align: center;
    cursor: pointer;
  }
}
.first-word-wrap {
  background-color: #D2D5DB;
  padding: 0.6rem 0.8rem 1.1rem;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  .first-word {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.45rem;
    .word {
      box-sizing: border-box;
      width: 1.8rem;
      height: 1.8rem;
      box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.35);
      border-radius: 0.16rem;
      text-align: center;
      &.bordernone {
        border: none;
        box-shadow: none
      }
      span {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 100%;
        height: 100%;
        background-color: #fff;
        color: #000;
        border-radius: 0.125rem;
      }
    }
    &:nth-last-of-type(1) {
      margin-bottom: 0rem;
    }
  }
}
.keyboard-wrap {
  background-color: #D2D5DB;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.6rem 0.6rem 0.4rem;
  .keyboard {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 2rem;
    margin-bottom: 0.3rem;
    span {
      text-align: center;
      display: flex;
      width: 1.8rem;
      align-items: center;
      justify-content: center;
      height: 1.8rem;
      margin: 0 0.3rem;
      box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.35);
      background-color: #fff;
      border-radius: 0.125rem;
      &:active {
        background-color: #e4e4e4;
      }
      &.bordernone {
        border: none;
        box-shadow: none;
        background-color: #D2D5DB;
        &:active {
          background-color: #D2D5DB;
        }
      }
      &.delete {
        background-color: #465266;
        img {
          width: 1.15rem;
        }
      }
    }
  }
  .cancel {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    span {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 3.6rem;
      height: 1.8rem;
      background-color: #465266;
      color: #fff;
      border-radius: 0.125rem;
      cursor: pointer;
    }
  }
}
input[type="text"]:focus {
  border: 1px solid #e4e4e4 !important;
}
.iphone-box {
  border: 1px solid #e4e4e4;
  width: 100%;
  height: 1.8rem;
  line-height: 1.8rem;
  padding-left: 20px;
  font-size: 14px;
}
</style>