NN2023021801/addons/dbapp/components/address-default/address-default.vue

<script>
import api from '@/api'

export default {
  name: 'address-default',
  props: {
    bgColor: {
      default: '#fff'
    },
    height: {
      default: '100rpx'
    }
  },
  data() {
    return {
      address: {}
    }
  },
  computed: {
    empty() {
      return !Object.keys(this.address).length
    }
  },
  watch: {
    address: {
      handler(v) {
        this.$emit('getAddrDefault', v)
      },
      deep: true
    }
  },
  methods: {
    async getAddress() {
      let res = await api.address(true)
      try {
        this.address = res[0]
      } catch (e) {}
    },
    toAddrList() {
      this.$jump({ url: '/pagesUser/address/address' }, { type: 'get' })
    }
  },
  created() {
    this.getAddress()
  },
  mounted() {
    uni.$on('getAddr', addr => (this.address = addr))
  }
}
</script>

<template>
  <view
    class="addr flex align-center"
    :style="{ backgroundColor: bgColor, height: height }"
    @click="toAddrList()"
  >
    <view class="flex flex-center">
      <image src="/static/images/warehouse/ic_fahuo_diz.png" class="addr_icon"></image>
    </view>

    <view class="addr_info flex flex-column flex-around flex1" v-if="!empty">
      <view>
        <text class="name">{{ address.name }}</text>
        <text class="tel">{{ address.mobile }}</text>
      </view>
      <view class="content">{{ address.mergename }}</view>
    </view>
    <view v-else class="addAddr flex1">添加收货地址</view>

    <view class="toMore flex flex-center" @click="toAddrList">
      <u-icon name="arrow-right" size="30rpx" color="#D9D9DB"></u-icon>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.addr {
  padding: 0 35rpx;

  &_icon {
    width: 66rpx;
    height: 66rpx;
  }

  &_info {
    min-height: 100rpx;
    color: #232323;

    .name {
      font-size: 30rpx;
      font-weight: bold;
    }

    .tel {
      margin-left: 20rpx;
    }

    .content {
      margin-top: 6rpx;
      font-size: 24rpx;
    }
  }

  .addAddr {
    font-size: 30rpx;
    font-weight: bold;
    color: #232323;
  }

  &_info,
  .addAddr {
    margin: 0 40rpx 0 26rpx;
  }

  .toMore {
    width: 40rpx;
    height: 40rpx;
  }
}
</style>