jg_app/src/pages/spsHome/components/checkCar.vue

<template>
  <div class="container">
    <!-- 盘车 -->
    <van-popup v-model:show="peopleCarShow" round :style="{ width: '90%' }" close-icon="close" :overlay="true"
      @close="handleClose">
      <div class="checkPeoplePopup">
        <div class="select-box">
          <div class="item-boxs" v-for="(item, index) in checkCList" :key="index" @click="getCItem(item, index)">
            <span :class="cCheckFlag === item.value ? 'checkText' : ''">{{ item.label }}</span>
          </div>
        </div>
        <div class="content-boxs">
          <div v-if="cCheckFlag === 'plateNum'">
            <div class="plateNum">
              <van-field v-model="from.value" readonly is-link placeholder="请选择车辆类型"
                @click="isShowCommonPicker = true;">
              </van-field>
              <van-icon @click="ocrSb" style="padding: 0 12px" name="photograph" color="#969799" />
            </div>
            <div class="input-number flex">
              <div class="p_div" v-for="(item, index) in cpList.licensePlateNumber" :key="index"
                :class="{ current: cpList.currentValIndex === index }" @click="showKeyboardFn(index)">
                {{ item }}
              </div>
              <div class="add-number" v-if="from.hplx == '02'"
                @click="cpList.licensePlateNumber.push(''), from.hplx = '52'">
                <van-icon name="plus" color="rgb(34,146,254)" />
                <span style="font-size: 12px">新能源</span>
              </div>

              <div class="add-number" v-if="from.hplx == '52'"
                @click="cpList.licensePlateNumber.pop(0), from.hplx = '02'">
                <van-icon name="plus" color="rgb(34,146,254)" />
                <span style="font-size: 12px">汽车</span>
              </div>
            </div>
          </div>
          <van-field v-model="from.value" placeholder="请输入车辆识别码" v-if="cCheckFlag === 'plateCode'"
            :rules="[{ required: true, message: '请输入车辆识别码' }]" right-icon="photograph">
          </van-field>
          <svg-icon icon="chuzu" />
        </div>
        <div class="footBtn">
          <van-button native-type="submit" @click="checkC('sd')" type="primary" round block>查询</van-button>
          <div class="toolsTip">请根据工作需求使用功能，您的每次查询将记录日志！</div>
        </div>
      </div>
    </van-popup>
    <van-popup v-model:show="isShowCommonPicker" round position="bottom">
      <van-picker :columns="D_BZ_HPZL" @cancel="isShowCommonPicker = false" @confirm="onConfirm" />
    </van-popup>
    <!-- 车牌键盘 -->
    <VehicleKeyboard ref="vehicleKeyboards" @setValue="setValue" />
  </div>
</template>

<script setup>
import { Toast } from "vant";
import VehicleKeyboard from "../../../components/VehicleKeyboard.vue";
import {
  ref,
  reactive,
  watch,
  defineProps,
  defineEmits,
  defineExpose,
  toRefs,
  onMounted,
  onUnmounted,
} from "vue";
import { useRouter } from "vue-router";
import { getDictList, setDict } from "../../../utils/dict";
const { D_BZ_HPZL } = getDictList("D_BZ_HPZL");
const router = useRouter();
const peopleCarShow = ref(false);
const props = defineProps({
  zlId: String,
});
const baseInfo = ref({
  baseImage: '',//回显图片
})
function handleOpen() {
  peopleCarShow.value = true;
  window.addEventListener("message", receivePost);
}
function handleClose() {
  peopleCarShow.value = false;
  window.removeEventListener("message", receivePost);
}
defineExpose({
  handleOpen,
});
const from = reactive({
  value: "小型汽车号牌",
  hplx: "02",
  pcsrlx: "2",
});
const vehicleKeyboards = ref();
const cpList = reactive({
  licensePlateNumber: ["", "", "", "", "", "", ""],
  currentValIndex: 0,
});
function showKeyboardFn(index) {
  cpList.currentValIndex = index;
  const showProvince = index === 0;
  const showNumber = index > 1;
  if (index === cpList.licensePlateNumber.length) {
    vehicleKeyboards.value.changeDialogShow(false, showProvince, showNumber);
  } else {
    vehicleKeyboards.value.changeDialogShow(true, showProvince, showNumber);
  }
}
function setValue(val) {
  if (val === "delete") {
    if (cpList.currentValIndex > 2) {
      cpList.licensePlateNumber[cpList.currentValIndex] = "";
      cpList.currentValIndex--;
    } else {
      cpList.licensePlateNumber[cpList.currentValIndex] = "";
    }
  } else {
    cpList.licensePlateNumber[cpList.currentValIndex] = val;
    cpList.currentValIndex += 1;
    showKeyboardFn(cpList.currentValIndex);
  }
}
function ocrSb() {
  try {
    bridge.pZ("pzsbcphm");
  } catch (error) {
    window.setcphm("川RRF435");
  }
}


//接收postMessage消息
function receivePost(mes) {
  var str = "";
  try {
    str = mes.data.type;
  } catch (error) { }
  switch (str) {
    case 'PHOTO':
      let str = mes.data.data;
      baseInfo.value.baseImage = str;
      break;
    case "cphm":
      try {
        getCphm(mes.data.data);
      } catch (error) { }
      break;
    case "color":
      try {
        console.log(mes.data);
        getColor(mes.data.data);
      } catch (error) { }
      break;
  }
}

//通过ocr获取车牌
function getCphm(data) {
  var cparr = ["", "", "", "", "", "", ""];
  try {
    if (data && data.length > 6) {
      cparr = data.split("");
    } else {
      Toast.fail("OCR识别失败");
    }
  } catch (error) { }
  cpList.licensePlateNumber = cparr;
}

//ocr获取车牌颜色
function getColor(val) {
  D_BZ_HPZL.value.forEach(item => {
    if (item.dm == val) {
      from.hplx = item.dm;
      from.value = item.zdmc
    }
  });
}

// 盘车
function checkC(val) {
  let hphm = cpList.licensePlateNumber.join("");
  let hplx = from.hplx;
  let pcsrlx = val ? '2' : '7' //有参数是手动盘查，没有是ocr识别
  peopleCarShow.value = false
  router.push({
    path: "/canVehicle",
    query: { hphm: hphm, hplx: hplx, pcsrlx: pcsrlx, zlId: props.zlId, }
  });
}
function onConfirm(val) {
  isShowCommonPicker.value = false;
  from.value = val.text;
  from.hplx = val.value;
}
const checkCList = [
  { label: "车牌", value: "plateNum" },
  { label: "车辆识别码", value: "plateCode" },
];
const cCheckFlag = ref("plateNum");
function getCItem(item, index) {
  cCheckFlag.value = item.value;
  console.log(D_BZ_HPZL.value);
}
// 弹出层数据
const columns = ref(["测试1", "测试2", "测试3"]);
const isShowCommonPicker = ref(false);

</script>

<style lang="scss" scoped>
.input-number {
  height: 7vh;
  // line-height: 6vh;
  overflow: hidden;
  margin: 10px 5vw 0;
  text-align: center;

  // border-radius: 5px;
  // border: 1px rgb(81, 81, 81) solid;
  .p_div {
    background-color: #f5f5f5;
    height: 7vh;
    line-height: 7vh;
    width: 12%;
    box-sizing: border-box;

    &:not(:last-child) {
      border-left: 1px #e5e5e5 solid;
      border-top: 1px #e5e5e5 solid;
      border-bottom: 1px #e5e5e5 solid;
      background: #f5f5f5;
      // border-radius: 5px;
    }
  }

  .p_div:nth-child(8) {
    border: 1px #e5e5e5 solid;
  }

  .add-number {
    width: 52px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #1143ca;
    border: 1px solid #1143ca;
  }

  .p_div.current {
    border: 1px solid #66aef6;
    border-radius: 5px;
  }
}

.plateNum {
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #e5e5e5;
  margin: 0 5vw;
}

.flex {
  display: flex;
}

.plateNum .van-cell {
  padding-left: 0;
  padding-right: 0;
}

.footBtn {
  margin: 10px 5vw;

  .toolsTip {
    color: red;
    font-size: 12px;
    //  transform: scale(.9);
    margin: 1vw 0;
    text-align: center;
  }
}
</style>