xingyy
/
sign-stream
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

国展报名 调整

Browse Source
master
张 元山 2 weeks ago
parent 196670f15c
commit b670b9dd3f
10 changed files with 2147 additions and 490 deletions
Show Stats Download Patch File Download Diff File

1447
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

17
src/components/operateTitle/index.vue
Unescape Escape View File

@ -1,7 +1,7 @@
<script setup> <script setup>
import {useRouter} from 'vue-router'; import { useRouter } from 'vue-router';
import {useRoute} from 'vue-router'; import { useRoute } from 'vue-router';
import {watch} from "vue"; import { watch } from "vue";
const router = useRouter(); const router = useRouter();
const goBack = () => { const goBack = () => {
@ -16,10 +16,10 @@ watch(route, () => {
route.meta.title = '上传身份证照片' route.meta.title = '上传身份证照片'
break; break;
case '1': case '1':
route.meta.title = '添加近照' route.meta.title = '添加近照和通讯信息'
break; break;
case '2': case '2':
route.meta.title = '填写通讯录信息' route.meta.title = '上传作品'
break; break;
case '3': case '3':
route.meta.title = '完成登记' route.meta.title = '完成登记'
@ -27,7 +27,7 @@ watch(route, () => {
} }
} }
/* document.title= route.meta.title*/ /* document.title= route.meta.title*/
}, { }, {
immediate: true immediate: true
}) })
@ -35,8 +35,9 @@ watch(route, () => {
<template> <template>
<div class="container1"> <div class="container1">
<div class="content1" @click="goBack"> <div class="content1"
<img src="@/assets/images/back@3x.png"/> @click="goBack">
<img src="@/assets/images/back@3x.png" />
</div> </div>
<div class="content2">{{ route.meta.title }}</div> <div class="content2">{{ route.meta.title }}</div>
</div> </div>

10
src/router/index.js
Unescape Escape View File

@ -6,6 +6,11 @@ const routes = [
name: 'signup', name: 'signup',
component: () => import('@/views/signup/index.vue') component: () => import('@/views/signup/index.vue')
}, },
{
path: '/title-forward/logon',
meta: { title: '登录' },
component: () => import('@/views/logon/index.vue')
},
{ {
path: '/title-forward', path: '/title-forward',
name: 'title-forward', name: 'title-forward',
@ -16,11 +21,6 @@ const routes = [
meta: { title: '报名详情' }, meta: { title: '报名详情' },
component: () => import('@/views/reg-details/index.vue') component: () => import('@/views/reg-details/index.vue')
}, },
{
path: 'logon',
meta: { title: '登录' },
component: () => import('@/views/logon/index.vue')
},
{ {
path: 'upload-id-card/:active', path: 'upload-id-card/:active',
meta: { title: '上传身份证' }, meta: { title: '上传身份证' },

4
src/stores/userStore.js
Unescape Escape View File

@ -17,7 +17,8 @@ const iDCardImage=ref({
} }
const telNum=ref('') const telNum=ref('')
const selectAddress=ref(null) const selectAddress=ref(null)
const recentPhoto=ref('') const recentPhoto = ref('')
const artworkFile = ref('')
const detailAddress=ref('') const detailAddress=ref('')
const submitReturnData=ref(storage.getItem('submitReturnData')) const submitReturnData=ref(storage.getItem('submitReturnData'))
const temSubmitReturnData=ref(null) const temSubmitReturnData=ref(null)
@ -28,6 +29,7 @@ const iDCardImage=ref({
idCardInfo, idCardInfo,
iDCardImage, iDCardImage,
recentPhoto, recentPhoto,
artworkFile,
telNum, telNum,
selectAddress, selectAddress,
detailAddress, detailAddress,

207
src/views/logon/index.vue
Unescape Escape View File

@ -2,41 +2,42 @@
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { showToast } from 'vant'; import { showToast } from 'vant';
import storage from '@/utils/storage.js'; import storage from '@/utils/storage.js';
import {useUserStore} from '@/stores/userStore.js' import { useUserStore } from '@/stores/userStore.js'
import {storeToRefs} from "pinia"; import { storeToRefs } from "pinia";
const userStore = useUserStore() const userStore = useUserStore()
const {telNum,submitReturnData,iDCardImage,idCardInfo,recentPhoto,selectAddress,detailAddress} = storeToRefs(userStore); const { telNum, submitReturnData, iDCardImage, idCardInfo, recentPhoto, artworkFile, selectAddress, detailAddress } = storeToRefs(userStore);
import {ref,onBeforeUnmount,onMounted} from "vue"; import { ref, onBeforeUnmount, onMounted } from "vue";
import {check_by_phone, send_code,check_code} from "@/apis/index.js"; import { check_by_phone, send_code, check_code } from "@/apis/index.js";
const router = useRouter(); const router = useRouter();
const isCountingDown = ref(false); const isCountingDown = ref(false);
const timeLeft = ref(60); const timeLeft = ref(60);
const countdownInterval = ref(null); const countdownInterval = ref(null);
const code=ref('') const code = ref('')
const sendCodeApi=async ()=>{ const sendCodeApi = async () => {
const data={ const data = {
TelNum:telNum.value TelNum: telNum.value
} }
const res=await send_code(data) const res = await send_code(data)
if (res.status===0){ if (res.status === 0) {
} }
} }
onMounted(()=>{ onMounted(() => {
iDCardImage.value={ iDCardImage.value = {
front:'', front: '',
back:'' back: ''
} }
idCardInfo.value={} idCardInfo.value = {}
recentPhoto.value='' recentPhoto.value = ''
selectAddress.value=null artworkFile.value = ''
detailAddress.value='' selectAddress.value = null
detailAddress.value = ''
}) })
const sendCode = async () => { const sendCode = async () => {
if (!isCountingDown.value){ if (!isCountingDown.value) {
if(!/^1[3-9]\d{9}$/.test(telNum.value)){ if (!/^1[3-9]\d{9}$/.test(telNum.value)) {
showToast({ showToast({
message:'请输入合规的手机号码', message: '请输入合规的手机号码',
className:'particulars-detail-popup' className: 'particulars-detail-popup'
}); });
return return
} }
@ -53,44 +54,44 @@ const sendCode = async () => {
} }
}, 1000); }, 1000);
}; };
const isSignUp=async ()=>{ const isSignUp = async () => {
const res=await check_by_phone({ const res = await check_by_phone({
phoneNum:telNum.value phoneNum: telNum.value
}) })
if (res.status===0){ if (res.status === 0) {
if (res.data.isExist){ if (res.data.isExist) {
submitReturnData.value=res.data.data submitReturnData.value = res.data.data
router.push(`/title-forward/reg-details`) router.push(`/title-forward/reg-details`)
}else { } else {
router.push(`/title-forward/upload-id-card/${0}`) router.push(`/title-forward/upload-id-card/${0}`)
} }
} }
} }
const goRouter=async ()=>{ const goRouter = async () => {
if (!telNum.value){ if (!telNum.value) {
showToast({ showToast({
message:'请输入手机号码', message: '请输入手机号码',
className:'particulars-detail-popup' className: 'particulars-detail-popup'
}); });
return return
} }
if (!code.value){ if (!code.value) {
showToast({ showToast({
message:'请输入验证码', message: '请输入验证码',
className:'particulars-detail-popup' className: 'particulars-detail-popup'
}); });
return return
} }
const data={ const data = {
telNum:telNum.value, telNum: telNum.value,
code:code.value code: code.value
} }
const res=await check_code(data) const res = await check_code(data)
if (res.status===0){ if (res.status === 0) {
isSignUp() isSignUp()
} }
// isSignUp() // isSignUp()
} }
onBeforeUnmount(() => { onBeforeUnmount(() => {
clearInterval(countdownInterval.value); clearInterval(countdownInterval.value);
@ -98,136 +99,140 @@ onBeforeUnmount(() => {
</script> </script>
<template> <template>
<div class="container"> <div class="container">
<div class="content1"> <div class="content1">
<div class="wrap1"> <div class="wrap1">
<div class="wrap1_1">手机号 <span class="wrap1_1_1">(+86)</span> </div> <div class="wrap1_1">手机号 <span class="wrap1_1_1">(+86)</span> </div>
<div class="wrap1_2"> <div class="wrap1_2">
<input placeholder="在此输入报名人手机号" v-model="telNum" v-no-space> <input placeholder="在此输入报名人手机号"
</div> v-model="telNum"
</div> v-no-space>
<div class="wrap2"> </div>
<div class="wrap2_1">验证码 </div> </div>
<div class="wrap2_2" > <div class="wrap2">
<input placeholder="在此输入" v-model="code" v-no-space> <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 class="content2"
@click="goRouter">登录</div>
</div> </div>
<div class="wrap2_3" @click="sendCode"> {{ isCountingDown ? `(${timeLeft})重新发送` : '发送验证码' }}</div>
</div> </div>
</div>
<div class="content2" @click="goRouter">登录</div>
</div>
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
.container{ .container {
width: 375px; width: 375px;
height: calc(100vh - 44px); height: calc(100vh - 44px);
background-size: cover; background-size: cover;
background-image: url("@/assets/images/hb3@3x.png"); background-image: url("@/assets/images/hb3@3x.png");
background-repeat: no-repeat; background-repeat: no-repeat;
position: relative; .content1 {
.content2{
top: 550px;
left: 50%;
transform: translateX(-50%);
position: absolute;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 14px;
width: 218px;
height: 30px;
border-radius: 15px;
background-color: #2159C4;
}
.content1{
box-sizing: border-box; box-sizing: border-box;
top: 274px; top: 274px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
position: absolute; position: relative;
background-color: #fff; background-color: #fff;
width: 331px; width: 331px;
border-radius: 12px; border-radius: 12px;
padding-left: 16px; padding-left: 16px;
padding-right: 16px; padding-right: 16px;
.wrap2{ .content2 {
bottom: -100px;
left: 50%;
transform: translateX(-50%);
position: absolute;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 14px;
width: 218px;
height: 30px;
border-radius: 15px;
background-color: #2159c4;
}
.wrap2 {
display: flex; display: flex;
padding-top: 12px; padding-top: 12px;
padding-bottom: 12px; padding-bottom: 12px;
padding-right: 7px; padding-right: 7px;
.wrap2_1{ .wrap2_1 {
flex: 0 0 auto; flex: 0 0 auto;
font-size: 12px; font-size: 12px;
width: 92px; width: 92px;
border-right: 1px solid #BBC5E0; border-right: 1px solid #bbc5e0;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.wrap2_1_1{ .wrap2_1_1 {
font-size: 10px; font-size: 10px;
} }
} }
.wrap2_3{ .wrap2_3 {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
white-space: nowrap; white-space: nowrap;
color: #2159C4; color: #2159c4;
font-size: 12px; font-size: 12px;
} }
.wrap2_2{ .wrap2_2 {
flex-shrink: 1; flex-shrink: 1;
padding-left: 10px; padding-left: 10px;
input{ input {
width: 100%; width: 100%;
border: none; border: none;
&::placeholder{ &::placeholder {
color: #CECECE; color: #cecece;
font-size: 12px; font-size: 12px;
} }
&:focus{ &:focus {
outline: none; outline: none;
border: none; border: none;
} }
} }
} }
} }
.wrap1{ .wrap1 {
box-sizing: border-box; box-sizing: border-box;
padding-right: 7px; padding-right: 7px;
display: flex; display: flex;
padding-top: 12px; padding-top: 12px;
padding-bottom: 12px; padding-bottom: 12px;
border-bottom: 1px solid #BBC5E0; border-bottom: 1px solid #bbc5e0;
.wrap1_1{ .wrap1_1 {
flex: 0 0 auto; flex: 0 0 auto;
font-size: 12px; font-size: 12px;
width: 92px; width: 92px;
border-right: 1px solid #BBC5E0; border-right: 1px solid #bbc5e0;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.wrap1_1_1{ .wrap1_1_1 {
font-size: 10px; font-size: 10px;
} }
} }
.wrap1_2{ .wrap1_2 {
padding-left: 10px; padding-left: 10px;
input{ input {
border: none; border: none;
&::placeholder{ &::placeholder {
color: #CECECE; color: #cecece;
font-size: 12px; font-size: 12px;
} }
&:focus{ &:focus {
outline: none; outline: none;
border: none; border: none;
} }
} }
width: auto; width: auto;
} }
} }
} }
} }

371
src/views/reg-details/index.vue
Unescape Escape View File

@ -1,85 +1,85 @@
<script setup> <script setup>
import { showImagePreview } from 'vant'; import { showImagePreview } from 'vant';
import {ref,computed} from "vue"; import { ref, computed } from "vue";
import {useUserStore} from '@/stores/userStore.js' import { useUserStore } from '@/stores/userStore.js'
import {storeToRefs} from "pinia"; import { storeToRefs } from "pinia";
import dayjs from "dayjs"; import dayjs from "dayjs";
import {showToast} from "vant"; 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 } from "@/apis/index.js";
import {areaList} from "@vant/area-data"; import { areaList } from "@vant/area-data";
import { cloneDeep } from 'lodash'; import { cloneDeep } from 'lodash';
import {useRouter} from "vue-router"; import { useRouter } from "vue-router";
const router = useRouter(); const router = useRouter();
const userStore = useUserStore() const userStore = useUserStore()
const {submitReturnData,iDCardImage,temSubmitReturnData,idCardInfo} = storeToRefs(userStore); const { submitReturnData, iDCardImage, temSubmitReturnData, idCardInfo } = storeToRefs(userStore);
const btnStatus=ref(0) const btnStatus = ref(0)
const isCountingDown = ref(false); const isCountingDown = ref(false);
const countdownInterval = ref(null); const countdownInterval = ref(null);
const code=ref('') const code = ref('')
const timeLeft = ref(60); const timeLeft = ref(60);
const showBottom = ref(false) const showBottom = ref(false)
const sendCodeApi=async ()=>{ const sendCodeApi = async () => {
const data={ const data = {
TelNum:submitReturnData.value.phoneNum TelNum: submitReturnData.value.phoneNum
} }
const res=await send_code(data) const res = await send_code(data)
if (res.status===0){ if (res.status === 0) {
} }
} }
const saveInfo=async ()=>{ const saveInfo = async () => {
const res=await save_register_info(submitReturnData.value) const res = await save_register_info(submitReturnData.value)
if (res.status===0){ if (res.status === 0) {
showToast({ showToast({
message:'修改成功', message: '修改成功',
className: 'particulars-detail-popup' className: 'particulars-detail-popup'
}); });
btnStatus.value=0 btnStatus.value = 0
if (submitReturnData.value.phoneNum!==temSubmitReturnData.value.phoneNum){ if (submitReturnData.value.phoneNum !== temSubmitReturnData.value.phoneNum) {
router.replace('/title-forward/logon') router.replace('/title-forward/logon')
} }
temSubmitReturnData.value=submitReturnData.value temSubmitReturnData.value = submitReturnData.value
} }
} }
const rightClick=async ()=>{ const rightClick = async () => {
if(!/^1[3-9]\d{9}$/.test(submitReturnData.value.phoneNum)){ if (!/^1[3-9]\d{9}$/.test(submitReturnData.value.phoneNum)) {
showToast({ showToast({
message:'请输入合规的手机号码', message: '请输入合规的手机号码',
className:'particulars-detail-popup' className: 'particulars-detail-popup'
}); });
return return
} }
if (!code.value){ if (!code.value) {
showToast({ showToast({
message:'请输入验证码', message: '请输入验证码',
className:'particulars-detail-popup' className: 'particulars-detail-popup'
}); });
return return
} }
const data={ const data = {
telNum:submitReturnData.value.phoneNum, telNum: submitReturnData.value.phoneNum,
code:code.value code: code.value
} }
const res=await check_code(data) const res = await check_code(data)
if (res.status===0){ if (res.status === 0) {
saveInfo() saveInfo()
} }
} }
const leftClick=()=>{ const leftClick = () => {
switch (btnStatus.value){ switch (btnStatus.value) {
case 0: case 0:
temSubmitReturnData.value = cloneDeep(submitReturnData.value) temSubmitReturnData.value = cloneDeep(submitReturnData.value)
btnStatus.value=1 btnStatus.value = 1
break break
case 1: case 1:
submitReturnData.value=cloneDeep(temSubmitReturnData.value) submitReturnData.value = cloneDeep(temSubmitReturnData.value)
btnStatus.value=0 btnStatus.value = 0
break break
} }
} }
const btnLabel=computed(()=>{ const btnLabel = computed(() => {
switch (btnStatus.value){ switch (btnStatus.value) {
case 0: case 0:
return '修改' return '修改'
case 1: case 1:
@ -87,30 +87,40 @@ const btnLabel=computed(()=>{
} }
}) })
const afterRead = async (file) => { const afterRead = async (file) => {
const res = await upload_img({
file: file.file,
source: "artist",
type: 'image'
})
if (res.status === 0) {
submitReturnData.value.artistPhoto = res.data.ori_url
}
}
const afterReadArtworkFile = async (file) => {
const res = await upload_img({ const res = await upload_img({
file: file.file, file: file.file,
source: "artwork", source: "artwork",
type: 'image' type: 'image'
}) })
if (res.status === 0) { if (res.status === 0) {
submitReturnData.value.artistPhoto=res.data.ori_url submitReturnData.value.artworkFile = res.data.ori_url
} }
} }
const confirmAddress = (data) => { const confirmAddress = (data) => {
submitReturnData.value.address=JSON.stringify(data.selectedOptions.map((x)=>{ submitReturnData.value.address = JSON.stringify(data.selectedOptions.map((x) => {
return { return {
text:x.text, text: x.text,
value:x.value value: x.value
} }
})) }))
showBottom.value = false showBottom.value = false
} }
const sendCode = async () => { const sendCode = async () => {
if (!isCountingDown.value){ if (!isCountingDown.value) {
if(!/^1[3-9]\d{9}$/.test(submitReturnData.value.phoneNum)){ if (!/^1[3-9]\d{9}$/.test(submitReturnData.value.phoneNum)) {
showToast({ showToast({
message:'请输入合规的手机号码', message: '请输入合规的手机号码',
className:'particulars-detail-popup' className: 'particulars-detail-popup'
}); });
return return
} }
@ -128,26 +138,26 @@ const sendCode = async () => {
} }
}, 1000); }, 1000);
}; };
const compareDate=(givenDate)=> { const compareDate = (givenDate) => {
const inputDate = dayjs(givenDate); const inputDate = dayjs(givenDate);
const now = dayjs(); const now = dayjs();
if (inputDate.isBefore(now)) { if (inputDate.isBefore(now)) {
return '*身份证已到期，请及时更换→→→'; return '*身份证已到期，请及时更换→→→';
} else if (inputDate.isBefore(now.add(3, 'month'))) { } else if (inputDate.isBefore(now.add(3, 'month'))) {
return '*身份证即将到期，请及时更换→→→'; return '*身份证即将到期，请及时更换→→→';
} else { } else {
return '*身份证状态正常→→→' return '*身份证状态正常→→→'
} }
} }
const goRouter=()=>{ const goRouter = () => {
idCardInfo.value.realName=submitReturnData.value.artistName idCardInfo.value.realName = submitReturnData.value.artistName
idCardInfo.value.sex=submitReturnData.value.gender===1?'男':'女' idCardInfo.value.sex = submitReturnData.value.gender === 1 ? '男' : '女'
idCardInfo.value.iDNum=submitReturnData.value.idCard idCardInfo.value.iDNum = submitReturnData.value.idCard
idCardInfo.value.issueDate=submitReturnData.value.idCardStartDate idCardInfo.value.issueDate = submitReturnData.value.idCardStartDate
idCardInfo.value.expirationDate=submitReturnData.value.idCardEndDate idCardInfo.value.expirationDate = submitReturnData.value.idCardEndDate
iDCardImage.value.front=submitReturnData.value.idCardPhoto iDCardImage.value.front = submitReturnData.value.idCardPhoto
iDCardImage.value.back=submitReturnData.value.idCardBackPhoto iDCardImage.value.back = submitReturnData.value.idCardBackPhoto
router.push(`/title-forward/replace-id-card`) router.push(`/title-forward/replace-id-card`)
} }
</script> </script>
@ -159,14 +169,22 @@ const goRouter=()=>{
<div class="content2"> <div class="content2">
<div class="wrap1"> <div class="wrap1">
<div class="wrap1_1">身份证人像面</div> <div class="wrap1_1">身份证人像面</div>
<div class="wrap1_2"><img class="wrap1_2_1" :src="submitReturnData.idCardPhoto"> <div class="wrap1_2"><img class="wrap1_2_1"
<img class="wrap1_2_2" @click="showImagePreview([submitReturnData.idCardPhoto])" src="@/assets/images/zu1179@2x.png" alt=""> :src="submitReturnData.idCardPhoto">
<img class="wrap1_2_2"
@click="showImagePreview([submitReturnData.idCardPhoto])"
src="@/assets/images/zu1179@2x.png"
alt="">
</div> </div>
</div> </div>
<div class="wrap1"> <div class="wrap1">
<div class="wrap1_1">身份证国徽面</div> <div class="wrap1_1">身份证国徽面</div>
<div class="wrap1_2"><img class="wrap1_2_1" :src="submitReturnData.idCardBackPhoto"> <div class="wrap1_2"><img class="wrap1_2_1"
<img class="wrap1_2_2" @click="showImagePreview([submitReturnData.idCardBackPhoto])" src="@/assets/images/zu1179@2x.png" alt=""> :src="submitReturnData.idCardBackPhoto">
<img class="wrap1_2_2"
@click="showImagePreview([submitReturnData.idCardBackPhoto])"
src="@/assets/images/zu1179@2x.png"
alt="">
</div> </div>
</div> </div>
</div> </div>
@ -196,20 +214,28 @@ const goRouter=()=>{
</div> </div>
</div> </div>
</div> </div>
<div class="content7" v-if="btnStatus===1"> <div class="content7"
<div class="wrap1" v-if="compareDate(submitReturnData.idCardEndDate)">{{compareDate(submitReturnData.idCardEndDate)}}</div> v-if="btnStatus===1">
<div class="wrap2" @click="goRouter">更换身份证</div> <div class="wrap1"
v-if="compareDate(submitReturnData.idCardEndDate)">{{compareDate(submitReturnData.idCardEndDate)}}</div>
<div class="wrap2"
@click="goRouter">更换身份证</div>
</div> </div>
<div class="content4"> <div class="content4">
<div class="wrap1">近照</div> <div class="wrap1">近照</div>
<div class="wrap2"> <div class="wrap2">
<div class="wrap2_1"> <div class="wrap2_1">
<img :src="submitReturnData.artistPhoto" alt=""> <img :src="submitReturnData.artistPhoto"
alt="">
</div> </div>
<div v-show="btnStatus===0" class="wrap2_2"> <div v-show="btnStatus===0"
<img src="@/assets/images/zu1181@2x.png" @click="showImagePreview([submitReturnData.artistPhoto])" alt=""> class="wrap2_2">
<img src="@/assets/images/zu1181@2x.png"
@click="showImagePreview([submitReturnData.artistPhoto])"
alt="">
</div> </div>
<div class="wrap2_3" v-show="btnStatus===1"> <div class="wrap2_3"
v-show="btnStatus===1">
<van-uploader :afterRead="afterRead"> <van-uploader :afterRead="afterRead">
<div>更换</div> <div>更换</div>
</van-uploader> </van-uploader>
@ -217,29 +243,35 @@ const goRouter=()=>{
</div> </div>
</div> </div>
<van-popup <van-popup v-model:show="showBottom"
v-model:show="showBottom" position="bottom">
position="bottom" <van-area title="请选择通讯地址"
> @cancel="showBottom=false"
<van-area title="请选择通讯地址" @cancel="showBottom=false" @confirm="confirmAddress"
@confirm="confirmAddress" :area-list="areaList"/> :area-list="areaList" />
</van-popup> </van-popup>
<div class="content6"> <div class="content6">
<div class="wrap1"> <div class="wrap1">
<div class="wrap1_1"> <div class="wrap1_1">
<div class="wrap1_1_1">手机号 <span class="c86">(+86)</span> </div> <div class="wrap1_1_1">手机号 <span class="c86">(+86)</span> </div>
<div class="wrap1_1_2"> <div class="wrap1_1_2">
<input placeholder="手机号" v-model="submitReturnData.phoneNum" v-no-space> <input placeholder="手机号"
v-model="submitReturnData.phoneNum"
v-no-space>
</div> </div>
</div> </div>
</div> </div>
<div class="wrap3" v-show="btnStatus===1"> <div class="wrap3"
v-show="btnStatus===1">
<div class="wrap3_1"> <div class="wrap3_1">
<div class="wrap2_1">验证码 </div> <div class="wrap2_1">验证码 </div>
<div class="wrap2_2" > <div class="wrap2_2">
<input placeholder="验证码" v-model="code" v-no-space> <input placeholder="验证码"
v-model="code"
v-no-space>
</div> </div>
<div class="wrap2_3" @click="sendCode"> {{ isCountingDown ? `(${timeLeft})重新发送` : '发送验证码' }}</div> <div class="wrap2_3"
@click="sendCode"> {{ isCountingDown ? `(${timeLeft})重新发送` : '发送验证码' }}</div>
</div> </div>
</div> </div>
<div class="wrap1"> <div class="wrap1">
@ -247,35 +279,69 @@ const goRouter=()=>{
<div class="wrap1_1_1">通讯地址</div> <div class="wrap1_1_1">通讯地址</div>
<div class="wrap1_1_2">{{JSON.parse(submitReturnData.address).map(x=>x.text).join('/')}} <div class="wrap1_1_2">{{JSON.parse(submitReturnData.address).map(x=>x.text).join('/')}}
</div> </div>
<div class="wrap1_1_3" v-show="btnStatus===1" @click="showBottom=true"> <div class="wrap1_1_3"
<img src="@/assets/images/gh123.png" alt=""> v-show="btnStatus===1"
@click="showBottom=true">
<img src="@/assets/images/gh123.png"
alt="">
</div> </div>
</div> </div>
</div> </div>
<div class="wrap2"> <div class="wrap2">
<div class="wrap2_1">详细地址</div> <div class="wrap2_1">详细地址</div>
<div class="wrap2_2"> <div class="wrap2_2">
<textarea :disabled="btnStatus!==1" rows="4" cols="50" v-model="submitReturnData.address1" placeholder="在此输入详细地址"> <textarea :disabled="btnStatus!==1"
rows="4"
cols="50"
v-model="submitReturnData.address1"
placeholder="在此输入详细地址">
</textarea> </textarea>
</div> </div>
</div> </div>
</div> </div>
<div class="content4">
<div class="wrap1">作品</div>
<div class="wrap2">
<div class="wrap2_1">
<img :src="submitReturnData.artworkFile"
alt="">
</div>
<div v-show="btnStatus===0"
class="wrap2_2">
<img src="@/assets/images/zu1181@2x.png"
@click="showImagePreview([submitReturnData.artworkFile])"
alt="">
</div>
<div class="wrap2_3"
v-show="btnStatus===1">
<van-uploader :afterRead="afterReadArtworkFile">
<div>更换</div>
</van-uploader>
</div>
</div>
</div>
<div class="content5"> <div class="content5">
<div class="wrap1" @click="leftClick" :class="[`btn${btnStatus}`]">{{ btnLabel }}</div> <div class="wrap1"
<div class="wrap2" v-if="btnStatus===1" @click="rightClick">确认</div> @click="leftClick"
:class="[`btn${btnStatus}`]">{{ btnLabel }}</div>
<div class="wrap2"
v-if="btnStatus===1"
@click="rightClick">确认</div>
</div> </div>
</div> </div>
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
.container { .container {
padding: 14px 22px 75px; padding: 14px 22px 75px;
.content7{ .content7 {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-top: 10px; margin-top: 10px;
.wrap2{ .wrap2 {
margin-left: auto; margin-left: auto;
font-size: 14px; font-size: 14px;
color: #fff; color: #fff;
@ -284,12 +350,12 @@ const goRouter=()=>{
align-items: center; align-items: center;
width: 116px; width: 116px;
height: 30px; height: 30px;
background-color:#E74747 ; background-color: #e74747;
border-radius: 15px; border-radius: 15px;
} }
.wrap1{ .wrap1 {
font-size: 10px; font-size: 10px;
color: #E74747; color: #e74747;
} }
} }
.content6 { .content6 {
@ -297,51 +363,49 @@ const goRouter=()=>{
background-color: #fff; background-color: #fff;
overflow: hidden; overflow: hidden;
border-radius: 12px; border-radius: 12px;
.wrap3{ .wrap3 {
padding-left: 14px; padding-left: 14px;
padding-right: 14px; padding-right: 14px;
.wrap3_1{ .wrap3_1 {
padding-top: 14px; padding-top: 14px;
padding-bottom: 14px; padding-bottom: 14px;
display: flex; display: flex;
border-bottom: 1px solid #BBC5E0; border-bottom: 1px solid #bbc5e0;
} }
.wrap2_1{ .wrap2_1 {
flex: 0 0 auto; flex: 0 0 auto;
font-size: 12px; font-size: 12px;
width: 92px; width: 92px;
border-right: 1px solid #BBC5E0; border-right: 1px solid #bbc5e0;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.wrap2_1_1{ .wrap2_1_1 {
font-size: 10px; font-size: 10px;
} }
} }
.wrap2_3{ .wrap2_3 {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
white-space: nowrap; white-space: nowrap;
color: #2159C4; color: #2159c4;
font-size: 12px; font-size: 12px;
} }
.wrap2_2{ .wrap2_2 {
color: #24437E; color: #24437e;
font-size: 12px; font-size: 12px;
flex-shrink: 1; flex-shrink: 1;
padding-left: 10px; padding-left: 10px;
input{ input {
width: 100%; width: 100%;
border: none; border: none;
&::placeholder{ &::placeholder {
color: #CECECE; color: #cecece;
font-size: 12px; font-size: 12px;
} }
&:focus{ &:focus {
color: #24437E; color: #24437e;
font-size: 12px; font-size: 12px;
outline: none; outline: none;
border: none; border: none;
@ -349,33 +413,33 @@ const goRouter=()=>{
} }
} }
} }
.wrap2{ .wrap2 {
padding-left: 14px; padding-left: 14px;
padding-right: 14px; padding-right: 14px;
.wrap2_1{ .wrap2_1 {
padding-top: 14px; padding-top: 14px;
padding-bottom: 14px; padding-bottom: 14px;
padding-left: 10px; padding-left: 10px;
color: #000; color: #000;
font-size: 12px; font-size: 12px;
} }
.wrap2_2{ .wrap2_2 {
textarea { textarea {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 3px 10px 11px 10px; padding: 3px 10px 11px 10px;
border: none; border: none;
color: #24437E; color: #24437e;
font-size: 12px; font-size: 12px;
&::placeholder { &::placeholder {
color: #CECECE; color: #cecece;
font-size: 12px; font-size: 12px;
} }
&:disabled{ &:disabled {
background: none; background: none;
} }
&:focus { &:focus {
color: #24437E; color: #24437e;
font-size: 12px; font-size: 12px;
outline: none; outline: none;
border: none; border: none;
@ -394,11 +458,11 @@ const goRouter=()=>{
.wrap1_1 { .wrap1_1 {
padding-top: 14px; padding-top: 14px;
padding-bottom: 14px; padding-bottom: 14px;
border-bottom: #BBC5E0 solid 1px; border-bottom: #bbc5e0 solid 1px;
display: flex; display: flex;
.wrap1_1_3{ .wrap1_1_3 {
margin-left: auto; margin-left: auto;
img{ img {
width: 32px; width: 32px;
height: 16px; height: 16px;
} }
@ -408,17 +472,17 @@ const goRouter=()=>{
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding-left: 10px; padding-left: 10px;
color: #24437E; color: #24437e;
font-size: 12px; font-size: 12px;
input{ input {
width: 100%; width: 100%;
border: none; border: none;
&::placeholder{ &::placeholder {
color: #CECECE; color: #cecece;
font-size: 12px; font-size: 12px;
} }
&:focus{ &:focus {
color: #24437E; color: #24437e;
font-size: 12px; font-size: 12px;
outline: none; outline: none;
border: none; border: none;
@ -430,22 +494,22 @@ const goRouter=()=>{
display: flex; display: flex;
align-items: center; align-items: center;
flex-shrink: 0; flex-shrink: 0;
border-right: #BBC5E0 solid 1px; border-right: #bbc5e0 solid 1px;
width: 92px; width: 92px;
font-size: 12px; font-size: 12px;
color: #000; color: #000;
padding-left: 10px; padding-left: 10px;
.c86{ .c86 {
font-size: 10px; font-size: 10px;
} }
} }
} }
} }
} }
.content5{ .content5 {
margin-top: 42px; margin-top: 42px;
display: flex; display: flex;
.wrap2{ .wrap2 {
margin-left: auto; margin-left: auto;
width: 200px; width: 200px;
height: 30px; height: 30px;
@ -455,9 +519,9 @@ const goRouter=()=>{
align-items: center; align-items: center;
color: #fff; color: #fff;
font-size: 14px; font-size: 14px;
background-color: #2159C4; background-color: #2159c4;
} }
.wrap1{ .wrap1 {
border-radius: 15px; border-radius: 15px;
width: 116px; width: 116px;
height: 30px; height: 30px;
@ -466,12 +530,12 @@ const goRouter=()=>{
align-items: center; align-items: center;
font-size: 14px; font-size: 14px;
color: #fff; color: #fff;
&.btn0{ &.btn0 {
width: 100%; width: 100%;
background-color: #2159C4; background-color: #2159c4;
} }
&.btn1{ &.btn1 {
background-color: #5A5A5A; background-color: #5a5a5a;
} }
} }
} }
@ -489,19 +553,19 @@ const goRouter=()=>{
border-radius: 10px; border-radius: 10px;
width: 100%; width: 100%;
height: 325px; height: 325px;
border: 3px solid #2159C4; border: 3px solid #2159c4;
position: relative; position: relative;
background-color: #000; background-color: #000;
overflow: hidden; overflow: hidden;
.wrap2_1{ .wrap2_1 {
width: 100%; width: 100%;
height: 100%; height: 100%;
img{ img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.wrap2_3{ .wrap2_3 {
color: #fff; color: #fff;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -509,28 +573,25 @@ const goRouter=()=>{
position: absolute; position: absolute;
width: 66px; width: 66px;
height: 32px; height: 32px;
background-color: #2159C4; background-color: #2159c4;
border-radius: 20px; border-radius: 20px;
bottom: 15px; bottom: 15px;
right: 14px; right: 14px;
} }
.wrap2_2{ .wrap2_2 {
position: absolute; position: absolute;
bottom: 16px; bottom: 16px;
right: 16px; right: 16px;
img{ img {
width: 16px; width: 16px;
height: 16px; height: 16px;
} }
} }
} }
.wrap1 { .wrap1 {
font-size: 10px; font-size: 10px;
color: #2159C4; color: #2159c4;
} }
} }
@ -551,12 +612,12 @@ const goRouter=()=>{
.wrap1_1 { .wrap1_1 {
padding-top: 14px; padding-top: 14px;
padding-bottom: 14px; padding-bottom: 14px;
border-bottom: #BBC5E0 solid 1px; border-bottom: #bbc5e0 solid 1px;
display: flex; display: flex;
.wrap1_1_2 { .wrap1_1_2 {
padding-left: 10px; padding-left: 10px;
color: #24437E; color: #24437e;
font-size: 12px; font-size: 12px;
} }
@ -564,12 +625,12 @@ const goRouter=()=>{
display: flex; display: flex;
align-items: center; align-items: center;
flex-shrink: 0; flex-shrink: 0;
border-right: #BBC5E0 solid 1px; border-right: #bbc5e0 solid 1px;
width: 92px; width: 92px;
font-size: 12px; font-size: 12px;
color: #000; color: #000;
padding-left: 10px; padding-left: 10px;
.c86{ .c86 {
font-size: 10px; font-size: 10px;
} }
} }
@ -612,14 +673,14 @@ const goRouter=()=>{
.wrap1_1 { .wrap1_1 {
font-size: 10px; font-size: 10px;
color: #2159C4; color: #2159c4;
} }
} }
} }
.content1 { .content1 {
height: 46px; height: 46px;
background-color: #2159C4; background-color: #2159c4;
border-radius: 10px; border-radius: 10px;
display: flex; display: flex;
justify-content: center; justify-content: center;

28
src/views/signup/index.vue
Unescape Escape View File

@ -1,30 +1,34 @@
<script setup> <script setup>
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import storage from '@/utils/storage.js'; import storage from '@/utils/storage.js';
const router = useRouter(); import { ref, onBeforeMount } from "vue";
const goRouter=()=>{ onBeforeMount(() => {
storage.setItem('top-title','登录') storage.setItem('top-title', '登录')
router.push('/title-forward/logon') router.push('/title-forward/logon')
})
const router = useRouter();
const goRouter = () => {
} }
</script> </script>
<template> <template>
<div class="container"> <div class="container">
<div class="content1" @click="goRouter"> <div class="content1"
报名 @click="goRouter">
</div> 报名
</div> </div>
</div>
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
.container{ .container {
box-sizing: border-box; box-sizing: border-box;
width: 375px; width: 375px;
background-image: url("@/assets/images/hb.png"); background-image: url("@/assets/images/hb.png");
background-size: cover; background-size: cover;
height: 100vh; height: 100vh;
position: relative; position: relative;
.content1{ .content1 {
position: absolute; position: absolute;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
@ -32,7 +36,7 @@ const goRouter=()=>{
width: 218px; width: 218px;
height: 30px; height: 30px;
border-radius: 15px; border-radius: 15px;
background: #2159C4; background: #2159c4;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;

217
src/views/upload-id-card/content/three.vue
Unescape Escape View File

@ -1,139 +1,128 @@
<script setup> <script setup>
import {ref} from 'vue'; import { upload_img } from "@/apis/index.js";
import {areaList} from '@vant/area-data'; import { useUserStore } from '@/stores/userStore.js'
import {useUserStore} from '@/stores/userStore.js' import { storeToRefs } from "pinia";
import {storeToRefs} from "pinia"; import defaultImg from "@/assets/images/zu1171@2x.png"
const userStore = useUserStore() const userStore = useUserStore()
const {selectAddress,detailAddress} = storeToRefs(userStore); const { artworkFile } = storeToRefs(userStore);
const showBottom = ref(false) const afterRead = async (file) => {
const openSelectAddress = () => { const res = await upload_img({
showBottom.value = true file: file.file,
source: "artwork",
} type: 'image'
const confirmAddress = (data) => { })
selectAddress.value=data if (res.status === 0) {
showBottom.value = false artworkFile.value = res.data.ori_url
}
} }
</script> </script>
<template> <template>
<div class="three-content"> <div class="two-content">
<van-popup <van-uploader :afterRead="afterRead">
v-model:show="showBottom" <div class="content1">
position="bottom" <div class="wrap1">
> <div v-show="!artworkFile"
<van-area title="请选择通讯地址" @cancel="showBottom=false" class="wrap1_1">
@confirm="confirmAddress" :area-list="areaList"/>
</van-popup> <img class="wrap1_1_2"
<div class="content-address"> :src="defaultImg">
<div class="wrap1">通讯地址</div> </div>
<div class="wrap2"></div> <div v-show="artworkFile"
<div class="wrap3" :class="[selectAddress?.selectedOptions.map(x=>x.text).join('/')?'show':'']"> class="wrap1_2">
{{selectAddress?.selectedOptions.map(x=>x.text).join('-')|| '省-市-区'}} <img class="wrap1_2_1"
</div> :src="artworkFile">
<div class="wrap4" @click="openSelectAddress"> </div>
<img src="@/assets/images/zzz766@3x.png" alt=""> <div class="wrap1_3"
</div> v-show="artworkFile">更换</div>
</div> </div>
<div class="detail-address"> <div class="wrap2">上传近照</div>
<div class="wrap1">详细地址</div>
<div class="wrap2">
<textarea rows="4" cols="50" v-model="detailAddress" placeholder="在此输入详细地址">
</textarea>
</div> </div>
</div> </van-uploader>
<div class="bottom-text">*点击相机上传/拍摄近照</div>
</div> </div>
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
.three-content{ .two-content {
margin-bottom: 247px; margin-bottom: 115px;
} }
.detail-address {
margin-top: 18px;
padding: 16px 16px 12px 14px;
width: 332px;
height: 205px;
background-color: #fff;
border-radius: 12px;
box-sizing: border-box;
.wrap2 { .bottom-text {
height: 155px; text-align: right;
background-color: #F0F0F0; margin-top: 8px;
box-sizing: border-box; color: #ffffff;
border-radius: 12px; font-size: 12px;
overflow: hidden;
textarea {
width: 100%;
box-sizing: border-box;
padding: 11px 17px 11px 17px;
background-color: #F0F0F0;
border: none;
color: #24437E;
font-size: 12px;
&::placeholder {
color: #CECECE;
font-size: 12px;
}
&:focus {
color: #24437E;
font-size: 12px;
outline: none;
border: none;
}
}
}
.wrap1 {
color: #000;
font-size: 12px;
margin-bottom: 6px;
padding-left: 10px;
}
} }
.content-address { .content1 {
box-sizing: border-box; box-sizing: border-box;
width: 332px; width: 332px;
height: 45px; height: 377px;
border-radius: 12px;
background-color: #fff; background-color: #fff;
border-radius: 10px;
padding: 16px 20px 10px 20px;
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
padding: 13px 21px 11px 26px;
.wrap4 {
margin-left: auto;
img {
width: 32.11px;
height: 16px;
}
}
.wrap3 { .wrap2 {
margin-left: 12px; margin-top: 6px;
color: #CECECE; color: #2159c4;
font-size: 12px; font-size: 10px;
&.show{
color: #24437E;
}
} }
.wrap1 { .wrap1 {
flex-shrink: 0; overflow: hidden;
color: #000; width: 100%;
font-size: 12px; height: 100%;
} box-sizing: border-box;
border: 2px solid #2159c4;
.wrap2 { border-radius: 10px;
margin-left: 34px; display: flex;
background-color: #BBC5E0; justify-content: center;
width: 1px; align-items: center;
height: 20.93px; 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: 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%;
max-height: 297.5px;
}
.wrap1_1_2 {
width: 75px;
height: 75px;
}
}
} }
} }
</style> </style>

185
src/views/upload-id-card/content/two.vue
Unescape Escape View File

@ -1,18 +1,29 @@
<script setup> <script setup>
import {upload_img} from "@/apis/index.js"; import { upload_img } from "@/apis/index.js";
import {useUserStore} from '@/stores/userStore.js' import { useUserStore } from '@/stores/userStore.js'
import {storeToRefs} from "pinia";
import defaultImg from "@/assets/images/zu1171@2x.png"
const userStore = useUserStore() const userStore = useUserStore()
const {recentPhoto} = storeToRefs(userStore); import { storeToRefs } from "pinia";
import defaultImg from "@/assets/images/zu1171@2x.png"
import { ref } from 'vue';
import { areaList } from '@vant/area-data';
const { selectAddress, detailAddress, recentPhoto } = storeToRefs(userStore);
const showBottom = ref(false)
const openSelectAddress = () => {
showBottom.value = true
}
const confirmAddress = (data) => {
selectAddress.value = data
showBottom.value = false
}
const afterRead = async (file) => { const afterRead = async (file) => {
const res = await upload_img({ const res = await upload_img({
file: file.file, file: file.file,
source: "artwork", source: "artist",
type: 'image' type: 'image'
}) })
if (res.status === 0) { if (res.status === 0) {
recentPhoto.value=res.data.ori_url recentPhoto.value = res.data.ori_url
} }
} }
</script> </script>
@ -22,31 +33,68 @@ const afterRead = async (file) => {
<van-uploader :afterRead="afterRead"> <van-uploader :afterRead="afterRead">
<div class="content1"> <div class="content1">
<div class="wrap1"> <div class="wrap1">
<div v-show="!recentPhoto" class="wrap1_1"> <div v-show="!recentPhoto"
class="wrap1_1">
<img class="wrap1_1_2" :src="defaultImg"> <img class="wrap1_1_2"
:src="defaultImg">
</div> </div>
<div v-show="recentPhoto" class="wrap1_2"> <div v-show="recentPhoto"
<img class="wrap1_2_1" :src="recentPhoto"> class="wrap1_2">
<img class="wrap1_2_1"
:src="recentPhoto">
</div> </div>
<div class="wrap1_3" v-show="recentPhoto">更换</div> <div class="wrap1_3"
v-show="recentPhoto">更换</div>
</div> </div>
<div class="wrap2">上传近照</div> <div class="wrap2">上传近照</div>
</div> </div>
</van-uploader> </van-uploader>
<div class="bottom-text">*点击相机上传/拍摄近照</div> <div class="bottom-text">*点击相机上传/拍摄近照</div>
</div> </div>
<div class="address-content">
<van-popup v-model:show="showBottom"
position="bottom">
<van-area title="请选择通讯地址"
@cancel="showBottom=false"
@confirm="confirmAddress"
:area-list="areaList" />
</van-popup>
<div class="content-address">
<div class="address-wrap1">通讯地址</div>
<div class="address-wrap2"></div>
<div class="address-wrap3"
:class="[selectAddress?.selectedOptions.map(x=>x.text).join('/')?'show':'']">
{{selectAddress?.selectedOptions.map(x=>x.text).join('-')|| '省-市-区'}}
</div>
<div class="address-wrap4"
@click="openSelectAddress">
<img src="@/assets/images/zzz766@3x.png"
alt="">
</div>
</div>
<div class="detail-address">
<div class="address-wrap1">详细地址</div>
<div class="address-wrap2">
<textarea rows="4"
cols="50"
v-model="detailAddress"
placeholder="在此输入详细地址">
</textarea>
</div>
</div>
</div>
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
.two-content { .two-content {
margin-bottom: 115px; margin-bottom: 20px;
} }
.bottom-text { .bottom-text {
text-align: right; text-align: right;
margin-top: 8px; margin-top: 8px;
color: #FFFFFF; color: #ffffff;
font-size: 12px; font-size: 12px;
} }
@ -63,7 +111,7 @@ const afterRead = async (file) => {
.wrap2 { .wrap2 {
margin-top: 6px; margin-top: 6px;
color: #2159C4; color: #2159c4;
font-size: 10px; font-size: 10px;
} }
.wrap1 { .wrap1 {
@ -71,13 +119,13 @@ const afterRead = async (file) => {
width: 100%; width: 100%;
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
border: 2px solid #2159C4; border: 2px solid #2159c4;
border-radius: 10px; border-radius: 10px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
position: relative; position: relative;
.wrap1_3{ .wrap1_3 {
border-radius: 20px; border-radius: 20px;
font-size: 14px; font-size: 14px;
display: flex; display: flex;
@ -86,16 +134,16 @@ const afterRead = async (file) => {
color: #fff; color: #fff;
width: 48px; width: 48px;
height: 32px; height: 32px;
background-color: #2159C4; background-color: #2159c4;
position: absolute; position: absolute;
bottom: 12px; bottom: 12px;
right: 12px; right: 12px;
} }
.wrap1_2{ .wrap1_2 {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
img{ img {
max-width: 293px; max-width: 293px;
height: 330px; height: 330px;
} }
@ -108,7 +156,7 @@ const afterRead = async (file) => {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.wrap1_1_1{ .wrap1_1_1 {
margin: -18px; margin: -18px;
width: 100%; width: 100%;
max-height: 297.5px; max-height: 297.5px;
@ -120,4 +168,95 @@ const afterRead = async (file) => {
} }
} }
} }
.address-content {
margin-bottom: 60px;
}
.detail-address {
margin-top: 18px;
padding: 16px 16px 12px 14px;
width: 332px;
height: 205px;
background-color: #fff;
border-radius: 12px;
box-sizing: border-box;
.address-wrap2 {
height: 155px;
background-color: #f0f0f0;
box-sizing: border-box;
border-radius: 12px;
overflow: hidden;
textarea {
width: 100%;
box-sizing: border-box;
padding: 11px 17px 11px 17px;
background-color: #f0f0f0;
border: none;
color: #24437e;
font-size: 12px;
&::placeholder {
color: #cecece;
font-size: 12px;
}
&:focus {
color: #24437e;
font-size: 12px;
outline: none;
border: none;
}
}
}
.address-wrap1 {
color: #000;
font-size: 12px;
margin-bottom: 6px;
padding-left: 10px;
}
}
.content-address {
box-sizing: border-box;
width: 332px;
height: 45px;
border-radius: 12px;
background-color: #fff;
display: flex;
align-items: center;
padding: 13px 21px 11px 26px;
.address-wrap4 {
margin-left: auto;
img {
width: 32.11px;
height: 16px;
}
}
.address-wrap3 {
margin-left: 12px;
color: #cecece;
font-size: 12px;
&.show {
color: #24437e;
}
}
.address-wrap1 {
flex-shrink: 0;
color: #000;
font-size: 12px;
}
.address-wrap2 {
margin-left: 34px;
background-color: #bbc5e0;
width: 1px;
height: 20.93px;
}
}
</style> </style>

151
src/views/upload-id-card/index.vue
Unescape Escape View File

@ -5,17 +5,17 @@ import { useRoute, useRouter } from 'vue-router'
import two from './content/two.vue' import two from './content/two.vue'
import three from './content/three.vue' import three from './content/three.vue'
import complete from './content/complete.vue' import complete from './content/complete.vue'
import {computed, ref,watch} from "vue"; import { computed, ref, watch } from "vue";
import {storeToRefs} from "pinia"; import { storeToRefs } from "pinia";
import {useUserStore} from "@/stores/userStore.js"; import { useUserStore } from "@/stores/userStore.js";
import {showToast} from "vant"; import { showToast } from "vant";
import {check_id_card, save_register_info} from "@/apis/index.js"; import { check_id_card, save_register_info } from "@/apis/index.js";
const userStore = useUserStore() const userStore = useUserStore()
const {idCardInfo,iDCardImage,recentPhoto,telNum,selectAddress,detailAddress,submitReturnData} = storeToRefs(userStore); const { idCardInfo, iDCardImage, recentPhoto, artworkFile, telNum, selectAddress, detailAddress, submitReturnData } = storeToRefs(userStore);
const route = useRoute() const route = useRoute()
const router = useRouter() const router = useRouter()
const active = ref(Number(route.params.active)) const active = ref(Number(route.params.active))
const buttons = ref([{label: "下一步", type: "next"}]) const buttons = ref([{ label: "下一步", type: "next" }])
const contentComputed = computed(() => { const contentComputed = computed(() => {
switch (active.value) { switch (active.value) {
case 0: case 0:
@ -23,109 +23,117 @@ const contentComputed = computed(() => {
case 1: case 1:
return two return two
case 2: case 2:
return three return three
case 3: case 3:
return complete return complete
} }
}) })
const submitClick =async () => { const submitClick = async () => {
const data={
artistName:idCardInfo.value.realName, const data = {
gender:idCardInfo.value.sex==='男'?1:2, artistName: idCardInfo.value.realName,
phoneNum:telNum.value, gender: idCardInfo.value.sex === '男' ? 1 : 2,
idCard:idCardInfo.value.iDNum, phoneNum: telNum.value,
address:JSON.stringify(selectAddress.value.selectedOptions), idCard: idCardInfo.value.iDNum,
address1:detailAddress.value, address: JSON.stringify(selectAddress.value.selectedOptions),
idCardPhoto:iDCardImage.value.front, address1: detailAddress.value,
idCardBackPhoto:iDCardImage.value.back, idCardPhoto: iDCardImage.value.front,
artistPhoto:recentPhoto.value idCardBackPhoto: iDCardImage.value.back,
artistPhoto: recentPhoto.value,
artworkFile: artworkFile.value
} }
const res=await save_register_info(data) const res = await save_register_info(data)
if (res.status===0){ if (res.status === 0) {
submitReturnData.value=res.data.data submitReturnData.value = res.data.data
} }
} }
watch(active,()=>{ watch(active, () => {
switch (active.value){ switch (active.value) {
case 0: case 0:
buttons.value=[{label: "下一步", type: "next"}] buttons.value = [{ label: "下一步", type: "next" }]
break break
case 1: case 1:
buttons.value = [{label: "上一步", type: "back"}, {label: "下一步", type: "next"}]; buttons.value = [{ label: "上一步", type: "back" }, { label: "下一步", type: "next" }];
break break
case 2: case 2:
buttons.value = [{label: "上一步", type: "back"}, {label: "提交", type: "submit"}] buttons.value = [{ label: "上一步", type: "back" }, { label: "提交", type: "submit" }]
break break
case 3: case 3:
buttons.value = [{label: "完成", type: "finish"}] buttons.value = [{ label: "完成", type: "finish" }]
break break
} }
},{ }, {
immediate:true immediate: true
}) })
const stepsClick =async (item) => { const stepsClick = async (item) => {
switch (active.value) { switch (active.value) {
case 0: case 0:
if (!iDCardImage.value.front||!iDCardImage.value.back){
if (!iDCardImage.value.front || !iDCardImage.value.back) {
showToast({ showToast({
message:'请上传完整的身份证图片', message: '请上传完整的身份证图片',
className:'particulars-detail-popup' className: 'particulars-detail-popup'
}); });
return return
} }
const res=await check_id_card({ const res = await check_id_card({
idCard:idCardInfo.value.iDNum idCard: idCardInfo.value.iDNum
}) })
if (res.status===0){ if (res.status === 0) {
}else { } else {
return return
} }
active.value=1 active.value = 1
router.replace(`/title-forward/upload-id-card/${1}`) router.replace(`/title-forward/upload-id-card/${1}`)
break break
case 1: case 1:
if (item.type === 'next') { if (item.type === 'next') {
if (!recentPhoto.value){ if (!recentPhoto.value) {
showToast({ showToast({
message:'请上传近照', message: '请上传近照',
className:'particulars-detail-popup' className: 'particulars-detail-popup'
}); });
return; return;
} }
active.value=2 if (selectAddress.value?.selectedOptions?.length < 3 || !selectAddress.value?.selectedOptions) {
showToast({
message: '请选择通讯地址',
className: 'particulars-detail-popup'
});
return
}
if (!detailAddress.value) {
showToast({
message: '请输入详细地址',
className: 'particulars-detail-popup'
});
return
}
active.value = 2
router.replace(`/title-forward/upload-id-card/${2}`) router.replace(`/title-forward/upload-id-card/${2}`)
} else if (item.type === 'back') { } else if (item.type === 'back') {
active.value=0 active.value = 0
router.replace(`/title-forward/upload-id-card/${0}`) router.replace(`/title-forward/upload-id-card/${0}`)
} }
break break
case 2: case 2:
if (item.type === 'next') {
active.value=3
router.replace(`/title-forward/upload-id-card/${3}`)
} else if (item.type === 'back') {
active.value=1
router.replace(`/title-forward/upload-id-card/${1}`)
}else if (item.type === 'submit'){ if (item.type === 'submit') {
if (selectAddress.value?.selectedOptions?.length<3 || !selectAddress.value?.selectedOptions){ if (!artworkFile.value) {
showToast({ showToast({
message:'请选择通讯地址', message: '请上传作品',
className:'particulars-detail-popup' className: 'particulars-detail-popup'
}); });
return return;
}
if (!detailAddress.value){
showToast({
message:'请输入详细地址',
className:'particulars-detail-popup'
});
return
} }
submitClick() submitClick()
active.value=3 active.value = 3
router.replace(`/title-forward/upload-id-card/${3}`) router.replace(`/title-forward/upload-id-card/${3}`)
} else if (item.type === 'back') {
active.value = 1
router.replace(`/title-forward/upload-id-card/${1}`)
} }
break break
case 3: case 3:
@ -138,12 +146,14 @@ const stepsClick =async (item) => {
</script> </script>
<template> <template>
<div class="container"> <div class="container">
<steps v-model:active="active"/> <steps v-model:active="active" />
<div class="content"> <div class="content">
<component :is="contentComputed"/> <component :is="contentComputed" />
</div> </div>
<div class="bottom-btn"> <div class="bottom-btn">
<div class="item" @click="stepsClick(item)" v-for="item in buttons" <div class="item"
@click="stepsClick(item)"
v-for="item in buttons"
:class="[item.type==='back'?'back':'']"> :class="[item.type==='back'?'back':'']">
{{ item.label }} {{ item.label }}
</div> </div>
@ -179,14 +189,13 @@ const stepsClick =async (item) => {
border-radius: 20px; border-radius: 20px;
width: 142px; width: 142px;
height: 32px; height: 32px;
background-color: #2159C4; background-color: #2159c4;
&.back { &.back {
background-color: #24437E; background-color: #24437e;
margin-right: 30px; margin-right: 30px;
} }
} }
} }
} }
</style> </style>

Write Preview
Loading…
Cancel
Save