国展报名 调整
This commit is contained in:
张 元山
parent
196670f15c
commit
b670b9dd3f
1447
pnpm-lock.yaml
Normal file
1447
pnpm-lock.yaml
Normal file
File diff suppressed because it is too large
Load Diff
@ -1,7 +1,7 @@
|
||||
<script setup>
|
||||
import {useRouter} from 'vue-router';
|
||||
import {useRoute} from 'vue-router';
|
||||
import {watch} from "vue";
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { watch } from "vue";
|
||||
|
||||
const router = useRouter();
|
||||
const goBack = () => {
|
||||
@ -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 = '完成登记'
|
||||
@ -27,7 +27,7 @@ watch(route, () => {
|
||||
|
||||
}
|
||||
}
|
||||
/* document.title= route.meta.title*/
|
||||
/* document.title= route.meta.title*/
|
||||
}, {
|
||||
immediate: true
|
||||
})
|
||||
@ -35,8 +35,9 @@ watch(route, () => {
|
||||
|
||||
<template>
|
||||
<div class="container1">
|
||||
<div class="content1" @click="goBack">
|
||||
<img src="@/assets/images/back@3x.png"/>
|
||||
<div class="content1"
|
||||
@click="goBack">
|
||||
<img src="@/assets/images/back@3x.png" />
|
||||
</div>
|
||||
<div class="content2">{{ route.meta.title }}</div>
|
||||
</div>
|
||||
|
||||
@ -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: '上传身份证' },
|
||||
|
||||
@ -17,7 +17,8 @@ const iDCardImage=ref({
|
||||
}
|
||||
const telNum=ref('')
|
||||
const selectAddress=ref(null)
|
||||
const recentPhoto=ref('')
|
||||
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,
|
||||
|
||||
@ -2,41 +2,42 @@
|
||||
import { useRouter } from 'vue-router';
|
||||
import { showToast } from 'vant';
|
||||
import storage from '@/utils/storage.js';
|
||||
import {useUserStore} from '@/stores/userStore.js'
|
||||
import {storeToRefs} from "pinia";
|
||||
import { useUserStore } from '@/stores/userStore.js'
|
||||
import { storeToRefs } from "pinia";
|
||||
const userStore = useUserStore()
|
||||
const {telNum,submitReturnData,iDCardImage,idCardInfo,recentPhoto,selectAddress,detailAddress} = storeToRefs(userStore);
|
||||
import {ref,onBeforeUnmount,onMounted} from "vue";
|
||||
import {check_by_phone, send_code,check_code} from "@/apis/index.js";
|
||||
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();
|
||||
const isCountingDown = ref(false);
|
||||
const timeLeft = ref(60);
|
||||
const countdownInterval = ref(null);
|
||||
const code=ref('')
|
||||
const sendCodeApi=async ()=>{
|
||||
const data={
|
||||
TelNum:telNum.value
|
||||
const code = ref('')
|
||||
const sendCodeApi = async () => {
|
||||
const data = {
|
||||
TelNum: telNum.value
|
||||
}
|
||||
const res=await send_code(data)
|
||||
if (res.status===0){
|
||||
const res = await send_code(data)
|
||||
if (res.status === 0) {
|
||||
}
|
||||
}
|
||||
onMounted(()=>{
|
||||
iDCardImage.value={
|
||||
front:'',
|
||||
back:''
|
||||
onMounted(() => {
|
||||
iDCardImage.value = {
|
||||
front: '',
|
||||
back: ''
|
||||
}
|
||||
idCardInfo.value={}
|
||||
recentPhoto.value=''
|
||||
selectAddress.value=null
|
||||
detailAddress.value=''
|
||||
idCardInfo.value = {}
|
||||
recentPhoto.value = ''
|
||||
artworkFile.value = ''
|
||||
selectAddress.value = null
|
||||
detailAddress.value = ''
|
||||
})
|
||||
const sendCode = async () => {
|
||||
if (!isCountingDown.value){
|
||||
if(!/^1[3-9]\d{9}$/.test(telNum.value)){
|
||||
if (!isCountingDown.value) {
|
||||
if (!/^1[3-9]\d{9}$/.test(telNum.value)) {
|
||||
showToast({
|
||||
message:'请输入合规的手机号码',
|
||||
className:'particulars-detail-popup'
|
||||
message: '请输入合规的手机号码',
|
||||
className: 'particulars-detail-popup'
|
||||
});
|
||||
return
|
||||
}
|
||||
@ -53,44 +54,44 @@ const sendCode = async () => {
|
||||
}
|
||||
}, 1000);
|
||||
};
|
||||
const isSignUp=async ()=>{
|
||||
const res=await check_by_phone({
|
||||
phoneNum:telNum.value
|
||||
})
|
||||
if (res.status===0){
|
||||
if (res.data.isExist){
|
||||
submitReturnData.value=res.data.data
|
||||
const isSignUp = async () => {
|
||||
const res = await check_by_phone({
|
||||
phoneNum: telNum.value
|
||||
})
|
||||
if (res.status === 0) {
|
||||
if (res.data.isExist) {
|
||||
submitReturnData.value = res.data.data
|
||||
router.push(`/title-forward/reg-details`)
|
||||
}else {
|
||||
} else {
|
||||
router.push(`/title-forward/upload-id-card/${0}`)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
const goRouter=async ()=>{
|
||||
if (!telNum.value){
|
||||
const goRouter = async () => {
|
||||
if (!telNum.value) {
|
||||
showToast({
|
||||
message:'请输入手机号码',
|
||||
className:'particulars-detail-popup'
|
||||
message: '请输入手机号码',
|
||||
className: 'particulars-detail-popup'
|
||||
});
|
||||
return
|
||||
}
|
||||
if (!code.value){
|
||||
if (!code.value) {
|
||||
showToast({
|
||||
message:'请输入验证码',
|
||||
className:'particulars-detail-popup'
|
||||
message: '请输入验证码',
|
||||
className: 'particulars-detail-popup'
|
||||
});
|
||||
return
|
||||
}
|
||||
const data={
|
||||
telNum:telNum.value,
|
||||
code:code.value
|
||||
const data = {
|
||||
telNum: telNum.value,
|
||||
code: code.value
|
||||
}
|
||||
const res=await check_code(data)
|
||||
if (res.status===0){
|
||||
const res = await check_code(data)
|
||||
if (res.status === 0) {
|
||||
isSignUp()
|
||||
}
|
||||
// isSignUp()
|
||||
// isSignUp()
|
||||
}
|
||||
onBeforeUnmount(() => {
|
||||
clearInterval(countdownInterval.value);
|
||||
@ -98,136 +99,140 @@ onBeforeUnmount(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="content1">
|
||||
<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>
|
||||
<div class="container">
|
||||
<div class="content1">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrap2">
|
||||
<div class="wrap2_1">验证码 </div>
|
||||
<div class="wrap2_2">
|
||||
<input placeholder="在此输入"
|
||||
v-model="code"
|
||||
v-no-space>
|
||||
</div>
|
||||
<div class="wrap2_3"
|
||||
@click="sendCode"> {{ isCountingDown ? `(${timeLeft})重新发送` : '发送验证码' }}</div>
|
||||
</div>
|
||||
<div class="content2"
|
||||
@click="goRouter">登录</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrap2">
|
||||
<div class="wrap2_1">验证码 </div>
|
||||
<div class="wrap2_2" >
|
||||
<input placeholder="在此输入" v-model="code" v-no-space>
|
||||
</div>
|
||||
<div class="wrap2_3" @click="sendCode"> {{ isCountingDown ? `(${timeLeft})重新发送` : '发送验证码' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content2" @click="goRouter">登录</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
.container{
|
||||
.container {
|
||||
width: 375px;
|
||||
height: calc(100vh - 44px);
|
||||
background-size: cover;
|
||||
background-image: url("@/assets/images/hb3@3x.png");
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
.content2{
|
||||
top: 550px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
width: 218px;
|
||||
height: 30px;
|
||||
border-radius: 15px;
|
||||
background-color: #2159C4;
|
||||
}
|
||||
.content1{
|
||||
.content1 {
|
||||
box-sizing: border-box;
|
||||
top: 274px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
position: absolute;
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
width: 331px;
|
||||
border-radius: 12px;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
.wrap2{
|
||||
.content2 {
|
||||
bottom: -100px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
width: 218px;
|
||||
height: 30px;
|
||||
border-radius: 15px;
|
||||
background-color: #2159c4;
|
||||
}
|
||||
.wrap2 {
|
||||
display: flex;
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
padding-right: 7px;
|
||||
.wrap2_1{
|
||||
.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;
|
||||
.wrap2_1_1{
|
||||
.wrap2_1_1 {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
.wrap2_3{
|
||||
.wrap2_3 {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
color: #2159C4;
|
||||
color: #2159c4;
|
||||
font-size: 12px;
|
||||
}
|
||||
.wrap2_2{
|
||||
.wrap2_2 {
|
||||
flex-shrink: 1;
|
||||
padding-left: 10px;
|
||||
input{
|
||||
input {
|
||||
width: 100%;
|
||||
border: none;
|
||||
&::placeholder{
|
||||
color: #CECECE;
|
||||
&::placeholder {
|
||||
color: #cecece;
|
||||
font-size: 12px;
|
||||
}
|
||||
&:focus{
|
||||
&:focus {
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.wrap1{
|
||||
.wrap1 {
|
||||
box-sizing: border-box;
|
||||
padding-right: 7px;
|
||||
display: flex;
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #BBC5E0;
|
||||
.wrap1_1{
|
||||
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;
|
||||
.wrap1_1_1{
|
||||
.wrap1_1_1 {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
.wrap1_2{
|
||||
.wrap1_2 {
|
||||
padding-left: 10px;
|
||||
input{
|
||||
input {
|
||||
border: none;
|
||||
&::placeholder{
|
||||
color: #CECECE;
|
||||
&::placeholder {
|
||||
color: #cecece;
|
||||
font-size: 12px;
|
||||
}
|
||||
&:focus{
|
||||
&:focus {
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
width: auto;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,85 +1,85 @@
|
||||
<script setup>
|
||||
import { showImagePreview } from 'vant';
|
||||
import {ref,computed} from "vue";
|
||||
import {useUserStore} from '@/stores/userStore.js'
|
||||
import {storeToRefs} from "pinia";
|
||||
import { ref, computed } from "vue";
|
||||
import { useUserStore } from '@/stores/userStore.js'
|
||||
import { storeToRefs } from "pinia";
|
||||
import dayjs from "dayjs";
|
||||
import {showToast} from "vant";
|
||||
import {check_code, save_register_info, send_code, upload_img} from "@/apis/index.js";
|
||||
import {areaList} from "@vant/area-data";
|
||||
import { showToast } from "vant";
|
||||
import { check_code, save_register_info, send_code, upload_img } from "@/apis/index.js";
|
||||
import { areaList } from "@vant/area-data";
|
||||
import { cloneDeep } from 'lodash';
|
||||
import {useRouter} from "vue-router";
|
||||
import { useRouter } from "vue-router";
|
||||
const router = useRouter();
|
||||
const userStore = useUserStore()
|
||||
const {submitReturnData,iDCardImage,temSubmitReturnData,idCardInfo} = storeToRefs(userStore);
|
||||
const btnStatus=ref(0)
|
||||
const { submitReturnData, iDCardImage, temSubmitReturnData, idCardInfo } = storeToRefs(userStore);
|
||||
const btnStatus = ref(0)
|
||||
const isCountingDown = ref(false);
|
||||
const countdownInterval = ref(null);
|
||||
const code=ref('')
|
||||
const code = ref('')
|
||||
const timeLeft = ref(60);
|
||||
const showBottom = ref(false)
|
||||
const sendCodeApi=async ()=>{
|
||||
const data={
|
||||
TelNum:submitReturnData.value.phoneNum
|
||||
const sendCodeApi = async () => {
|
||||
const data = {
|
||||
TelNum: submitReturnData.value.phoneNum
|
||||
}
|
||||
const res=await send_code(data)
|
||||
if (res.status===0){
|
||||
const res = await send_code(data)
|
||||
if (res.status === 0) {
|
||||
}
|
||||
}
|
||||
const saveInfo=async ()=>{
|
||||
const res=await save_register_info(submitReturnData.value)
|
||||
if (res.status===0){
|
||||
const saveInfo = async () => {
|
||||
const res = await save_register_info(submitReturnData.value)
|
||||
if (res.status === 0) {
|
||||
showToast({
|
||||
message:'修改成功',
|
||||
message: '修改成功',
|
||||
className: 'particulars-detail-popup'
|
||||
});
|
||||
btnStatus.value=0
|
||||
if (submitReturnData.value.phoneNum!==temSubmitReturnData.value.phoneNum){
|
||||
btnStatus.value = 0
|
||||
if (submitReturnData.value.phoneNum !== temSubmitReturnData.value.phoneNum) {
|
||||
router.replace('/title-forward/logon')
|
||||
}
|
||||
temSubmitReturnData.value=submitReturnData.value
|
||||
temSubmitReturnData.value = submitReturnData.value
|
||||
}
|
||||
}
|
||||
const rightClick=async ()=>{
|
||||
if(!/^1[3-9]\d{9}$/.test(submitReturnData.value.phoneNum)){
|
||||
const rightClick = async () => {
|
||||
if (!/^1[3-9]\d{9}$/.test(submitReturnData.value.phoneNum)) {
|
||||
showToast({
|
||||
message:'请输入合规的手机号码',
|
||||
className:'particulars-detail-popup'
|
||||
message: '请输入合规的手机号码',
|
||||
className: 'particulars-detail-popup'
|
||||
});
|
||||
return
|
||||
}
|
||||
if (!code.value){
|
||||
if (!code.value) {
|
||||
showToast({
|
||||
message:'请输入验证码',
|
||||
className:'particulars-detail-popup'
|
||||
message: '请输入验证码',
|
||||
className: 'particulars-detail-popup'
|
||||
});
|
||||
return
|
||||
}
|
||||
const data={
|
||||
telNum:submitReturnData.value.phoneNum,
|
||||
code:code.value
|
||||
const data = {
|
||||
telNum: submitReturnData.value.phoneNum,
|
||||
code: code.value
|
||||
}
|
||||
const res=await check_code(data)
|
||||
if (res.status===0){
|
||||
const res = await check_code(data)
|
||||
if (res.status === 0) {
|
||||
|
||||
saveInfo()
|
||||
|
||||
}
|
||||
}
|
||||
const leftClick=()=>{
|
||||
switch (btnStatus.value){
|
||||
const leftClick = () => {
|
||||
switch (btnStatus.value) {
|
||||
case 0:
|
||||
temSubmitReturnData.value = cloneDeep(submitReturnData.value)
|
||||
btnStatus.value=1
|
||||
break
|
||||
btnStatus.value = 1
|
||||
break
|
||||
case 1:
|
||||
submitReturnData.value=cloneDeep(temSubmitReturnData.value)
|
||||
btnStatus.value=0
|
||||
submitReturnData.value = cloneDeep(temSubmitReturnData.value)
|
||||
btnStatus.value = 0
|
||||
break
|
||||
}
|
||||
}
|
||||
const btnLabel=computed(()=>{
|
||||
switch (btnStatus.value){
|
||||
const btnLabel = computed(() => {
|
||||
switch (btnStatus.value) {
|
||||
case 0:
|
||||
return '修改'
|
||||
case 1:
|
||||
@ -87,30 +87,40 @@ const btnLabel=computed(()=>{
|
||||
}
|
||||
})
|
||||
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({
|
||||
file: file.file,
|
||||
source: "artwork",
|
||||
type: 'image'
|
||||
})
|
||||
if (res.status === 0) {
|
||||
submitReturnData.value.artistPhoto=res.data.ori_url
|
||||
submitReturnData.value.artworkFile = res.data.ori_url
|
||||
}
|
||||
}
|
||||
const confirmAddress = (data) => {
|
||||
submitReturnData.value.address=JSON.stringify(data.selectedOptions.map((x)=>{
|
||||
submitReturnData.value.address = JSON.stringify(data.selectedOptions.map((x) => {
|
||||
return {
|
||||
text:x.text,
|
||||
value:x.value
|
||||
text: x.text,
|
||||
value: x.value
|
||||
}
|
||||
}))
|
||||
showBottom.value = false
|
||||
}
|
||||
const sendCode = async () => {
|
||||
if (!isCountingDown.value){
|
||||
if(!/^1[3-9]\d{9}$/.test(submitReturnData.value.phoneNum)){
|
||||
if (!isCountingDown.value) {
|
||||
if (!/^1[3-9]\d{9}$/.test(submitReturnData.value.phoneNum)) {
|
||||
showToast({
|
||||
message:'请输入合规的手机号码',
|
||||
className:'particulars-detail-popup'
|
||||
message: '请输入合规的手机号码',
|
||||
className: 'particulars-detail-popup'
|
||||
});
|
||||
return
|
||||
}
|
||||
@ -128,26 +138,26 @@ const sendCode = async () => {
|
||||
}
|
||||
}, 1000);
|
||||
};
|
||||
const compareDate=(givenDate)=> {
|
||||
const compareDate = (givenDate) => {
|
||||
const inputDate = dayjs(givenDate);
|
||||
const now = dayjs();
|
||||
|
||||
if (inputDate.isBefore(now)) {
|
||||
return '*身份证已到期，请及时更换→→→';
|
||||
return '*身份证已到期，请及时更换→→→';
|
||||
} else if (inputDate.isBefore(now.add(3, 'month'))) {
|
||||
return '*身份证即将到期，请及时更换→→→';
|
||||
return '*身份证即将到期，请及时更换→→→';
|
||||
} else {
|
||||
return '*身份证状态正常→→→'
|
||||
}
|
||||
}
|
||||
const goRouter=()=>{
|
||||
idCardInfo.value.realName=submitReturnData.value.artistName
|
||||
idCardInfo.value.sex=submitReturnData.value.gender===1?'男':'女'
|
||||
idCardInfo.value.iDNum=submitReturnData.value.idCard
|
||||
idCardInfo.value.issueDate=submitReturnData.value.idCardStartDate
|
||||
idCardInfo.value.expirationDate=submitReturnData.value.idCardEndDate
|
||||
iDCardImage.value.front=submitReturnData.value.idCardPhoto
|
||||
iDCardImage.value.back=submitReturnData.value.idCardBackPhoto
|
||||
const goRouter = () => {
|
||||
idCardInfo.value.realName = submitReturnData.value.artistName
|
||||
idCardInfo.value.sex = submitReturnData.value.gender === 1 ? '男' : '女'
|
||||
idCardInfo.value.iDNum = submitReturnData.value.idCard
|
||||
idCardInfo.value.issueDate = submitReturnData.value.idCardStartDate
|
||||
idCardInfo.value.expirationDate = submitReturnData.value.idCardEndDate
|
||||
iDCardImage.value.front = submitReturnData.value.idCardPhoto
|
||||
iDCardImage.value.back = submitReturnData.value.idCardBackPhoto
|
||||
router.push(`/title-forward/replace-id-card`)
|
||||
}
|
||||
</script>
|
||||
@ -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>
|
||||
<div class="wrap2_2">
|
||||
<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,35 +279,69 @@ 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>
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
padding: 14px 22px 75px;
|
||||
.content7{
|
||||
.content7 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
.wrap2{
|
||||
.wrap2 {
|
||||
margin-left: auto;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
@ -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;
|
||||
.wrap1 {
|
||||
font-size: 10px;
|
||||
color: #e74747;
|
||||
}
|
||||
}
|
||||
.content6 {
|
||||
@ -297,51 +363,49 @@ const goRouter=()=>{
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
.wrap3{
|
||||
|
||||
.wrap3 {
|
||||
padding-left: 14px;
|
||||
padding-right: 14px;
|
||||
.wrap3_1{
|
||||
.wrap3_1 {
|
||||
padding-top: 14px;
|
||||
padding-bottom: 14px;
|
||||
display: flex;
|
||||
border-bottom: 1px solid #BBC5E0;
|
||||
border-bottom: 1px solid #bbc5e0;
|
||||
}
|
||||
.wrap2_1{
|
||||
|
||||
.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;
|
||||
.wrap2_1_1{
|
||||
.wrap2_1_1 {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
.wrap2_3{
|
||||
.wrap2_3 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
white-space: nowrap;
|
||||
color: #2159C4;
|
||||
color: #2159c4;
|
||||
font-size: 12px;
|
||||
}
|
||||
.wrap2_2{
|
||||
color: #24437E;
|
||||
.wrap2_2 {
|
||||
color: #24437e;
|
||||
font-size: 12px;
|
||||
flex-shrink: 1;
|
||||
padding-left: 10px;
|
||||
input{
|
||||
input {
|
||||
width: 100%;
|
||||
border: none;
|
||||
&::placeholder{
|
||||
color: #CECECE;
|
||||
&::placeholder {
|
||||
color: #cecece;
|
||||
font-size: 12px;
|
||||
}
|
||||
&:focus{
|
||||
color: #24437E;
|
||||
&:focus {
|
||||
color: #24437e;
|
||||
font-size: 12px;
|
||||
outline: none;
|
||||
border: none;
|
||||
@ -349,33 +413,33 @@ const goRouter=()=>{
|
||||
}
|
||||
}
|
||||
}
|
||||
.wrap2{
|
||||
.wrap2 {
|
||||
padding-left: 14px;
|
||||
padding-right: 14px;
|
||||
.wrap2_1{
|
||||
.wrap2_1 {
|
||||
padding-top: 14px;
|
||||
padding-bottom: 14px;
|
||||
padding-left: 10px;
|
||||
color: #000;
|
||||
color: #000;
|
||||
font-size: 12px;
|
||||
}
|
||||
.wrap2_2{
|
||||
.wrap2_2 {
|
||||
textarea {
|
||||
width: 100%;
|
||||
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{
|
||||
&:disabled {
|
||||
background: none;
|
||||
}
|
||||
&:focus {
|
||||
color: #24437E;
|
||||
color: #24437e;
|
||||
font-size: 12px;
|
||||
outline: none;
|
||||
border: none;
|
||||
@ -394,11 +458,11 @@ 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{
|
||||
.wrap1_1_3 {
|
||||
margin-left: auto;
|
||||
img{
|
||||
img {
|
||||
width: 32px;
|
||||
height: 16px;
|
||||
}
|
||||
@ -408,17 +472,17 @@ const goRouter=()=>{
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-left: 10px;
|
||||
color: #24437E;
|
||||
color: #24437e;
|
||||
font-size: 12px;
|
||||
input{
|
||||
input {
|
||||
width: 100%;
|
||||
border: none;
|
||||
&::placeholder{
|
||||
color: #CECECE;
|
||||
&::placeholder {
|
||||
color: #cecece;
|
||||
font-size: 12px;
|
||||
}
|
||||
&:focus{
|
||||
color: #24437E;
|
||||
&:focus {
|
||||
color: #24437e;
|
||||
font-size: 12px;
|
||||
outline: none;
|
||||
border: none;
|
||||
@ -430,22 +494,22 @@ 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;
|
||||
padding-left: 10px;
|
||||
.c86{
|
||||
.c86 {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.content5{
|
||||
.content5 {
|
||||
margin-top: 42px;
|
||||
display: flex;
|
||||
.wrap2{
|
||||
.wrap2 {
|
||||
margin-left: auto;
|
||||
width: 200px;
|
||||
height: 30px;
|
||||
@ -455,9 +519,9 @@ const goRouter=()=>{
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
background-color: #2159C4;
|
||||
background-color: #2159c4;
|
||||
}
|
||||
.wrap1{
|
||||
.wrap1 {
|
||||
border-radius: 15px;
|
||||
width: 116px;
|
||||
height: 30px;
|
||||
@ -466,12 +530,12 @@ const goRouter=()=>{
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
&.btn0{
|
||||
&.btn0 {
|
||||
width: 100%;
|
||||
background-color: #2159C4;
|
||||
background-color: #2159c4;
|
||||
}
|
||||
&.btn1{
|
||||
background-color: #5A5A5A;
|
||||
&.btn1 {
|
||||
background-color: #5a5a5a;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -489,19 +553,19 @@ const goRouter=()=>{
|
||||
border-radius: 10px;
|
||||
width: 100%;
|
||||
height: 325px;
|
||||
border: 3px solid #2159C4;
|
||||
border: 3px solid #2159c4;
|
||||
position: relative;
|
||||
background-color: #000;
|
||||
overflow: hidden;
|
||||
.wrap2_1{
|
||||
.wrap2_1 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
img{
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.wrap2_3{
|
||||
.wrap2_3 {
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -509,28 +573,25 @@ const goRouter=()=>{
|
||||
position: absolute;
|
||||
width: 66px;
|
||||
height: 32px;
|
||||
background-color: #2159C4;
|
||||
background-color: #2159c4;
|
||||
border-radius: 20px;
|
||||
bottom: 15px;
|
||||
right: 14px;
|
||||
}
|
||||
.wrap2_2{
|
||||
.wrap2_2 {
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
right: 16px;
|
||||
img{
|
||||
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,12 +625,12 @@ 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;
|
||||
padding-left: 10px;
|
||||
.c86{
|
||||
.c86 {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
|
||||
@ -1,30 +1,34 @@
|
||||
<script setup>
|
||||
import { useRouter } from 'vue-router';
|
||||
import storage from '@/utils/storage.js';
|
||||
const router = useRouter();
|
||||
const goRouter=()=>{
|
||||
storage.setItem('top-title','登录')
|
||||
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>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="content1"
|
||||
@click="goRouter">
|
||||
报名
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container{
|
||||
.container {
|
||||
box-sizing: border-box;
|
||||
width: 375px;
|
||||
background-image: url("@/assets/images/hb.png");
|
||||
background-size: cover;
|
||||
height: 100vh;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
.content1{
|
||||
.content1 {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
@ -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;
|
||||
|
||||
@ -1,139 +1,128 @@
|
||||
<script setup>
|
||||
import {ref} from 'vue';
|
||||
import {areaList} from '@vant/area-data';
|
||||
import {useUserStore} from '@/stores/userStore.js'
|
||||
import {storeToRefs} from "pinia";
|
||||
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 confirmAddress = (data) => {
|
||||
selectAddress.value=data
|
||||
showBottom.value = false
|
||||
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
|
||||
}
|
||||
}
|
||||
</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 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="wrap2">上传近照</div>
|
||||
</div>
|
||||
<div class="wrap4" @click="openSelectAddress">
|
||||
<img src="@/assets/images/zzz766@3x.png" alt="">
|
||||
</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>
|
||||
</van-uploader>
|
||||
<div class="bottom-text">*点击相机上传/拍摄近照</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.three-content{
|
||||
margin-bottom: 247px;
|
||||
}
|
||||
.detail-address {
|
||||
margin-top: 18px;
|
||||
padding: 16px 16px 12px 14px;
|
||||
width: 332px;
|
||||
height: 205px;
|
||||
background-color: #fff;
|
||||
border-radius: 12px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.wrap2 {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wrap1 {
|
||||
color: #000;
|
||||
font-size: 12px;
|
||||
margin-bottom: 6px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.two-content {
|
||||
margin-bottom: 115px;
|
||||
}
|
||||
|
||||
.content-address {
|
||||
.bottom-text {
|
||||
text-align: right;
|
||||
margin-top: 8px;
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.content1 {
|
||||
box-sizing: border-box;
|
||||
width: 332px;
|
||||
height: 45px;
|
||||
border-radius: 12px;
|
||||
height: 377px;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 16px 20px 10px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 13px 21px 11px 26px;
|
||||
|
||||
.wrap4 {
|
||||
margin-left: auto;
|
||||
|
||||
img {
|
||||
width: 32.11px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.wrap3 {
|
||||
margin-left: 12px;
|
||||
color: #CECECE;
|
||||
font-size: 12px;
|
||||
&.show{
|
||||
color: #24437E;
|
||||
}
|
||||
}
|
||||
|
||||
.wrap1 {
|
||||
flex-shrink: 0;
|
||||
color: #000;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.wrap2 {
|
||||
margin-left: 34px;
|
||||
background-color: #BBC5E0;
|
||||
width: 1px;
|
||||
height: 20.93px;
|
||||
margin-top: 6px;
|
||||
color: #2159c4;
|
||||
font-size: 10px;
|
||||
}
|
||||
.wrap1 {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
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;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
background-color: #2159c4;
|
||||
position: absolute;
|
||||
bottom: 12px;
|
||||
right: 12px;
|
||||
}
|
||||
.wrap1_2 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
img {
|
||||
max-width: 293px;
|
||||
height: 330px;
|
||||
}
|
||||
}
|
||||
.wrap1_1 {
|
||||
width: 256px;
|
||||
height: 297px;
|
||||
background-image: url("@/assets/images/zu1174@2x.png");
|
||||
background-size: cover;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.wrap1_1_1 {
|
||||
margin: -18px;
|
||||
width: 100%;
|
||||
max-height: 297.5px;
|
||||
}
|
||||
.wrap1_1_2 {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,18 +1,29 @@
|
||||
<script setup>
|
||||
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"
|
||||
import { upload_img } from "@/apis/index.js";
|
||||
import { useUserStore } from '@/stores/userStore.js'
|
||||
const userStore = useUserStore()
|
||||
const {recentPhoto} = storeToRefs(userStore);
|
||||
import { storeToRefs } from "pinia";
|
||||
import defaultImg from "@/assets/images/zu1171@2x.png"
|
||||
import { ref } from 'vue';
|
||||
import { areaList } from '@vant/area-data';
|
||||
const { selectAddress, detailAddress, recentPhoto } = storeToRefs(userStore);
|
||||
const showBottom = ref(false)
|
||||
const openSelectAddress = () => {
|
||||
showBottom.value = true
|
||||
|
||||
}
|
||||
const confirmAddress = (data) => {
|
||||
selectAddress.value = data
|
||||
showBottom.value = false
|
||||
}
|
||||
const afterRead = async (file) => {
|
||||
const res = await upload_img({
|
||||
file: file.file,
|
||||
source: "artwork",
|
||||
source: "artist",
|
||||
type: 'image'
|
||||
})
|
||||
if (res.status === 0) {
|
||||
recentPhoto.value=res.data.ori_url
|
||||
recentPhoto.value = res.data.ori_url
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -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,13 +119,13 @@ 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;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
.wrap1_3{
|
||||
.wrap1_3 {
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
@ -86,16 +134,16 @@ const afterRead = async (file) => {
|
||||
color: #fff;
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
background-color: #2159C4;
|
||||
background-color: #2159c4;
|
||||
position: absolute;
|
||||
bottom: 12px;
|
||||
right: 12px;
|
||||
}
|
||||
.wrap1_2{
|
||||
display: flex;
|
||||
.wrap1_2 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
img{
|
||||
img {
|
||||
max-width: 293px;
|
||||
height: 330px;
|
||||
}
|
||||
@ -108,7 +156,7 @@ const afterRead = async (file) => {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.wrap1_1_1{
|
||||
.wrap1_1_1 {
|
||||
margin: -18px;
|
||||
width: 100%;
|
||||
max-height: 297.5px;
|
||||
@ -120,4 +168,95 @@ const afterRead = async (file) => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.address-content {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
.detail-address {
|
||||
margin-top: 18px;
|
||||
padding: 16px 16px 12px 14px;
|
||||
width: 332px;
|
||||
height: 205px;
|
||||
background-color: #fff;
|
||||
border-radius: 12px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.address-wrap2 {
|
||||
height: 155px;
|
||||
background-color: #f0f0f0;
|
||||
box-sizing: border-box;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 11px 17px 11px 17px;
|
||||
background-color: #f0f0f0;
|
||||
border: none;
|
||||
color: #24437e;
|
||||
font-size: 12px;
|
||||
&::placeholder {
|
||||
color: #cecece;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
color: #24437e;
|
||||
font-size: 12px;
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.address-wrap1 {
|
||||
color: #000;
|
||||
font-size: 12px;
|
||||
margin-bottom: 6px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.content-address {
|
||||
box-sizing: border-box;
|
||||
width: 332px;
|
||||
height: 45px;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 13px 21px 11px 26px;
|
||||
|
||||
.address-wrap4 {
|
||||
margin-left: auto;
|
||||
|
||||
img {
|
||||
width: 32.11px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.address-wrap3 {
|
||||
margin-left: 12px;
|
||||
color: #cecece;
|
||||
font-size: 12px;
|
||||
&.show {
|
||||
color: #24437e;
|
||||
}
|
||||
}
|
||||
|
||||
.address-wrap1 {
|
||||
flex-shrink: 0;
|
||||
color: #000;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.address-wrap2 {
|
||||
margin-left: 34px;
|
||||
background-color: #bbc5e0;
|
||||
width: 1px;
|
||||
height: 20.93px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -5,17 +5,17 @@ import { useRoute, useRouter } from 'vue-router'
|
||||
import two from './content/two.vue'
|
||||
import three from './content/three.vue'
|
||||
import complete from './content/complete.vue'
|
||||
import {computed, ref,watch} from "vue";
|
||||
import {storeToRefs} from "pinia";
|
||||
import {useUserStore} from "@/stores/userStore.js";
|
||||
import {showToast} from "vant";
|
||||
import {check_id_card, save_register_info} from "@/apis/index.js";
|
||||
import { computed, ref, watch } from "vue";
|
||||
import { storeToRefs } from "pinia";
|
||||
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))
|
||||
const buttons = ref([{label: "下一步", type: "next"}])
|
||||
const buttons = ref([{ label: "下一步", type: "next" }])
|
||||
const contentComputed = computed(() => {
|
||||
switch (active.value) {
|
||||
case 0:
|
||||
@ -23,109 +23,117 @@ const contentComputed = computed(() => {
|
||||
case 1:
|
||||
return two
|
||||
case 2:
|
||||
return three
|
||||
return three
|
||||
case 3:
|
||||
return complete
|
||||
return complete
|
||||
}
|
||||
})
|
||||
const submitClick =async () => {
|
||||
const data={
|
||||
artistName:idCardInfo.value.realName,
|
||||
gender:idCardInfo.value.sex==='男'?1:2,
|
||||
phoneNum:telNum.value,
|
||||
idCard:idCardInfo.value.iDNum,
|
||||
address:JSON.stringify(selectAddress.value.selectedOptions),
|
||||
address1:detailAddress.value,
|
||||
idCardPhoto:iDCardImage.value.front,
|
||||
idCardBackPhoto:iDCardImage.value.back,
|
||||
artistPhoto:recentPhoto.value
|
||||
const submitClick = async () => {
|
||||
|
||||
const data = {
|
||||
artistName: idCardInfo.value.realName,
|
||||
gender: idCardInfo.value.sex === '男' ? 1 : 2,
|
||||
phoneNum: telNum.value,
|
||||
idCard: idCardInfo.value.iDNum,
|
||||
address: JSON.stringify(selectAddress.value.selectedOptions),
|
||||
address1: detailAddress.value,
|
||||
idCardPhoto: iDCardImage.value.front,
|
||||
idCardBackPhoto: iDCardImage.value.back,
|
||||
artistPhoto: recentPhoto.value,
|
||||
artworkFile: artworkFile.value
|
||||
}
|
||||
const res=await save_register_info(data)
|
||||
if (res.status===0){
|
||||
submitReturnData.value=res.data.data
|
||||
const res = await save_register_info(data)
|
||||
if (res.status === 0) {
|
||||
submitReturnData.value = res.data.data
|
||||
}
|
||||
}
|
||||
watch(active,()=>{
|
||||
switch (active.value){
|
||||
case 0:
|
||||
buttons.value=[{label: "下一步", type: "next"}]
|
||||
break
|
||||
case 1:
|
||||
buttons.value = [{label: "上一步", type: "back"}, {label: "下一步", type: "next"}];
|
||||
break
|
||||
case 2:
|
||||
buttons.value = [{label: "上一步", type: "back"}, {label: "提交", type: "submit"}]
|
||||
break
|
||||
case 3:
|
||||
buttons.value = [{label: "完成", type: "finish"}]
|
||||
break
|
||||
}
|
||||
},{
|
||||
immediate:true
|
||||
})
|
||||
const stepsClick =async (item) => {
|
||||
watch(active, () => {
|
||||
switch (active.value) {
|
||||
case 0:
|
||||
if (!iDCardImage.value.front||!iDCardImage.value.back){
|
||||
buttons.value = [{ label: "下一步", type: "next" }]
|
||||
break
|
||||
case 1:
|
||||
buttons.value = [{ label: "上一步", type: "back" }, { label: "下一步", type: "next" }];
|
||||
break
|
||||
case 2:
|
||||
buttons.value = [{ label: "上一步", type: "back" }, { label: "提交", type: "submit" }]
|
||||
break
|
||||
case 3:
|
||||
buttons.value = [{ label: "完成", type: "finish" }]
|
||||
break
|
||||
}
|
||||
}, {
|
||||
immediate: true
|
||||
})
|
||||
const stepsClick = async (item) => {
|
||||
switch (active.value) {
|
||||
case 0:
|
||||
|
||||
if (!iDCardImage.value.front || !iDCardImage.value.back) {
|
||||
showToast({
|
||||
message:'请上传完整的身份证图片',
|
||||
className:'particulars-detail-popup'
|
||||
message: '请上传完整的身份证图片',
|
||||
className: 'particulars-detail-popup'
|
||||
});
|
||||
|
||||
return
|
||||
}
|
||||
const res=await check_id_card({
|
||||
idCard:idCardInfo.value.iDNum
|
||||
const res = await check_id_card({
|
||||
idCard: idCardInfo.value.iDNum
|
||||
})
|
||||
if (res.status===0){
|
||||
}else {
|
||||
if (res.status === 0) {
|
||||
} else {
|
||||
return
|
||||
}
|
||||
active.value=1
|
||||
active.value = 1
|
||||
router.replace(`/title-forward/upload-id-card/${1}`)
|
||||
break
|
||||
case 1:
|
||||
|
||||
if (item.type === 'next') {
|
||||
if (!recentPhoto.value){
|
||||
if (!recentPhoto.value) {
|
||||
showToast({
|
||||
message:'请上传近照',
|
||||
className:'particulars-detail-popup'
|
||||
message: '请上传近照',
|
||||
className: 'particulars-detail-popup'
|
||||
});
|
||||
return;
|
||||
}
|
||||
active.value=2
|
||||
if (selectAddress.value?.selectedOptions?.length < 3 || !selectAddress.value?.selectedOptions) {
|
||||
showToast({
|
||||
message: '请选择通讯地址',
|
||||
className: 'particulars-detail-popup'
|
||||
});
|
||||
return
|
||||
}
|
||||
if (!detailAddress.value) {
|
||||
showToast({
|
||||
message: '请输入详细地址',
|
||||
className: 'particulars-detail-popup'
|
||||
});
|
||||
return
|
||||
}
|
||||
active.value = 2
|
||||
router.replace(`/title-forward/upload-id-card/${2}`)
|
||||
} else if (item.type === 'back') {
|
||||
active.value=0
|
||||
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){
|
||||
if (item.type === 'submit') {
|
||||
if (!artworkFile.value) {
|
||||
showToast({
|
||||
message:'请选择通讯地址',
|
||||
className:'particulars-detail-popup'
|
||||
message: '请上传作品',
|
||||
className: 'particulars-detail-popup'
|
||||
});
|
||||
return
|
||||
}
|
||||
if (!detailAddress.value){
|
||||
showToast({
|
||||
message:'请输入详细地址',
|
||||
className:'particulars-detail-popup'
|
||||
});
|
||||
return
|
||||
return;
|
||||
}
|
||||
submitClick()
|
||||
active.value=3
|
||||
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:
|
||||
@ -138,12 +146,14 @@ const stepsClick =async (item) => {
|
||||
</script>
|
||||
<template>
|
||||
<div class="container">
|
||||
<steps v-model:active="active"/>
|
||||
<steps v-model:active="active" />
|
||||
<div class="content">
|
||||
<component :is="contentComputed"/>
|
||||
<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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user