|
|
@ -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,7 +138,7 @@ 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();
|
|
|
|
|
|
|
|
|
|
|
@ -140,14 +150,14 @@ const compareDate=(givenDate)=> {
|
|
|
|
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;
|
|
|
|