health-front/pages_order/address/addressView.vue

<template>
  <view>
    <template v-if="data">
      <view class="flex user">
        <view>{{ data.name }}</view>
        <view class="flex">
          <text>{{ data.phone }}</text>
          <button v-if="enableCopy" class="btn btn-copy" @click="$utils.copyText(data.phone)">复制</button>
        </view>
        <view class="tag" v-if="data.default">默认</view>
      </view>
      <view class="flex address">
        <image v-if="showIcon" class="icon" src="@/pages_order/static/address/icon-address.png" mode="scaleToFill"></image>
        <view>
          <text class="text">{{ displayAddress }}</text>
          <button v-if="enableCopy" class="btn btn-copy" @click="$utils.copyText(displayAddress)">复制</button>
        </view>
      </view>
    </template>
    <template v-else>
      <view>请选择地址</view>
    </template>
  </view>
</template>

<script>
  export default {
    props: {
      data: {
        type: Object,
        default() {
          return null
        }
      },
      showIcon: {
        type: Boolean,
        default: false,
      },
      enableCopy: {
        type: Boolean,
        default: false,
      },
    },
    computed: {
      displayAddress() {
        if (!this.data) {
          return ''
        }
        const { area, address } = this.data

        return `${area.join('')}${address}`
      },
    },
  }
</script>

<style scoped lang="scss">

  .btn {
    &-copy {
      display: inline-flex;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      line-height: 1.4;
      color: #7451DE;
    }
  }

  .user {
    justify-content: flex-start;
    column-gap: 24rpx;

    font-family: PingFang SC;
    font-weight: 400;
    font-size: 32rpx;
    line-height: 1.4;
    color: #181818;

    .tag {
      padding: 2rpx 14rpx;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      line-height: 1.4;
      color: #7451DE;
      background: #EFEAFF;
      border: 2rpx solid #7451DE;
      border-radius: 8rpx;
    }

    .btn-copy {
      margin-left: 24rpx;
    }
  }

  .address {
    margin-top: 16rpx;
    align-items: flex-start;
    justify-content: flex-start;
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    line-height: 1.4;
    color: #9B9B9B;

    .icon {
      flex: none;
      margin: 3px 8rpx 0 0;
      width: 32rpx;
      height: 32rpx;
    }

    .text {
      margin-right: 8rpx;
    }

    .btn-copy {
      vertical-align: text-bottom;
    }
  }

</style>