<template>
<!-- 选取资料-->
<div class="selectFile">
<navbar :name="name" />
<!-- U盘打印-->
<div class="box flex-center" v-show="name == 'U盘打印'">
<div class="tip">
<div class="title">温馨提示</div>
<div class="content">
请在右侧文件浏览区，找到文件存放的目录/文件夹，然后点选您要打印的文件，之后按下“确认资料”按钮。
</div>
</div>
<div class="file">
<div class="main">
<div v-for="(item, index) in UpFile" v-bind:key="index">
{{ item.name }}
</div>
<input type="file" @change="handleFileChange" />
</div>
<div class="btn flex-center" @click="skip('transcoding', name)">
确认资料
</div>
</div>
</div>
<!-- 扫描复印-->
<div class="box flex-center" v-show="name == '扫描复印'">
<div class="file2">
<div class="title">已完成扫描的版面</div>
<div class="main flex-between">
<div class="smfyData">
<div
v-for="(item, index) in imgList"
v-bind:key="index"
:class="['flex-center', { act: smfyIndex == index }]"
@click="onChange(index, 'smfyIndex')"
>
<div class="name">{{ index + 1 }}</div>
<span @click="onCancel(index, 'imgList')">删除</span>
</div>
</div>
<img
:src="imgList[smfyIndex]"
alt=""
style="width: 25rem; height: 100%"
/>
</div>
</div>
<div class="tip tip2">
<div class="title">温馨提示</div>
<div class="content">
宜家扫描号的页面显示在左边的列表中，您可以点击列表中的缩略图进行核对，有不满意的请点旁边的“X”进行移除并重新扫描。如果有件需要继续扫描，请按要求放置好资料后，按“继续扫描”。
按照刚才的方法，重复扫描过程，直到完成了所有需要的页面。核对无误后，可以按“完成扫描”结束资料扫描过程。
</div>
<div class="flex-between but">
<div class="btn flex-center" @click="paiz()">继续扫描</div>
<div class="btn flex-center" @click="skip('transcoding', name)">
完成扫描
</div>
</div>
</div>
</div>
<!-- 身份证打印-->
<div class="box flex-center" v-show="name == '身份证打印'">
<div class="file2 file3">
<div class="title">请核对您的信息</div>
<div class="card">
<div class="card-box">
<img src="../assets/card2.png" alt="身份证反面" />
<div class="card-name">{{ cardInfo.name }}</div>
<div class="card-gender">
{{ cardInfo.sex }}<span>{{ cardInfo.nation }}</span>
</div>
<div class="card-birth">
{{ cardInfo.birthday | joinYear }}
<span class="month">{{ cardInfo.birthday | joinMonth }}</span
><span class="day">{{ cardInfo.birthday | joinDay }}</span>
</div>
<div class="card-addr">
{{ cardInfo.address }}
</div>
<div class="card-id">{{ cardInfo.idNumber }}</div>
<div class="card-avatar">
<img :src="cardInfo.imageName" alt="" />
</div>
</div>
<div class="card-box">
<img src="../assets/card1.png" alt="身份证正面" />
<div class="card-sign">珠海市公安局</div>
<div class="card-date">
{{ cardInfo.issuedData }} - {{ cardInfo.validDate }}
</div>
</div>
</div>
</div>
<div class="tip">
<div class="title">温馨提示</div>
<div class="content">
身份证件信息读取成功，请您核对个人信息无误后，按“信息无误，继续”按钮进行后续操作。此时您可以收回您的身份证卡片并妥善报讯。
</div>
<div class="btn flex-center" @click="skip('transcoding', name)">
信息无误，继续
</div>
</div>
</div>
</div>
</template>
<script>
import navbar from "@/components/nav";
export default {
name: "selectFile",
components: {
navbar,
},
provide() {
return {
title: this.tit,
type: this.name,
};
},
filters: {
joinYear(val) {
return val.substring(0, 4);
},
joinMonth(val) {
return val.substring(4, 6);
},
joinDay(val) {
return val.substring(6, 8);
},
},
data() {
return {
tit:
this.$route.params.name == "U盘打印" ? "资料选取提交" : "资料扫描提交",
name: this.$route.params.name,
path: this.cite.inWebURL,
socket: '',
imgList: [],
smfyIndex: 0,
UpFile: [],
cardInfo: {
name: "鲲怎么叫",
sex: "男",
nation: "汉",
nationCode: "1",
birthday: "19940411",
address: "广东省珠海市香洲区唐家湾镇东岸村小龙组10086号",
idNumber: "430421198907280306",
idIssued: "珠海市公安局",
issuedData: "20110310",
validDate: "20210310",
photoName: "",
base64Photo: "",
imageName:
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F41a98c47-1e62-4ea4-be0c-2640b773a8a7%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1706170275&t=0104b9da7239685b89d893516103dc4e",
base64Image: "(nul1)",
cardType: "1",
enName: "",
cnName: "",
passNum: "",
visaTimes: "",
},
};
},
methods: {
skip(href, name) {
this.$router.push({
name: href,
params: {
name: name,
},
});
},
onChange(index, name) {
this[name] = index;
},
onCancel(index, name) {
this[name].splice(index, 1);
},
paiz() {
this.socket.send("Capture@2");
},
init: function () {
if (typeof WebSocket === "undefined") {
alert("您的浏览器不支持socket");
} else {
// 实例化socket
this.socket = new WebSocket(this.path);
// 监听socket连接
this.socket.onopen = this.open;
// 监听socket错误信息
this.socket.onerror = this.error;
// 监听socket消息
this.socket.onmessage = this.getMessage;
}
},
open: function () {
// console.log("socket连接成功")
this.socket.send("OpenIdCardEx@0");
this.socket.send("OpenDevice@1");
this.socket.send("SetResolution@2@2592@1944");
this.socket.send("OpenVideo");
this.socket.send("RotateRight");
this.socket.send("Deskew");
},
error: function () {
console.log("连接错误");
},
getMessage: function (msg) {
if (typeof msg.data == "string") {
if (msg.data.indexOf("GetDevCount") == 0) {
let s = msg.data.substring(12);
if ("1" == s || "2" == s) {
//如果是双摄像头 那就需要判断 s = 2;表示当前是连接了2个设备
alert("检测到已经连接上摄像头");
}
} else if (msg.data.indexOf("Capture") == 0) {
let s = msg.data.substring(8);
if (s) {
this.imgList.push("data:image/jpeg;base64," + s);
}
} else if (msg.data.indexOf("MoveDetectEvent") == 0) {
this.socket.send("Capture@2");
} else if (msg.data.indexOf("IdCardEvent") == 0) {
this.socket.send("UnFaceDetect");
} else if (msg.data.indexOf("ReadIdCard") == 0) {
let s = msg.data.substring(11);
if ("1" == s) {
this.socket.send("GetIdCardResult@||");
this.socket.send("GetIdCardImage@2");
}
} else if (msg.data.indexOf("GetIdCardResult") == 0) {
let s = msg.data.substring(16);
let info = document.getElementById("info");
info.value = s;
} else if (msg.data.indexOf("GetBarcode") == 0) {
// alert(msg.data);
let s = msg.data.substring(11);
let info = document.getElementById("info");
info.value = s;
} else if (msg.data.indexOf("GetIdCardImage") == 0) {
let s = msg.data.substring(15);
let arr = s.split("#");
let faceImg = arr[0];
let myimg = document.getElementById("myCanvas3");
myimg.src = "data:image/jpeg;base64," + faceImg;
} else if (msg.data.indexOf("GetBase64") == 0) {
let s = msg.data.substring(10);
let myimg = document.getElementById("myCanvas2");
myimg.src = "data:image/jpeg;base64," + s;
alert(s);
} else if (msg.data.indexOf("GetRecognitionFromFileName") == 0) {
let s = msg.data.substring(27);
let info = document.getElementById("info");
info.value = s;
} else if (msg.data.indexOf("GetOcrFromFileName") == 0) {
let s = msg.data.substring(19);
let info = document.getElementById("info");
info.value = s;
} else if (msg.data.indexOf("GetDogSN") == 0) {
let s = msg.data.substring(11);
let info = document.getElementById("info");
info.value = s;
}
} else {
let reader = new FileReader();
reader.onload = function (msg) {
if (msg.target.readyState == FileReader.DONE) {
// let url = msg.target.result;
// document.getElementById('myCanvas').src = url;
}
};
reader.readAsDataURL(msg.data);
}
},
close: function () {
// console.log("socket已经关闭")
this.socket.close();
this.socket = "";
},
handleFileChange(event) {
let file = event.target.files[0];
if (file) {
this.UpFile.push(file);
}
},
},
destroyed() {
// 销毁监听
this.close();
},
mounted() {
if (this.$route.params.name == "扫描复印") {
this.init();
}
},
};
</script>
<style scoped lang="less">
.selectFile {
.box {
width: 114.06rem;
height: 42.13rem;
background: #ffffff;
box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0, 0, 0, 0.14);
border-radius: 1.63rem;
margin: 0 auto;
.tip {
//margin-right: 15.31rem;
width: 37rem;
font-size: 2.25rem;
font-weight: bold;
color: #323232;
line-height: 3rem;
.title {
font-size: 2.88rem;
font-weight: bold;
color: #d41212;
line-height: 4.06rem;
}
.content {
margin: 3rem auto 59px;
text-align: center;
}
}
.file {
margin-left: 15.31rem;
width: 32.69rem;
.main {
width: 31.63rem;
height: 28.56rem;
background: #ffffff;
border: 0.06rem solid #707070;
margin: 0 auto 2.81rem;
}
}
.tip2 {
width: 52rem;
.but {
.btn {
width: 24.44rem;
}
}
}
.file2 {
margin-right: 9.69rem;
.title {
font-size: 2.13rem;
font-weight: bold;
color: #323232;
line-height: 3rem;
text-align: left;
}
.main {
width: 39.81rem;
height: 31.31rem;
background: #eeeeee;
margin: 1.38rem auto 0;
}
.card {
width: 42.81rem;
height: 35.31rem;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: flex-end;
.card-box {
width: 25rem;
height: 15rem;
margin-right: 5rem;
position: relative;
font-weight: bold;
font-size: 0.7rem;
.card-title {
padding: 1rem 0;
}
img {
width: 25rem;
}
.card-sign {
position: absolute;
bottom: 2.7rem;
left: 10.5rem;
}
.card-date {
position: absolute;
bottom: 0.7rem;
left: 10.5rem;
}
.card-name {
position: absolute;
top: 2.2rem;
left: 4.5rem;
}
.card-gender {
position: absolute;
top: 4.1rem;
left: 4.5rem;
font-size: 0.7rem;
span {
margin-left: 5rem;
}
}
.card-birth {
position: absolute;
top: 6.15rem;
left: 4.5rem;
font-size: 0.7rem;
.month {
margin-left: 2.3rem;
}
.day {
margin-left: 1.5rem;
}
}
.card-addr {
width: 10rem;
position: absolute;
top: 8.1rem;
left: 4.5rem;
font-size: 0.7rem;
text-align: left;
}
.card-id {
position: absolute;
bottom: 1.05rem;
left: 8rem;
font-size: 0.7rem;
}
.card-avatar {
position: absolute;
top: 3.2rem;
right: 2rem;
width: 7rem;
height: 9rem;
img {
width: 7rem;
height: 9rem;
background-size: contain;
}
}
}
}
}
.file3 {
margin-right: 28.13rem;
.main {
width: 20.75rem;
height: 28.88rem;
border: 0.06rem solid #707070;
margin: 1.06rem 0 0 13.38rem;
}
}
.btn {
width: 100%;
height: 5.5rem;
background: linear-gradient(
132deg,
#52a39d 0%,
#a1c553 50%,
#81d012 100%
);
border-radius: 1.25rem;
font-size: 1.88rem;
font-weight: 400;
color: #ffffff;
line-height: 2.63rem;
cursor: pointer;
}
}
.smfyData {
height: 90%;
width: 14.81rem;
font-size: 1rem;
font-weight: bold;
color: #323232;
line-height: 2rem;
overflow: auto;
cursor: pointer;
.act {
color: #52a39d;
}
.name {
text-decoration: underline;
}
span {
margin-left: 5rem;
}
}
}
</style>
