在好例子网,分享、交流、成长!
您当前所在位置:首页CSS 开发实例HTML基础 → 微信小程序-省市(区)地址选择联动

微信小程序-省市(区)地址选择联动

HTML基础

下载此实例
  • 开发语言:CSS
  • 实例大小:0.38M
  • 下载次数:2
  • 浏览次数:9
  • 发布时间:2018-04-16
  • 实例类别:HTML基础
  • 发 布 人:1076214223
  • 所需积分:2

实例介绍

【实例简介】

【实例截图】

from clipboard

【核心代码】

/**
 * @param {function} fun 接口
 * @param {object} options 接口参数
 * @returns {Promise} Promise对象
 */
function fetch(options) {
  options = options || {};
  return new Promise((resolve, reject) => {
    options.success = resolve;
    options.fail = reject;
    wx.request(options);
  });
}

const API = 'http://japi.zto.cn/zto/api_utf8/baseArea?msg_type=GET_AREA&data=';

const conf = {
  addDot: function (arr) {
    if (arr instanceof Array) {
      const tmp = arr.slice();
      tmp.map(val => {
        if (val.fullName.length > 4) {
          val.fullNameDot = val.fullName.slice(0, 4)   '...';
        } else {
          val.fullNameDot = val.fullName;
        }
      });
      return tmp;
    }
  },
  /**
	 * 滑动事件
	 * @param {object} e 事件对象
	 */
  bindChange: function (e) {
    const currentValue = e.detail.value;
    const { value, provinceData } = this.data.areaPicker;
    const self = _getCurrentPage();
    const hideDistrict = self.config.hideDistrict;
    const provinceCondition = hideDistrict ? value[0] !== currentValue[0] && value[1] === currentValue[1] : value[0] !== currentValue[0] && value[1] === currentValue[1] && value[2] === currentValue[2];
    const cityCondition = hideDistrict ? value[0] === currentValue[0] && value[1] !== currentValue[1] : value[0] === currentValue[0] && value[1] !== currentValue[1] && value[2] === currentValue[2];
    const districtCondition = hideDistrict ? false : value[0] === currentValue[0] && value[1] === currentValue[1] && value[2] !== currentValue[2];
    if (provinceCondition) {
      // 滑动省份
      fetch({
        url: API   provinceData[currentValue[0]].code,
        method: 'GET'
      }).then((city) => {
        const cityData = city.data.result;
        if (cityData && cityData.length) {
          const dataWithDot = conf.addDot(city.data.result);
          this.setData({
            'areaPicker.cityData': dataWithDot
          });
          return (
            fetch({
              url: API   dataWithDot[0].code,
              method: 'GET'
            })
          );
        } else {
          this.setData({
            'areaPicker.cityData': [],
            'areaPicker.districtData': [],
            'areaPicker.address': provinceData[currentValue[0]].fullName,
            'areaPicker.selected': [provinceData[currentValue[0]]],
          });
        }
      }).then((district) => {
        const districtData = district.data.result;
        const { cityData } = this.data.areaPicker;
        if (districtData && districtData.length > 0) {
          const dataWithDot = conf.addDot(districtData);
          this.setData({
            'areaPicker.districtData': dataWithDot,
            'areaPicker.value': [ currentValue[0], 0, 0 ],
            'areaPicker.address': provinceData[currentValue[0]].fullName   ' - '   cityData[0].fullName   (hideDistrict ? '' : ' - '   dataWithDot[0].fullName),
            'areaPicker.selected': hideDistrict ? [provinceData[currentValue[0]], cityData[0]] : [provinceData[currentValue[0]], cityData[0], dataWithDot[0]]
          });
        } else {
          this.setData({
            'areaPicker.districtData': [],
            'areaPicker.value': [ currentValue[0], currentValue[1], 0 ],
            'areaPicker.address': provinceData[currentValue[0]].fullName   ' - '   cityData[0].fullName,
            'areaPicker.selected': [provinceData[currentValue[0]], cityData[0]]
          });
        }
      }).catch((e) => {
        console.error(e);
      });
    } else if (cityCondition) {
      const { provinceData, cityData } = this.data.areaPicker;
      // 滑动城市
      fetch({
        url: API   cityData[currentValue[1]].code,
        method: 'GET'
      }).then((district) => {
        if (!district) return;
        const districtData = district.data.result;
        if (districtData && districtData.length > 0) {
          const dataWithDot = conf.addDot(districtData);
          this.setData({
            'areaPicker.districtData': dataWithDot,
            'areaPicker.value': [ currentValue[0], currentValue[1], 0 ],
            'areaPicker.address': provinceData[currentValue[0]].fullName   ' - '   cityData[currentValue[1]].fullName   (hideDistrict ? '' : ' - '   dataWithDot[0].fullName),
            'areaPicker.selected': hideDistrict ? [provinceData[currentValue[0]], cityData[currentValue[1]]] : [provinceData[currentValue[0]], cityData[currentValue[1]], dataWithDot[0]]
          });
        } else {
          this.setData({
            'areaPicker.districtData': [],
            'areaPicker.value': [ currentValue[0], currentValue[1], 0 ],
            'areaPicker.address': provinceData[currentValue[0]].fullName   ' - '   cityData[currentValue[1]].fullName,
            'areaPicker.selected': [provinceData[currentValue[0]], cityData[currentValue[1]]]
          });
        }
      }).catch((e) => {
        console.error(e);
      });
    } else if (districtCondition) {
      const { cityData, districtData } = this.data.areaPicker;
      // 滑动地区
      this.setData({
        'areaPicker.value': currentValue,
        'areaPicker.address': provinceData[currentValue[0]].fullName   ' - '   cityData[currentValue[1]].fullName   (hideDistrict ? '' : ' - '   districtData[currentValue[2]].fullName),
        'areaPicker.selected': hideDistrict ? [provinceData[currentValue[0]], cityData[currentValue[1]]] : [provinceData[currentValue[0]], cityData[currentValue[1]], districtData[currentValue[2]]]
      });
    }
  }
};

function _getCurrentPage() {
  const pages = getCurrentPages();
  const last = pages.length - 1;
  return pages[ last ];
}

export const getSelectedAreaData = () => {
  const self = _getCurrentPage();
  return self.data.areaPicker.selected;
};

export default (config = {}) => {
  const self = _getCurrentPage();
  self.setData({
    'areaPicker.hideDistrict': !config.hideDistrict
  });
  self.config = config;
  self.bindChange = conf.bindChange.bind(self);

  fetch({
    url: API   '0',
    method: 'GET'
  }).then((province) => {
    const firstProvince = province.data.result[0];
    const dataWithDot = conf.addDot(province.data.result);
    /**
		 * 默认选择获取的省份第一个省份数据
		 */
    self.setData({
      'areaPicker.provinceData': dataWithDot,
      'areaPicker.selectedProvince.index': 0,
      'areaPicker.selectedProvince.code': firstProvince.code,
      'areaPicker.selectedProvince.fullName': firstProvince.fullName,
    });
    return (
      fetch({
        url: API   firstProvince.code,
        method: 'GET'
      })
    );
  }).then((city) => {
    const firstCity = city.data.result[0];
    const dataWithDot = conf.addDot(city.data.result);
    self.setData({
      'areaPicker.cityData': dataWithDot,
      'areaPicker.selectedCity.index': 0,
      'areaPicker.selectedCity.code': firstCity.code,
      'areaPicker.selectedCity.fullName': firstCity.fullName,
    });
    /**
		 * 省市二级则不请求区域
		 */
    if (!config.hideDistrict) {
      return (
        fetch({
          url: API   firstCity.code,
          method: 'GET'
        })
      );
    } else {
      const { provinceData, cityData } = self.data.areaPicker;
      self.setData({
        'areaPicker.value': [0, 0],
        'areaPicker.address': provinceData[0].fullName   ' - '   cityData[0].fullName,
        'areaPicker.selected': [provinceData[0], cityData[0]]
      });
    }
  }).then((district) => {
    if (!district) return;
    const firstDistrict = district.data.result[0];
    const dataWithDot = conf.addDot(district.data.result);
    const { provinceData, cityData } = self.data.areaPicker;
    self.setData({
      'areaPicker.value': [0, 0, 0],
      'areaPicker.districtData': dataWithDot,
      'areaPicker.selectedDistrict.index': 0,
      'areaPicker.selectedDistrict.code': firstDistrict.code,
      'areaPicker.selectedDistrict.fullName': firstDistrict.fullName,
      'areaPicker.address': provinceData[0].fullName   ' - '   cityData[0].fullName   ' - '   firstDistrict.fullName,
      'areaPicker.selected': [provinceData[0], cityData[0], firstDistrict]
    });
  }).catch((e) => {
    console.error(e);
  });
};

实例下载地址

微信小程序-省市(区)地址选择联动

不能下载?内容有错? 点击这里报错 + 投诉 + 提问

好例子网口号:伸出你的我的手 — 分享

网友评论

发表评论

(您的评论需要经过审核才能显示)

查看所有0条评论>>

小贴士

感谢您为本站写下的评论,您的评论对其它用户来说具有重要的参考价值,所以请认真填写。

  • 类似“顶”、“沙发”之类没有营养的文字,对勤劳贡献的楼主来说是令人沮丧的反馈信息。
  • 相信您也不想看到一排文字/表情墙,所以请不要反馈意义不大的重复字符,也请尽量不要纯表情的回复。
  • 提问之前请再仔细看一遍楼主的说明,或许是您遗漏了。
  • 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦,又没人会搭理,于人于己都无利。
;
报警
var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_4847253'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s13.cnzz.com/stat.php%3Fid%3D4847253' type='text/javascript'%3E%3C/script%3E"));