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

<template>
  <div class="container">
    <!-- 盘人 -->
    <!-- <van-popup v-model:show="peoplePopupShow" 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 checkPList" :key="index" @click="pCheckFlag = item.value">
            <span :class="pCheckFlag === item.value ? 'checkText' : ''">{{ item.label }}</span>
          </div>
        </div> -->
        <div class="content-box">
          <van-form @submit="onSubmit">
            <van-field class="border" v-model="form.sfzh" placeholder="请输入身份证号" v-if="pCheckFlag === 'sfzh'"
              right-icon="photograph" @click-right-icon="handleOCR" :rules="sfzhRuls">
            </van-field>
            <van-field class="border" v-model="form.value" placeholder="请输入手机号" right-icon="graphic"
              v-if="pCheckFlag === 'phoneNum'" :rules="dhhmRuls">
            </van-field>
            <div class="photo" v-if="pCheckFlag === 'photo'" @click="takePhoto">
              <img :src="require('../../../assets/images/new/photoin.png')" alt="" width="100" height="100" />
              <span>开始拍照</span>
            </div>
            <div class="footBtn" v-if="pCheckFlag != 'photo'">
              <van-button native-type="submit" type="primary" round block>查询</van-button>
            </div>
            <div class="toolsTip">请根据工作需求使用功能，您的每次查询将记录日志！</div>
          </van-form>
        </div>


      </div>
    <!-- </van-popup> -->
    <van-popup v-model:show="isShowCommonPicker" round position="bottom">
      <van-picker :columns="columns" @cancel="isShowCommonPicker = false" @confirm="onConfirm" />
    </van-popup>
  </div>
</template>

<script setup>
import { ref, defineProps, defineExpose } from "vue";
import { Toast } from "vant";
import { useRouter } from "vue-router";
import { IdCardValidator, phoneValidator } from "../../../utils/rules.js"
import { login } from "@/api/user.js";
const props = defineProps({ zlId: String });
const router = useRouter();
const peoplePopupShow = ref(false);
const form = ref({
  sfzh: "",
  lxdh: "",
});
const pCheckFlag = ref("sfzh");
// 弹出层数据
const columns = ref(["测试1", "测试2", "测试3"]);
const checkPList = [
  { label: "身份证", value: "sfzh" },
  // { label: "手机号", value: "phoneNum" },
  // { label: "人像", value: "photo" },
];// 盘人弹框按钮List
const isShowCommonPicker = ref(false);
const sfzhRuls = ref([
  { required: true, message: '身份证号码不能为空', trigger: 'onChange/onBlur' },
  { validator: (value) => { return IdCardValidator(value) }, trigger: 'onChange/onBlur' }
])
const dhhmRuls = ref([
  { required: true, message: '电话号码不能为空', trigger: 'onChange/onBlur' },
  { validator: (value) => { return phoneValidator(value) }, trigger: 'onChange/onBlur' }
])

// 打开弹窗
function handleOpen() {
  peoplePopupShow.value = true;
  window.addEventListener("message", receivePost);
}
function handleClose() {
  peoplePopupShow.value = false
  window.removeEventListener("message", receivePost);
}

// 处理人OCR
function handleOCR() {
  try {
    window.bridge.openOcrDiscern();
  } catch (error) { }
}
//接收postMessage消息
function receivePost(mes) {
  var str = "";
  try {
    str = mes.data.type;
  } catch (error) { }

  switch (str) {
    case 'PHOTO':
      try {
        if (mes.data.data) {
          let str = mes.data.data
          router.push({ path: "/peopleList", query: { info: str, pcsrlx: "5" } });
        } else {
          Toast.fail("人像识别失败");
        }
      } catch (error) { }
      break;
    case "sfzh":
      try {
        if (mes.data.data) {
          let info = JSON.parse(mes.data.data)
          localStorage.setItem('OCR', mes.data.data)
          let data = { sfzh: info.num, pcsrlx: 7, zlId: props.zlId }
          router.push({ path: "/quarantinePersonnel", query: data });
        } else {
          Toast.fail("OCR识别失败");
        }
      } catch (error) { }
      break;
    case "NFC":
      try {
        if (mes.data.data) {
          let obj = mes.data.data
          let data = { sfzh: obj.data.sfzh, pcsrlx: 1, zlId: props.zlId }
          window.localStorage.setItem("NFC", JSON.stringify(mes.data.data));
          router.push({ path: "/quarantinePersonnel", query: data });
        } else {
          Toast.fail("NFC识别失败");
        }
      } catch (error) { }
      break;

  }
}

// 人像
function takePhoto() {
  try {
    bridge.pZ('pz_system_rxsb_yk')
  } catch (error) { }
}

// 盘人提交按钮
function onSubmit(values) {
  switch (pCheckFlag.value) {
    case "sfzh":
      let data = { sfzh: form.value.sfzh, pcsrlx: "2", zlId: props.zlId }
      localStorage.setItem('NFC', JSON.stringify(data))
      router.push({ path: "/quarantinePersonnel", query: data });
      break;
    case "phoneNum":
      let prams = { dhhm: form.value.value, isPc: 1, pcsrlx: "6" }
      router.push({ path: "/yyzx/dhcr", query: prams });
      break;
  }
  peoplePopupShow.value = false;
}

defineExpose({ handleOpen });
</script>

<style lang="scss" scoped>
@import "../../../assets/styles/mixin.scss";

.item-boxs {
  @include font_size($font_medium_s);
}

.sub-btn {
  @include font_size($font_medium);
}

.border {
  border: 1px solid #ccc;
  background: #f5f5f5;
}

.photo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 4vh;
  align-items: center;

  span {
    text-align: center;
    line-height: 2em;
    color: #ec6b2b;
    @include font_size($font_medium);
    font-weight: bold;
    font-family: PingFang SC;
  }
}

.footBtn {
  margin: 10px 0px;
}

.van-form {
  width: 90%;
}

::v-deep .van-uploader__wrapper {
  justify-content: center;
}

.toolsTip {
  color: red;
  font-size: 12px;
  margin: 2vw 0;
  text-align: center;
}
</style>