captain-ui/es/address/src/components/address_list.js

有赞vue wap业务组件库

import "vant/es/icon/style";
import _Icon from "vant/es/icon";
import "vant/es/cell/style";
import _Cell from "vant/es/cell";
import "vant/es/cell-group/style";
import _CellGroup from "vant/es/cell-group";
import "vant/es/radio/style";
import _Radio from "vant/es/radio";
import "vant/es/radio-group/style";
import _RadioGroup from "vant/es/radio-group";
export default {
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

    var _c = _vm._self._c || _h;

    return _c('div', {
      staticClass: "cap-address-list"
    }, [_c('van-radio-group', {
      staticClass: "cap-address-list__group scroller",
      model: {
        value: _vm.curValue,
        callback: function callback($$v) {
          _vm.curValue = $$v;
        },
        expression: "curValue"
      }
    }, [_c('van-cell-group', _vm._l(_vm.addressList, function (item) {
      return _c('van-cell', {
        key: item.id
      }, [_c('van-radio', {
        attrs: {
          "name": item.id
        },
        on: {
          "click": function click($event) {
            _vm.handleAddressItemClick(item);
          }
        }
      }, [_c('h4', {
        staticClass: "cap-address-list__username"
      }, [_vm._v("\n            " + _vm._s(item.user_name) + "，\n            " + _vm._s(item.tel) + "\n          ")]), _c('p', {
        staticClass: "cap-address-list__address"
      }, [_vm._v("收货地址：" + _vm._s(_vm.computeAddressDetail(item)))])]), _c('van-icon', {
        staticClass: "cap-address-list__edit",
        attrs: {
          "name": "edit"
        },
        on: {
          "click": function click($event) {
            _vm.handleAddEditClick(item);
          }
        }
      })], 1);
    }), 1)], 1), _c('a', {
      staticClass: "cap-address-list__add",
      attrs: {
        "href": "javascript:void(0)"
      },
      on: {
        "click": function click($event) {
          _vm.handleAddEditClick();
        }
      }
    }, [_c('van-icon', {
      attrs: {
        "name": "add"
      }
    }), _c('span', [_vm._v(_vm._s(_vm.addText))]), _c('van-icon', {
      attrs: {
        "name": "arrow"
      }
    })], 1)], 1);
  },
  name: 'cap-address-list',
  components: {
    'van-radio-group': _RadioGroup,
    'van-radio': _Radio,
    'van-cell-group': _CellGroup,
    'van-cell': _Cell,
    'van-icon': _Icon
  },
  props: {
    value: [String, Boolean],
    addressList: {
      type: Array,
      default: function _default() {
        return [];
      }
    },
    addText: String
  },
  data: function data() {
    return {
      curValue: this.value
    };
  },
  watch: {
    value: function value(val) {
      this.curValue = val;
    },
    curValue: function curValue(val) {
      this.$emit('input', val);
    }
  },
  methods: {
    /**
     * 计算省市县字符串
     *
     * @param {Object} item 地址项对象数据
     */
    computeAddressDetail: function computeAddressDetail(item) {
      if (!item) return;
      return item.province + item.city + item.county + item.address_detail;
    },

    /**
     * 某一个地址点击
     *
     * @param {Object} item 地址项对象数据
     */
    handleAddressItemClick: function handleAddressItemClick(item) {
      this.$emit('change', item);
    },

    /**
     * 新增或编辑地址
     *
     * @param {Object} item 地址项对象数据
     */
    handleAddEditClick: function handleAddEditClick(item) {
      this.$emit('edit', item || {
        address_detail: ''
      });
    }
  }
};