From b3dcecb7e39c9575ce28a7cc7a04b87b92b8cf03 Mon Sep 17 00:00:00 2001
From: Phoenix <64720302+Concur-max@users.noreply.github.com>
Date: Mon, 5 Feb 2024 16:51:32 +0800
Subject: [PATCH] submit

---
 src/views/upload-id-card/content/three.vue | 88 +++++++++++++++-------
 src/views/upload-id-card/index.vue         |  2 +-
 2 files changed, 60 insertions(+), 30 deletions(-)

diff --git a/src/views/upload-id-card/content/three.vue b/src/views/upload-id-card/content/three.vue
index 59d2e90..850049a 100644
--- a/src/views/upload-id-card/content/three.vue
+++ b/src/views/upload-id-card/content/three.vue
@@ -1,35 +1,49 @@
 <script setup>
-import { ref } from 'vue';
-import { areaList } from '@vant/area-data';
-
+import {ref} from 'vue';
+import {areaList} from '@vant/area-data';
+const selectAddress=ref(null)
+const showBottom = ref(false)
+const openSelectAddress = () => {
+  showBottom.value = true
 
+}
+const confirmAddress = (data) => {
+  selectAddress.value=data
+  showBottom.value = false
+}
 </script>
 
 <template>
-<div>
-<!--  <van-area title="标题" :area-list="areaList" />-->
-  <div class="content-address">
-    <div class="wrap1">通讯地址</div>
-    <div class="wrap2"></div>
-    <div class="wrap3">
-      省-市-区
-    </div>
-    <div class="wrap4">
-      <img src="@/assets/images/zzz766@3x.png" alt="">
+  <div>
+    <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>
+      <div class="wrap4" @click="openSelectAddress">
+        <img src="@/assets/images/zzz766@3x.png" alt="">
+      </div>
     </div>
-  </div>
-  <div class="detail-address">
+    <div class="detail-address">
       <div class="wrap1">详细地址</div>
       <div class="wrap2">
      <textarea rows="4" cols="50" placeholder="在此输入详细地址">
 </textarea>
       </div>
+    </div>
   </div>
-</div>
 </template>
 
 <style scoped lang="scss">
-.detail-address{
+.detail-address {
   margin-top: 18px;
   padding: 16px 16px 12px 14px;
   width: 332px;
@@ -37,38 +51,45 @@ import { areaList } from '@vant/area-data';
   background-color: #fff;
   border-radius: 12px;
   box-sizing: border-box;
-  .wrap2{
+
+  .wrap2 {
     height: 155px;
     background-color: #F0F0F0;
     box-sizing: border-box;
     border-radius: 12px;
     overflow: hidden;
-    textarea{
+
+    textarea {
       width: 100%;
       box-sizing: border-box;
       padding: 11px 17px 11px 17px;
       background-color: #F0F0F0;
       border: none;
-
-      &::placeholder{
+      color: #24437E;
+      font-size: 12px;
+      &::placeholder {
         color: #CECECE;
         font-size: 12px;
       }
-      &:focus{
+
+      &:focus {
+        color: #24437E;
         font-size: 12px;
         outline: none;
         border: none;
       }
     }
   }
-  .wrap1{
+
+  .wrap1 {
     color: #000;
     font-size: 12px;
     margin-bottom: 6px;
     padding-left: 10px;
   }
 }
-.content-address{
+
+.content-address {
   box-sizing: border-box;
   width: 332px;
   height: 45px;
@@ -77,23 +98,32 @@ import { areaList } from '@vant/area-data';
   display: flex;
   align-items: center;
   padding: 13px 21px 11px 26px;
-  .wrap4{
+
+  .wrap4 {
     margin-left: auto;
-    img{
+
+    img {
       width: 32.11px;
       height: 16px;
     }
   }
-  .wrap3{
+
+  .wrap3 {
     margin-left: 12px;
     color: #CECECE;
     font-size: 12px;
+    &.show{
+      color: #24437E;
+    }
   }
-  .wrap1{
+
+  .wrap1 {
+    flex-shrink: 0;
     color: #000;
     font-size: 12px;
   }
-  .wrap2{
+
+  .wrap2 {
     margin-left: 34px;
     background-color: #BBC5E0;
     width: 1px;
diff --git a/src/views/upload-id-card/index.vue b/src/views/upload-id-card/index.vue
index c7d3c05..652b6b2 100644
--- a/src/views/upload-id-card/index.vue
+++ b/src/views/upload-id-card/index.vue
@@ -30,7 +30,7 @@ const stepsClick = (item) => {
       if (item.type === 'next') {
         active.value=2
         router.replace(`/title-forward/upload-id-card/${2}`)
-        buttons.value = [{label: "上一步", type: "back"}, {label: "完成", type: "finish"}]
+        buttons.value = [{label: "上一步", type: "back"}, {label: "提交", type: "submit"}]
       } else if (item.type === 'back') {
         active.value=0
         router.replace(`/title-forward/upload-id-card/${0}`)