purchase-let/components/addressPopup.vue

<template>
  <up-popup :show="show" closeable round="10" @close="close">
    <view class="address-popup">
      <view class="head-title">收货人与详细地址</view>
      <view class="list-admin">
        <view>常用地址</view>
        <view class="admin-btn">
          <view class="btn" @click="navTo('/pagesOrder/addressList/addressList')"><up-icon name="edit-pen" color="#20B128"></up-icon>管理</view>
          <view class="btn" @click="navTo('/pagesOrder/addressEdit/addressEdit')"><up-icon name="plus" color="#20B128"></up-icon>新增</view>
        </view>
      </view>
      <scroll-view style="height: 600rpx;padding-bottom: 20rpx;" scroll-y>
        <view class="row" v-for="(item,index) in list" :key="index" @click="addressType=index">
          <view class="content">
            <view class="top">
              <view class="name">{{item.real_name}}</view>
              <view class="phone">{{item.phone}}</view>
              <u-tag v-if="item.is_default" style="pointer-events: none;" text="默认" type="success" plain size="mini"></u-tag>
            </view>
            <view class="bottom u-line-2">{{item.detail}}</view>
          </view>
          <image v-if="addressType==index" src="@/static/icon/check.png"></image>
          <image v-else src="@/static/icon/n-check.png"></image>
        </view>
      </scroll-view>
      <up-button color="#20B128" shape="circle" @click="submitAddress">确认</up-button>
    </view>
  </up-popup>
</template>

<script setup>
  import { ref } from "vue"

  const addressType = ref(-1)

  const props = defineProps({
    show: {
      type: Boolean,
      default: false
    },
    list: {
      type: Array,
      default: ()=>[]
    }
  })

  const emit = defineEmits(['close', 'change']);
  const close = () => {
    emit('close');
  }

  const submitAddress = () => {
    emit('change', props.list[addressType.value]);
  }
  
  const navTo = (url)=>{
    uni.navigateTo({
      url: url
    })
  }
</script>

<style scoped lang="scss">
  .address-popup {
    padding: 30rpx;

    .head-title {
      font-weight: bold;
      text-align: center;
      margin-bottom: 20rpx;
    }

    .list-admin {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20rpx;

      .admin-btn {
        display: flex;
        color: #20B128;

        .btn {
          margin-left: 20rpx;
          display: flex;
          align-items: center;
          
          &:active {
            color: rgba(#20B128, 0.8);
            transition: background-color 0.5s;
            animation: disappear 0.5s 0.5s forwards;
          }
        }
      }
    }

    .row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 20rpx;
      border-bottom: 1rpx solid #f6f6f6;
      margin-bottom: 20rpx;

      &:last-child {
        border-bottom: none;
        margin-bottom: 0;
      }

      .content {
        .top {
          display: flex;

          view {
            margin-right: 20rpx;
          }
        }

        .bottom {}
      }

      image {
        width: 40rpx;
        height: 40rpx;
        flex-shrink: 0;
      }
    }
  }

  @keyframes disappear {
    to {
      opacity: 0;
      /* 渐隐 */
      transform: scale(0);
      /* 缩小 */
    }
  }
</style>