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

国展报名 调整

Browse Source
This commit is contained in:
张 元山 2024-09-10 14:52:30 +08:00
parent 196670f15c
commit b670b9dd3f
10 changed files with 2159 additions and 502 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1447
pnpm-lock.yaml Normal file
View File

File diff suppressed because it is too large Load Diff

7
src/components/operateTitle/index.vue
View File

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

10
src/router/index.js
View File

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

2
src/stores/userStore.js
View File

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

55
src/views/logon/index.vue
View File

@ -5,7 +5,7 @@ import storage from '@/utils/storage.js';
import { useUserStore } from '@/stores/userStore.js'
import { storeToRefs } from "pinia";
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 { check_by_phone, send_code, check_code } from "@/apis/index.js";
const router = useRouter();
@ -28,6 +28,7 @@ onMounted(()=>{
}
idCardInfo.value = {}
recentPhoto.value = ''
artworkFile.value = ''
selectAddress.value = null
detailAddress.value = ''
})
@ -103,18 +104,24 @@ onBeforeUnmount(() => {
<div class="wrap1">
<div class="wrap1_1">手机号 <span class="wrap1_1_1">(+86)</span> </div>
<div class="wrap1_2">
<input placeholder="在此输入报名人手机号" v-model="telNum" v-no-space>
<input placeholder="在此输入报名人手机号"
v-model="telNum"
v-no-space>
</div>
</div>
<div class="wrap2">
<div class="wrap2_1">验证码 </div>
<div class="wrap2_2">
<input placeholder="在此输入" v-model="code" v-no-space>
<input placeholder="在此输入"
v-model="code"
v-no-space>
</div>
<div class="wrap2_3" @click="sendCode"> {{ isCountingDown ? `(${timeLeft})重新发送` : '发送验证码' }}</div>
<div class="wrap2_3"
@click="sendCode"> {{ isCountingDown ? `(${timeLeft})重新发送` : '发送验证码' }}</div>
</div>
<div class="content2"
@click="goRouter">登录</div>
</div>
<div class="content2" @click="goRouter">登录</div>
</div>
</template>
<style scoped lang="scss">
@ -124,9 +131,19 @@ onBeforeUnmount(() => {
background-size: cover;
background-image: url("@/assets/images/hb3@3x.png");
background-repeat: no-repeat;
.content1 {
box-sizing: border-box;
top: 274px;
left: 50%;
transform: translateX(-50%);
position: relative;
background-color: #fff;
width: 331px;
border-radius: 12px;
padding-left: 16px;
padding-right: 16px;
.content2 {
top: 550px;
bottom: -100px;
left: 50%;
transform: translateX(-50%);
position: absolute;
@ -138,19 +155,8 @@ onBeforeUnmount(() => {
width: 218px;
height: 30px;
border-radius: 15px;
background-color: #2159C4;
background-color: #2159c4;
}
.content1{
box-sizing: border-box;
top: 274px;
left: 50%;
transform: translateX(-50%);
position: absolute;
background-color: #fff;
width: 331px;
border-radius: 12px;
padding-left: 16px;
padding-right: 16px;
.wrap2 {
display: flex;
padding-top: 12px;
@ -160,7 +166,7 @@ onBeforeUnmount(() => {
flex: 0 0 auto;
font-size: 12px;
width: 92px;
border-right: 1px solid #BBC5E0;
border-right: 1px solid #bbc5e0;
display: flex;
justify-content: center;
align-items: center;
@ -173,7 +179,7 @@ onBeforeUnmount(() => {
justify-content: center;
align-items: center;
white-space: nowrap;
color: #2159C4;
color: #2159c4;
font-size: 12px;
}
.wrap2_2 {
@ -183,7 +189,7 @@ onBeforeUnmount(() => {
width: 100%;
border: none;
&::placeholder {
color: #CECECE;
color: #cecece;
font-size: 12px;
}
&:focus {
@ -199,12 +205,12 @@ onBeforeUnmount(() => {
display: flex;
padding-top: 12px;
padding-bottom: 12px;
border-bottom: 1px solid #BBC5E0;
border-bottom: 1px solid #bbc5e0;
.wrap1_1 {
flex: 0 0 auto;
font-size: 12px;
width: 92px;
border-right: 1px solid #BBC5E0;
border-right: 1px solid #bbc5e0;
display: flex;
justify-content: center;
align-items: center;
@ -217,7 +223,7 @@ onBeforeUnmount(() => {
input {
border: none;
&::placeholder {
color: #CECECE;
color: #cecece;
font-size: 12px;
}
&:focus {
@ -227,7 +233,6 @@ onBeforeUnmount(() => {
}
width: auto;
}
}
}
}

179
src/views/reg-details/index.vue
View File

@ -89,13 +89,23 @@ const btnLabel=computed(()=>{
const afterRead = async (file) => {
const res = await upload_img({
file: file.file,
source: "artwork",
source: "artist",
type: 'image'
})
if (res.status === 0) {
submitReturnData.value.artistPhoto = res.data.ori_url
}
}
const afterReadArtworkFile = async (file) => {
const res = await upload_img({
file: file.file,
source: "artwork",
type: 'image'
})
if (res.status === 0) {
submitReturnData.value.artworkFile = res.data.ori_url
}
}
const confirmAddress = (data) => {
submitReturnData.value.address = JSON.stringify(data.selectedOptions.map((x) => {
return {
@ -159,14 +169,22 @@ const goRouter=()=>{
<div class="content2">
<div class="wrap1">
<div class="wrap1_1">身份证人像面</div>
<div class="wrap1_2"><img class="wrap1_2_1" :src="submitReturnData.idCardPhoto">
<img class="wrap1_2_2" @click="showImagePreview([submitReturnData.idCardPhoto])" src="@/assets/images/zu1179@2x.png" alt="">
<div class="wrap1_2"><img class="wrap1_2_1"
:src="submitReturnData.idCardPhoto">
<img class="wrap1_2_2"
@click="showImagePreview([submitReturnData.idCardPhoto])"
src="@/assets/images/zu1179@2x.png"
alt="">
</div>
</div>
<div class="wrap1">
<div class="wrap1_1">身份证国徽面</div>
<div class="wrap1_2"><img class="wrap1_2_1" :src="submitReturnData.idCardBackPhoto">
<img class="wrap1_2_2" @click="showImagePreview([submitReturnData.idCardBackPhoto])" src="@/assets/images/zu1179@2x.png" alt="">
<div class="wrap1_2"><img class="wrap1_2_1"
:src="submitReturnData.idCardBackPhoto">
<img class="wrap1_2_2"
@click="showImagePreview([submitReturnData.idCardBackPhoto])"
src="@/assets/images/zu1179@2x.png"
alt="">
</div>
</div>
</div>
@ -196,20 +214,28 @@ const goRouter=()=>{
</div>
</div>
</div>
<div class="content7" v-if="btnStatus===1">
<div class="wrap1" v-if="compareDate(submitReturnData.idCardEndDate)">{{compareDate(submitReturnData.idCardEndDate)}}</div>
<div class="wrap2" @click="goRouter">更换身份证</div>
<div class="content7"
v-if="btnStatus===1">
<div class="wrap1"
v-if="compareDate(submitReturnData.idCardEndDate)">{{compareDate(submitReturnData.idCardEndDate)}}</div>
<div class="wrap2"
@click="goRouter">更换身份证</div>
</div>
<div class="content4">
<div class="wrap1">近照</div>
<div class="wrap2">
<div class="wrap2_1">
<img :src="submitReturnData.artistPhoto" alt="">
<img :src="submitReturnData.artistPhoto"
alt="">
</div>
<div v-show="btnStatus===0" class="wrap2_2">
<img src="@/assets/images/zu1181@2x.png" @click="showImagePreview([submitReturnData.artistPhoto])" alt="">
<div v-show="btnStatus===0"
class="wrap2_2">
<img src="@/assets/images/zu1181@2x.png"
@click="showImagePreview([submitReturnData.artistPhoto])"
alt="">
</div>
<div class="wrap2_3" v-show="btnStatus===1">
<div class="wrap2_3"
v-show="btnStatus===1">
<van-uploader :afterRead="afterRead">
<div>更换</div>
</van-uploader>
@ -217,29 +243,35 @@ const goRouter=()=>{
</div>
</div>
<van-popup
v-model:show="showBottom"
position="bottom"
>
<van-area title="请选择通讯地址" @cancel="showBottom=false"
@confirm="confirmAddress" :area-list="areaList"/>
<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>
<input placeholder="手机号"
v-model="submitReturnData.phoneNum"
v-no-space>
</div>
</div>
</div>
<div class="wrap3" v-show="btnStatus===1">
<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>
<input placeholder="验证码"
v-model="code"
v-no-space>
</div>
<div class="wrap2_3" @click="sendCode"> {{ isCountingDown ? `(${timeLeft})重新发送` : '发送验证码' }}</div>
<div class="wrap2_3"
@click="sendCode"> {{ isCountingDown ? `(${timeLeft})重新发送` : '发送验证码' }}</div>
</div>
</div>
<div class="wrap1">
@ -247,23 +279,57 @@ const goRouter=()=>{
<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 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 :disabled="btnStatus!==1"
rows="4"
cols="50"
v-model="submitReturnData.address1"
placeholder="在此输入详细地址">
</textarea>
</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="wrap1" @click="leftClick" :class="[`btn${btnStatus}`]">{{ btnLabel }}</div>
<div class="wrap2" v-if="btnStatus===1" @click="rightClick">确认</div>
<div class="wrap1"
@click="leftClick"
:class="[`btn${btnStatus}`]">{{ btnLabel }}</div>
<div class="wrap2"
v-if="btnStatus===1"
@click="rightClick">确认</div>
</div>
</div>
</template>
@ -284,12 +350,12 @@ const goRouter=()=>{
align-items: center;
width: 116px;
height: 30px;
background-color:#E74747 ;
background-color: #e74747;
border-radius: 15px;
}
.wrap1 {
font-size: 10px;
color: #E74747;
color: #e74747;
}
}
.content6 {
@ -298,21 +364,19 @@ const goRouter=()=>{
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;
border-bottom: 1px solid #bbc5e0;
}
.wrap2_1 {
flex: 0 0 auto;
font-size: 12px;
width: 92px;
border-right: 1px solid #BBC5E0;
border-right: 1px solid #bbc5e0;
display: flex;
justify-content: center;
align-items: center;
@ -325,11 +389,11 @@ const goRouter=()=>{
align-items: center;
justify-content: center;
white-space: nowrap;
color: #2159C4;
color: #2159c4;
font-size: 12px;
}
.wrap2_2 {
color: #24437E;
color: #24437e;
font-size: 12px;
flex-shrink: 1;
padding-left: 10px;
@ -337,11 +401,11 @@ const goRouter=()=>{
width: 100%;
border: none;
&::placeholder {
color: #CECECE;
color: #cecece;
font-size: 12px;
}
&:focus {
color: #24437E;
color: #24437e;
font-size: 12px;
outline: none;
border: none;
@ -365,17 +429,17 @@ const goRouter=()=>{
box-sizing: border-box;
padding: 3px 10px 11px 10px;
border: none;
color: #24437E;
color: #24437e;
font-size: 12px;
&::placeholder {
color: #CECECE;
color: #cecece;
font-size: 12px;
}
&:disabled {
background: none;
}
&:focus {
color: #24437E;
color: #24437e;
font-size: 12px;
outline: none;
border: none;
@ -394,7 +458,7 @@ const goRouter=()=>{
.wrap1_1 {
padding-top: 14px;
padding-bottom: 14px;
border-bottom: #BBC5E0 solid 1px;
border-bottom: #bbc5e0 solid 1px;
display: flex;
.wrap1_1_3 {
margin-left: auto;
@ -408,17 +472,17 @@ const goRouter=()=>{
justify-content: center;
align-items: center;
padding-left: 10px;
color: #24437E;
color: #24437e;
font-size: 12px;
input {
width: 100%;
border: none;
&::placeholder {
color: #CECECE;
color: #cecece;
font-size: 12px;
}
&:focus {
color: #24437E;
color: #24437e;
font-size: 12px;
outline: none;
border: none;
@ -430,7 +494,7 @@ const goRouter=()=>{
display: flex;
align-items: center;
flex-shrink: 0;
border-right: #BBC5E0 solid 1px;
border-right: #bbc5e0 solid 1px;
width: 92px;
font-size: 12px;
color: #000;
@ -455,7 +519,7 @@ const goRouter=()=>{
align-items: center;
color: #fff;
font-size: 14px;
background-color: #2159C4;
background-color: #2159c4;
}
.wrap1 {
border-radius: 15px;
@ -468,10 +532,10 @@ const goRouter=()=>{
color: #fff;
&.btn0 {
width: 100%;
background-color: #2159C4;
background-color: #2159c4;
}
&.btn1 {
background-color: #5A5A5A;
background-color: #5a5a5a;
}
}
}
@ -489,7 +553,7 @@ const goRouter=()=>{
border-radius: 10px;
width: 100%;
height: 325px;
border: 3px solid #2159C4;
border: 3px solid #2159c4;
position: relative;
background-color: #000;
overflow: hidden;
@ -509,7 +573,7 @@ const goRouter=()=>{
position: absolute;
width: 66px;
height: 32px;
background-color: #2159C4;
background-color: #2159c4;
border-radius: 20px;
bottom: 15px;
right: 14px;
@ -521,16 +585,13 @@ const goRouter=()=>{
img {
width: 16px;
height: 16px;
}
}
}
.wrap1 {
font-size: 10px;
color: #2159C4;
color: #2159c4;
}
}
@ -551,12 +612,12 @@ const goRouter=()=>{
.wrap1_1 {
padding-top: 14px;
padding-bottom: 14px;
border-bottom: #BBC5E0 solid 1px;
border-bottom: #bbc5e0 solid 1px;
display: flex;
.wrap1_1_2 {
padding-left: 10px;
color: #24437E;
color: #24437e;
font-size: 12px;
}
@ -564,7 +625,7 @@ const goRouter=()=>{
display: flex;
align-items: center;
flex-shrink: 0;
border-right: #BBC5E0 solid 1px;
border-right: #bbc5e0 solid 1px;
width: 92px;
font-size: 12px;
color: #000;
@ -612,14 +673,14 @@ const goRouter=()=>{
.wrap1_1 {
font-size: 10px;
color: #2159C4;
color: #2159c4;
}
}
}
.content1 {
height: 46px;
background-color: #2159C4;
background-color: #2159c4;
border-radius: 10px;
display: flex;
justify-content: center;

12
src/views/signup/index.vue
View File

@ -1,16 +1,20 @@
<script setup>
import { useRouter } from 'vue-router';
import storage from '@/utils/storage.js';
const router = useRouter();
const goRouter=()=>{
import { ref, onBeforeMount } from "vue";
onBeforeMount(() => {
storage.setItem('top-title', '登录')
router.push('/title-forward/logon')
})
const router = useRouter();
const goRouter = () => {
}
</script>
<template>
<div class="container">
<div class="content1" @click="goRouter">
<div class="content1"
@click="goRouter">
报名
</div>
</div>
@ -32,7 +36,7 @@ const goRouter=()=>{
width: 218px;
height: 30px;
border-radius: 15px;
background: #2159C4;
background: #2159c4;
display: flex;
justify-content: center;
align-items: center;

201
src/views/upload-id-card/content/three.vue
View File

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

167
src/views/upload-id-card/content/two.vue
View File

@ -1,14 +1,25 @@
<script setup>
import { upload_img } from "@/apis/index.js";
import { useUserStore } from '@/stores/userStore.js'
const userStore = useUserStore()
import { storeToRefs } from "pinia";
import defaultImg from "@/assets/images/zu1171@2x.png"
const userStore = useUserStore()
const {recentPhoto} = storeToRefs(userStore);
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 res = await upload_img({
file: file.file,
source: "artwork",
source: "artist",
type: 'image'
})
if (res.status === 0) {
@ -22,31 +33,68 @@ const afterRead = async (file) => {
<van-uploader :afterRead="afterRead">
<div class="content1">
<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 v-show="recentPhoto" class="wrap1_2">
<img class="wrap1_2_1" :src="recentPhoto">
<div v-show="recentPhoto"
class="wrap1_2">
<img class="wrap1_2_1"
:src="recentPhoto">
</div>
<div class="wrap1_3" v-show="recentPhoto">更换</div>
<div class="wrap1_3"
v-show="recentPhoto">更换</div>
</div>
<div class="wrap2">上传近照</div>
</div>
</van-uploader>
<div class="bottom-text">*点击相机上传/拍摄近照</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>
<style scoped lang="scss">
.two-content {
margin-bottom: 115px;
margin-bottom: 20px;
}
.bottom-text {
text-align: right;
margin-top: 8px;
color: #FFFFFF;
color: #ffffff;
font-size: 12px;
}
@ -63,7 +111,7 @@ const afterRead = async (file) => {
.wrap2 {
margin-top: 6px;
color: #2159C4;
color: #2159c4;
font-size: 10px;
}
.wrap1 {
@ -71,7 +119,7 @@ const afterRead = async (file) => {
width: 100%;
height: 100%;
box-sizing: border-box;
border: 2px solid #2159C4;
border: 2px solid #2159c4;
border-radius: 10px;
display: flex;
justify-content: center;
@ -86,7 +134,7 @@ const afterRead = async (file) => {
color: #fff;
width: 48px;
height: 32px;
background-color: #2159C4;
background-color: #2159c4;
position: absolute;
bottom: 12px;
right: 12px;
@ -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>

53
src/views/upload-id-card/index.vue
View File

@ -11,7 +11,7 @@ import {useUserStore} from "@/stores/userStore.js";
import { showToast } from "vant";
import { check_id_card, save_register_info } from "@/apis/index.js";
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 router = useRouter()
const active = ref(Number(route.params.active))
@ -29,6 +29,7 @@ const contentComputed = computed(() => {
}
})
const submitClick = async () => {
const data = {
artistName: idCardInfo.value.realName,
gender: idCardInfo.value.sex === '男' ? 1 : 2,
@ -38,7 +39,8 @@ const submitClick =async () => {
address1: detailAddress.value,
idCardPhoto: iDCardImage.value.front,
idCardBackPhoto: iDCardImage.value.back,
artistPhoto:recentPhoto.value
artistPhoto: recentPhoto.value,
artworkFile: artworkFile.value
}
const res = await save_register_info(data)
if (res.status === 0) {
@ -66,6 +68,7 @@ watch(active,()=>{
const stepsClick = async (item) => {
switch (active.value) {
case 0:
if (!iDCardImage.value.front || !iDCardImage.value.back) {
showToast({
message: '请上传完整的身份证图片',
@ -85,6 +88,7 @@ const stepsClick =async (item) => {
router.replace(`/title-forward/upload-id-card/${1}`)
break
case 1:
if (item.type === 'next') {
if (!recentPhoto.value) {
showToast({
@ -93,22 +97,6 @@ const stepsClick =async (item) => {
});
return;
}
active.value=2
router.replace(`/title-forward/upload-id-card/${2}`)
} else if (item.type === 'back') {
active.value=0
router.replace(`/title-forward/upload-id-card/${0}`)
}
break
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 (selectAddress.value?.selectedOptions?.length < 3 || !selectAddress.value?.selectedOptions) {
showToast({
message: '请选择通讯地址',
@ -123,9 +111,29 @@ const stepsClick =async (item) => {
});
return
}
active.value = 2
router.replace(`/title-forward/upload-id-card/${2}`)
} else if (item.type === 'back') {
active.value = 0
router.replace(`/title-forward/upload-id-card/${0}`)
}
break
case 2:
if (item.type === 'submit') {
if (!artworkFile.value) {
showToast({
message: '请上传作品',
className: 'particulars-detail-popup'
});
return;
}
submitClick()
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}`)
}
break
case 3:
@ -143,7 +151,9 @@ const stepsClick =async (item) => {
<component :is="contentComputed" />
</div>
<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':'']">
{{ item.label }}
</div>
@ -179,14 +189,13 @@ const stepsClick =async (item) => {
border-radius: 20px;
width: 142px;
height: 32px;
background-color: #2159C4;
background-color: #2159c4;
&.back {
background-color: #24437E;
background-color: #24437e;
margin-right: 30px;
}
}
}
}
</style>