添加作品名称

This commit is contained in:
scout 2025-03-04 15:12:17 +08:00
parent 5ed8e63aab
commit a0bb8245f3
4 changed files with 203 additions and 77 deletions

View File

@ -20,6 +20,7 @@ const iDCardImage=ref({
const recentPhoto = ref('') const recentPhoto = ref('')
const artworkFile = ref('') const artworkFile = ref('')
const detailAddress=ref('') const detailAddress=ref('')
const artWorkName=ref('')
const submitReturnData=ref(storage.getItem('submitReturnData')) const submitReturnData=ref(storage.getItem('submitReturnData'))
const temSubmitReturnData=ref(null) const temSubmitReturnData=ref(null)
watch(submitReturnData,()=>{ watch(submitReturnData,()=>{
@ -35,6 +36,7 @@ const iDCardImage=ref({
detailAddress, detailAddress,
submitReturnData, submitReturnData,
formatToCustomDate, formatToCustomDate,
temSubmitReturnData temSubmitReturnData,
artWorkName
} }
}); });

View File

@ -180,21 +180,19 @@ const goRouter = () => {
<template> <template>
<div class="container"> <div class="container">
<div class="content1"> <div class="content1">
报名日期{{userStore.formatToCustomDate(submitReturnData.createdAt)}} 报名日期{{ userStore.formatToCustomDate(submitReturnData.createdAt) }}
</div> </div>
<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" <div class="wrap1_2"><img class="wrap1_2_1" :src="submitReturnData.idCardPhoto"
:src="submitReturnData.idCardPhoto"
@click="showImagePreview([submitReturnData.idCardPhoto])"> @click="showImagePreview([submitReturnData.idCardPhoto])">
</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" <div class="wrap1_2"><img class="wrap1_2_1" :src="submitReturnData.idCardBackPhoto"
:src="submitReturnData.idCardBackPhoto"
@click="showImagePreview([submitReturnData.idCardBackPhoto])"> @click="showImagePreview([submitReturnData.idCardBackPhoto])">
</div> </div>
@ -204,50 +202,47 @@ const goRouter = () => {
<div class="wrap1"> <div class="wrap1">
<div class="wrap1_1"> <div class="wrap1_1">
<div class="wrap1_1_1">姓名</div> <div class="wrap1_1_1">姓名</div>
<div class="wrap1_1_2">{{submitReturnData.artistName}}</div> <div class="wrap1_1_2">{{ submitReturnData.artistName }}</div>
</div> </div>
</div> </div>
<div class="wrap1"> <div class="wrap1">
<div class="wrap1_1"> <div class="wrap1_1">
<div class="wrap1_1_1">性别</div> <div class="wrap1_1_1">性别</div>
<div class="wrap1_1_2">{{submitReturnData.gender===1?'男':'女'}}</div> <div class="wrap1_1_2">{{ submitReturnData.gender === 1 ? '男' : '女' }}</div>
</div> </div>
</div> </div>
<div class="wrap1"> <div class="wrap1">
<div class="wrap1_1"> <div class="wrap1_1">
<div class="wrap1_1_1">身份证号码</div> <div class="wrap1_1_1">身份证号码</div>
<div class="wrap1_1_2">{{submitReturnData.idCard}}</div> <div class="wrap1_1_2">{{ submitReturnData.idCard }}</div>
</div> </div>
</div> </div>
<div class="wrap1"> <div class="wrap1">
<div class="wrap1_1"> <div class="wrap1_1">
<div class="wrap1_1_1">有效日期</div> <div class="wrap1_1_1">有效日期</div>
<div class="wrap1_1_2">{{submitReturnData.idCardStartDate?dayjs(submitReturnData.idCardStartDate).format('YYYY年MM月DD日'):''}}-{{submitReturnData.idCardEndDate?dayjs(submitReturnData.idCardEndDate).format('YYYY年MM月DD日'):''}}</div> <div class="wrap1_1_2">
{{ submitReturnData.idCardStartDate ? dayjs(submitReturnData.idCardStartDate).format('YYYY年MM月DD日') : '' }}-{{ submitReturnData.idCardEndDate ? dayjs(submitReturnData.idCardEndDate).format('YYYY年MM月DD日') : '' }}
</div> </div>
</div> </div>
</div> </div>
<div class="content7" </div>
v-if="btnStatus===1"> <div class="content7" v-if="btnStatus === 1">
<div class="wrap1" <div class="wrap1" v-if="compareDate(submitReturnData.idCardEndDate)">
v-if="compareDate(submitReturnData.idCardEndDate)">{{compareDate(submitReturnData.idCardEndDate)}}</div> {{ compareDate(submitReturnData.idCardEndDate) }}</div>
<div class="wrap2" <div class="wrap2" @click="goRouter">更换身份证</div>
@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" @click="showImagePreview([submitReturnData.artistPhoto])">
@click="showImagePreview([submitReturnData.artistPhoto])"> <img :src="submitReturnData.artistPhoto" alt="">
<img :src="submitReturnData.artistPhoto"
alt="">
</div> </div>
<!-- <div v-show="btnStatus===0" <!-- <div v-show="btnStatus===0"
class="wrap2_2" class="wrap2_2"
> >
</div> --> </div> -->
<div class="wrap2_3" <div class="wrap2_3" v-show="btnStatus === 1">
v-show="btnStatus===1">
<van-uploader :afterRead="afterRead"> <van-uploader :afterRead="afterRead">
<div>更换</div> <div>更换</div>
</van-uploader> </van-uploader>
@ -255,79 +250,68 @@ const goRouter = () => {
</div> </div>
</div> </div>
<van-popup v-model:show="showBottom" <van-popup v-model:show="showBottom" position="bottom">
position="bottom"> <van-area title="请选择通讯地址" @cancel="showBottom = false" @confirm="confirmAddress" :area-list="areaList" />
<van-area title="请选择通讯地址"
@cancel="showBottom=false"
@confirm="confirmAddress"
: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="手机号" <input placeholder="手机号" :disabled="btnStatus === 0" v-model="submitReturnData.phoneNum" v-no-space>
:disabled="btnStatus===0"
v-model="submitReturnData.phoneNum"
v-no-space>
</div> </div>
</div> </div>
</div> </div>
<div class="wrap3" <div class="wrap3" v-show="btnStatus === 1">
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="验证码" <input placeholder="验证码" v-model="code" v-no-space>
v-model="code"
v-no-space>
</div> </div>
<div class="wrap2_3" <div class="wrap2_3" @click="sendCode"> {{ isCountingDown ? `(${timeLeft})重新发送` : '发送验证码' }}</div>
@click="sendCode"> {{ isCountingDown ? `(${timeLeft})重新发送` : '发送验证码' }}</div>
</div> </div>
</div> </div>
<div class="wrap1"> <div class="wrap1">
<div class="wrap1_1"> <div class="wrap1_1">
<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" <div class="wrap1_1_3" v-show="btnStatus === 1" @click="showBottom = true">
v-show="btnStatus===1" <img src="@/assets/images/gh123.png" alt="">
@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" <textarea :disabled="btnStatus !== 1" rows="4" cols="50" v-model="submitReturnData.address1"
rows="4"
cols="50"
v-model="submitReturnData.address1"
placeholder="在此输入详细地址"> placeholder="在此输入详细地址">
</textarea> </textarea>
</div> </div>
</div> </div>
</div> </div>
<div class="content-address">
<div class="address-wrap1">作品名称</div>
<div class="address-wrap2"></div>
<van-field :disabled="btnStatus !== 1" style="height: 47px;" v-model="submitReturnData.artworkName"
placeholder="在此输入作品名称" />
</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" @click="showImagePreview([submitReturnData.artworkFile])">
@click="showImagePreview([submitReturnData.artworkFile])"> <img :src="submitReturnData.artworkFile" alt="">
<img :src="submitReturnData.artworkFile"
alt="">
</div> </div>
<!-- <div v-show="btnStatus===0" <!-- <div v-show="btnStatus===0"
class="wrap2_2"> class="wrap2_2">
</div> --> </div> -->
<div class="wrap2_3" <div class="wrap2_3" v-show="btnStatus === 1">
v-show="btnStatus===1">
<van-uploader :afterRead="afterReadArtworkFile"> <van-uploader :afterRead="afterReadArtworkFile">
<div>更换</div> <div>更换</div>
</van-uploader> </van-uploader>
@ -336,23 +320,71 @@ const goRouter = () => {
</div> </div>
</div> </div>
<div class="content5"> <div class="content5">
<div class="wrap1" <div class="wrap1" @click="leftClick" :class="[`btn${btnStatus}`]">{{ btnLabel }}</div>
@click="leftClick" <div class="wrap2" v-if="btnStatus === 1" @click="rightClick">确认</div>
: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">
.content-address {
box-sizing: border-box;
width: 332px;
height: 45px;
border-radius: 12px;
background-color: #fff;
display: flex;
margin-bottom: 18px;
margin-top: 18px;
align-items: center;
padding: 13px 21px 11px 26px;
:deep(.van-field__control) {
color: #24437e !important;
-webkit-text-fill-color: #24437e !important;
}
.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;
}
}
.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;
@ -365,25 +397,30 @@ const goRouter = () => {
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 {
margin-top: 10px; margin-top: 10px;
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;
@ -392,10 +429,12 @@ const goRouter = () => {
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;
@ -404,18 +443,22 @@ const goRouter = () => {
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;
@ -425,9 +468,11 @@ 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;
@ -435,6 +480,7 @@ const goRouter = () => {
color: #000; color: #000;
font-size: 12px; font-size: 12px;
} }
.wrap2_2 { .wrap2_2 {
textarea { textarea {
width: 100%; width: 100%;
@ -443,13 +489,16 @@ const goRouter = () => {
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;
@ -459,6 +508,7 @@ const goRouter = () => {
} }
} }
} }
.wrap1 { .wrap1 {
padding-left: 14px; padding-left: 14px;
padding-right: 14px; padding-right: 14px;
@ -472,13 +522,16 @@ const goRouter = () => {
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;
} }
} }
.wrap1_1_2 { .wrap1_1_2 {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -486,13 +539,16 @@ const goRouter = () => {
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;
@ -511,6 +567,7 @@ const goRouter = () => {
font-size: 12px; font-size: 12px;
color: #000; color: #000;
padding-left: 10px; padding-left: 10px;
.c86 { .c86 {
font-size: 10px; font-size: 10px;
} }
@ -518,9 +575,11 @@ const goRouter = () => {
} }
} }
} }
.content5 { .content5 {
margin-top: 42px; margin-top: 42px;
display: flex; display: flex;
.wrap2 { .wrap2 {
margin-left: auto; margin-left: auto;
width: 200px; width: 200px;
@ -533,6 +592,7 @@ const goRouter = () => {
font-size: 14px; font-size: 14px;
background-color: #2159c4; background-color: #2159c4;
} }
.wrap1 { .wrap1 {
border-radius: 15px; border-radius: 15px;
width: 116px; width: 116px;
@ -542,15 +602,18 @@ 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;
} }
} }
} }
.content4 { .content4 {
margin-top: 10px; margin-top: 10px;
background-color: #fff; background-color: #fff;
@ -569,14 +632,17 @@ const goRouter = () => {
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;
@ -590,10 +656,12 @@ const goRouter = () => {
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;
@ -642,6 +710,7 @@ const goRouter = () => {
font-size: 12px; font-size: 12px;
color: #000; color: #000;
padding-left: 10px; padding-left: 10px;
.c86 { .c86 {
font-size: 10px; font-size: 10px;
} }

View File

@ -4,7 +4,7 @@ import { useUserStore } from '@/stores/userStore.js'
import { storeToRefs } from "pinia"; import { storeToRefs } from "pinia";
import defaultImg from "@/assets/images/zu1171@2x.png" import defaultImg from "@/assets/images/zu1171@2x.png"
const userStore = useUserStore() const userStore = useUserStore()
const { artworkFile } = storeToRefs(userStore); const { artworkFile, artWorkName } = storeToRefs(userStore);
const afterRead = async (file) => { const afterRead = async (file) => {
const res = await upload_img({ const res = await upload_img({
file: file.file, file: file.file,
@ -19,22 +19,25 @@ const afterRead = async (file) => {
<template> <template>
<div class="two-content"> <div class="two-content">
<div class="content-address">
<div class="address-wrap1">作品名称</div>
<div class="address-wrap2"></div>
<van-field style="height: 47px;" v-model="artWorkName" placeholder="在此输入作品名称" />
</div>
<van-uploader :afterRead="afterRead"> <van-uploader :afterRead="afterRead">
<div class="content1"> <div class="content1">
<div class="wrap1"> <div class="wrap1">
<div v-show="!artworkFile" <div v-show="!artworkFile" class="wrap1_1">
class="wrap1_1">
<img class="wrap1_1_2" <img class="wrap1_1_2" :src="defaultImg">
:src="defaultImg">
</div> </div>
<div v-show="artworkFile" <div v-show="artworkFile" class="wrap1_2">
class="wrap1_2"> <img class="wrap1_2_1" :src="artworkFile">
<img class="wrap1_2_1"
:src="artworkFile">
</div> </div>
<div class="wrap1_3" <div class="wrap1_3" v-show="artworkFile">更换</div>
v-show="artworkFile">更换</div>
</div> </div>
<div class="wrap2">上传作品</div> <div class="wrap2">上传作品</div>
</div> </div>
@ -71,6 +74,7 @@ const afterRead = async (file) => {
color: #2159c4; color: #2159c4;
font-size: 10px; font-size: 10px;
} }
.wrap1 { .wrap1 {
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
@ -82,6 +86,7 @@ const afterRead = async (file) => {
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;
@ -96,15 +101,18 @@ const afterRead = async (file) => {
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;
} }
} }
.wrap1_1 { .wrap1_1 {
width: 256px; width: 256px;
height: 297px; height: 297px;
@ -113,11 +121,13 @@ 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;
} }
.wrap1_1_2 { .wrap1_1_2 {
width: 75px; width: 75px;
height: 75px; height: 75px;
@ -125,4 +135,48 @@ const afterRead = async (file) => {
} }
} }
} }
.content-address {
box-sizing: border-box;
width: 332px;
height: 45px;
border-radius: 12px;
background-color: #fff;
display: flex;
margin-bottom: 18px;
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>

View File

@ -11,7 +11,7 @@ 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, artworkFile, telNum, selectAddress, detailAddress, submitReturnData } = storeToRefs(userStore); const { idCardInfo, iDCardImage, recentPhoto, artworkFile, telNum, selectAddress, detailAddress, submitReturnData, artWorkName } = 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))
@ -45,7 +45,8 @@ const submitClick = async () => {
idCardPhoto: iDCardImage.value.front, idCardPhoto: iDCardImage.value.front,
idCardBackPhoto: iDCardImage.value.back, idCardBackPhoto: iDCardImage.value.back,
artistPhoto: recentPhoto.value, artistPhoto: recentPhoto.value,
artworkFile: artworkFile.value artworkFile: artworkFile.value,
artworkName: artWorkName.value
} }
const res = await save_register_info(data) const res = await save_register_info(data)
if (res.status === 0) { if (res.status === 0) {