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

<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 class="three-content">
    <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 class="detail-address">
      <div class="wrap1">详细地址</div>
      <div class="wrap2">
     <textarea rows="4" cols="50" placeholder="在此输入详细地址">
</textarea>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.three-content{
  margin-bottom: 247px;
}
.detail-address {
  margin-top: 18px;
  padding: 16px 16px 12px 14px;
  width: 332px;
  height: 205px;
  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;
    margin-bottom: 6px;
    padding-left: 10px;
  }
}

.content-address {
  box-sizing: border-box;
  width: 332px;
  height: 45px;
  border-radius: 12px;
  background-color: #fff;
  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;
    width: 1px;
    height: 20.93px;
  }

}
</style>