wx-qhb/pageC/addressManagement/component/address.vue

<template>
  <view class="item-list">
    <view class="item-top">
      <view class="name">
        {{ itemInfo.name }}
      </view>
      <text class="phone">
        {{ itemInfo.mobile }}
      </text>
    </view>
    <view class="item-content">
      {{
        itemInfo.province_name +
        itemInfo.city_name +
        itemInfo.area_name +
        itemInfo.address
      }}
    </view>
    <view class="item-bottom">
      <view class="item-left" @click="$emit('setDefault', itemInfo)">
        <image
          v-if="!itemInfo.is_default"
          src="../../../static/mine/327.png"
          class="address-icon"
          mode=""
        ></image>
        <image
          v-else
          src="../../../static/mine/330.png"
          class="address-icon"
          mode=""
        ></image>
        <text>{{ i18n.initial }}</text>
      </view>
      <view class="item-right">
        <view
          class="item-left"
          style="margin-right: 24rpx"
          @click="$emit('toDetail', itemInfo.id)"
        >
          <image
            src="../../../static/mine/328 .png"
            class="address-icon"
            mode=""
          ></image>
          <text>{{ i18n.edit }}</text>
        </view>
        <view class="item-left" @click="$emit('deleteAddress', itemInfo)">
          <image
            src="../../../static/mine/329.png"
            class="address-icon"
            mode=""
          ></image>
          <text>{{ i18n.delete }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "address",
  data() {
    return {};
  },
  props: {
    itemInfo: {
      type: Object,
      default: {},
    },
  },
  computed: {
    i18n() {
      return this.$t("index");
    },
  },
  methods: {},
};
</script>

<style scoped lang="scss">
.item-list {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 28rpx 20rpx 0;
  margin-bottom: 20rpx;
  .item-top {
    display: flex;
    .name {
      margin-right: 16rpx;
      font-size: 30rpx;
      color: #222;
      font-weight: 600;
    }
    .phone {
      opacity: 0.8;
      font-size: 26rpx;
      color: #222;
      line-height: 50rpx;
    }
  }
  .item-content {
    margin-top: 16rpx;
    font-size: 24rpx;
    color: #222;
    opacity: 0.7;
    margin-bottom: 10rpx;
  }
  .item-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 82rpx;
    border-top: 2rpx solid rgba(151, 151, 151, 0.2);
    .item-right {
      display: flex;
      align-items: center;
    }
    .item-left {
      font-size: 24rpx;
      color: #222;
      opacity: 0.7;
      display: flex;
      align-items: center;
    }
  }
  .address-icon {
    width: 26rpx;
    height: 26rpx;
    margin-right: 10rpx;
  }
}
</style>