znyc.second_hand.vue/components/region_picker/region_picker.js

// const regionList = require('../../utils/region')
let flag = false;
Component({
  /**
   * 组件的属性列表
   */
  observers: {
    'list'(arr){ //默认选中
      // console.log(arr)
      // console.log('113123')

      if(arr.length> 1){
      let { multiple, select_list } = this.data
          if(multiple){ //开启多选
            console.log(select_list)
            if(select_list.length != 0 )return
             select_list = [];
            arr.forEach(item => {
              if(item.select){
                let seleArr = item.childers.filter(v => {
                  if(v.select){
                    if(v.name ==  '全部' || v.name == '全国'){
                      v.cityName = item.name
                    }else{
                      v.cityName = v.name
                    }
                  }
                  return v.select
                })
                select_list.push(...seleArr)
              }
            })
            this.setData({
              select_list
            })
          }else{
            let province_idx =  arr.findIndex(item => item.select);
            province_idx  = province_idx != -1 ? province_idx : 0;
            let city_idx = arr[province_idx].childers.findIndex(item => item.select) 
            city_idx  = city_idx != -1 ? city_idx : 0;
            this.setData({
              province_idx,
              city_idx,
              default_val: [province_idx,city_idx]
            })
          }
      }
    }
  },
  properties: {
    list: {
      type: Array,
      value: [],
    },
    is_show: {
      type: Boolean,
      value: false,
    },
    multiple: { //单选或者多选
      type: Boolean,
      value: true
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    imageServerUrl: getApp().globalData.imageServerUrl,
    select_list: [],
    province_idx: 0,
    city_idx: null,
    default_val: [0,0]
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 单选触发事件
    pickerChange(e){
      let province_idx = e.detail.value[0],city_idx = e.detail.value[1];
      this.setData({
        province_idx,
        city_idx
      })
    },
    btn_fn() {},
    //选择省份
    province_fn(e) {
      let province_idx = e.currentTarget.dataset.idx,
        {
          list
        } = this.data;
      this.setData({
        province_idx,
        city_idx: null,
        list
      })
    },
    // 选择城市
    city_fn(e) {
      flag = true
      let city_idx = e.currentTarget.dataset.idx,
        {
          select_list,
          list,
          province_idx,
          num
        } = this.data,
        province_list = list[province_idx].childers,
        city_data = province_list[city_idx];
      if (city_data.select) { //选中反选
        city_data.select = !city_data.select;
        select_list = select_list.filter(item => {
          return item.select
        })
        list.forEach(item => {
          if (item.select) {
            let selectIdx = select_list.findIndex(v => v.parentid == item.regionid)
            if (selectIdx == -1) {
              item.select = false
            }
          }
        })
      } else { //选择未选中的
        if (city_data.name == '全部' || city_data.name == '全国') { //选中全部
          select_list = select_list.filter(item => {
            if (item.parentid == city_data.parentid) {
              item.select = false
            }
            return item.parentid != city_data.parentid
          })
          city_data.cityName = list[province_idx].name
        } else {
          select_list = select_list.filter(item => {
            if (item.parentid == city_data.parentid && item.name == '全部') {
              item.select = false
            }
            return !(item.parentid == city_data.parentid && item.name == '全部')
          })
          city_data.cityName = city_data.name
        }
        if (city_data.parentid == 1) { // 选中中国
          //初始化地区列表数据
          list = list.map(item => {
            if (item.select) {
              item.childers = item.childers.map(v => {
                v.select = false
                return v
              })
              item.select = false
            }
            return item
          })

          city_data.select = true
          list[province_idx].select = true
          select_list = [city_data]
          this.setData({
            city_idx,
            select_list,
            list,
          })
          return
        }
        let selectData = select_list.find(item => item.parentid == 1)
        if (selectData && selectData.parentid == 1) { //已经选中了中国
          select_list[0].select = false
          select_list = select_list.filter(item => item.parentid != 1)
          let selectIndex = list.findIndex(item => item.regionid == 1)
          list[selectIndex].select = false
        }
        if (select_list.length >= 3) { //多选时
          console.log('最多只能选', num, '个')
          return
        }

        city_data.select = true
        list[province_idx].select = true
        select_list.push(city_data)
      }
      this.setData({
        city_idx,
        select_list,
        list,
      })
    },
    del_city_fn(e) {
      flag = true
      let idx = e.currentTarget.dataset.idx,
        {
          select_list,
          list
        } = this.data;
      select_list[idx].select = false
      select_list.splice(idx, 1)
      list.forEach(item => {
        if (item.select) {
          let selectIdx = select_list.findIndex(v => v.parentid == item.regionid)
          if (selectIdx == -1) {
            item.select = false
          }
        }
      })
      this.setData({
        select_list,
        list
      })
    },
    cancel() {
      flag = false
      this.triggerEvent('cancel', false)
    },
    confirm() {
    
      let {
        select_list,
        multiple,
        province_idx,
        city_idx,
        list
      } = this.data;
      if(!multiple){
        city_idx = city_idx || 0
        select_list = [
          list[province_idx],
          list[province_idx].childers[city_idx]
        ]
      }
      // console.log(list)
      if(select_list.length==0){
        wx.showToast({
          title: '请选择地区',
          icon:'none'
        })
        return
      }
      this.setData({
        is_show: false
      })
      this.triggerEvent('confirm', {
        list: select_list
      })
    }
  }
})