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

有赞vue wap业务组件库

import "vant/es/toast/style";
import _Toast from "vant/es/toast";
import "vant/es/area/style";
import _Area from "vant/es/area";
import "vant/es/popup/style";
import _Popup from "vant/es/popup";
import "vant/es/cell/style";
import _Cell from "vant/es/cell";

var _components;

import LS from '@youzan/utils/browser/local_storage';
import ajax from '../../common/ajax';
export 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.name] = _Cell, _components[_Popup.name] = _Popup, _components[_Area.name] = _Area, _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 _Toast('请选择正确的收件地区');
      }

      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(LS.getItem('cap_address_area_data'));
      } catch (e) {}

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

      ajax({
        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;
          LS.setItem('cap_address_area_data', JSON.stringify(areaList));

          if (_this.codeToSelect) {
            _this.select(_this.codeToSelect);
          }
        }
      }).catch(function (error) {
        console.log(error);

        _Toast(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
      };
    }
  }
};