lll

liukangdong

2024-08-07 138db89b3193d60850e203e1847e2f91d2b00ebc

 wechat_jiaxuan/components/areaSel/areaSel.js

@@ -1,265 +1,270 @@
 
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
         });
       }
     },

   },
 });