xingyy/sign-stream
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
92de3d4519
sign-stream/src/views/reg-details/index.vue

612 lines
15 KiB
Vue
Raw Normal View History

submit
2024-02-19 09:00:40 +00:00
<script setup>
submit
2024-02-21 03:30:59 +00:00
import { showImagePreview } from 'vant';
submit
2024-02-20 09:00:39 +00:00
import {ref,computed} from "vue";
import {useUserStore} from '@/stores/userStore.js'
import {storeToRefs} from "pinia";
import dayjs from "dayjs";
import {showToast} from "vant";
submit
2024-02-21 03:30:59 +00:00
import {check_code, save_register_info, send_code, upload_img} from "@/apis/index.js";
submit
2024-02-20 09:00:39 +00:00
import {areaList} from "@vant/area-data";
import { cloneDeep } from 'lodash';
import {useRouter} from "vue-router";
const router = useRouter();
const userStore = useUserStore()
submit
2024-02-21 03:30:59 +00:00
const {submitReturnData,telNum,iDCardImage,temSubmitReturnData,idCardInfo} = storeToRefs(userStore);
submit
2024-02-20 09:00:39 +00:00
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={
submit
2024-02-21 03:30:59 +00:00
TelNum:submitReturnData.value.phoneNum
submit
2024-02-20 09:00:39 +00:00
}
const res=await send_code(data)
if (res.status===0){
}
}
submit
2024-02-21 03:30:59 +00:00
const saveInfo=async ()=>{
submit
2024-02-20 09:00:39 +00:00
const res=await save_register_info(submitReturnData.value)
if (res.status===0){
showToast({
message:'修改成功',
className: 'particulars-detail-popup'
});
}
}
submit
2024-02-21 03:30:59 +00:00
const rightClick=async ()=>{
const data={
telNum:submitReturnData.value.phoneNum,
code:code.value
}
const res=await check_code(data)
if (res.status===0){
saveInfo()
}
}
submit
2024-02-20 09:00:39 +00:00
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
}
}
submit
2024-02-21 03:30:59 +00:00
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;
}
submit
2024-02-20 09:00:39 +00:00
const confirmAddress = (data) => {
submitReturnData.value.address=JSON.stringify(data.selectedOptions)
showBottom.value = false
}
const sendCode = async () => {
if (!isCountingDown.value){
submit
2024-02-21 03:30:59 +00:00
if(!/^1[3-9]\d{9}$/.test(submitReturnData.value.phoneNum)){
submit
2024-02-20 09:00:39 +00:00
showToast({
message:'请输入合规的手机号码',
className:'particulars-detail-popup'
});
return
}
await sendCodeApi()
submit
2024-02-19 09:00:40 +00:00
submit
2024-02-20 09:00:39 +00:00
}
isCountingDown.value = true;
countdownInterval.value = setInterval(() => {
if (timeLeft.value > 0) {
timeLeft.value--;
} else {
clearInterval(countdownInterval.value);
isCountingDown.value = false;
timeLeft.value = 60;
}
}, 1000);
};
submit
2024-02-21 03:30:59 +00:00
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 ''
}
}
submit
2024-02-20 09:00:39 +00:00
const goRouter=()=>{
submit
2024-02-21 03:30:59 +00:00
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
submit
2024-02-20 09:00:39 +00:00
router.push(`/title-forward/replace-id-card`)
}
submit
2024-02-19 09:00:40 +00:00
</script>
<template>
<div class="container">
<div class="content1">
submit
2024-02-20 09:00:39 +00:00
报名日期：{{userStore.formatToCustomDate(submitReturnData.createdAt)}}
submit
2024-02-19 09:00:40 +00:00
</div>
<div class="content2">
<div class="wrap1">
<div class="wrap1_1">身份证人像面</div>
submit
2024-02-20 09:00:39 +00:00
<div class="wrap1_2"><img class="wrap1_2_1" :src="submitReturnData.idCardPhoto">
submit
2024-02-21 03:30:59 +00:00
<img class="wrap1_2_2" @click="showImagePreview([submitReturnData.idCardPhoto])" src="@/assets/images/zu1179@2x.png" alt="">
submit
2024-02-19 09:00:40 +00:00
</div>
</div>
<div class="wrap1">
submit
2024-02-20 09:00:39 +00:00
<div class="wrap1_1">身份证国徽面</div>
<div class="wrap1_2"><img class="wrap1_2_1" :src="submitReturnData.idCardBackPhoto">
submit
2024-02-21 03:30:59 +00:00
<img class="wrap1_2_2" @click="showImagePreview([submitReturnData.idCardBackPhoto])" src="@/assets/images/zu1179@2x.png" alt="">
submit
2024-02-19 09:00:40 +00:00
</div>
</div>
</div>
<div class="content3">
<div class="wrap1">
<div class="wrap1_1">
<div class="wrap1_1_1">姓名</div>
submit
2024-02-20 09:00:39 +00:00
<div class="wrap1_1_2">{{submitReturnData.artistName}}</div>
submit
2024-02-19 09:00:40 +00:00
</div>
</div>
<div class="wrap1">
<div class="wrap1_1">
<div class="wrap1_1_1">性别</div>
submit
2024-02-20 09:00:39 +00:00
<div class="wrap1_1_2">{{submitReturnData.gender===1?'男':'女'}}</div>
submit
2024-02-19 09:00:40 +00:00
</div>
</div>
<div class="wrap1">
<div class="wrap1_1">
<div class="wrap1_1_1">身份证号码</div>
submit
2024-02-20 09:00:39 +00:00
<div class="wrap1_1_2">{{submitReturnData.idCard}}</div>
submit
2024-02-19 09:00:40 +00:00
</div>
</div>
<div class="wrap1">
<div class="wrap1_1">
submit
2024-02-20 09:00:39 +00:00
<div class="wrap1_1_1">有效日期</div>
submit
2024-02-21 03:54:09 +00:00
<div class="wrap1_1_2">{{submitReturnData.idCardStartDate?dayjs(submitReturnData.idCardStartDate).format('YYYY年MM月DD日'):''}}-{{submitReturnData.idCardEndDate?dayjs(submitReturnData.idCardEndDate).format('YYYY年MM月DD日'):''}}</div>
submit
2024-02-20 09:00:39 +00:00
</div>
</div>
</div>
submit
2024-02-21 03:30:59 +00:00
<div class="content7" v-if="compareDate(submitReturnData.idCardEndDate)">
<div class="wrap1">{{compareDate(submitReturnData.idCardEndDate)}}</div>
submit
2024-02-20 09:00:39 +00:00
<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">
submit
2024-02-21 03:30:59 +00:00
<img src="@/assets/images/zu1181@2x.png" @click="showImagePreview([submitReturnData.artistPhoto])" alt="">
submit
2024-02-20 09:00:39 +00:00
</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>
submit
2024-02-19 09:00:40 +00:00
</div>
submit
2024-02-20 09:00:39 +00:00
<div class="wrap2_3" @click="sendCode"> {{ isCountingDown ? `(${timeLeft})重新发送` : '发送验证码' }}</div>
submit
2024-02-19 09:00:40 +00:00
</div>
</div>
<div class="wrap1">
<div class="wrap1_1">
submit
2024-02-20 09:00:39 +00:00
<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>
submit
2024-02-19 09:00:40 +00:00
</div>
</div>
<div class="wrap2">
submit
2024-02-20 09:00:39 +00:00
<div class="wrap2_1">详细地址</div>
<div class="wrap2_2">
<textarea :disabled="btnStatus!==1" rows="4" cols="50" v-model="submitReturnData.address1" placeholder="在此输入详细地址">
</textarea>
</div>
submit
2024-02-19 09:00:40 +00:00
</div>
submit
2024-02-20 09:00:39 +00:00
</div>
<div class="content5">
<div class="wrap1" @click="leftClick" :class="[`btn${btnStatus}`]">{{ btnLabel }}</div>
<div class="wrap2" @click="rightClick">确认</div>
submit
2024-02-19 09:00:40 +00:00
</div>
</div>
</template>
<style scoped lang="scss">
.container {
padding: 14px 22px 75px;
submit
2024-02-20 09:00:39 +00:00
.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{
submit
2024-02-19 09:00:40 +00:00
submit
2024-02-20 09:00:39 +00:00
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;
}
}
}
submit
2024-02-19 09:00:40 +00:00
.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;
submit
2024-02-20 09:00:39 +00:00
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;
}
}
submit
2024-02-19 09:00:40 +00:00
}
.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;
submit
2024-02-20 09:00:39 +00:00
.c86{
font-size: 10px;
}
submit
2024-02-19 09:00:40 +00:00
}
}
}
}
.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>
Reference in New Issue Copy Permalink