添加作品名称
This commit is contained in:
parent
5ed8e63aab
commit
a0bb8245f3
@ -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
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -180,22 +180,20 @@ 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>
|
||||||
</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>
|
||||||
<div class="content7"
|
<div class="content7" v-if="btnStatus === 1">
|
||||||
v-if="btnStatus===1">
|
<div class="wrap1" v-if="compareDate(submitReturnData.idCardEndDate)">
|
||||||
<div class="wrap1"
|
{{ compareDate(submitReturnData.idCardEndDate) }}</div>
|
||||||
v-if="compareDate(submitReturnData.idCardEndDate)">{{compareDate(submitReturnData.idCardEndDate)}}</div>
|
<div class="wrap2" @click="goRouter">更换身份证</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" @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"
|
placeholder="在此输入详细地址">
|
||||||
cols="50"
|
|
||||||
v-model="submitReturnData.address1"
|
|
||||||
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;
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
|
@ -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) {
|
||||||
|
Loading…
Reference in New Issue
Block a user