|
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.resetValus(selectedValues)
|
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.resetValus(list)
|
this.setLabel();
|
if (!this.data.value.length) {
|
this.initRange();
|
}
|
}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.resetValus()
|
this.setLabel();
|
if (!this.data.value.length) {
|
this.initRange();
|
}
|
})
|
}
|
},
|
resetValus(selectedValues){
|
selectedValues = selectedValues || this.data.value
|
let temVal = []
|
let tlable =''
|
if (selectedValues.length == 3) {
|
var v1 = selectedValues[0]
|
var v2 = selectedValues[1]
|
var v3= selectedValues[2]
|
var t1,t2,t3;
|
this.data.addressList.forEach(item =>{
|
if(v1 && v1.length ==6
|
&&v2 && v2.length ==6
|
&&v3 && v3.length ==6){
|
if(item.value.indexOf(v1) == 0){
|
t1 = item.value
|
if(item.children){
|
item.children.forEach(item2 =>{
|
if(item2.value.indexOf(v2) == 0){
|
if(item2.children){
|
item2.children.forEach(item3 =>{
|
if(item3.value.indexOf(v3) == 0){
|
tlable = item.label +"-"+item2.label+'-'+item3.label
|
t1 = item.value
|
t2 = item2.value
|
t3 = item3.value
|
temVal = [t1,t2,t3]
|
// this.value = temVal
|
// this.data.label=tlable
|
this.triggerEvent("change", {
|
value: temVal,
|
label:tlable
|
});
|
this.setData({value:temVal,label:tlable})
|
}
|
})
|
}
|
}
|
})
|
}
|
}
|
}
|
})
|
}
|
},
|
// 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
|
});
|
},
|
// 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
|
});
|
}
|
}
|
},
|
// initRange方法用于初始化range
|
initRange() {
|
if (!this.data.value.length) {
|
const range = this.openChildren(this.data.addressList, [0, 0, 0]);
|
this.setData({
|
range
|
});
|
}
|
},
|
|
},
|
});
|
