From a0bb8245f38adc5ef06d1d61584a75c5f433fcb5 Mon Sep 17 00:00:00 2001
From: scout <1134087124@qq.com>
Date: Tue, 4 Mar 2025 15:12:17 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E4=BD=9C=E5=93=81=E5=90=8D?=
 =?UTF-8?q?=E7=A7=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/stores/userStore.js                    |   4 +-
 src/views/reg-details/index.vue            | 195 ++++++++++++++-------
 src/views/upload-id-card/content/three.vue |  76 ++++++--
 src/views/upload-id-card/index.vue         |   5 +-
 4 files changed, 203 insertions(+), 77 deletions(-)

diff --git a/src/stores/userStore.js b/src/stores/userStore.js
index c78e09e..15c525d 100644
--- a/src/stores/userStore.js
+++ b/src/stores/userStore.js
@@ -20,6 +20,7 @@ const iDCardImage=ref({
     const recentPhoto = ref('')
     const artworkFile = ref('')
     const detailAddress=ref('')
+    const artWorkName=ref('')
     const submitReturnData=ref(storage.getItem('submitReturnData'))
     const temSubmitReturnData=ref(null)
     watch(submitReturnData,()=>{
@@ -35,6 +36,7 @@ const iDCardImage=ref({
         detailAddress,
         submitReturnData,
         formatToCustomDate,
-        temSubmitReturnData
+        temSubmitReturnData,
+        artWorkName
 }
 });
diff --git a/src/views/reg-details/index.vue b/src/views/reg-details/index.vue
index 4e1155c..017766b 100644
--- a/src/views/reg-details/index.vue
+++ b/src/views/reg-details/index.vue
@@ -180,22 +180,20 @@ const goRouter = () => {
 <template>
   <div class="container">
     <div class="content1">
-      报名日期：{{userStore.formatToCustomDate(submitReturnData.createdAt)}}
+      报名日期：{{ 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="submitReturnData.idCardPhoto"
-               @click="showImagePreview([submitReturnData.idCardPhoto])">
+        <div class="wrap1_2"><img class="wrap1_2_1" :src="submitReturnData.idCardPhoto"
+            @click="showImagePreview([submitReturnData.idCardPhoto])">
 
         </div>
       </div>
       <div class="wrap1">
         <div class="wrap1_1">身份证国徽面</div>
-        <div class="wrap1_2"><img class="wrap1_2_1"
-               :src="submitReturnData.idCardBackPhoto"
-               @click="showImagePreview([submitReturnData.idCardBackPhoto])">
+        <div class="wrap1_2"><img class="wrap1_2_1" :src="submitReturnData.idCardBackPhoto"
+            @click="showImagePreview([submitReturnData.idCardBackPhoto])">
 
         </div>
       </div>
@@ -204,50 +202,47 @@ const goRouter = () => {
       <div class="wrap1">
         <div class="wrap1_1">
           <div class="wrap1_1_1">姓名</div>
-          <div class="wrap1_1_2">{{submitReturnData.artistName}}</div>
+          <div class="wrap1_1_2">{{ submitReturnData.artistName }}</div>
         </div>
       </div>
       <div class="wrap1">
         <div class="wrap1_1">
           <div class="wrap1_1_1">性别</div>
-          <div class="wrap1_1_2">{{submitReturnData.gender===1?'男':'女'}}</div>
+          <div class="wrap1_1_2">{{ submitReturnData.gender === 1 ? '男' : '女' }}</div>
         </div>
       </div>
       <div class="wrap1">
         <div class="wrap1_1">
           <div class="wrap1_1_1">身份证号码</div>
-          <div class="wrap1_1_2">{{submitReturnData.idCard}}</div>
+          <div class="wrap1_1_2">{{ submitReturnData.idCard }}</div>
         </div>
       </div>
       <div class="wrap1">
         <div class="wrap1_1">
           <div class="wrap1_1_1">有效日期</div>
-          <div class="wrap1_1_2">{{submitReturnData.idCardStartDate?dayjs(submitReturnData.idCardStartDate).format('YYYY年MM月DD日'):''}}-{{submitReturnData.idCardEndDate?dayjs(submitReturnData.idCardEndDate).format('YYYY年MM月DD日'):''}}</div>
+          <div class="wrap1_1_2">
+            {{ submitReturnData.idCardStartDate ? dayjs(submitReturnData.idCardStartDate).format('YYYY年MM月DD日') : '' }}-{{ submitReturnData.idCardEndDate ? dayjs(submitReturnData.idCardEndDate).format('YYYY年MM月DD日') : '' }}
+          </div>
         </div>
       </div>
     </div>
-    <div 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"
-             @click="showImagePreview([submitReturnData.artistPhoto])">
-          <img :src="submitReturnData.artistPhoto"
-               alt="">
+        <div class="wrap2_1" @click="showImagePreview([submitReturnData.artistPhoto])">
+          <img :src="submitReturnData.artistPhoto" alt="">
         </div>
         <!-- <div v-show="btnStatus===0"
              class="wrap2_2"
              >
 
         </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>
@@ -255,79 +250,68 @@ 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="手机号"
-                   :disabled="btnStatus===0"
-                   v-model="submitReturnData.phoneNum"
-                   v-no-space>
+            <input placeholder="手机号" :disabled="btnStatus === 0" 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">
         <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 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="content-address">
+      <div class="address-wrap1">作品名称</div>
+      <div class="address-wrap2"></div>
 
+      <van-field :disabled="btnStatus !== 1" style="height: 47px;" v-model="submitReturnData.artworkName"
+        placeholder="在此输入作品名称" />
+
+
+    </div>
     <div class="content4">
       <div class="wrap1">作品</div>
       <div class="wrap2">
-        <div class="wrap2_1"
-             @click="showImagePreview([submitReturnData.artworkFile])">
-          <img :src="submitReturnData.artworkFile"
-               alt="">
+        <div class="wrap2_1" @click="showImagePreview([submitReturnData.artworkFile])">
+          <img :src="submitReturnData.artworkFile" alt="">
         </div>
         <!-- <div v-show="btnStatus===0"
              class="wrap2_2">
 
         </div> -->
-        <div class="wrap2_3"
-             v-show="btnStatus===1">
+        <div class="wrap2_3" v-show="btnStatus === 1">
           <van-uploader :afterRead="afterReadArtworkFile">
             <div>更换</div>
           </van-uploader>
@@ -336,23 +320,71 @@ const goRouter = () => {
       </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">
+.content-address {
+  box-sizing: border-box;
+  width: 332px;
+  height: 45px;
+  border-radius: 12px;
+  background-color: #fff;
+  display: flex;
+  margin-bottom: 18px;
+  margin-top: 18px;
+  align-items: center;
+  padding: 13px 21px 11px 26px;
+
+  :deep(.van-field__control) {
+    color: #24437e !important;
+    -webkit-text-fill-color: #24437e !important;
+  }
+
+  .address-wrap4 {
+    margin-left: auto;
+
+    img {
+      width: 32.11px;
+      height: 16px;
+    }
+  }
+
+  .address-wrap3 {
+    margin-left: 12px;
+    color: #cecece;
+    font-size: 12px;
+
+    &.show {
+      color: #24437e;
+    }
+  }
+
+  .address-wrap1 {
+    flex-shrink: 0;
+    color: #000;
+    font-size: 12px;
+  }
+
+  .address-wrap2 {
+    margin-left: 34px;
+    background-color: #bbc5e0;
+    width: 1px;
+    height: 20.93px;
+  }
+}
+
 .container {
   padding: 14px 22px 75px;
+
   .content7 {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-top: 10px;
+
     .wrap2 {
       margin-left: auto;
       font-size: 14px;
@@ -365,25 +397,30 @@ const goRouter = () => {
       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;
@@ -392,10 +429,12 @@ const goRouter = () => {
         display: flex;
         justify-content: center;
         align-items: center;
+
         .wrap2_1_1 {
           font-size: 10px;
         }
       }
+
       .wrap2_3 {
         display: flex;
         align-items: center;
@@ -404,18 +443,22 @@ const goRouter = () => {
         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;
@@ -425,9 +468,11 @@ const goRouter = () => {
         }
       }
     }
+
     .wrap2 {
       padding-left: 14px;
       padding-right: 14px;
+
       .wrap2_1 {
         padding-top: 14px;
         padding-bottom: 14px;
@@ -435,6 +480,7 @@ const goRouter = () => {
         color: #000;
         font-size: 12px;
       }
+
       .wrap2_2 {
         textarea {
           width: 100%;
@@ -443,13 +489,16 @@ const goRouter = () => {
           border: none;
           color: #24437e;
           font-size: 12px;
+
           &::placeholder {
             color: #cecece;
             font-size: 12px;
           }
+
           &:disabled {
             background: none;
           }
+
           &:focus {
             color: #24437e;
             font-size: 12px;
@@ -459,6 +508,7 @@ const goRouter = () => {
         }
       }
     }
+
     .wrap1 {
       padding-left: 14px;
       padding-right: 14px;
@@ -472,13 +522,16 @@ const goRouter = () => {
         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;
@@ -486,13 +539,16 @@ const goRouter = () => {
           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;
@@ -511,6 +567,7 @@ const goRouter = () => {
           font-size: 12px;
           color: #000;
           padding-left: 10px;
+
           .c86 {
             font-size: 10px;
           }
@@ -518,9 +575,11 @@ const goRouter = () => {
       }
     }
   }
+
   .content5 {
     margin-top: 42px;
     display: flex;
+
     .wrap2 {
       margin-left: auto;
       width: 200px;
@@ -533,6 +592,7 @@ const goRouter = () => {
       font-size: 14px;
       background-color: #2159c4;
     }
+
     .wrap1 {
       border-radius: 15px;
       width: 116px;
@@ -542,15 +602,18 @@ const goRouter = () => {
       align-items: center;
       font-size: 14px;
       color: #fff;
+
       &.btn0 {
         width: 100%;
         background-color: #2159c4;
       }
+
       &.btn1 {
         background-color: #5a5a5a;
       }
     }
   }
+
   .content4 {
     margin-top: 10px;
     background-color: #fff;
@@ -569,14 +632,17 @@ const goRouter = () => {
       position: relative;
       background-color: #000;
       overflow: hidden;
+
       .wrap2_1 {
         width: 100%;
         height: 100%;
+
         img {
           width: 100%;
           height: 100%;
         }
       }
+
       .wrap2_3 {
         color: #fff;
         display: flex;
@@ -590,10 +656,12 @@ const goRouter = () => {
         bottom: 15px;
         right: 14px;
       }
+
       .wrap2_2 {
         position: absolute;
         bottom: 16px;
         right: 16px;
+
         img {
           width: 16px;
           height: 16px;
@@ -642,6 +710,7 @@ const goRouter = () => {
           font-size: 12px;
           color: #000;
           padding-left: 10px;
+
           .c86 {
             font-size: 10px;
           }
diff --git a/src/views/upload-id-card/content/three.vue b/src/views/upload-id-card/content/three.vue
index ba380ee..34eaa2f 100644
--- a/src/views/upload-id-card/content/three.vue
+++ b/src/views/upload-id-card/content/three.vue
@@ -4,7 +4,7 @@ import { useUserStore } from '@/stores/userStore.js'
 import { storeToRefs } from "pinia";
 import defaultImg from "@/assets/images/zu1171@2x.png"
 const userStore = useUserStore()
-const { artworkFile } = storeToRefs(userStore);
+const { artworkFile, artWorkName } = storeToRefs(userStore);
 const afterRead = async (file) => {
   const res = await upload_img({
     file: file.file,
@@ -19,22 +19,25 @@ const afterRead = async (file) => {
 
 <template>
   <div class="two-content">
+    <div class="content-address">
+      <div class="address-wrap1">作品名称</div>
+      <div class="address-wrap2"></div>
+   
+        <van-field style="height: 47px;" v-model="artWorkName" placeholder="在此输入作品名称" />
+     
+   
+    </div>
     <van-uploader :afterRead="afterRead">
       <div class="content1">
         <div class="wrap1">
-          <div v-show="!artworkFile"
-               class="wrap1_1">
+          <div v-show="!artworkFile" class="wrap1_1">
 
-            <img class="wrap1_1_2"
-                 :src="defaultImg">
+            <img class="wrap1_1_2" :src="defaultImg">
           </div>
-          <div v-show="artworkFile"
-               class="wrap1_2">
-            <img class="wrap1_2_1"
-                 :src="artworkFile">
+          <div v-show="artworkFile" class="wrap1_2">
+            <img class="wrap1_2_1" :src="artworkFile">
           </div>
-          <div class="wrap1_3"
-               v-show="artworkFile">更换</div>
+          <div class="wrap1_3" v-show="artworkFile">更换</div>
         </div>
         <div class="wrap2">上传作品</div>
       </div>
@@ -71,6 +74,7 @@ const afterRead = async (file) => {
     color: #2159c4;
     font-size: 10px;
   }
+
   .wrap1 {
     overflow: hidden;
     width: 100%;
@@ -82,6 +86,7 @@ const afterRead = async (file) => {
     justify-content: center;
     align-items: center;
     position: relative;
+
     .wrap1_3 {
       border-radius: 20px;
       font-size: 14px;
@@ -96,15 +101,18 @@ const afterRead = async (file) => {
       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;
@@ -113,11 +121,13 @@ const afterRead = async (file) => {
       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;
@@ -125,4 +135,48 @@ const afterRead = async (file) => {
     }
   }
 }
+
+.content-address {
+  box-sizing: border-box;
+  width: 332px;
+  height: 45px;
+  border-radius: 12px;
+  background-color: #fff;
+  display: flex;
+  margin-bottom: 18px;
+  align-items: center;
+  padding: 13px 21px 11px 26px;
+
+  .address-wrap4 {
+    margin-left: auto;
+
+    img {
+      width: 32.11px;
+      height: 16px;
+    }
+  }
+
+  .address-wrap3 {
+    margin-left: 12px;
+    color: #cecece;
+    font-size: 12px;
+
+    &.show {
+      color: #24437e;
+    }
+  }
+
+  .address-wrap1 {
+    flex-shrink: 0;
+    color: #000;
+    font-size: 12px;
+  }
+
+  .address-wrap2 {
+    margin-left: 34px;
+    background-color: #bbc5e0;
+    width: 1px;
+    height: 20.93px;
+  }
+}
 </style>
diff --git a/src/views/upload-id-card/index.vue b/src/views/upload-id-card/index.vue
index c043be2..ace46c6 100644
--- a/src/views/upload-id-card/index.vue
+++ b/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, artworkFile, telNum, selectAddress, detailAddress, submitReturnData } = storeToRefs(userStore);
+const { idCardInfo, iDCardImage, recentPhoto, artworkFile, telNum, selectAddress, detailAddress, submitReturnData, artWorkName } = storeToRefs(userStore);
 const route = useRoute()
 const router = useRouter()
 const active = ref(Number(route.params.active))
@@ -45,7 +45,8 @@ const submitClick = async () => {
     idCardPhoto: iDCardImage.value.front,
     idCardBackPhoto: iDCardImage.value.back,
     artistPhoto: recentPhoto.value,
-    artworkFile: artworkFile.value
+    artworkFile: artworkFile.value,
+    artworkName: artWorkName.value
   }
   const res = await save_register_info(data)
   if (res.status === 0) {