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

有赞vue wap业务组件库

import _extends from "@babel/runtime/helpers/esm/extends";
import "vant/es/cell/style";
import _Cell from "vant/es/cell";
import "vant/es/popup/style";
import _Popup from "vant/es/popup";

var _components;

import YZLocalStorage from '@youzan/utils/browser/local_storage';
import Api from './api/address';
import AddressList from './components/address_list';
import AddressEdit from './components/address_edit';
var ADDRESS_LIST_HASH = 'address-list';
export default {
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('div', {
      staticClass: "cap-address"
    }, [_c('van-popup', {
      staticClass: "cap-address__list",
      attrs: {
        "position": _vm.popupPosition,
        "overlay": false
      },
      model: {
        value: _vm.showAddressList,
        callback: function callback($$v) {
          _vm.showAddressList = $$v;
        },
        expression: "showAddressList"
      }
    }, [_c('cap-address-list', {
      attrs: {
        "address-list": _vm.curAddressList,
        "add-text": _vm.addText
      },
      on: {
        "change": _vm.handleAddressChange,
        "edit": _vm.handleAddEdit
      },
      model: {
        value: _vm.curAddressId,
        callback: function callback($$v) {
          _vm.curAddressId = $$v;
        },
        expression: "curAddressId"
      }
    })], 1), _c('van-popup', {
      staticClass: "cap-address__edit",
      attrs: {
        "position": _vm.popupPosition,
        "overlay": false
      },
      model: {
        value: _vm.showAddressEdit,
        callback: function callback($$v) {
          _vm.showAddressEdit = $$v;
        },
        expression: "showAddressEdit"
      }
    }, [_c('cap-address-edit', {
      attrs: {
        "address-list": _vm.addressList,
        "address-info": _vm.currentAddressInfo,
        "save-url": _vm.saveUrl,
        "delete-url": _vm.deleteUrl,
        "need-search": _vm.needSearch,
        "search-location": _vm.searchLocation,
        "need-location": _vm.needLocation,
        "get-location": _vm.getLocation,
        "area-url": _vm.areaUrl,
        "request-delete-address": _vm.requestDeleteAddress,
        "request-add-edit-address": _vm.requestAddEditAddress
      },
      on: {
        "save": _vm.handleAddressSave,
        "delete": _vm.handleDelete
      }
    })], 1)], 1);
  },
  name: 'cap-address',
  components: (_components = {
    'van-popup': _Popup
  }, _components[_Cell.name] = _Cell, _components['cap-address-list'] = AddressList, _components['cap-address-edit'] = AddressEdit, _components),
  props: {
    value: Boolean,
    url: String,
    addText: String,
    saveUrl: String,
    areaUrl: String,
    deleteUrl: String,
    needSearch: Boolean,
    needLocation: Boolean,
    addressId: [Number, String],
    addressList: {
      type: Array,
      default: function _default() {
        return [];
      }
    },
    searchLocation: {
      type: Function,
      default: function _default() {
        return [];
      }
    },
    getLocation: {
      type: Function,
      default: function _default() {
        return {
          lat: '',
          lon: ''
        };
      }
    },
    requestAddressList: {
      type: Function,
      default: Api.requestAddressList
    },
    requestDeleteAddress: {
      type: Function,
      default: Api.requestDeleteAddress
    },
    requestAddEditAddress: {
      type: Function,
      default: Api.requestAddEditAddress
    },
    popupPosition: {
      type: String,
      default: 'right'
    }
  },
  data: function data() {
    return {
      curAddressId: this.addressId,
      showAddressList: this.value,
      showAddressEdit: false,
      currentAddressInfo: {},
      curAddressList: this.addressList
    };
  },
  watch: {
    addressId: function addressId(val) {
      this.curAddressId = val;
    },
    curAddressId: function curAddressId(val) {
      this.$emit('update:addressId', val);
    },
    addressList: function addressList(val) {
      this.curAddressList = val;
    },
    value: function value(val) {
      this.showAddressList = val;
      var curAddressList = this.curAddressList;

      if (val && curAddressList && curAddressList.length === 0) {
        this.getAddressList();
      }
    },
    showAddressList: function showAddressList(val) {
      if (val) {
        this.replaceHash(ADDRESS_LIST_HASH);
      }

      this.$emit('input', val);
    }
  },
  created: function created() {
    var recentlyUsedAddress;

    try {
      recentlyUsedAddress = JSON.parse(YZLocalStorage.getItem('recently_used_address'));
    } catch (e) {}

    if (recentlyUsedAddress && recentlyUsedAddress.id) {
      this.curAddressId = recentlyUsedAddress.id;
    }
  },
  mounted: function mounted() {
    var hashArr = location.hash.split('#');

    if (hashArr.indexOf(ADDRESS_LIST_HASH) !== -1) {
      hashArr.pop();
      location.hash = hashArr.join('#');
    }

    this.handleHashChange = this.handleHashChange.bind(this);
    window.addEventListener('hashchange', this.handleHashChange);
  },
  destroyed: function destroyed() {
    window.removeEventListener('hashchange', this.handleHashChange);
  },
  methods: {
    getAddressList: function getAddressList() {
      var _this = this;

      this.requestAddressList(this.url).then(function (data) {
        var list = data.list ? data.list : data;
        _this.curAddressList = list;
      }).catch(function (res) {
        _this.$emit('error');
      });
    },
    replaceHash: function replaceHash(hash) {
      location.hash += '#' + hash;
    },
    handleHashChange: function handleHashChange(event) {
      var oldURL = event.oldURL;
      var newURL = event.newURL;
      var listHash = '#' + ADDRESS_LIST_HASH;

      if (oldURL.indexOf(listHash) !== -1 && newURL.indexOf(listHash) === -1) {
        this.showAddressList = false;
        this.showAddressEdit = false;
      }
    },

    /**
     * 地址切换时
     *
     * @param {Object} info 单个地址项的数据
     */
    handleAddressChange: function handleAddressChange(info) {
      this.showAddressList = false;
      history.go(-1);
      this.$emit('change', info);
      this.$emit('update:addressId', info.id);
      YZLocalStorage.setItem('recently_used_address', JSON.stringify(info));
    },

    /**
     * 处理添加或编辑
     *
     * @param {Object} info 单个地址项的数据
     */
    handleAddEdit: function handleAddEdit(info) {
      this.showAddressEdit = true;
      info = info || {};
      this.currentAddressInfo = info;
    },

    /**
     * 处理地址保存
     *
     * @param {Object} info 单个地址项的数据
     * @param {boolean} isEdit 是否为编辑（编辑/新增）
     */
    handleAddressSave: function handleAddressSave(info, isEdit) {
      var curAddressList = this.curAddressList;

      if (isEdit) {
        var index = this.findAddressById(info.id);
        var oldInfo = curAddressList[index];
        curAddressList[index] = _extends(oldInfo, info);
        this.$emit('address-edit', index, info);
      } else {
        curAddressList.unshift(info);
      }

      this.curAddressList = curAddressList;
      this.showAddressEdit = false;
    },

    /**
     * 处理地址删除
     *
     * @param {Object} info 单个地址项的数据
     */
    handleDelete: function handleDelete(info) {
      var index = this.findAddressById(info.id);
      this.curAddressList.splice(index, 1);
      this.showAddressEdit = false;
    },

    /**
     * 根据ID获取地址在列表中的索引
     *
     * @param {number} id 地址id
     * @return {number} index 在列表中的索引
     */
    findAddressById: function findAddressById(id) {
      var curAddressList = this.curAddressList;

      for (var i = 0; i < curAddressList.length; i++) {
        if (+curAddressList[i].id === +id) {
          return i;
        }
      }
    }
  }
};