612 lines
15 KiB
Vue
612 lines
15 KiB
Vue
<script setup>
|
||
import { showImagePreview } from 'vant';
|
||
import {ref,computed} 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 {areaList} from "@vant/area-data";
|
||
import { cloneDeep } from 'lodash';
|
||
import {useRouter} from "vue-router";
|
||
const router = useRouter();
|
||
const userStore = useUserStore()
|
||
const {submitReturnData,telNum,iDCardImage,temSubmitReturnData,idCardInfo} = storeToRefs(userStore);
|
||
const btnStatus=ref(0)
|
||
const isCountingDown = ref(false);
|
||
const countdownInterval = ref(null);
|
||
const code=ref('')
|
||
const timeLeft = ref(60);
|
||
const showBottom = ref(false)
|
||
const sendCodeApi=async ()=>{
|
||
const data={
|
||
TelNum:submitReturnData.value.phoneNum
|
||
}
|
||
const res=await send_code(data)
|
||
if (res.status===0){
|
||
}
|
||
}
|
||
const saveInfo=async ()=>{
|
||
const res=await save_register_info(submitReturnData.value)
|
||
if (res.status===0){
|
||
showToast({
|
||
message:'修改成功',
|
||
className: 'particulars-detail-popup'
|
||
});
|
||
}
|
||
}
|
||
const rightClick=async ()=>{
|
||
const data={
|
||
telNum:submitReturnData.value.phoneNum,
|
||
code:code.value
|
||
}
|
||
const res=await check_code(data)
|
||
if (res.status===0){
|
||
saveInfo()
|
||
}
|
||
}
|
||
const leftClick=()=>{
|
||
switch (btnStatus.value){
|
||
case 0:
|
||
temSubmitReturnData.value = cloneDeep(submitReturnData.value)
|
||
btnStatus.value=1
|
||
break
|
||
case 1:
|
||
submitReturnData.value=cloneDeep(temSubmitReturnData.value)
|
||
btnStatus.value=0
|
||
break
|
||
}
|
||
}
|
||
const btnLabel=computed(()=>{
|
||
switch (btnStatus.value){
|
||
case 0:
|
||
return '修改'
|
||
case 1:
|
||
return '取消'
|
||
}
|
||
})
|
||
const afterRead = async (file) => {
|
||
const res = await upload_img({
|
||
file: file.file,
|
||
source: "artwork",
|
||
type: 'image'
|
||
})
|
||
if (res.status === 0) {
|
||
submitReturnData.value.artistPhoto=res.data.ori_url
|
||
}
|
||
}
|
||
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 confirmAddress = (data) => {
|
||
submitReturnData.value.address=JSON.stringify(data.selectedOptions)
|
||
showBottom.value = false
|
||
}
|
||
const sendCode = async () => {
|
||
if (!isCountingDown.value){
|
||
if(!/^1[3-9]\d{9}$/.test(submitReturnData.value.phoneNum)){
|
||
showToast({
|
||
message:'请输入合规的手机号码',
|
||
className:'particulars-detail-popup'
|
||
});
|
||
return
|
||
}
|
||
await sendCodeApi()
|
||
|
||
}
|
||
isCountingDown.value = true;
|
||
countdownInterval.value = setInterval(() => {
|
||
if (timeLeft.value > 0) {
|
||
timeLeft.value--;
|
||
} else {
|
||
clearInterval(countdownInterval.value);
|
||
isCountingDown.value = false;
|
||
timeLeft.value = 60;
|
||
}
|
||
}, 1000);
|
||
};
|
||
const compareDate=(givenDate)=> {
|
||
const inputDate = dayjs(givenDate);
|
||
const now = dayjs();
|
||
|
||
if (inputDate.isBefore(now)) {
|
||
return '*身份证已到期，请及时更换→→→';
|
||
} else if (inputDate.isBefore(now.add(3, 'month'))) {
|
||
return '*身份证即将到期，请及时更换→→→';
|
||
} else {
|
||
return ''
|
||
}
|
||
}
|
||
const goRouter=()=>{
|
||
idCardInfo.value.realName=submitReturnData.value.artistName
|
||
idCardInfo.value.sex=submitReturnData.value.gender===1?'男':'女'
|
||
idCardInfo.value.iDNum=submitReturnData.value.idCard
|
||
idCardInfo.value.issueDate=submitReturnData.value.idCardStartDate
|
||
idCardInfo.value.expirationDate=submitReturnData.value.idCardEndDate
|
||
iDCardImage.value.front=submitReturnData.value.idCardPhoto
|
||
iDCardImage.value.back=submitReturnData.value.idCardBackPhoto
|
||
router.push(`/title-forward/replace-id-card`)
|
||
}
|
||
</script>
|
||
<template>
|
||
<div class="container">
|
||
<div class="content1">
|
||
报名日期：{{userStore.formatToCustomDate(submitReturnData.createdAt)}}
|
||
</div>
|
||
<div class="content2">
|
||
<div class="wrap1">
|
||
<div class="wrap1_1">身份证人像面</div>
|
||
<div class="wrap1_2"><img class="wrap1_2_1" :src="submitReturnData.idCardPhoto">
|
||
<img class="wrap1_2_2" @click="showImagePreview([submitReturnData.idCardPhoto])" src="@/assets/images/zu1179@2x.png" alt="">
|
||
</div>
|
||
</div>
|
||
<div class="wrap1">
|
||
<div class="wrap1_1">身份证国徽面</div>
|
||
<div class="wrap1_2"><img class="wrap1_2_1" :src="submitReturnData.idCardBackPhoto">
|
||
<img class="wrap1_2_2" @click="showImagePreview([submitReturnData.idCardBackPhoto])" src="@/assets/images/zu1179@2x.png" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="content3">
|
||
<div class="wrap1">
|
||
<div class="wrap1_1">
|
||
<div class="wrap1_1_1">姓名</div>
|
||
<div class="wrap1_1_2">{{submitReturnData.artistName}}</div>
|
||
</div>
|
||
</div>
|
||
<div class="wrap1">
|
||
<div class="wrap1_1">
|
||
<div class="wrap1_1_1">性别</div>
|
||
<div class="wrap1_1_2">{{submitReturnData.gender===1?'男':'女'}}</div>
|
||
</div>
|
||
</div>
|
||
<div class="wrap1">
|
||
<div class="wrap1_1">
|
||
<div class="wrap1_1_1">身份证号码</div>
|
||
<div class="wrap1_1_2">{{submitReturnData.idCard}}</div>
|
||
</div>
|
||
</div>
|
||
<div class="wrap1">
|
||
<div class="wrap1_1">
|
||
<div class="wrap1_1_1">有效日期</div>
|
||
<div class="wrap1_1_2">{{submitReturnData.idCardStartDate?dayjs(submitReturnData.idCardStartDate).format('YYYY年MM月DD日'):''}}-{{submitReturnData.idCardEndDate?dayjs(submitReturnData.idCardEndDate).format('YYYY年MM月DD日'):''}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="content7" v-if="compareDate(submitReturnData.idCardEndDate)">
|
||
<div class="wrap1">{{compareDate(submitReturnData.idCardEndDate)}}</div>
|
||
<div class="wrap2" @click="goRouter">更换身份证</div>
|
||
</div>
|
||
<div class="content4">
|
||
<div class="wrap1">近照</div>
|
||
<div class="wrap2">
|
||
<div class="wrap2_1">
|
||
<img :src="submitReturnData.artistPhoto" alt="">
|
||
</div>
|
||
<div v-show="btnStatus===0" class="wrap2_2">
|
||
<img src="@/assets/images/zu1181@2x.png" @click="showImagePreview([submitReturnData.artistPhoto])" alt="">
|
||
</div>
|
||
<div class="wrap2_3" v-show="btnStatus===1">
|
||
<van-uploader :afterRead="afterRead">
|
||
<div>更换</div>
|
||
</van-uploader>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<van-popup
|
||
v-model:show="showBottom"
|
||
position="bottom"
|
||
>
|
||
<van-area title="请选择通讯地址" @cancel="showBottom=false"
|
||
@confirm="confirmAddress" :area-list="areaList"/>
|
||
</van-popup>
|
||
<div class="content6">
|
||
<div class="wrap1">
|
||
<div class="wrap1_1">
|
||
<div class="wrap1_1_1">手机号 <span class="c86">(+86)</span> </div>
|
||
<div class="wrap1_1_2">
|
||
<input placeholder="手机号" v-model="submitReturnData.phoneNum" v-no-space>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="wrap3" v-show="btnStatus===1">
|
||
<div class="wrap3_1">
|
||
<div class="wrap2_1">验证码 </div>
|
||
<div class="wrap2_2" >
|
||
<input placeholder="验证码" v-model="code" v-no-space>
|
||
</div>
|
||
<div class="wrap2_3" @click="sendCode"> {{ isCountingDown ? `(${timeLeft})重新发送` : '发送验证码' }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="wrap1">
|
||
<div class="wrap1_1">
|
||
<div class="wrap1_1_1">通讯地址</div>
|
||
<div class="wrap1_1_2">{{JSON.parse(submitReturnData.address).map(x=>x.text).join('/')}}
|
||
</div>
|
||
<div class="wrap1_1_3" v-show="btnStatus===1" @click="showBottom=true">
|
||
<img src="@/assets/images/gh123.png" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="wrap2">
|
||
<div class="wrap2_1">详细地址</div>
|
||
<div class="wrap2_2">
|
||
<textarea :disabled="btnStatus!==1" rows="4" cols="50" v-model="submitReturnData.address1" placeholder="在此输入详细地址">
|
||
</textarea>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="content5">
|
||
<div class="wrap1" @click="leftClick" :class="[`btn${btnStatus}`]">{{ btnLabel }}</div>
|
||
<div class="wrap2" @click="rightClick">确认</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
.container {
|
||
padding: 14px 22px 75px;
|
||
.content7{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 10px;
|
||
.wrap2{
|
||
font-size: 14px;
|
||
color: #fff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 116px;
|
||
height: 30px;
|
||
background-color:#E74747 ;
|
||
border-radius: 15px;
|
||
}
|
||
.wrap1{
|
||
font-size: 10px;
|
||
color: #E74747;
|
||
}
|
||
}
|
||
.content6 {
|
||
margin-top: 10px;
|
||
background-color: #fff;
|
||
overflow: hidden;
|
||
border-radius: 12px;
|
||
.wrap3{
|
||
|
||
padding-left: 14px;
|
||
padding-right: 14px;
|
||
.wrap3_1{
|
||
padding-top: 14px;
|
||
padding-bottom: 14px;
|
||
display: flex;
|
||
border-bottom: 1px solid #BBC5E0;
|
||
}
|
||
.wrap2_1{
|
||
|
||
flex: 0 0 auto;
|
||
font-size: 12px;
|
||
width: 92px;
|
||
border-right: 1px solid #BBC5E0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
.wrap2_1_1{
|
||
font-size: 10px;
|
||
}
|
||
}
|
||
.wrap2_3{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
white-space: nowrap;
|
||
color: #2159C4;
|
||
font-size: 12px;
|
||
}
|
||
.wrap2_2{
|
||
color: #24437E;
|
||
font-size: 12px;
|
||
flex-shrink: 1;
|
||
padding-left: 10px;
|
||
input{
|
||
width: 100%;
|
||
border: none;
|
||
&::placeholder{
|
||
color: #CECECE;
|
||
font-size: 12px;
|
||
}
|
||
&:focus{
|
||
color: #24437E;
|
||
font-size: 12px;
|
||
outline: none;
|
||
border: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.wrap2{
|
||
padding-left: 14px;
|
||
padding-right: 14px;
|
||
.wrap2_1{
|
||
padding-top: 14px;
|
||
padding-bottom: 14px;
|
||
padding-left: 10px;
|
||
color: #000;
|
||
font-size: 12px;
|
||
}
|
||
.wrap2_2{
|
||
textarea {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 3px 10px 11px 10px;
|
||
border: none;
|
||
color: #24437E;
|
||
font-size: 12px;
|
||
&::placeholder {
|
||
color: #CECECE;
|
||
font-size: 12px;
|
||
}
|
||
&:disabled{
|
||
background: none;
|
||
}
|
||
&:focus {
|
||
color: #24437E;
|
||
font-size: 12px;
|
||
outline: none;
|
||
border: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.wrap1 {
|
||
padding-left: 14px;
|
||
padding-right: 14px;
|
||
|
||
&:last-child .wrap1_1 {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.wrap1_1 {
|
||
padding-top: 14px;
|
||
padding-bottom: 14px;
|
||
border-bottom: #BBC5E0 solid 1px;
|
||
display: flex;
|
||
.wrap1_1_3{
|
||
margin-left: auto;
|
||
img{
|
||
width: 32px;
|
||
height: 16px;
|
||
}
|
||
}
|
||
.wrap1_1_2 {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding-left: 10px;
|
||
color: #24437E;
|
||
font-size: 12px;
|
||
input{
|
||
width: 100%;
|
||
border: none;
|
||
&::placeholder{
|
||
color: #CECECE;
|
||
font-size: 12px;
|
||
}
|
||
&:focus{
|
||
color: #24437E;
|
||
font-size: 12px;
|
||
outline: none;
|
||
border: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
.wrap1_1_1 {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-shrink: 0;
|
||
border-right: #BBC5E0 solid 1px;
|
||
width: 92px;
|
||
font-size: 12px;
|
||
color: #000;
|
||
padding-left: 10px;
|
||
.c86{
|
||
font-size: 10px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.content5{
|
||
margin-top: 42px;
|
||
display: flex;
|
||
.wrap2{
|
||
margin-left: auto;
|
||
width: 200px;
|
||
height: 30px;
|
||
border-radius: 15px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
background-color: #2159C4;
|
||
}
|
||
.wrap1{
|
||
border-radius: 15px;
|
||
width: 116px;
|
||
height: 30px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
color: #fff;
|
||
&.btn0{
|
||
background-color: #24437E;
|
||
}
|
||
&.btn1{
|
||
background-color: #5A5A5A;
|
||
}
|
||
}
|
||
}
|
||
.content4 {
|
||
margin-top: 10px;
|
||
background-color: #fff;
|
||
border-radius: 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 10px 22px 25px;
|
||
|
||
.wrap2 {
|
||
margin-top: 3px;
|
||
border-radius: 10px;
|
||
width: 100%;
|
||
height: 325px;
|
||
border: 3px solid #2159C4;
|
||
position: relative;
|
||
background-color: #000;
|
||
overflow: hidden;
|
||
.wrap2_1{
|
||
width: 100%;
|
||
height: 100%;
|
||
img{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.wrap2_3{
|
||
color: #fff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
position: absolute;
|
||
width: 66px;
|
||
height: 32px;
|
||
background-color: #2159C4;
|
||
border-radius: 20px;
|
||
bottom: 15px;
|
||
right: 14px;
|
||
}
|
||
.wrap2_2{
|
||
position: absolute;
|
||
bottom: 16px;
|
||
right: 16px;
|
||
img{
|
||
width: 16px;
|
||
height: 16px;
|
||
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
|
||
.wrap1 {
|
||
font-size: 10px;
|
||
color: #2159C4;
|
||
}
|
||
}
|
||
|
||
.content3 {
|
||
margin-top: 10px;
|
||
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;
|
||
border-bottom: #BBC5E0 solid 1px;
|
||
display: flex;
|
||
|
||
.wrap1_1_2 {
|
||
padding-left: 10px;
|
||
color: #24437E;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.wrap1_1_1 {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-shrink: 0;
|
||
border-right: #BBC5E0 solid 1px;
|
||
width: 92px;
|
||
font-size: 12px;
|
||
color: #000;
|
||
padding-left: 10px;
|
||
.c86{
|
||
font-size: 10px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.content2 {
|
||
margin-top: 10px;
|
||
background-color: #fff;
|
||
border-radius: 10px;
|
||
padding: 12px 22px 14px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.wrap1 {
|
||
width: 136px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.wrap1_2 {
|
||
margin-top: 3px;
|
||
height: 79px;
|
||
position: relative;
|
||
|
||
.wrap1_2_2 {
|
||
width: 16px;
|
||
height: 16px;
|
||
position: absolute;
|
||
bottom: 5px;
|
||
right: 6px;
|
||
}
|
||
|
||
.wrap1_2_1 {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.wrap1_1 {
|
||
font-size: 10px;
|
||
color: #2159C4;
|
||
}
|
||
}
|
||
}
|
||
|
||
.content1 {
|
||
height: 46px;
|
||
background-color: #2159C4;
|
||
border-radius: 10px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
color: #fff;
|
||
}
|
||
}
|
||
</style>
|