submit

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

@@ -1,35 +1,49 @@
 <script setup>
-import { ref } from 'vue';
+import {ref} from 'vue';
-import { areaList } from '@vant/area-data';
+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>
+  <div>
-<!--  <van-area title="标题" :area-list="areaList" />-->
+    <van-popup
-  <div class="content-address">
+        v-model:show="showBottom"
-    <div class="wrap1">通讯地址</div>
+        position="bottom"
-    <div class="wrap2"></div>
+    >
-    <div class="wrap3">
+      <van-area title="请选择通讯地址" @cancel="showBottom=false"
-      省-市-区
+                @confirm="confirmAddress" :area-list="areaList"/>
-    </div>
+    </van-popup>
-    <div class="wrap4">
+    <div class="content-address">
-      <img src="@/assets/images/zzz766@3x.png" alt="">
+      <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;
-
+      color: #24437E;
-      &::placeholder{
+      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;

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