submit

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

@@ -1,20 +1,34 @@
 <script setup>
 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" />-->
+    <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">
+      <div class="wrap3" :class="[selectAddress?.selectedOptions.map(x=>x.text).join('-')?'show':'']">
-      省-市-区
+        {{selectAddress?.selectedOptions.map(x=>x.text).join('-')|| '省-市-区'}}
       </div>
-    <div class="wrap4">
+      <div class="wrap4" @click="openSelectAddress">
         <img src="@/assets/images/zzz766@3x.png" alt="">
       </div>
     </div>
@@ -37,30 +51,36 @@ import { areaList } from '@vant/area-data';
   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;
@@ -68,6 +88,7 @@ import { areaList } from '@vant/area-data';
     padding-left: 10px;
   }
 }
+
 .content-address {
   box-sizing: border-box;
   width: 332px;
@@ -77,22 +98,31 @@ import { areaList } from '@vant/area-data';
   display: flex;
   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;

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}`)