submit

package-lock.json

@@ -12,6 +12,7 @@
         "@varlet/ui": "^2.22.2",
         "axios": "^1.6.7",
         "dayjs": "^1.11.10",
+        "lodash": "^4.17.21",
         "normalize.css": "^8.0.1",
         "pinia": "^2.1.7",
         "vant": "^4.8.4",
@@ -1212,6 +1213,11 @@
         "node": ">=14"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
     "node_modules/magic-string": {
       "version": "0.30.5",
       "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.5.tgz",
@@ -2596,6 +2602,11 @@
       "integrity": "sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==",
       "dev": true
     },
+    "lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
     "magic-string": {
       "version": "0.30.5",
       "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.5.tgz",

package.json

@@ -13,6 +13,7 @@
     "@varlet/ui": "^2.22.2",
     "axios": "^1.6.7",
     "dayjs": "^1.11.10",
+    "lodash": "^4.17.21",
     "normalize.css": "^8.0.1",
     "pinia": "^2.1.7",
     "vant": "^4.8.4",

src/apis/index.js

@@ -30,3 +30,17 @@ export const scan_id_card = (data) => {
         data
     })
 }
+export const save_register_info = (data) => {
+    return request({
+        url: '/register/save_register_info',
+        method: 'post',
+        data
+    })
+}
+export const check_by_phone = (data) => {
+    return request({
+        url: '/register/check_by_phone',
+        method: 'post',
+        data
+    })
+}

src/router/index.js

@@ -25,6 +25,11 @@ const routes = [
                 path: 'upload-id-card/:active',
                 meta: { title: '上传身份证' },
                 component: () => import('@/views/upload-id-card/index.vue')
+            },
+            {
+                path: 'replace-id-card',
+                meta: { title: '更换身份证' },
+                component: () => import('@/views/replace-id-card/index.vue')
             }
         ]
     }

src/stores/userStore.js

@@ -1,12 +1,28 @@
 import { defineStore } from 'pinia';
-import {ref} from "vue";
+import {ref,watch} from "vue";
-
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
+import storage from "@/utils/storage.js"; // 导入中文语言包
+dayjs.locale('zh-cn'); // 使用中文语言包
 export const useUserStore = defineStore('user', ()=>{
 const idCardInfo=ref({})
 const iDCardImage=ref({
     front:'',
     back:''
 })
+    const formatToCustomDate=(dateString)=> {
+        const date = dayjs(dateString);
+        const amOrPm = date.hour() < 12 ? 'AM' : 'PM';
+        return date.format(`YYYY年MM月DD日, hh:mm`) + amOrPm;
+    }
+    const telNum=ref('')
+    const selectAddress=ref(null)
     const recentPhoto=ref('')
-    return {idCardInfo,iDCardImage,recentPhoto}
+    const detailAddress=ref('')
+    const submitReturnData=ref(storage.getItem('submitReturnData'))
+    const temSubmitReturnData=ref(null)
+    watch(submitReturnData,()=>{
+            storage.setItem('submitReturnData',submitReturnData.value)
+    })
+    return {idCardInfo,iDCardImage,recentPhoto,telNum,selectAddress,detailAddress,submitReturnData,formatToCustomDate,temSubmitReturnData}
 });

src/views/logon/index.vue

@@ -2,13 +2,16 @@
 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";
+const userStore = useUserStore()
+const {telNum,submitReturnData} = storeToRefs(userStore);
 import {ref,onBeforeUnmount} from "vue";
-import {check_code, send_code} from "@/apis/index.js";
+import {check_by_phone, check_code, send_code} from "@/apis/index.js";
 const router = useRouter();
 const isCountingDown = ref(false);
 const timeLeft = ref(60);
 const countdownInterval = ref(null);
-const telNum=ref('')
 const code=ref('')
 const sendCodeApi=async ()=>{
   const data={
@@ -41,16 +44,30 @@ 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
+      router.push(`/title-forward/reg-details`)
+    }else {
+      router.push(`/title-forward/upload-id-card/${0}`)
+    }
+
+  }
+}
 const goRouter=async ()=>{
   const data={
     telNum:telNum.value,
     code:code.value
   }
-const res=await check_code(data)
+/*const res=await check_code(data)
   if (res.status===0){
-
+    isSignUp()
-  }
+  }*/
-  router.push(`/title-forward/upload-id-card/${0}`)
+  isSignUp()
 }
 onBeforeUnmount(() => {
   clearInterval(countdownInterval.value);

src/views/reg-details/index.vue

@@ -1,23 +1,115 @@
 <script setup>
-import defaultImage1 from '@/assets/images/zu1172@2x.png';
+import {ref,computed} from "vue";
+import {useUserStore} from '@/stores/userStore.js'
+import {storeToRefs} from "pinia";
+import dayjs from "dayjs";
+import {showToast} from "vant";
+import {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";
+const router = useRouter();
+const userStore = useUserStore()
+const {submitReturnData,telNum,selectAddress,temSubmitReturnData} = storeToRefs(userStore);
+const btnStatus=ref(0)
+const isCountingDown = ref(false);
+const countdownInterval = ref(null);
+const code=ref('')
+const timeLeft = ref(60);
+const showBottom = ref(false)
+const sendCodeApi=async ()=>{
+  const data={
+    TelNum:telNum.value
+  }
+  const res=await send_code(data)
+  if (res.status===0){
+  }
+}
+const rightClick=async ()=>{
+  const res=await save_register_info(submitReturnData.value)
+  if (res.status===0){
+    showToast({
+      message:'修改成功',
+      className: 'particulars-detail-popup'
+    });
+  }
+}
+const leftClick=()=>{
+  switch (btnStatus.value){
+    case 0:
+      temSubmitReturnData.value = cloneDeep(submitReturnData.value)
+      btnStatus.value=1
+     break
+    case 1:
+      submitReturnData.value=cloneDeep(temSubmitReturnData.value)
+      btnStatus.value=0
+      break
+  }
+}
+const btnLabel=computed(()=>{
+  switch (btnStatus.value){
+    case 0:
+      return '修改'
+    case 1:
+      return '取消'
+  }
+})
+const afterRead = 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
+  }
+}
+const confirmAddress = (data) => {
+  submitReturnData.value.address=JSON.stringify(data.selectedOptions)
+  showBottom.value = false
+}
+const sendCode = async () => {
+  if (!isCountingDown.value){
+    if(!/^1[3-9]\d{9}$/.test(telNum.value)){
+      showToast({
+        message:'请输入合规的手机号码',
+        className:'particulars-detail-popup'
+      });
+      return
+    }
+    await sendCodeApi()
 
+  }
+  isCountingDown.value = true;
+  countdownInterval.value = setInterval(() => {
+    if (timeLeft.value > 0) {
+      timeLeft.value--;
+    } else {
+      clearInterval(countdownInterval.value);
+      isCountingDown.value = false;
+      timeLeft.value = 60;
+    }
+  }, 1000);
+};
+const goRouter=()=>{
+  router.push(`/title-forward/replace-id-card`)
+}
 </script>
-
 <template>
   <div class="container">
     <div class="content1">
-      报名日期：2023年12月18日，09:33AM
+      报名日期：{{userStore.formatToCustomDate(submitReturnData.createdAt)}}
     </div>
     <div class="content2">
       <div class="wrap1">
         <div class="wrap1_1">身份证人像面</div>
-        <div class="wrap1_2"><img class="wrap1_2_1" :src="defaultImage1">
+        <div class="wrap1_2"><img class="wrap1_2_1" :src="submitReturnData.idCardPhoto">
           <img class="wrap1_2_2" src="@/assets/images/zu1179@2x.png" alt="">
         </div>
       </div>
       <div class="wrap1">
-        <div class="wrap1_1">身份证人像面</div>
+        <div class="wrap1_1">身份证国徽面</div>
-        <div class="wrap1_2"><img class="wrap1_2_1" :src="defaultImage1">
+        <div class="wrap1_2"><img class="wrap1_2_1" :src="submitReturnData.idCardBackPhoto">
           <img class="wrap1_2_2" src="@/assets/images/zu1179@2x.png" alt="">
         </div>
       </div>
@@ -26,52 +118,306 @@ import defaultImage1 from '@/assets/images/zu1172@2x.png';
       <div class="wrap1">
         <div class="wrap1_1">
           <div class="wrap1_1_1">姓名</div>
-          <div class="wrap1_1_2">某某某</div>
+          <div class="wrap1_1_2">{{submitReturnData.artistName}}</div>
         </div>
-
       </div>
       <div class="wrap1">
         <div class="wrap1_1">
           <div class="wrap1_1_1">性别</div>
-          <div class="wrap1_1_2">男/女</div>
+          <div class="wrap1_1_2">{{submitReturnData.gender===1?'男':'女'}}</div>
         </div>
-
       </div>
       <div class="wrap1">
         <div class="wrap1_1">
           <div class="wrap1_1_1">身份证号码</div>
-          <div class="wrap1_1_2">2912301283123821801</div>
+          <div class="wrap1_1_2">{{submitReturnData.idCard}}</div>
-        </div>
-      </div>
-      <div class="wrap1">
-        <div class="wrap1_1">
-          <div class="wrap1_1_1">身份证地址</div>
-          <div class="wrap1_1_2">玛纳斯曾经多少次收到款不错的撒纯
-            白色的长款保暖升级新款淑女款
-          </div>
         </div>
       </div>
       <div class="wrap1">
         <div class="wrap1_1">
           <div class="wrap1_1_1">有效日期</div>
-          <div class="wrap1_1_2">2023年12月16日-2026年12月16日</div>
+          <div class="wrap1_1_2">{{dayjs(submitReturnData.idCardStartDate).format('YYYY年MM月DD日')}}-{{dayjs(submitReturnData.idCardEndDate).format('YYYY年MM月DD日')}}</div>
         </div>
       </div>
     </div>
+    <div class="content7">
+      <div class="wrap1">*身份证即将到期/已到期，请及时更换→→→</div>
+      <div class="wrap2" @click="goRouter">更换身份证</div>
+    </div>
     <div class="content4">
       <div class="wrap1">近照</div>
       <div class="wrap2">
-        <div class="wrap2_1"></div>
+        <div class="wrap2_1">
-        <div class="wrap2_2"></div>
+          <img :src="submitReturnData.artistPhoto" alt="">
+        </div>
+        <div v-show="btnStatus===0" class="wrap2_2">
+          <img src="@/assets/images/zu1181@2x.png" alt="">
+        </div>
+        <div  class="wrap2_3" v-show="btnStatus===1">
+          <van-uploader :afterRead="afterRead">
+            <div>更换</div>
+          </van-uploader>
+        </div>
+
       </div>
     </div>
+    <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>
+          </div>
+        </div>
+      </div>
+      <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>
+          <div class="wrap2_3" @click="sendCode"> {{ isCountingDown ? `(${timeLeft})重新发送` : '发送验证码' }}</div>
+        </div>
+      </div>
+      <div class="wrap1">
+        <div class="wrap1_1">
+          <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>
+        </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>
+        </div>
+      </div>
+
+    </div>
+    <div class="content5">
+      <div class="wrap1" @click="leftClick" :class="[`btn${btnStatus}`]">{{ btnLabel }}</div>
+      <div class="wrap2" @click="rightClick">确认</div>
+    </div>
   </div>
 </template>
 
 <style scoped lang="scss">
 .container {
   padding: 14px 22px 75px;
+  .content7{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 10px;
+    .wrap2{
+      font-size: 14px;
+      color: #fff;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 116px;
+      height: 30px;
+      background-color:#E74747 ;
+      border-radius: 15px;
+    }
+    .wrap1{
+    font-size: 10px;
+      color: #E74747;
+    }
+  }
+  .content6 {
+    margin-top: 10px;
+    background-color: #fff;
+    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;
+      }
+      .wrap2_1{
+
+        flex: 0 0 auto;
+        font-size: 12px;
+        width: 92px;
+        border-right: 1px solid #BBC5E0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .wrap2_1_1{
+          font-size: 10px;
+        }
+      }
+      .wrap2_3{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        white-space: nowrap;
+        color: #2159C4;
+        font-size: 12px;
+      }
+      .wrap2_2{
+        color: #24437E;
+        font-size: 12px;
+        flex-shrink: 1;
+        padding-left: 10px;
+        input{
+          width: 100%;
+          border: none;
+          &::placeholder{
+            color: #CECECE;
+            font-size: 12px;
+          }
+          &:focus{
+            color: #24437E;
+            font-size: 12px;
+            outline: none;
+            border: none;
+          }
+        }
+      }
+    }
+    .wrap2{
+      padding-left: 14px;
+      padding-right: 14px;
+      .wrap2_1{
+        padding-top: 14px;
+        padding-bottom: 14px;
+        padding-left: 10px;
+      color: #000;
+        font-size: 12px;
+      }
+      .wrap2_2{
+        textarea {
+          width: 100%;
+          box-sizing: border-box;
+          padding: 3px 10px 11px 10px;
+          border: none;
+          color: #24437E;
+          font-size: 12px;
+          &::placeholder {
+            color: #CECECE;
+            font-size: 12px;
+          }
+          &:disabled{
+            background: none;
+          }
+          &:focus {
+            color: #24437E;
+            font-size: 12px;
+            outline: none;
+            border: none;
+          }
+        }
+      }
+    }
+    .wrap1 {
+      padding-left: 14px;
+      padding-right: 14px;
+
+      &:last-child .wrap1_1 {
+        border-bottom: none;
+      }
+
+      .wrap1_1 {
+        padding-top: 14px;
+        padding-bottom: 14px;
+        border-bottom: #BBC5E0 solid 1px;
+        display: flex;
+        .wrap1_1_3{
+          margin-left: auto;
+          img{
+            width: 32px;
+            height: 16px;
+          }
+        }
+        .wrap1_1_2 {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          padding-left: 10px;
+          color: #24437E;
+          font-size: 12px;
+          input{
+            width: 100%;
+            border: none;
+            &::placeholder{
+              color: #CECECE;
+              font-size: 12px;
+            }
+            &:focus{
+              color: #24437E;
+              font-size: 12px;
+              outline: none;
+              border: none;
+            }
+          }
+        }
+
+        .wrap1_1_1 {
+          display: flex;
+          align-items: center;
+          flex-shrink: 0;
+          border-right: #BBC5E0 solid 1px;
+          width: 92px;
+          font-size: 12px;
+          color: #000;
+          padding-left: 10px;
+          .c86{
+            font-size: 10px;
+          }
+        }
+      }
+    }
+  }
+  .content5{
+    margin-top: 42px;
+    display: flex;
+    .wrap2{
+      margin-left: auto;
+      width: 200px;
+      height: 30px;
+      border-radius: 15px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: #fff;
+      font-size: 14px;
+      background-color: #2159C4;
+    }
+    .wrap1{
+      border-radius: 15px;
+      width: 116px;
+      height: 30px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 14px;
+      color: #fff;
+      &.btn0{
+        background-color: #24437E;
+      }
+      &.btn1{
+        background-color: #5A5A5A;
+      }
+    }
+  }
   .content4 {
     margin-top: 10px;
     background-color: #fff;
@@ -87,6 +433,42 @@ import defaultImage1 from '@/assets/images/zu1172@2x.png';
       width: 100%;
       height: 325px;
       border: 3px solid #2159C4;
+      position: relative;
+      background-color: #000;
+      overflow: hidden;
+      .wrap2_1{
+        width: 100%;
+        height: 100%;
+        img{
+          width: 100%;
+          height: 100%;
+        }
+      }
+      .wrap2_3{
+        color: #fff;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: absolute;
+        width: 66px;
+        height: 32px;
+        background-color: #2159C4;
+        border-radius: 20px;
+        bottom: 15px;
+        right: 14px;
+      }
+      .wrap2_2{
+        position: absolute;
+        bottom: 16px;
+        right: 16px;
+        img{
+          width: 16px;
+          height: 16px;
+
+        }
+
+      }
+
     }
 
     .wrap1 {
@@ -130,7 +512,9 @@ import defaultImage1 from '@/assets/images/zu1172@2x.png';
           font-size: 12px;
           color: #000;
           padding-left: 10px;
-
+          .c86{
+            font-size: 10px;
+          }
         }
       }
     }

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

@@ -0,0 +1,23 @@
+<script setup>
+import one from '@/views/upload-id-card/content/one.vue'
+</script>
+
+<template>
+  <div class="container">
+    <div class="content1">
+      <one></one>
+    </div>
+    <div class="content2">
+
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.container {
+  padding-top: 22px;
+  padding-left: 22px;
+  padding-right: 22px;
+
+}
+</style>

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

@@ -1,10 +1,13 @@
 <script setup>
-
+import {useUserStore} from '@/stores/userStore.js'
+import {storeToRefs} from "pinia";
+const userStore = useUserStore()
+const {submitReturnData} = storeToRefs(userStore);
 </script>
 
 <template>
   <div class="content1">
-    <div class="wrap1">恭喜<span class="wrap1_1">某某某</span>先生/女士完成国展报名登记，报名日期为：2023年12月18日，09:33AM。请在会场入口处使用身份识别(人像)进入展会，详情请查看官网已了解更多资讯。</div>
+    <div class="wrap1">恭喜<span class="wrap1_1">{{submitReturnData.artistName}}</span>{{submitReturnData.gender===1?'男':'女'}}完成国展报名登记，报名日期为：{{submitReturnData.createdAt}}。请在会场入口处使用身份识别(人像)进入展会，详情请查看官网已了解更多资讯。</div>
     <div class="wrap2">前往：https://cnisakncsncs.com.cn</div>
   </div>
 </template>

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

@@ -74,7 +74,6 @@ const cardFace = async (img, num) => {
         </div>
       </van-uploader>
     </div>
-<template v-if="isWithinThreeMonths(idCardInfo.expirationDate)">
   <div class="content4">
     <div class="wrap1">
       <div class="wrap1_1">
@@ -88,14 +87,12 @@ const cardFace = async (img, num) => {
         <div class="wrap1_1_1">性别</div>
         <div class="wrap1_1_2">{{idCardInfo.sex}}</div>
       </div>
-
     </div>
     <div class="wrap1">
       <div class="wrap1_1">
         <div class="wrap1_1_1">身份证号码</div>
         <div class="wrap1_1_2">{{idCardInfo.iDNum}}</div>
       </div>
-
     </div>
     <div class="wrap1">
       <div class="wrap1_1">
@@ -108,12 +105,11 @@ const cardFace = async (img, num) => {
         <div class="wrap1_1_1">有效日期</div>
         <div class="wrap1_1_2">{{dayjs(idCardInfo.issueDate).format('YYYY年MM月DD日')}}-{{dayjs(idCardInfo.expirationDate).format('YYYY年MM月DD日')}}</div>
       </div>
-
     </div>
   </div>
   <div class="content5">*自动识别内容，请仔细核对</div>
-  <div class="content6">证件即将过期，请尽快更新，否则将影响部分功能使用！</div>
+  <div class="content6"  v-if="isWithinThreeMonths(idCardInfo.expirationDate)">证件即将过期，请尽快更新，否则将影响部分功能使用！</div>
-</template>
+
 
   </div>
 </template>

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

@@ -1,7 +1,10 @@
 <script setup>
 import {ref} from 'vue';
 import {areaList} from '@vant/area-data';
-const selectAddress=ref(null)
+import {useUserStore} from '@/stores/userStore.js'
+import {storeToRefs} from "pinia";
+const userStore = useUserStore()
+const {selectAddress,detailAddress} = storeToRefs(userStore);
 const showBottom = ref(false)
 const openSelectAddress = () => {
   showBottom.value = true
@@ -25,7 +28,7 @@ const confirmAddress = (data) => {
     <div class="content-address">
       <div class="wrap1">通讯地址</div>
       <div class="wrap2"></div>
-      <div class="wrap3" :class="[selectAddress?.selectedOptions.map(x=>x.text).join('-')?'show':'']">
+      <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">
@@ -35,7 +38,7 @@ const confirmAddress = (data) => {
     <div class="detail-address">
       <div class="wrap1">详细地址</div>
       <div class="wrap2">
-     <textarea rows="4" cols="50" placeholder="在此输入详细地址">
+     <textarea rows="4" cols="50" v-model="detailAddress" placeholder="在此输入详细地址">
 </textarea>
       </div>
     </div>

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

@@ -22,10 +22,14 @@ const afterRead = async (file) => {
     <van-uploader :afterRead="afterRead">
       <div class="content1">
         <div class="wrap1">
-          <div class="wrap1_1">
+          <div v-show="!recentPhoto" class="wrap1_1">
-            <img class="wrap1_1_1" v-if="recentPhoto" :src="recentPhoto">
+
-            <img  class="wrap1_1_2" v-else :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>
+          <div class="wrap1_3">更换</div>
         </div>
         <div class="wrap2">上传近照</div>
       </div>
@@ -62,26 +66,51 @@ const afterRead = async (file) => {
     color: #2159C4;
     font-size: 10px;
   }
-
   .wrap1 {
     width: 100%;
     height: 100%;
     box-sizing: border-box;
     border: 2px solid #2159C4;
     border-radius: 10px;
-    padding: 18px;
+    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: 100%;
+      width: 256px;
-      height: 100%;
+      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%;
-        height: 100%;
+        max-height: 297.5px;
       }
       .wrap1_1_2 {
         width: 75px;

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

@@ -5,12 +5,13 @@ 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} from "vue";
+import {computed, ref,watch} from "vue";
 import {storeToRefs} from "pinia";
 import {useUserStore} from "@/stores/userStore.js";
 import {showToast} from "vant";
+import {save_register_info} from "@/apis/index.js";
 const userStore = useUserStore()
-const {idCardInfo,iDCardImage,recentPhoto} = storeToRefs(userStore);
+const {idCardInfo,iDCardImage,recentPhoto,telNum,selectAddress,detailAddress,submitReturnData} = storeToRefs(userStore);
 const route = useRoute()
 const router = useRouter()
 const active = ref(Number(route.params.active))
@@ -27,6 +28,39 @@ const contentComputed = computed(() => {
       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 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
+  }
+  console.log(active.value,'active')
+},{
+  immediate:true
+})
 const stepsClick = (item) => {
   switch (active.value) {
     case 0:
@@ -43,14 +77,14 @@ const stepsClick = (item) => {
       buttons.value = [{label: "上一步", type: "back"}, {label: "下一步", type: "next"}]
       break
     case 1:
-      if (!recentPhoto.value){
-        showToast({
-          message:'请上传近照',
-          className:'particulars-detail-popup'
-        });
-        return;
-      }
       if (item.type === 'next') {
+        if (!recentPhoto.value){
+          showToast({
+            message:'请上传近照',
+            className:'particulars-detail-popup'
+          });
+          return;
+        }
         active.value=2
         router.replace(`/title-forward/upload-id-card/${2}`)
         buttons.value = [{label: "上一步", type: "back"}, {label: "提交", type: "submit"}]
@@ -70,6 +104,7 @@ const stepsClick = (item) => {
         router.replace(`/title-forward/upload-id-card/${1}`)
         buttons.value = [{label: "上一步", type: "back"}, {label: "下一步", type: "next"}]
       }else if (item.type === 'submit'){
+        submitClick()
         active.value=3
         router.replace(`/title-forward/upload-id-card/${3}`)
         buttons.value = [{label: "完成", type: "finish"}]