captain-ui/es/login/src/components/country-select.js

有赞vue wap业务组件库

import "vant/es/toast/style";
import _Toast from "vant/es/toast";
import "vant/es/cell-group/style";
import _CellGroup from "vant/es/cell-group";
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/popup/style";
import _Popup from "vant/es/popup";
import YZLocalStorage from '@youzan/utils/browser/local_storage';
import ajax from '../../../common/ajax';
var COUNTRY_SELECT_HASH = 'show-country';
var COUNTRY_HEADER_HEIGHT = 36;
var COUNTRY_ITEM_HEIGHT = 44;
export default {
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('van-popup', {
      staticClass: "cap-login__country",
      attrs: {
        "lock-on-scroll": "",
        "position": "right",
        "close-on-click-overlay": false
      },
      model: {
        value: _vm.value,
        callback: function callback($$v) {
          _vm.value = $$v;
        },
        expression: "value"
      }
    }, [_c('div', {
      ref: "selects",
      staticClass: "cap-login__country-selects"
    }, _vm._l(_vm.countryList, function (countryGroup) {
      return _c('div', {
        key: countryGroup.category
      }, [countryGroup.category !== 'default' ? _c('div', {
        staticClass: "cap-login__country-category",
        attrs: {
          "id": countryGroup.category
        }
      }, [_vm._v("\n        " + _vm._s(countryGroup.category) + "\n      ")]) : _vm._e(), _c('van-cell-group', {
        attrs: {
          "border": false
        }
      }, _vm._l(countryGroup.data, function (countryItem) {
        return _c('van-cell', {
          key: countryItem.code,
          attrs: {
            "title": _vm._f("getCountryBrief")(countryItem)
          },
          on: {
            "click": function click($event) {
              _vm.hideCountrySelect(countryItem);
            }
          }
        }, [_vm.country == countryItem.code ? _c('template', {
          slot: "right-icon"
        }, [_c('van-icon', {
          staticClass: "van-cell__right-icon cap-login__country-selected",
          attrs: {
            "name": "success"
          }
        })], 1) : _vm._e()], 2);
      }), 1)], 1);
    }), 0), _c('div', {
      staticClass: "cap-login__country-panel"
    }, [_vm._l(_vm.countryList, function (countryGroup) {
      return [countryGroup.category !== 'default' ? _c('a', {
        key: countryGroup.category,
        on: {
          "click": function click($event) {
            _vm.scrollPageTo(countryGroup.category);
          }
        }
      }, [_vm._v("\n        " + _vm._s(countryGroup.category) + "\n      ")]) : _vm._e()];
    })], 2)]);
  },
  components: {
    'van-popup': _Popup,
    'van-cell': _Cell,
    'van-icon': _Icon,
    'van-cell-group': _CellGroup
  },
  filters: {
    getCountryBrief: function getCountryBrief(data) {
      return data.name + " " + data.code;
    }
  },
  props: {
    value: Boolean,
    country: String,
    countryListUrl: String
  },
  data: function data() {
    var countryListStr = YZLocalStorage.getItem('sso_country_list');
    var countryList = null;

    try {
      countryList = JSON.parse(countryListStr);
    } catch (e) {}

    return {
      countryList: countryList
    };
  },
  watch: {
    value: function value(newVal) {
      if (newVal && !this.countryList) {
        this.fetchCountryList();
      }
    }
  },
  created: function created() {
    window.addEventListener('hashchange', this.handleHashChange);
  },
  destroyed: function destroyed() {
    window.removeEventListener('hashchange', this.handleHashChange);
  },
  methods: {
    hideCountrySelect: function hideCountrySelect(country) {
      this.$emit('change', country);
      window.history.back();
    },
    handleHashChange: function handleHashChange(event) {
      var oldURL = event.oldURL;
      var newURL = event.newURL;
      var countrySelectHash = '#' + COUNTRY_SELECT_HASH;

      if (oldURL.indexOf(countrySelectHash) !== -1 && newURL.indexOf(countrySelectHash) === -1) {
        this.$emit('input', false);
      }
    },
    fetchCountryList: function fetchCountryList() {
      var _this = this;

      _Toast.loading();

      ajax({
        url: this.countryListUrl
      }).then(function (res) {
        // 这个接口返回200为成功，醉了
        if (+res.code !== 200) {
          _Toast(res.msg);

          _this.hideCountrySelect();

          return;
        }

        _Toast.clear();

        var countryList = res.data;

        try {
          YZLocalStorage.setItem('sso_country_list', JSON.stringify(countryList));
        } catch (e) {}

        _this.countryList = countryList;
      }).catch(function () {
        _this.hideCountrySelect();

        _Toast('网络出了点问题，请稍后重试');
      });
    },
    scrollPageTo: function scrollPageTo(id) {
      var totalHeight = 0;

      for (var index = 0; index < this.countryList.length; index++) {
        var countryGroup = this.countryList[index] || {};

        if (countryGroup.category === id) {
          break;
        }

        if (countryGroup.category !== 'default') {
          totalHeight += COUNTRY_HEADER_HEIGHT;
        }

        totalHeight += COUNTRY_ITEM_HEIGHT * (countryGroup.data || []).length;
      }

      this.$refs.selects.scrollTop = totalHeight;
    }
  }
};