submit
This commit is contained in:
parent
3480b40d32
commit
1a731a61e1
11
package-lock.json
generated
11
package-lock.json
generated
@ -12,6 +12,7 @@
|
||||
"@varlet/ui": "^2.22.2",
|
||||
"axios": "^1.6.7",
|
||||
"dayjs": "^1.11.10",
|
||||
"lodash": "^4.17.21",
|
||||
"normalize.css": "^8.0.1",
|
||||
"pinia": "^2.1.7",
|
||||
"vant": "^4.8.4",
|
||||
@ -1212,6 +1213,11 @@
|
||||
"node": ">=14"
|
||||
}
|
||||
},
|
||||
"node_modules/lodash": {
|
||||
"version": "4.17.21",
|
||||
"resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
|
||||
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
|
||||
},
|
||||
"node_modules/magic-string": {
|
||||
"version": "0.30.5",
|
||||
"resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.5.tgz",
|
||||
@ -2596,6 +2602,11 @@
|
||||
"integrity": "sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==",
|
||||
"dev": true
|
||||
},
|
||||
"lodash": {
|
||||
"version": "4.17.21",
|
||||
"resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
|
||||
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
|
||||
},
|
||||
"magic-string": {
|
||||
"version": "0.30.5",
|
||||
"resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.5.tgz",
|
||||
|
@ -13,6 +13,7 @@
|
||||
"@varlet/ui": "^2.22.2",
|
||||
"axios": "^1.6.7",
|
||||
"dayjs": "^1.11.10",
|
||||
"lodash": "^4.17.21",
|
||||
"normalize.css": "^8.0.1",
|
||||
"pinia": "^2.1.7",
|
||||
"vant": "^4.8.4",
|
||||
|
@ -30,3 +30,17 @@ export const scan_id_card = (data) => {
|
||||
data
|
||||
})
|
||||
}
|
||||
export const save_register_info = (data) => {
|
||||
return request({
|
||||
url: '/register/save_register_info',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
export const check_by_phone = (data) => {
|
||||
return request({
|
||||
url: '/register/check_by_phone',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
BIN
src/assets/images/gh123.png
Normal file
BIN
src/assets/images/gh123.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 4.3 KiB |
BIN
src/assets/images/zu1181@2x.png
Normal file
BIN
src/assets/images/zu1181@2x.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 988 B |
@ -25,6 +25,11 @@ const routes = [
|
||||
path: 'upload-id-card/:active',
|
||||
meta: { title: '上传身份证' },
|
||||
component: () => import('@/views/upload-id-card/index.vue')
|
||||
},
|
||||
{
|
||||
path: 'replace-id-card',
|
||||
meta: { title: '更换身份证' },
|
||||
component: () => import('@/views/replace-id-card/index.vue')
|
||||
}
|
||||
]
|
||||
}
|
||||
|
@ -1,12 +1,28 @@
|
||||
import { defineStore } from 'pinia';
|
||||
import {ref} from "vue";
|
||||
|
||||
import {ref,watch} from "vue";
|
||||
import dayjs from 'dayjs';
|
||||
import 'dayjs/locale/zh-cn';
|
||||
import storage from "@/utils/storage.js"; // 导入中文语言包
|
||||
dayjs.locale('zh-cn'); // 使用中文语言包
|
||||
export const useUserStore = defineStore('user', ()=>{
|
||||
const idCardInfo=ref({})
|
||||
const iDCardImage=ref({
|
||||
front:'',
|
||||
back:''
|
||||
})
|
||||
const formatToCustomDate=(dateString)=> {
|
||||
const date = dayjs(dateString);
|
||||
const amOrPm = date.hour() < 12 ? 'AM' : 'PM';
|
||||
return date.format(`YYYY年MM月DD日, hh:mm`) + amOrPm;
|
||||
}
|
||||
const telNum=ref('')
|
||||
const selectAddress=ref(null)
|
||||
const recentPhoto=ref('')
|
||||
return {idCardInfo,iDCardImage,recentPhoto}
|
||||
const detailAddress=ref('')
|
||||
const submitReturnData=ref(storage.getItem('submitReturnData'))
|
||||
const temSubmitReturnData=ref(null)
|
||||
watch(submitReturnData,()=>{
|
||||
storage.setItem('submitReturnData',submitReturnData.value)
|
||||
})
|
||||
return {idCardInfo,iDCardImage,recentPhoto,telNum,selectAddress,detailAddress,submitReturnData,formatToCustomDate,temSubmitReturnData}
|
||||
});
|
||||
|
@ -2,13 +2,16 @@
|
||||
import { useRouter } from 'vue-router';
|
||||
import { showToast } from 'vant';
|
||||
import storage from '@/utils/storage.js';
|
||||
import {useUserStore} from '@/stores/userStore.js'
|
||||
import {storeToRefs} from "pinia";
|
||||
const userStore = useUserStore()
|
||||
const {telNum,submitReturnData} = storeToRefs(userStore);
|
||||
import {ref,onBeforeUnmount} from "vue";
|
||||
import {check_code, send_code} from "@/apis/index.js";
|
||||
import {check_by_phone, check_code, send_code} from "@/apis/index.js";
|
||||
const router = useRouter();
|
||||
const isCountingDown = ref(false);
|
||||
const timeLeft = ref(60);
|
||||
const countdownInterval = ref(null);
|
||||
const telNum=ref('')
|
||||
const code=ref('')
|
||||
const sendCodeApi=async ()=>{
|
||||
const data={
|
||||
@ -41,16 +44,30 @@ const sendCode = async () => {
|
||||
}
|
||||
}, 1000);
|
||||
};
|
||||
const isSignUp=async ()=>{
|
||||
const res=await check_by_phone({
|
||||
phoneNum:telNum.value
|
||||
})
|
||||
if (res.status===0){
|
||||
if (res.data.isExist){
|
||||
submitReturnData.value=res.data.data
|
||||
router.push(`/title-forward/reg-details`)
|
||||
}else {
|
||||
router.push(`/title-forward/upload-id-card/${0}`)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
const goRouter=async ()=>{
|
||||
const data={
|
||||
telNum:telNum.value,
|
||||
code:code.value
|
||||
}
|
||||
const res=await check_code(data)
|
||||
/*const res=await check_code(data)
|
||||
if (res.status===0){
|
||||
|
||||
}
|
||||
router.push(`/title-forward/upload-id-card/${0}`)
|
||||
isSignUp()
|
||||
}*/
|
||||
isSignUp()
|
||||
}
|
||||
onBeforeUnmount(() => {
|
||||
clearInterval(countdownInterval.value);
|
||||
|
@ -1,23 +1,115 @@
|
||||
<script setup>
|
||||
import defaultImage1 from '@/assets/images/zu1172@2x.png';
|
||||
import {ref,computed} from "vue";
|
||||
import {useUserStore} from '@/stores/userStore.js'
|
||||
import {storeToRefs} from "pinia";
|
||||
import dayjs from "dayjs";
|
||||
import {showToast} from "vant";
|
||||
import {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,selectAddress,temSubmitReturnData} = 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:telNum.value
|
||||
}
|
||||
const res=await send_code(data)
|
||||
if (res.status===0){
|
||||
}
|
||||
}
|
||||
const rightClick=async ()=>{
|
||||
const res=await save_register_info(submitReturnData.value)
|
||||
if (res.status===0){
|
||||
showToast({
|
||||
message:'修改成功',
|
||||
className: 'particulars-detail-popup'
|
||||
});
|
||||
}
|
||||
}
|
||||
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 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(telNum.value)){
|
||||
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 goRouter=()=>{
|
||||
router.push(`/title-forward/replace-id-card`)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="content1">
|
||||
报名日期:2023年12月18日,09:33AM
|
||||
报名日期:{{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="defaultImage1">
|
||||
<div class="wrap1_2"><img class="wrap1_2_1" :src="submitReturnData.idCardPhoto">
|
||||
<img class="wrap1_2_2" 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="defaultImage1">
|
||||
<div class="wrap1_1">身份证国徽面</div>
|
||||
<div class="wrap1_2"><img class="wrap1_2_1" :src="submitReturnData.idCardBackPhoto">
|
||||
<img class="wrap1_2_2" src="@/assets/images/zu1179@2x.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
@ -26,52 +118,306 @@ import defaultImage1 from '@/assets/images/zu1172@2x.png';
|
||||
<div class="wrap1">
|
||||
<div class="wrap1_1">
|
||||
<div class="wrap1_1_1">姓名</div>
|
||||
<div class="wrap1_1_2">某某某</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">男/女</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">2912301283123821801</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_2">{{submitReturnData.idCard}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrap1">
|
||||
<div class="wrap1_1">
|
||||
<div class="wrap1_1_1">有效日期</div>
|
||||
<div class="wrap1_1_2">2023年12月16日-2026年12月16日</div>
|
||||
<div class="wrap1_1_2">{{dayjs(submitReturnData.idCardStartDate).format('YYYY年MM月DD日')}}-{{dayjs(submitReturnData.idCardEndDate).format('YYYY年MM月DD日')}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content7">
|
||||
<div class="wrap1">*身份证即将到期/已到期,请及时更换→→→</div>
|
||||
<div class="wrap2" @click="goRouter">更换身份证</div>
|
||||
</div>
|
||||
<div class="content4">
|
||||
<div class="wrap1">近照</div>
|
||||
<div class="wrap2">
|
||||
<div class="wrap2_1"></div>
|
||||
<div class="wrap2_2"></div>
|
||||
<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" 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;
|
||||
@ -87,6 +433,42 @@ import defaultImage1 from '@/assets/images/zu1172@2x.png';
|
||||
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 {
|
||||
@ -130,7 +512,9 @@ import defaultImage1 from '@/assets/images/zu1172@2x.png';
|
||||
font-size: 12px;
|
||||
color: #000;
|
||||
padding-left: 10px;
|
||||
|
||||
.c86{
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
23
src/views/replace-id-card/index.vue
Normal file
23
src/views/replace-id-card/index.vue
Normal file
@ -0,0 +1,23 @@
|
||||
<script setup>
|
||||
import one from '@/views/upload-id-card/content/one.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="content1">
|
||||
<one></one>
|
||||
</div>
|
||||
<div class="content2">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
padding-top: 22px;
|
||||
padding-left: 22px;
|
||||
padding-right: 22px;
|
||||
|
||||
}
|
||||
</style>
|
@ -1,10 +1,13 @@
|
||||
<script setup>
|
||||
|
||||
import {useUserStore} from '@/stores/userStore.js'
|
||||
import {storeToRefs} from "pinia";
|
||||
const userStore = useUserStore()
|
||||
const {submitReturnData} = storeToRefs(userStore);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="content1">
|
||||
<div class="wrap1">恭喜<span class="wrap1_1">某某某</span>先生/女士完成国展报名登记,报名日期为:2023年12月18日,09:33AM。请在会场入口处使用身份识别(人像)进入展会,详情请查看官网已了解更多资讯。</div>
|
||||
<div class="wrap1">恭喜<span class="wrap1_1">{{submitReturnData.artistName}}</span>{{submitReturnData.gender===1?'男':'女'}}完成国展报名登记,报名日期为:{{submitReturnData.createdAt}}。请在会场入口处使用身份识别(人像)进入展会,详情请查看官网已了解更多资讯。</div>
|
||||
<div class="wrap2">前往:https://cnisakncsncs.com.cn</div>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -74,7 +74,6 @@ const cardFace = async (img, num) => {
|
||||
</div>
|
||||
</van-uploader>
|
||||
</div>
|
||||
<template v-if="isWithinThreeMonths(idCardInfo.expirationDate)">
|
||||
<div class="content4">
|
||||
<div class="wrap1">
|
||||
<div class="wrap1_1">
|
||||
@ -88,14 +87,12 @@ const cardFace = async (img, num) => {
|
||||
<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">
|
||||
@ -108,12 +105,11 @@ const cardFace = async (img, num) => {
|
||||
<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 class="content6" v-if="isWithinThreeMonths(idCardInfo.expirationDate)">证件即将过期,请尽快更新,否则将影响部分功能使用!</div>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
@ -1,7 +1,10 @@
|
||||
<script setup>
|
||||
import {ref} from 'vue';
|
||||
import {areaList} from '@vant/area-data';
|
||||
const selectAddress=ref(null)
|
||||
import {useUserStore} from '@/stores/userStore.js'
|
||||
import {storeToRefs} from "pinia";
|
||||
const userStore = useUserStore()
|
||||
const {selectAddress,detailAddress} = storeToRefs(userStore);
|
||||
const showBottom = ref(false)
|
||||
const openSelectAddress = () => {
|
||||
showBottom.value = true
|
||||
@ -25,7 +28,7 @@ const confirmAddress = (data) => {
|
||||
<div class="content-address">
|
||||
<div class="wrap1">通讯地址</div>
|
||||
<div class="wrap2"></div>
|
||||
<div class="wrap3" :class="[selectAddress?.selectedOptions.map(x=>x.text).join('-')?'show':'']">
|
||||
<div class="wrap3" :class="[selectAddress?.selectedOptions.map(x=>x.text).join('/')?'show':'']">
|
||||
{{selectAddress?.selectedOptions.map(x=>x.text).join('-')|| '省-市-区'}}
|
||||
</div>
|
||||
<div class="wrap4" @click="openSelectAddress">
|
||||
@ -35,7 +38,7 @@ const confirmAddress = (data) => {
|
||||
<div class="detail-address">
|
||||
<div class="wrap1">详细地址</div>
|
||||
<div class="wrap2">
|
||||
<textarea rows="4" cols="50" placeholder="在此输入详细地址">
|
||||
<textarea rows="4" cols="50" v-model="detailAddress" placeholder="在此输入详细地址">
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -22,10 +22,14 @@ const afterRead = async (file) => {
|
||||
<van-uploader :afterRead="afterRead">
|
||||
<div class="content1">
|
||||
<div class="wrap1">
|
||||
<div class="wrap1_1">
|
||||
<img class="wrap1_1_1" v-if="recentPhoto" :src="recentPhoto">
|
||||
<img class="wrap1_1_2" v-else :src="defaultImg">
|
||||
<div v-show="!recentPhoto" class="wrap1_1">
|
||||
|
||||
<img class="wrap1_1_2" :src="defaultImg">
|
||||
</div>
|
||||
<div v-show="recentPhoto" class="wrap1_2">
|
||||
<img class="wrap1_2_1" :src="recentPhoto">
|
||||
</div>
|
||||
<div class="wrap1_3">更换</div>
|
||||
</div>
|
||||
<div class="wrap2">上传近照</div>
|
||||
</div>
|
||||
@ -62,26 +66,51 @@ const afterRead = async (file) => {
|
||||
color: #2159C4;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.wrap1 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid #2159C4;
|
||||
border-radius: 10px;
|
||||
padding: 18px;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
.wrap1_3{
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
background-color: #2159C4;
|
||||
position: absolute;
|
||||
bottom: 12px;
|
||||
right: 12px;
|
||||
}
|
||||
.wrap1_2{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
img{
|
||||
max-width: 293px;
|
||||
height: 330px;
|
||||
}
|
||||
}
|
||||
.wrap1_1 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 256px;
|
||||
height: 297px;
|
||||
background-image: url("@/assets/images/zu1174@2x.png");
|
||||
background-size: cover;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.wrap1_1_1{
|
||||
margin: -18px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 297.5px;
|
||||
}
|
||||
.wrap1_1_2 {
|
||||
width: 75px;
|
||||
|
@ -5,12 +5,13 @@ import { useRoute, useRouter } from 'vue-router'
|
||||
import two from './content/two.vue'
|
||||
import three from './content/three.vue'
|
||||
import complete from './content/complete.vue'
|
||||
import {computed, ref} from "vue";
|
||||
import {computed, ref,watch} from "vue";
|
||||
import {storeToRefs} from "pinia";
|
||||
import {useUserStore} from "@/stores/userStore.js";
|
||||
import {showToast} from "vant";
|
||||
import {save_register_info} from "@/apis/index.js";
|
||||
const userStore = useUserStore()
|
||||
const {idCardInfo,iDCardImage,recentPhoto} = storeToRefs(userStore);
|
||||
const {idCardInfo,iDCardImage,recentPhoto,telNum,selectAddress,detailAddress,submitReturnData} = storeToRefs(userStore);
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const active = ref(Number(route.params.active))
|
||||
@ -27,6 +28,39 @@ const contentComputed = computed(() => {
|
||||
return complete
|
||||
}
|
||||
})
|
||||
const submitClick =async () => {
|
||||
const data={
|
||||
artistName:idCardInfo.value.realName,
|
||||
gender:idCardInfo.value.sex==='男'?1:2,
|
||||
phoneNum:telNum.value,
|
||||
idCard:idCardInfo.value.iDNum,
|
||||
address:JSON.stringify(selectAddress.value.selectedOptions),
|
||||
address1:detailAddress.value,
|
||||
idCardPhoto:iDCardImage.value.front,
|
||||
idCardBackPhoto:iDCardImage.value.back,
|
||||
artistPhoto:recentPhoto.value
|
||||
}
|
||||
const res=await save_register_info(data)
|
||||
if (res.status===0){
|
||||
submitReturnData.value=res.data.data
|
||||
}
|
||||
}
|
||||
watch(active,()=>{
|
||||
switch (active.value){
|
||||
case 0:
|
||||
buttons.value=[{label: "下一步", type: "next"}]
|
||||
break
|
||||
case 1:
|
||||
buttons.value = [{label: "上一步", type: "back"}, {label: "下一步", type: "next"}];
|
||||
break
|
||||
case 2:
|
||||
buttons.value = [{label: "上一步", type: "back"}, {label: "提交", type: "submit"}]
|
||||
break
|
||||
}
|
||||
console.log(active.value,'active')
|
||||
},{
|
||||
immediate:true
|
||||
})
|
||||
const stepsClick = (item) => {
|
||||
switch (active.value) {
|
||||
case 0:
|
||||
@ -43,14 +77,14 @@ const stepsClick = (item) => {
|
||||
buttons.value = [{label: "上一步", type: "back"}, {label: "下一步", type: "next"}]
|
||||
break
|
||||
case 1:
|
||||
if (!recentPhoto.value){
|
||||
showToast({
|
||||
message:'请上传近照',
|
||||
className:'particulars-detail-popup'
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (item.type === 'next') {
|
||||
if (!recentPhoto.value){
|
||||
showToast({
|
||||
message:'请上传近照',
|
||||
className:'particulars-detail-popup'
|
||||
});
|
||||
return;
|
||||
}
|
||||
active.value=2
|
||||
router.replace(`/title-forward/upload-id-card/${2}`)
|
||||
buttons.value = [{label: "上一步", type: "back"}, {label: "提交", type: "submit"}]
|
||||
@ -70,6 +104,7 @@ const stepsClick = (item) => {
|
||||
router.replace(`/title-forward/upload-id-card/${1}`)
|
||||
buttons.value = [{label: "上一步", type: "back"}, {label: "下一步", type: "next"}]
|
||||
}else if (item.type === 'submit'){
|
||||
submitClick()
|
||||
active.value=3
|
||||
router.replace(`/title-forward/upload-id-card/${3}`)
|
||||
buttons.value = [{label: "完成", type: "finish"}]
|
||||
|
Loading…
Reference in New Issue
Block a user