Mina_B/miniprogram/component/select-district/select-district.js

// component/select-district/select-district.js
const district = require('../../data/district.js').list;
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    district,
    province: [],
    city: [{
      "cityCode": '',
      "cityName": '不限市',
    }],
    area: [{
      "countryCode": '',
      "countryName": '不限区域',
    }],
    province_id: '',
    city_id: '',
    area_id: '',
    province_name: '不限省',
    city_name: '不限市',
    area_name: '不限区域',
  },
  attached() {
    let province = this.data.district.map(val => ({
      "provinceCode": val.provinceCode,
      "provinceName": val.provinceName,
      "firstNameLetter": val.firstNameLetter,
    }))
    province.unshift({
      "provinceCode": '',
      "provinceName": '不限省',
    })
    this.changeCity('320000');
    this.changeArea('320000', '320200');
    this.setData({
      province,
      province_id: '320000',
      city_id: '320200',
    })
  },
  /**
   * 组件的方法列表
   */
  methods: {
    changeCity(id) {
      let city = null;
      this.data.district.forEach((val, key) => {
        if (val.provinceCode === id) {
          city = val.cityList.map(value => ({
            "cityCode": value.cityCode,
            "cityName": value.cityName,
            "firstNameLetter": value.firstNameLetter,
          }))
        }
      })
      city.unshift({
        "cityCode": '',
        "cityName": '不限市',
      })
      this.setData({
        city,
        area: [{
          "countryCode": '',
          "countryName": '不限区域',
        }],
        city_id: '',
        area_id: '',
      })
    },
    changeArea(id, code) {
      let area = null;
      this.data.district.forEach((val, key) => {
        if (val.provinceCode === id) {
          val.cityList.forEach(value => {
            if (value.cityCode === code) {
              area = value.areaList.map(val => val)
            }
          })
        }
      })
      area.unshift({
        "countryCode": '',
        "countryName": '不限区域',
      })
      this.setData({
        area
      })
    },
    // 选择地区
    chooseDistrict(e) {
      const id = e.currentTarget.dataset.id;
      const name = e.currentTarget.dataset.name;
      const district = e.currentTarget.dataset.district;
      if (district === 'province') {
        id !== '' && this.changeCity(id);
        id === '' && this.setData({
          city_id: '',
          city_name: '不限市',
          area_id: '',
          area_name: '不限区域',
          city: [{
            "cityCode": '',
            "cityName": '不限市',
          }],
          area: [{
            "countryCode": '',
            "countryName": '不限区域',
          }],
        })
      }
      if (district === 'city') {
        id !== '' && this.changeArea(this.data.province_id, id);
        id === '' && this.setData({
          area_id: '',
          area_name: '不限区域',
          area: [{
            "countryCode": '',
            "countryName": '不限区域',
          }],
        })
      }
      this.setData({
        [`${district}_id`]: id,
        [`${district}_name`]: name,
      })
    },
    // 提交选择后的信息
    submit() {
      const {
        province_id,
        city_id,
        area_id,
        province_name,
        city_name,
        area_name,
      } = this.data
      this.triggerEvent('submit', {
        province_id,
        city_id,
        area_id,
        province_name,
        city_name,
        area_name,
      })
    },
    // 关闭选择框
    colose() {
      this.triggerEvent('colose')
    },
  }
})