国展报名 调整

src/components/operateTitle/index.vue

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

src/router/index.js

@@ -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: '上传身份证' },

src/stores/userStore.js

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

src/views/logon/index.vue

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

src/views/reg-details/index.vue

@@ -89,13 +89,23 @@ const btnLabel=computed(()=>{
 const afterRead = async (file) => {
   const res = await upload_img({
     file: file.file,
-    source: "artwork",
+    source: "artist",
     type: 'image'
   })
   if (res.status === 0) {
     submitReturnData.value.artistPhoto = res.data.ori_url
   }
 }
+const afterReadArtworkFile = async (file) => {
+  const res = await upload_img({
+    file: file.file,
+    source: "artwork",
+    type: 'image'
+  })
+  if (res.status === 0) {
+    submitReturnData.value.artworkFile = res.data.ori_url
+  }
+}
 const confirmAddress = (data) => {
   submitReturnData.value.address = JSON.stringify(data.selectedOptions.map((x) => {
     return {
@@ -159,14 +169,22 @@ const goRouter=()=>{
     <div class="content2">
       <div class="wrap1">
         <div class="wrap1_1">身份证人像面</div>
-        <div class="wrap1_2"><img class="wrap1_2_1" :src="submitReturnData.idCardPhoto">
+        <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 class="wrap1">
         <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>
@@ -196,20 +214,28 @@ const goRouter=()=>{
         </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 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">
+        <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  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
+    <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>
     <div class="content6">
       <div class="wrap1">
         <div class="wrap1_1">
           <div class="wrap1_1_1">手机号 <span class="c86">(+86)</span> </div>
           <div class="wrap1_1_2">
-            <input placeholder="手机号" v-model="submitReturnData.phoneNum" v-no-space>
+            <input placeholder="手机号"
+                   v-model="submitReturnData.phoneNum"
+                   v-no-space>
           </div>
         </div>
       </div>
-      <div class="wrap3" v-show="btnStatus===1">
+      <div class="wrap3"
+           v-show="btnStatus===1">
         <div class="wrap3_1">
           <div class="wrap2_1">验证码 </div>
           <div class="wrap2_2">
-            <input placeholder="验证码" v-model="code" v-no-space>
+            <input placeholder="验证码"
+                   v-model="code"
+                   v-no-space>
           </div>
-          <div class="wrap2_3" @click="sendCode"> {{ isCountingDown ? `(${timeLeft})重新发送` : '发送验证码' }}</div>
+          <div class="wrap2_3"
+               @click="sendCode"> {{ isCountingDown ? `(${timeLeft})重新发送` : '发送验证码' }}</div>
         </div>
       </div>
       <div class="wrap1">
@@ -247,23 +279,57 @@ const goRouter=()=>{
           <div class="wrap1_1_1">通讯地址</div>
           <div class="wrap1_1_2">{{JSON.parse(submitReturnData.address).map(x=>x.text).join('/')}}
           </div>
-          <div class="wrap1_1_3" v-show="btnStatus===1" @click="showBottom=true">
+          <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 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="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>
 </template>
@@ -284,12 +350,12 @@ const goRouter=()=>{
       align-items: center;
       width: 116px;
       height: 30px;
-      background-color:#E74747 ;
+      background-color: #e74747;
       border-radius: 15px;
     }
     .wrap1 {
       font-size: 10px;
-      color: #E74747;
+      color: #e74747;
     }
   }
   .content6 {
@@ -298,21 +364,19 @@ const goRouter=()=>{
     overflow: hidden;
     border-radius: 12px;
     .wrap3 {
-
       padding-left: 14px;
       padding-right: 14px;
       .wrap3_1 {
         padding-top: 14px;
         padding-bottom: 14px;
         display: flex;
-        border-bottom: 1px solid #BBC5E0;
+        border-bottom: 1px solid #bbc5e0;
       }
       .wrap2_1 {
-
         flex: 0 0 auto;
         font-size: 12px;
         width: 92px;
-        border-right: 1px solid #BBC5E0;
+        border-right: 1px solid #bbc5e0;
         display: flex;
         justify-content: center;
         align-items: center;
@@ -325,11 +389,11 @@ const goRouter=()=>{
         align-items: center;
         justify-content: center;
         white-space: nowrap;
-        color: #2159C4;
+        color: #2159c4;
         font-size: 12px;
       }
       .wrap2_2 {
-        color: #24437E;
+        color: #24437e;
         font-size: 12px;
         flex-shrink: 1;
         padding-left: 10px;
@@ -337,11 +401,11 @@ const goRouter=()=>{
           width: 100%;
           border: none;
           &::placeholder {
-            color: #CECECE;
+            color: #cecece;
             font-size: 12px;
           }
           &:focus {
-            color: #24437E;
+            color: #24437e;
             font-size: 12px;
             outline: none;
             border: none;
@@ -365,17 +429,17 @@ const goRouter=()=>{
           box-sizing: border-box;
           padding: 3px 10px 11px 10px;
           border: none;
-          color: #24437E;
+          color: #24437e;
           font-size: 12px;
           &::placeholder {
-            color: #CECECE;
+            color: #cecece;
             font-size: 12px;
           }
           &:disabled {
             background: none;
           }
           &:focus {
-            color: #24437E;
+            color: #24437e;
             font-size: 12px;
             outline: none;
             border: none;
@@ -394,7 +458,7 @@ const goRouter=()=>{
       .wrap1_1 {
         padding-top: 14px;
         padding-bottom: 14px;
-        border-bottom: #BBC5E0 solid 1px;
+        border-bottom: #bbc5e0 solid 1px;
         display: flex;
         .wrap1_1_3 {
           margin-left: auto;
@@ -408,17 +472,17 @@ const goRouter=()=>{
           justify-content: center;
           align-items: center;
           padding-left: 10px;
-          color: #24437E;
+          color: #24437e;
           font-size: 12px;
           input {
             width: 100%;
             border: none;
             &::placeholder {
-              color: #CECECE;
+              color: #cecece;
               font-size: 12px;
             }
             &:focus {
-              color: #24437E;
+              color: #24437e;
               font-size: 12px;
               outline: none;
               border: none;
@@ -430,7 +494,7 @@ const goRouter=()=>{
           display: flex;
           align-items: center;
           flex-shrink: 0;
-          border-right: #BBC5E0 solid 1px;
+          border-right: #bbc5e0 solid 1px;
           width: 92px;
           font-size: 12px;
           color: #000;
@@ -455,7 +519,7 @@ const goRouter=()=>{
       align-items: center;
       color: #fff;
       font-size: 14px;
-      background-color: #2159C4;
+      background-color: #2159c4;
     }
     .wrap1 {
       border-radius: 15px;
@@ -468,10 +532,10 @@ const goRouter=()=>{
       color: #fff;
       &.btn0 {
         width: 100%;
-        background-color: #2159C4;
+        background-color: #2159c4;
       }
       &.btn1 {
-        background-color: #5A5A5A;
+        background-color: #5a5a5a;
       }
     }
   }
@@ -489,7 +553,7 @@ const goRouter=()=>{
       border-radius: 10px;
       width: 100%;
       height: 325px;
-      border: 3px solid #2159C4;
+      border: 3px solid #2159c4;
       position: relative;
       background-color: #000;
       overflow: hidden;
@@ -509,7 +573,7 @@ const goRouter=()=>{
         position: absolute;
         width: 66px;
         height: 32px;
-        background-color: #2159C4;
+        background-color: #2159c4;
         border-radius: 20px;
         bottom: 15px;
         right: 14px;
@@ -521,16 +585,13 @@ const goRouter=()=>{
         img {
           width: 16px;
           height: 16px;
-
         }
-
       }
-
     }
 
     .wrap1 {
       font-size: 10px;
-      color: #2159C4;
+      color: #2159c4;
     }
   }
 
@@ -551,12 +612,12 @@ const goRouter=()=>{
       .wrap1_1 {
         padding-top: 14px;
         padding-bottom: 14px;
-        border-bottom: #BBC5E0 solid 1px;
+        border-bottom: #bbc5e0 solid 1px;
         display: flex;
 
         .wrap1_1_2 {
           padding-left: 10px;
-          color: #24437E;
+          color: #24437e;
           font-size: 12px;
         }
 
@@ -564,7 +625,7 @@ const goRouter=()=>{
           display: flex;
           align-items: center;
           flex-shrink: 0;
-          border-right: #BBC5E0 solid 1px;
+          border-right: #bbc5e0 solid 1px;
           width: 92px;
           font-size: 12px;
           color: #000;
@@ -612,14 +673,14 @@ const goRouter=()=>{
 
       .wrap1_1 {
         font-size: 10px;
-        color: #2159C4;
+        color: #2159c4;
       }
     }
   }
 
   .content1 {
     height: 46px;
-    background-color: #2159C4;
+    background-color: #2159c4;
     border-radius: 10px;
     display: flex;
     justify-content: center;

src/views/signup/index.vue

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

src/views/upload-id-card/content/three.vue

@@ -1,139 +1,128 @@
 <script setup>
-import {ref} from 'vue';
+import { upload_img } from "@/apis/index.js";
-import {areaList} from '@vant/area-data';
 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 { artworkFile } = storeToRefs(userStore);
-const showBottom = ref(false)
+const afterRead = async (file) => {
-const openSelectAddress = () => {
+  const res = await upload_img({
-  showBottom.value = true
+    file: file.file,
-
+    source: "artwork",
+    type: 'image'
+  })
+  if (res.status === 0) {
+    artworkFile.value = res.data.ori_url
   }
-const confirmAddress = (data) => {
-  selectAddress.value=data
-  showBottom.value = false
 }
 </script>
 
 <template>
-  <div class="three-content">
+  <div class="two-content">
-    <van-popup
+    <van-uploader :afterRead="afterRead">
-        v-model:show="showBottom"
+      <div class="content1">
-        position="bottom"
+        <div class="wrap1">
-    >
+          <div v-show="!artworkFile"
-      <van-area title="请选择通讯地址" @cancel="showBottom=false"
+               class="wrap1_1">
-                @confirm="confirmAddress" :area-list="areaList"/>
+
-    </van-popup>
+            <img class="wrap1_1_2"
-    <div class="content-address">
+                 :src="defaultImg">
-      <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>
-      <div class="wrap4" @click="openSelectAddress">
+          <div v-show="artworkFile"
-        <img src="@/assets/images/zzz766@3x.png" alt="">
+               class="wrap1_2">
+            <img class="wrap1_2_1"
+                 :src="artworkFile">
           </div>
+          <div class="wrap1_3"
+               v-show="artworkFile">更换</div>
         </div>
-    <div class="detail-address">
+        <div class="wrap2">上传近照</div>
-      <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{
+.two-content {
-  margin-bottom: 247px;
+  margin-bottom: 115px;
 }
-.detail-address {
+
-  margin-top: 18px;
+.bottom-text {
-  padding: 16px 16px 12px 14px;
+  text-align: right;
-  width: 332px;
+  margin-top: 8px;
-  height: 205px;
+  color: #ffffff;
-  background-color: #fff;
+  font-size: 12px;
-  border-radius: 12px;
+}
+
+.content1 {
   box-sizing: border-box;
+  width: 332px;
+  height: 377px;
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 16px 20px 10px 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 
   .wrap2 {
-    height: 155px;
+    margin-top: 6px;
-    background-color: #F0F0F0;
+    color: #2159c4;
-    box-sizing: border-box;
+    font-size: 10px;
-    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;
+    overflow: hidden;
-    font-size: 12px;
+    width: 100%;
-    margin-bottom: 6px;
+    height: 100%;
-    padding-left: 10px;
-  }
-}
-
-.content-address {
     box-sizing: border-box;
-  width: 332px;
+    border: 2px solid #2159c4;
-  height: 45px;
+    border-radius: 10px;
-  border-radius: 12px;
+    display: flex;
-  background-color: #fff;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    .wrap1_3 {
+      border-radius: 20px;
+      font-size: 14px;
       display: flex;
       align-items: center;
-  padding: 13px 21px 11px 26px;
+      justify-content: center;
-
+      color: #fff;
-  .wrap4 {
+      width: 48px;
-    margin-left: auto;
+      height: 32px;
-
+      background-color: #2159c4;
+      position: absolute;
+      bottom: 12px;
+      right: 12px;
+    }
+    .wrap1_2 {
+      display: flex;
+      align-items: center;
+      justify-content: center;
       img {
-      width: 32.11px;
+        max-width: 293px;
-      height: 16px;
+        height: 330px;
       }
     }
-
+    .wrap1_1 {
-  .wrap3 {
+      width: 256px;
-    margin-left: 12px;
+      height: 297px;
-    color: #CECECE;
+      background-image: url("@/assets/images/zu1174@2x.png");
-    font-size: 12px;
+      background-size: cover;
-    &.show{
+      display: flex;
-      color: #24437E;
+      justify-content: center;
+      align-items: center;
+      .wrap1_1_1 {
+        margin: -18px;
+        width: 100%;
+        max-height: 297.5px;
+      }
+      .wrap1_1_2 {
+        width: 75px;
+        height: 75px;
       }
     }
-
-  .wrap1 {
-    flex-shrink: 0;
-    color: #000;
-    font-size: 12px;
   }
-
-  .wrap2 {
-    margin-left: 34px;
-    background-color: #BBC5E0;
-    width: 1px;
-    height: 20.93px;
-  }
-
 }
 </style>

src/views/upload-id-card/content/two.vue

@@ -1,14 +1,25 @@
 <script setup>
 import { upload_img } from "@/apis/index.js";
 import { useUserStore } from '@/stores/userStore.js'
+const userStore = useUserStore()
 import { storeToRefs } from "pinia";
 import defaultImg from "@/assets/images/zu1171@2x.png"
-const userStore = useUserStore()
+import { ref } from 'vue';
-const {recentPhoto} = storeToRefs(userStore);
+import { areaList } from '@vant/area-data';
+const { selectAddress, detailAddress, recentPhoto } = storeToRefs(userStore);
+const showBottom = ref(false)
+const openSelectAddress = () => {
+  showBottom.value = true
+
+}
+const confirmAddress = (data) => {
+  selectAddress.value = data
+  showBottom.value = false
+}
 const afterRead = async (file) => {
   const res = await upload_img({
     file: file.file,
-    source: "artwork",
+    source: "artist",
     type: 'image'
   })
   if (res.status === 0) {
@@ -22,31 +33,68 @@ const afterRead = async (file) => {
     <van-uploader :afterRead="afterRead">
       <div class="content1">
         <div class="wrap1">
-          <div v-show="!recentPhoto" class="wrap1_1">
+          <div v-show="!recentPhoto"
+               class="wrap1_1">
 
-            <img  class="wrap1_1_2"  :src="defaultImg">
+            <img class="wrap1_1_2"
+                 :src="defaultImg">
           </div>
-          <div v-show="recentPhoto" class="wrap1_2">
+          <div v-show="recentPhoto"
-            <img  class="wrap1_2_1"  :src="recentPhoto">
+               class="wrap1_2">
+            <img class="wrap1_2_1"
+                 :src="recentPhoto">
           </div>
-          <div class="wrap1_3" v-show="recentPhoto">更换</div>
+          <div class="wrap1_3"
+               v-show="recentPhoto">更换</div>
         </div>
         <div class="wrap2">上传近照</div>
       </div>
     </van-uploader>
     <div class="bottom-text">*点击相机上传/拍摄近照</div>
   </div>
+
+  <div class="address-content">
+    <van-popup v-model:show="showBottom"
+               position="bottom">
+      <van-area title="请选择通讯地址"
+                @cancel="showBottom=false"
+                @confirm="confirmAddress"
+                :area-list="areaList" />
+    </van-popup>
+    <div class="content-address">
+      <div class="address-wrap1">通讯地址</div>
+      <div class="address-wrap2"></div>
+      <div class="address-wrap3"
+           :class="[selectAddress?.selectedOptions.map(x=>x.text).join('/')?'show':'']">
+        {{selectAddress?.selectedOptions.map(x=>x.text).join('-')|| '省-市-区'}}
+      </div>
+      <div class="address-wrap4"
+           @click="openSelectAddress">
+        <img src="@/assets/images/zzz766@3x.png"
+             alt="">
+      </div>
+    </div>
+    <div class="detail-address">
+      <div class="address-wrap1">详细地址</div>
+      <div class="address-wrap2">
+        <textarea rows="4"
+                  cols="50"
+                  v-model="detailAddress"
+                  placeholder="在此输入详细地址">
+</textarea>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style scoped lang="scss">
 .two-content {
-  margin-bottom: 115px;
+  margin-bottom: 20px;
 }
-
 .bottom-text {
   text-align: right;
   margin-top: 8px;
-  color: #FFFFFF;
+  color: #ffffff;
   font-size: 12px;
 }
 
@@ -63,7 +111,7 @@ const afterRead = async (file) => {
 
   .wrap2 {
     margin-top: 6px;
-    color: #2159C4;
+    color: #2159c4;
     font-size: 10px;
   }
   .wrap1 {
@@ -71,7 +119,7 @@ const afterRead = async (file) => {
     width: 100%;
     height: 100%;
     box-sizing: border-box;
-    border: 2px solid #2159C4;
+    border: 2px solid #2159c4;
     border-radius: 10px;
     display: flex;
     justify-content: center;
@@ -86,7 +134,7 @@ const afterRead = async (file) => {
       color: #fff;
       width: 48px;
       height: 32px;
-      background-color: #2159C4;
+      background-color: #2159c4;
       position: absolute;
       bottom: 12px;
       right: 12px;
@@ -120,4 +168,95 @@ const afterRead = async (file) => {
     }
   }
 }
+
+.address-content {
+  margin-bottom: 60px;
+}
+.detail-address {
+  margin-top: 18px;
+  padding: 16px 16px 12px 14px;
+  width: 332px;
+  height: 205px;
+  background-color: #fff;
+  border-radius: 12px;
+  box-sizing: border-box;
+
+  .address-wrap2 {
+    height: 155px;
+    background-color: #f0f0f0;
+    box-sizing: border-box;
+    border-radius: 12px;
+    overflow: hidden;
+
+    textarea {
+      width: 100%;
+      box-sizing: border-box;
+      padding: 11px 17px 11px 17px;
+      background-color: #f0f0f0;
+      border: none;
+      color: #24437e;
+      font-size: 12px;
+      &::placeholder {
+        color: #cecece;
+        font-size: 12px;
+      }
+
+      &:focus {
+        color: #24437e;
+        font-size: 12px;
+        outline: none;
+        border: none;
+      }
+    }
+  }
+
+  .address-wrap1 {
+    color: #000;
+    font-size: 12px;
+    margin-bottom: 6px;
+    padding-left: 10px;
+  }
+}
+
+.content-address {
+  box-sizing: border-box;
+  width: 332px;
+  height: 45px;
+  border-radius: 12px;
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+  padding: 13px 21px 11px 26px;
+
+  .address-wrap4 {
+    margin-left: auto;
+
+    img {
+      width: 32.11px;
+      height: 16px;
+    }
+  }
+
+  .address-wrap3 {
+    margin-left: 12px;
+    color: #cecece;
+    font-size: 12px;
+    &.show {
+      color: #24437e;
+    }
+  }
+
+  .address-wrap1 {
+    flex-shrink: 0;
+    color: #000;
+    font-size: 12px;
+  }
+
+  .address-wrap2 {
+    margin-left: 34px;
+    background-color: #bbc5e0;
+    width: 1px;
+    height: 20.93px;
+  }
+}
 </style>

src/views/upload-id-card/index.vue

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