实例介绍
【实例简介】
【实例截图】
【核心代码】
/**
* @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);
});
};
好例子网口号：伸出你的我的手 — 分享！
相关软件
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论