hlm_pl_mall_h5/pages/member/pointsbuy/child/CheckoutAddress.vue

<template>
    <view class="div container" @click="onclick">
        <view class="div top-wrapper">
            <flex-line class="selected-wrapper" v-if="hasAddress" :show-border="true">
                <view class="div line">
                    <text class="i icon iconfont">&#xe6d3;</text>
                    <view class="div line-content">
                        <view class="div title-wrapper">
                            <label class="title">{{item.address_realname}}</label>
                            <label class="title" style="margin-left:1rem;">{{item.address_mob_phone}}</label>
                            <label class="default" v-if="isDefault">默认</label>
                        </view>
                        <view class="div desc address-text">{{item.area_info}}{{item.address_detail}}</view>
                    </view>
                </view>
            </flex-line>
            <view v-else class="div unselected-wrapper">
                <label class="desc">您还没有收货地址，点击这里添加。</label>
            </view>
        </view>
    </view>
</template>

<script>
import flexLine from '../../../flexLine'
export default {
  props: ['item'],
  created: function () {
  },
  components: { flexLine },
  computed: {
    hasAddress () {
      if (this.item) {
        return true
      }
      this.onclick()
      return false
    },
    isDefault () {
      if (this.item && this.item.is_default) {
        return true
      }
      return false
    }
  },
  methods: {
    onclick () {
      this.$emit('onclick')
    }
  }
}
</script>

<style lang="scss" scoped>
    .container {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        background-color: #fff;
    }
    .line{display: flex;
        .line-content{flex:1}
    }
    .top-wrapper {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        background-color: #fff;
    }
    .title-wrapper {
        height: 1rem;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }
    .icon {
        font-size:$h1;
        margin-right: .2rem;
        color:$primaryColor
    }
    .title {
    }
    .default {
        width: 1.4rem;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
        border: 1px solid $primaryColor;
        color: $primaryColor;
        font-size:$h6;
        text-align: center;
        border-radius: 0.1rem;
    }
    .desc {
        color: $descTextColor;
    }
    .address-text {
        margin-top: .3rem;
        font-weight: normal;
    }
    .selected-wrapper{
        padding:1rem 0;
    }
    .unselected-wrapper {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .indicator {
        height: 0.6rem;
        margin-left: 0.5rem;
        margin-right: $pageSpace;
    }
    .line-wrapper {
        background:#eee;
        // position: relative;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 0.1rem;
    }
</style>