addressList.vue 3.27 KB
<template>
  <div class="address-list"
       v-if="addresss && addresss.list.length">
    <div class="box">
      <div class="item"
           v-for="(item, index) in addresss.list"
           :key="index">
        <div class="content">
          <div class="info"
               @click="doSelect(item)">
            <div class="base">
              <div class="left">
                <div class="title">收货人:</div>
                <div class="name">{{item.name}}</div>
              </div>
              <div class="phone">{{item.phoneS}}</div>
            </div>
            <div class="address-box">
              <div class="title">收货地址:</div>
              <div class="waiting"
                   v-if="item.state == 0">待完善</div>
              <div class="address"
                   :class="{'address-waiting': item.state == 0}">{{item.address}}</div>
            </div>
          </div>
        </div>
        <div class="funcs-box"
             v-if="!addresss.options.defaultContact.hide || !addresss.options.edit.hide || !addresss.options.delete.hide">
          <label class="label check-group"
                 v-if="!addresss.options.defaultContact.hide"
                 @click="setDefaultContact(item)">
            <input v-show="false"
                   type="checkbox"
                   name="like"
                   :value="item.state == 2">
            <img src="static/img/icon_check_active.png"
                 class="check-box"
                 v-if="item.state == 2" />
            <img src="static/img/icon_check.png"
                 class="check-box"
                 v-else/>
            <!-- <div class="text">
              <img src="static/img/icon_check.png"
                   class="check-box" />
            </div> -->
          </label>
          <div class="buttons-box">
            <div class="edit-box buttons"
                 v-if="!addresss.options.edit.hide"
                 @click="doEdit(item)">
              编辑
            </div>
            <div class="delete-box buttons"
                 v-if="!addresss.options.delete.hide"
                 @click="doDelete(item)">
              删除
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="no-address"
       v-else>
    <img src="static/img/icon_no_address.png"
         class="img" />
    <div class="text">还没有地址哦~</div>
  </div>
</template>

<script>
export default {
  name: 'addressList',
  data: function () {
    return {
      radio: 1,
    }
  },
  props: ["addresss"],
  methods: {

    /**
     * 选择地址
     * @param {Object} item [地址对象]
     */
    doSelect (item) {
      this.$emit('doSelect', item);
    },

    /**
     * 编辑地址
     * @param {Object} item [地址对象]
     */
    doEdit (item) {
      this.$emit('doEdit', item);
    },

    /**
     * 删除地址
     * @param {Object} item [地址对象]
     */
    doDelete (item) {
      this.$emit('doDelete', item);
    },

    /**
     * 设置默认联系人
     * @param {Object} item [地址对象]
     */
    setDefaultContact (item) {
      this.$emit('setDefaultContact', item);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style rel="stylesheet/less" lang="less">
@import './addressList';
</style>