captain-ui/lib/area-picker/src/area-picker.js

有赞vue wap业务组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

require("vant/es/toast/style");

var _toast = _interopRequireDefault(require("vant/es/toast"));

require("vant/es/area/style");

var _area = _interopRequireDefault(require("vant/es/area"));

require("vant/es/popup/style");

var _popup = _interopRequireDefault(require("vant/es/popup"));

require("vant/es/cell/style");

var _cell = _interopRequireDefault(require("vant/es/cell"));

var _local_storage = _interopRequireDefault(require("@youzan/utils/browser/local_storage"));

var _ajax = _interopRequireDefault(require("../../common/ajax"));

var _components;

var _default = {
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('div', {
      staticClass: "cap-area-picker"
    }, [_c('van-cell', {
      staticClass: "cap-area-picker__cell",
      attrs: {
        "title": "选择地区",
        "clickable": ""
      },
      on: {
        "click": function click($event) {
          _vm.showPicker = true;
        }
      }
    }, [_c('span', [_vm._v(_vm._s(_vm.province || '选择省份'))]), _c('span', [_vm._v(_vm._s(_vm.city || '选择城市'))]), _c('span', [_vm._v(_vm._s(_vm.county || '选择地区'))])]), _c('van-popup', {
      attrs: {
        "position": "bottom"
      },
      model: {
        value: _vm.showPicker,
        callback: function callback($$v) {
          _vm.showPicker = $$v;
        },
        expression: "showPicker"
      }
    }, [_c('van-area', {
      ref: "area",
      attrs: {
        "value": _vm.countyCode,
        "area-list": _vm.areaList,
        "loading": !_vm.areaListLoaded
      },
      on: {
        "confirm": _vm.onAreaConfirm,
        "cancel": function cancel($event) {
          _vm.showPicker = false;
        }
      }
    })], 1)], 1);
  },
  name: 'cap-area-picker',
  components: (_components = {}, _components[_cell.default.name] = _cell.default, _components[_popup.default.name] = _popup.default, _components[_area.default.name] = _area.default, _components),
  data: function data() {
    return {
      showPicker: false,
      province: '',
      provinceCode: '',
      city: '',
      cityCode: '',
      county: '',
      countyCode: '',
      areaList: {},
      codeToSelect: ''
    };
  },
  computed: {
    areaListLoaded: function areaListLoaded() {
      return Object.keys(this.areaList).length !== 0;
    }
  },
  created: function created() {
    this.getAreaList();
  },
  methods: {
    onAreaConfirm: function onAreaConfirm(values) {
      if (values.length !== 3 || +values[0].code === -1 || +values[1].code === -1 || +values[2].code === -1) {
        return (0, _toast.default)('请选择正确的收件地区');
      }

      this.showPicker = false;
      this.assignValues(values);
    },
    assignValues: function assignValues(values) {
      this.province = values[0].name;
      this.provinceCode = values[0].code;
      this.city = values[1].name;
      this.cityCode = values[1].code;
      this.county = values[2].name;
      this.countyCode = values[2].code;
    },
    getAreaList: function getAreaList() {
      var _this = this;

      var cache;

      try {
        cache = JSON.parse(_local_storage.default.getItem('cap_address_area_data'));
      } catch (e) {}

      if (cache && cache.province_list) {
        this.areaList = cache;
        return;
      }

      (0, _ajax.default)({
        method: 'GET',
        url: 'https://www.youzan.com/v2/common/region/all.jsonp',
        dataType: 'jsonp'
      }).then(function (res) {
        if (+res.code === 0) {
          var areaList = res.data || {};
          _this.areaList = areaList;

          _local_storage.default.setItem('cap_address_area_data', JSON.stringify(areaList));

          if (_this.codeToSelect) {
            _this.select(_this.codeToSelect);
          }
        }
      }).catch(function (error) {
        console.log(error);
        (0, _toast.default)(error.msg || '获取收件地区数据失败');
      });
    },
    select: function select(code) {
      var _this2 = this;

      this.countyCode = code;
      this.$nextTick(function () {
        _this2.$nextTick(function () {
          var area = _this2.$refs.area;

          if (area && _this2.areaListLoaded) {
            _this2.assignValues(area.getValues());
          } else {
            _this2.codeToSelect = code;
          }
        });
      });
    },
    getNames: function getNames() {
      return {
        city: this.city,
        county: this.county,
        province: this.province
      };
    },
    getValues: function getValues() {
      return {
        city: this.cityCode,
        county: this.countyCode,
        province: this.provinceCode
      };
    }
  }
};
exports.default = _default;