基本信息
源码名称:微信小程序-省市(区)地址选择联动
源码大小:0.38M
文件格式:.zip
开发语言:CSS
更新时间:2018-04-16
友情提示:(无需注册或充值,赞助后即可获取资源下载链接)
嘿,亲!知识可是无价之宝呢,但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下,绝对物超所值哦!如有下载和支付问题,请联系我们QQ(微信同号):78630559
本次赞助数额为: 2 元×
微信扫码支付:2 元
×
请留下您的邮箱,我们将在2小时内将文件发到您的邮箱
源码介绍
/**
* @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);
});
};