提交
This commit is contained in:
给我
210
src/pages/spsHome/components/checkPeopleNew.vue
Normal file
210
src/pages/spsHome/components/checkPeopleNew.vue
Normal file
@ -0,0 +1,210 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user