import {
|
getArea
|
} from '../../api/index'
|
Component({
|
properties: {
|
// placeholder为选择器的默认提示文字
|
placeholder: {
|
type: String,
|
value: '请选择省市地区',
|
},
|
// value为选择器的默认值，类型为数组
|
value: {
|
type: Array,
|
value: [],
|
// observer监听value的变化，如果有值则调用setLabel方法设置选择器的label
|
observer(selectedValues) {
|
if (selectedValues && selectedValues.length) {
|
this.setLabel();
|
}
|
}
|
}
|
},
|
data: {
|
// label为选择器的显示值
|
label: '',
|
// range为选择器的可选项，类型为数组，包含三个数组，分别为省、市、区/县
|
range: [],
|
// pickerValue为选择器的选中值，类型为数组，包含三个数字，分别为省、市、区/县的下标
|
pickerValue: [],
|
// addressList为选择器的数据源，类型为数组，包含省、市、区/县的信息
|
addressList: [],
|
},
|
// attached生命周期函数，在组件实例进入页面节点树时执行
|
attached() {
|
this.initData()
|
|
},
|
methods: {
|
// wx.setStorageSync('addressList', tl)
|
initData(){
|
let list = wx.getStorageSync('addressList')
|
if(list && list.length){
|
this.setData({addressList: list})
|
this.setLabel();
|
if (!this.data.value.length) {
|
this.initRange();
|
}
|
console.log(this.data.addressList)
|
}else{
|
getArea({
|
"level": "",
|
"pid": ""
|
}).then(res => {
|
var tl = []
|
if(res && res.data && res.data.length){
|
res.data.forEach(element => {
|
let tc = []
|
if(element.children &&element.children.length){
|
element.children.forEach(c => {
|
let ta = []
|
if(c.children &&c.children.length){
|
c.children.forEach(a => {
|
ta.push({
|
label: a.name,
|
value: a.id ,
|
regionLevel: '3',
|
parentRegionCode: c.id
|
})
|
})
|
}
|
tc.push({
|
label: c.name,
|
value: c.id,
|
regionLevel:"2",
|
children:ta,
|
parentRegionCode:element.id
|
})
|
})
|
}
|
tl.push({
|
label: element.name,
|
value: element.id,
|
regionLevel:"1",
|
children: tc,
|
parentRegionCode:"0"
|
})
|
});
|
}
|
wx.setStorageSync('addressList', tl)
|
this.setData({addressList: tl})
|
this.setLabel();
|
if (!this.data.value.length) {
|
this.initRange();
|
}
|
console.log(this.data.addressList)
|
})
|
}
|
},
|
// getAddressItem方法用于将地址信息转换为选择器可用的格式
|
getAddressItem(data) {
|
return {
|
label: data.label,
|
value: data.value
|
};
|
},
|
// setAddressList方法用于将地址列表转换为选择器可用的格式
|
setAddressList(list) {
|
return list.map((v) => this.getAddressItem(v));
|
},
|
// getAddressByCode方法用于根据value值获取地址信息及其在数组中的下标
|
getAddressByCode(list = [], value) {
|
let index = list.findIndex(item => item.value === value);
|
return [index, list[index] || {}];
|
},
|
// openChildren方法用于根据value值打开下一级选择器
|
openChildren(list, keys) {
|
let result = [];
|
const handle = (arr, keys) => {
|
let newarr = arr.map((v, index) => {
|
if (keys && keys.length) {
|
let [currentKey, ...nextKey] = keys;
|
if (currentKey === index && Array.isArray(v.children)) {
|
handle(v.children, nextKey);
|
}
|
}
|
return this.getAddressItem(v);
|
});
|
result.push(newarr);
|
}
|
handle(list, keys);
|
return result.reverse();
|
},
|
// onChange方法为选择器的change事件处理函数，用于设置label和触发change事件
|
onChange(e) {
|
let [r1, r2, r3] = this.data.range;
|
const [v1, v2, v3] = e.detail.value;
|
const selected = [r1[v1], r2[v2], r3[v3]];
|
const values = selected.map(v => v.value);
|
const label = selected.map(v => v.label).join('-');
|
|
this.triggerEvent("change", {
|
value: values,
|
label:label
|
});
|
this.setData({
|
label:label
|
});
|
console.log("label1", label)
|
console.log("label",this.data.label)
|
},
|
// columnChange方法为选择器的columnchange事件处理函数，用于设置range和pickerValue
|
columnChange(e) {
|
const {
|
column,
|
value
|
} = e.detail;
|
this.setColumn(column, value);
|
},
|
// setColumn方法用于设置range和pickerValue
|
setColumn(column, value) {
|
let addressList = this.data.addressList;
|
if (!addressList || addressList.length === 0) return;
|
let [r1, r2, r3] = this.data.range;
|
if (column === 0) {
|
r2 = this.setAddressList(addressList[value].children);
|
r3 = this.setAddressList(addressList[value].children[0].children);
|
this.setData({
|
pickerValue: [value, 0, 0]
|
});
|
} else if (column === 1) {
|
const [v1] = this.data.pickerValue;
|
r3 = this.setAddressList(addressList[v1].children[value].children);
|
this.setData({
|
pickerValue: [v1, value, 0]
|
});
|
}
|
this.setData({
|
range: [r1, r2, r3]
|
});
|
},
|
// setLabel方法用于设置label
|
setLabel() {
|
let addressList = this.data.addressList;
|
if (addressList && addressList.length) {
|
const [v1, v2, v3] = this.data.value;
|
const [s1, {
|
label: t1,
|
children: l1
|
}] = this.getAddressByCode(addressList, v1);
|
const [s2, {
|
label: t2,
|
children: l2
|
}] = this.getAddressByCode(l1, v2);
|
const [s3, {
|
label: t3
|
}] = this.getAddressByCode(l2, v3);
|
const label = [t1, t2, t3].filter(v => v).join('-');
|
const pickerValue = [s1, s2, s3];
|
const range = this.openChildren(addressList, [s1, s2, s3]);
|
if (label.length) {
|
this.setData({
|
label,
|
range,
|
pickerValue
|
});
|
}
|
} else {
|
|
}
|
},
|
// initRange方法用于初始化range
|
initRange() {
|
if (!this.data.value.length) {
|
const range = this.openChildren(this.data.addressList, [0, 0, 0]);
|
this.setData({
|
range
|
});
|
}
|
},
|
|
},
|
});
|
