fix idback image bg,fix detail getPageData
This commit is contained in:
张 元山
parent
bb214ae951
commit
99da79e1cf
@ -1,11 +1,11 @@
|
||||
<script setup>
|
||||
import { showImagePreview } from 'vant';
|
||||
import { ref, computed, watch } from "vue";
|
||||
import { ref, computed, watch, onBeforeMount } from "vue";
|
||||
import { useUserStore } from '@/stores/userStore.js'
|
||||
import { storeToRefs } from "pinia";
|
||||
import dayjs from "dayjs";
|
||||
import { showToast } from "vant";
|
||||
import { check_code, save_register_info, send_code, upload_img } from "@/apis/index.js";
|
||||
import { check_code, save_register_info, send_code, upload_img, check_by_phone } from "@/apis/index.js";
|
||||
import { areaList } from "@vant/area-data";
|
||||
import { cloneDeep } from 'lodash';
|
||||
import { useRouter } from "vue-router";
|
||||
@ -16,6 +16,9 @@ const btnStatus = ref(0)
|
||||
const isCountingDown = ref(false);
|
||||
const countdownInterval = ref(null);
|
||||
const code = ref('')
|
||||
onBeforeMount(() => {
|
||||
getPageData()
|
||||
})
|
||||
watch(() => code.value, (newVal) => {
|
||||
if (newVal.length > 6) {
|
||||
code.value = newVal.slice(0, 6)
|
||||
@ -41,10 +44,20 @@ const saveInfo = async () => {
|
||||
btnStatus.value = 0
|
||||
if (submitReturnData.value.phoneNum !== temSubmitReturnData.value.phoneNum) {
|
||||
router.replace('/title-forward/logon')
|
||||
} else {
|
||||
getPageData()
|
||||
}
|
||||
temSubmitReturnData.value = submitReturnData.value
|
||||
}
|
||||
}
|
||||
const getPageData = async () => {
|
||||
const res = await check_by_phone({
|
||||
phoneNum: submitReturnData.value.phoneNum
|
||||
})
|
||||
if (res.status === 0) {
|
||||
submitReturnData.value = res.data.data
|
||||
}
|
||||
}
|
||||
const rightClick = async () => {
|
||||
if (!/^1[3-9]\d{9}$/.test(submitReturnData.value.phoneNum)) {
|
||||
showToast({
|
||||
@ -66,9 +79,7 @@ const rightClick = async () => {
|
||||
}
|
||||
const res = await check_code(data)
|
||||
if (res.status === 0) {
|
||||
|
||||
saveInfo()
|
||||
|
||||
}
|
||||
}
|
||||
const leftClick = () => {
|
||||
|
||||
@ -1,17 +1,18 @@
|
||||
<script setup>
|
||||
import {scan_id_card, upload_img} from "@/apis/index.js";
|
||||
import {useUserStore} from '@/stores/userStore.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 defaultImage2 from '@/assets/images/zu1169@2x.png';
|
||||
import storage from "@/utils/storage.js";
|
||||
import {storeToRefs} from "pinia";
|
||||
import {ref} from "vue";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { ref } from "vue";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
const userStore = useUserStore()
|
||||
const {idCardInfo,iDCardImage} = storeToRefs(userStore);
|
||||
const Num=ref(0)
|
||||
const { idCardInfo, iDCardImage } = storeToRefs(userStore);
|
||||
const Num = ref(0)
|
||||
const afterRead = async (file, num) => {
|
||||
Num.value=num
|
||||
Num.value = num
|
||||
const res = await upload_img({
|
||||
file: file.file,
|
||||
source: "artwork",
|
||||
@ -26,13 +27,13 @@ const afterRead = async (file, num) => {
|
||||
await cardFace(res.data.ori_url, num)
|
||||
}
|
||||
}
|
||||
const compareDate=(givenDate)=> {
|
||||
const compareDate = (givenDate) => {
|
||||
const inputDate = dayjs(givenDate);
|
||||
const now = dayjs();
|
||||
if (inputDate.isBefore(now)) {
|
||||
return '证件已到期，请尽快更新，否则将影响部分功能使用！';
|
||||
return '证件已到期，请尽快更新，否则将影响部分功能使用！';
|
||||
} else if (inputDate.isBefore(now.add(3, 'month'))) {
|
||||
return '证件即将到期，请尽快更新，否则将影响部分功能使用！';
|
||||
return '证件即将到期，请尽快更新，否则将影响部分功能使用！';
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
@ -44,14 +45,14 @@ const cardFace = async (img, num) => {
|
||||
})
|
||||
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
|
||||
idCardInfo.value = res.data
|
||||
} else if (res.data.expirationDate || res.data.issueDate) {
|
||||
idCardInfo.value.expirationDate = res.data.expirationDate
|
||||
idCardInfo.value.issueDate = res.data.issueDate
|
||||
}
|
||||
}else if (res.status === 1) {
|
||||
iDCardImage.value.front=''
|
||||
iDCardImage.value.back=''
|
||||
} else if (res.status === 1) {
|
||||
iDCardImage.value.front = ''
|
||||
iDCardImage.value.back = ''
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -62,9 +63,11 @@ const cardFace = async (img, num) => {
|
||||
<div class="wrap1">
|
||||
<div class="wrap1_1">
|
||||
<div class="wrap1_1_1">
|
||||
<img :src="iDCardImage.front || defaultImage1" alt="">
|
||||
<img :src="iDCardImage.front || defaultImage1"
|
||||
alt="">
|
||||
</div>
|
||||
<div class="wrap1_1_2" v-if="iDCardImage.front">更换</div>
|
||||
<div class="wrap1_1_2"
|
||||
v-if="iDCardImage.front">更换</div>
|
||||
</div>
|
||||
<div class="wrap1_2">上传身份证人像面</div>
|
||||
</div>
|
||||
@ -75,44 +78,47 @@ const cardFace = async (img, num) => {
|
||||
<div class="wrap1">
|
||||
<div class="wrap1_1">
|
||||
<div class="wrap1_1_1">
|
||||
<img :src="iDCardImage.back || defaultImage1" alt="">
|
||||
<img :src="iDCardImage.back || defaultImage2"
|
||||
alt="">
|
||||
</div>
|
||||
<div class="wrap1_1_2" v-if="iDCardImage.back">更换</div>
|
||||
<div class="wrap1_1_2"
|
||||
v-if="iDCardImage.back">更换</div>
|
||||
</div>
|
||||
<div class="wrap1_2">上传身份证国徽面</div>
|
||||
</div>
|
||||
</van-uploader>
|
||||
</div>
|
||||
<div class="content4" v-if="iDCardImage.front&&iDCardImage.back">
|
||||
<div class="wrap1">
|
||||
<div class="wrap1_1">
|
||||
<div class="wrap1_1_1">姓名</div>
|
||||
<div class="wrap1_1_2">{{ idCardInfo.realName }}</div>
|
||||
</div>
|
||||
<div class="content4"
|
||||
v-if="iDCardImage.front&&iDCardImage.back">
|
||||
<div class="wrap1">
|
||||
<div class="wrap1_1">
|
||||
<div class="wrap1_1_1">姓名</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">{{idCardInfo.sex}}</div>
|
||||
</div>
|
||||
<div class="wrap1">
|
||||
<div class="wrap1_1">
|
||||
<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.issueDate?dayjs(idCardInfo.issueDate).format('YYYY年MM月DD日'):''}}-{{idCardInfo.expirationDate?dayjs(idCardInfo.expirationDate).format('YYYY年MM月DD日'):''}}</div>
|
||||
</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.issueDate?dayjs(idCardInfo.issueDate).format('YYYY年MM月DD日'):''}}-{{idCardInfo.expirationDate?dayjs(idCardInfo.expirationDate).format('YYYY年MM月DD日'):''}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content5">*自动识别内容，请仔细核对</div>
|
||||
<div class="content6" v-if="iDCardImage.front&&iDCardImage.back&&compareDate(idCardInfo.expirationDate)">{{compareDate(idCardInfo.expirationDate)}}</div>
|
||||
|
||||
<div class="content5">*自动识别内容，请仔细核对</div>
|
||||
<div class="content6"
|
||||
v-if="iDCardImage.front&&iDCardImage.back&&compareDate(idCardInfo.expirationDate)">{{compareDate(idCardInfo.expirationDate)}}</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
@ -122,7 +128,7 @@ const cardFace = async (img, num) => {
|
||||
margin-top: 5px;
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
background-color: #E74747;
|
||||
background-color: #e74747;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
@ -134,7 +140,7 @@ const cardFace = async (img, num) => {
|
||||
.content5 {
|
||||
text-align: right;
|
||||
font-size: 10px;
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
@ -155,24 +161,23 @@ const cardFace = async (img, num) => {
|
||||
.wrap1_1 {
|
||||
padding-top: 14px;
|
||||
padding-bottom: 14px;
|
||||
border-bottom: #BBC5E0 solid 1px;
|
||||
border-bottom: #bbc5e0 solid 1px;
|
||||
display: flex;
|
||||
|
||||
.wrap1_1_2 {
|
||||
padding-left: 10px;
|
||||
color: #24437E;
|
||||
color: #24437e;
|
||||
font-size: 12px;
|
||||
}
|
||||
.wrap1_1_1 {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-right: #BBC5E0 solid 1px;
|
||||
border-right: #bbc5e0 solid 1px;
|
||||
width: 92px;
|
||||
font-size: 12px;
|
||||
color: #000;
|
||||
padding-left: 10px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -191,7 +196,7 @@ const cardFace = async (img, num) => {
|
||||
|
||||
.wrap1_2 {
|
||||
margin-top: 3px;
|
||||
color: #2159C4;
|
||||
color: #2159c4;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@ -206,7 +211,7 @@ const cardFace = async (img, num) => {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: white;
|
||||
background-color: #2159C4;
|
||||
background-color: #2159c4;
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
border-radius: 20px;
|
||||
@ -221,7 +226,6 @@ const cardFace = async (img, num) => {
|
||||
height: 170px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -241,7 +245,7 @@ const cardFace = async (img, num) => {
|
||||
|
||||
.wrap1_2 {
|
||||
margin-top: 3px;
|
||||
color: #2159C4;
|
||||
color: #2159c4;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@ -256,7 +260,7 @@ const cardFace = async (img, num) => {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: white;
|
||||
background-color: #2159C4;
|
||||
background-color: #2159c4;
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
border-radius: 20px;
|
||||
@ -271,7 +275,6 @@ const cardFace = async (img, num) => {
|
||||
height: 170px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user