| | |
| | | |
| | | 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() |
| | | }, |
| | | 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 |
| | | }); |
| | | } |
| | | }, |
| | | |
| | | }, |
| | | }); |
| | | methods: { |
| | | 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 |
| | | }); |
| | | } |
| | | }, |
| | | |
| | | }, |
| | | }); |