在钉钉小程序项目上需要一个地区选择器,看公司没有其他模板,所以自己封装了一个。代码如下:
Page({
data:{
// 省市区三级联动初始化
region: [],
provinces: "",
citys: "",
areas: "",
citysData: [],
value: [0, 0, 0],
isChangeLocation: false
},
// 初始化地区树
initAreaTree() {
var citysData = []; //存地区树数据值
getAreaTree().then(res => {
citysData = res.data.data;
var provinces = [];
var citys = [];
var areas = [];
var tempAreaCode = "";
citysData.forEach((province, i) => {
provinces.push(province.name);
if (i === 0) {
citys.push(province.children[i].name);
areas.push(province.children[i].children[0].name);
tempAreaCode = province.children[i].children[0].code;
}
})
this.setData({
provinces: provinces,
citys: citys,
areas: areas,
citysData: citysData,
tempAreaCode: tempAreaCode
});
})
},
// 操作picker
bindChange(e) {
var citysData = this.data.citysData;
var value = this.data.value;
var current_value = e.detail.value;
var citys = [];
var provinceObj = {};
var cityObj = {};
provinceObj = citysData[current_value[0]];
if (value[0] !== current_value[0]) {
// 滑动省份
provinceObj.children.forEach(function (v) {
citys.push(v.name);
});
this.setData({
citys: citys
});
cityObj = provinceObj.children[0];
var tempArea = []
Object.keys(cityObj.children).forEach(key => {
tempArea.push(cityObj.children[key].name)
})
this.setData({
areas: tempArea,
value: [current_value[0], 0, 0]
});
} else if (value[0] === current_value[0] && value[1] !== current_value[1]) {
// 滑动城市
if (current_value[1] >= provinceObj.children.length) {
// 数据不存在 跳过
return;
}
cityObj = provinceObj.children[current_value[1]];
var tempArea = []
Object.keys(cityObj.children).forEach(key => {
tempArea.push(cityObj.children[key].name)
})
this.setData({
areas: tempArea,
value: [current_value[0], current_value[1], 0]
});
} else {
// 滑动区县
cityObj = provinceObj.children[current_value[1]];
this.setData({
value: current_value
});
}
// console.log(cityObj.children[this.data.value[2]].code)
this.setData({
engineerLocation: provinceObj.name + '>' + cityObj.name + '>' + cityObj.children[this.data.value[2]].name,
tempAreaCode: cityObj.children[this.data.value[2]].code
});
},
})