|
|
|
@ -1,24 +1,59 @@
|
|
|
|
|
<script setup>
|
|
|
|
|
import {upload_img} from "@/apis/index.js";
|
|
|
|
|
import {scan_id_card, upload_img} from "@/apis/index.js";
|
|
|
|
|
import {useUserStore} from '@/stores/userStore.js'
|
|
|
|
|
import defaultImage1 from '@/assets/images/zu1172@2x.png';
|
|
|
|
|
import storage from "@/utils/storage.js";
|
|
|
|
|
import {storeToRefs} from "pinia";
|
|
|
|
|
import {ref} from "vue";
|
|
|
|
|
import dayjs from "dayjs";
|
|
|
|
|
|
|
|
|
|
const afterRead=async (file)=>{
|
|
|
|
|
const userStore = useUserStore()
|
|
|
|
|
const {idCardInfo,iDCardImage} = storeToRefs(userStore);
|
|
|
|
|
const afterRead = async (file, num) => {
|
|
|
|
|
const res = await upload_img({
|
|
|
|
|
file: file.file,
|
|
|
|
|
source: "artwork",
|
|
|
|
|
type: 'image'
|
|
|
|
|
})
|
|
|
|
|
console.log(file,'file')
|
|
|
|
|
if (res.status === 0) {
|
|
|
|
|
if (num === 0) {
|
|
|
|
|
iDCardImage.value.front = res.data.ori_url
|
|
|
|
|
} else if (num === 1) {
|
|
|
|
|
iDCardImage.value.back = res.data.ori_url
|
|
|
|
|
}
|
|
|
|
|
await cardFace(res.data.ori_url, num)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
const isWithinThreeMonths=(dateStr)=> {
|
|
|
|
|
const now = dayjs();
|
|
|
|
|
const targetDate = dayjs(dateStr);
|
|
|
|
|
const isEarlier = targetDate.isBefore(now);
|
|
|
|
|
const isWithinThreeMonths = now.diff(targetDate, 'month') < 3;
|
|
|
|
|
return isEarlier && isWithinThreeMonths;
|
|
|
|
|
}
|
|
|
|
|
const cardFace = async (img, num) => {
|
|
|
|
|
const res = await scan_id_card({
|
|
|
|
|
idCardUrl: img,
|
|
|
|
|
Side: num + 1
|
|
|
|
|
})
|
|
|
|
|
if (res.status === 0) {
|
|
|
|
|
if (res.data.iDNum) {
|
|
|
|
|
idCardInfo.value=res.data
|
|
|
|
|
}else if (res.data.expirationDate || res.data.issueDate) {
|
|
|
|
|
idCardInfo.value.expirationDate=res.data.expirationDate
|
|
|
|
|
idCardInfo.value.issueDate=res.data.issueDate
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
<div class="one-content">
|
|
|
|
|
<div class="content2">
|
|
|
|
|
<van-uploader :after-read="afterRead">
|
|
|
|
|
<van-uploader :after-read="(e)=>{afterRead(e,0)}">
|
|
|
|
|
<div class="wrap1">
|
|
|
|
|
<div class="wrap1_1">
|
|
|
|
|
<div class="wrap1_1_1">
|
|
|
|
|
<img src="@/assets/images/zu1172@2x.png" alt="">
|
|
|
|
|
<img :src="iDCardImage.front || defaultImage1" alt="">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="wrap1_1_2">更换</div>
|
|
|
|
|
</div>
|
|
|
|
@ -27,11 +62,11 @@ const afterRead=async (file)=>{
|
|
|
|
|
</van-uploader>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="content3">
|
|
|
|
|
<van-uploader>
|
|
|
|
|
<van-uploader :after-read="(e)=>{afterRead(e,1)}">
|
|
|
|
|
<div class="wrap1">
|
|
|
|
|
<div class="wrap1_1">
|
|
|
|
|
<div class="wrap1_1_1">
|
|
|
|
|
<img src="@/assets/images/zu1172@2x.png" alt="">
|
|
|
|
|
<img :src="iDCardImage.back || defaultImage1" alt="">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="wrap1_1_2">更换</div>
|
|
|
|
|
</div>
|
|
|
|
@ -39,32 +74,51 @@ const afterRead=async (file)=>{
|
|
|
|
|
</div>
|
|
|
|
|
</van-uploader>
|
|
|
|
|
</div>
|
|
|
|
|
<template v-if="isWithinThreeMonths(idCardInfo.expirationDate)">
|
|
|
|
|
<div class="content4">
|
|
|
|
|
<div class="wrap1">
|
|
|
|
|
<div class="wrap1_1">
|
|
|
|
|
<div class="wrap1_1_1">姓名</div>
|
|
|
|
|
<div class="wrap1_1_2">某某某</div>
|
|
|
|
|
<div class="wrap1_1_2">{{ idCardInfo.realName }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div class="wrap1">
|
|
|
|
|
<div class="wrap1_1">
|
|
|
|
|
<div class="wrap1_1_1">姓名</div>
|
|
|
|
|
<div class="wrap1_1_2">某某某</div>
|
|
|
|
|
<div class="wrap1_1_1">性别</div>
|
|
|
|
|
<div class="wrap1_1_2">{{idCardInfo.sex}}</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div class="wrap1">
|
|
|
|
|
<div class="wrap1_1">
|
|
|
|
|
<div class="wrap1_1_1">身份证号码</div>
|
|
|
|
|
<div class="wrap1_1_2">{{idCardInfo.iDNum}}</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div class="wrap1">
|
|
|
|
|
<div class="wrap1_1">
|
|
|
|
|
<div class="wrap1_1_1">身份证地址</div>
|
|
|
|
|
<div class="wrap1_1_2">{{idCardInfo.path}}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="wrap1">
|
|
|
|
|
<div class="wrap1_1">
|
|
|
|
|
<div class="wrap1_1_1">有效日期</div>
|
|
|
|
|
<div class="wrap1_1_2">{{dayjs(idCardInfo.issueDate).format('YYYY年MM月DD日')}}-{{dayjs(idCardInfo.expirationDate).format('YYYY年MM月DD日')}}</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="content5">*自动识别内容,请仔细核对</div>
|
|
|
|
|
<div class="content6">证件即将过期,请尽快更新,否则将影响部分功能使用!</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
.one-content{
|
|
|
|
|
margin-bottom: 54px;
|
|
|
|
|
}
|
|
|
|
|
.content6 {
|
|
|
|
|
margin-top: 5px;
|
|
|
|
|
width: 100%;
|
|
|
|
@ -77,23 +131,28 @@ const afterRead=async (file)=>{
|
|
|
|
|
align-items: center;
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.content5 {
|
|
|
|
|
text-align: right;
|
|
|
|
|
font-size: 10px;
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
margin-top: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.content4 {
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
|
|
|
|
|
.wrap1 {
|
|
|
|
|
padding-left: 14px;
|
|
|
|
|
padding-right: 14px;
|
|
|
|
|
|
|
|
|
|
&:last-child .wrap1_1 {
|
|
|
|
|
border-bottom: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.wrap1_1 {
|
|
|
|
|
padding-top: 14px;
|
|
|
|
|
padding-bottom: 14px;
|
|
|
|
@ -106,6 +165,9 @@ const afterRead=async (file)=>{
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
}
|
|
|
|
|
.wrap1_1_1 {
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
border-right: #BBC5E0 solid 1px;
|
|
|
|
|
width: 92px;
|
|
|
|
|
font-size: 12px;
|
|
|
|
@ -116,6 +178,7 @@ const afterRead=async (file)=>{
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.content3 {
|
|
|
|
|
.wrap1 {
|
|
|
|
|
width: 332px;
|
|
|
|
@ -126,15 +189,18 @@ const afterRead=async (file)=>{
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
|
|
|
|
.wrap1_2 {
|
|
|
|
|
margin-top: 3px;
|
|
|
|
|
color: #2159C4;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.wrap1_1 {
|
|
|
|
|
width: 293px;
|
|
|
|
|
height: 170px;
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
.wrap1_1_2 {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
display: flex;
|
|
|
|
@ -149,18 +215,21 @@ const afterRead=async (file)=>{
|
|
|
|
|
bottom: 12px;
|
|
|
|
|
right: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.wrap1_1_1 {
|
|
|
|
|
img {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
width: 293px;
|
|
|
|
|
height: 170px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.content2 {
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
|
|
|
|
|
.wrap1 {
|
|
|
|
|
width: 332px;
|
|
|
|
|
height: 220px;
|
|
|
|
@ -170,15 +239,18 @@ const afterRead=async (file)=>{
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
|
|
|
|
.wrap1_2 {
|
|
|
|
|
margin-top: 3px;
|
|
|
|
|
color: #2159C4;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.wrap1_1 {
|
|
|
|
|
width: 293px;
|
|
|
|
|
height: 170px;
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
.wrap1_1_2 {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
display: flex;
|
|
|
|
@ -193,10 +265,11 @@ const afterRead=async (file)=>{
|
|
|
|
|
bottom: 12px;
|
|
|
|
|
right: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.wrap1_1_1 {
|
|
|
|
|
img {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
width: 293px;
|
|
|
|
|
height: 170px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|