HHAromeMiniProgramDemo/components/area-picker/index.js

const {
    getProvince,
    getCity,
    getArea,
    getStreet
} = require("../../utils/api/api");
const {
  throttle
} = require("../../utils/throttle/throttle");

// components/area-picker/index.js
Component({
  options: {
    lifetimes: true
  },
    /**
     * 组件的属性列表
     */
    properties: {
      content: {
        type: String,
        default: null
      },
      hasStreet: {
        type: Boolean,
        default: false
      },
      title: {
        type: String,
        default: null
      }
    },
    /**
     * 组件的初始数据
     */
    data: {
      show: false,
      valueIndex: [],
      result: [],
      result_show: null,
      addressList: []
    },
    /**
     * 组件的方法列表
     */
    methods: {
      showPopup() {
        this.setData({
          show: true
        })
      },
      change(event) {
        // console.info('detail-->', event.detail)
        let column = event.detail.index;
        this.getAddressList(column, event.detail.picker.getColumnIndex(column), null, event.detail.picker)
      },
      onConfirm(e) {
        let { valueIndex, result, result_show } = this.data
          valueIndex = e.detail.index
          result = e.detail.value.map(item => {
            return item.name
          })
          result_show = result.join("-");
          this.setData({
            show: false,
            valueIndex,
            result_show
          })
          this.triggerEvent("change", result_show);
      },
      onCancel() {
        this.setData({ show: false })
      },
      //获取省市区街道列表并赋值
      getAddressList: throttle(async function(column = -1, index = 0, value, picker = null) {
        let { addressList, valueIndex, result, result_show } = this.data;
        if (column <= -1) {
          await getProvince().then(provinceList => {
              addressList[0] = { values: provinceList.data, key: '省' }
              if (value) {
                  index = provinceList.data.findIndex(item => {
                      return item.name == value[0];
                  });
                  index = index > -1 ? index : 0;
              } else {
                  index = 0;
              }
          });
        }
        if (column <= 0) {
            valueIndex[0] = index
            result[0] = addressList[0].values[index].name;
            await getCity(addressList[0].values[index || 0].areaCodeId).then(
                cityList => {
                  addressList[1] = { values: cityList.data, key: '市' }
                  if(!!picker) {
                    picker.setColumnValues(++column, cityList.data)
                  }
                    if (value) {
                        index = cityList.data.findIndex(item => {
                            return item.name == value[1];
                        });
                        index = index > -1 ? index : 0;
                    } else {
                        index = 0;
                    }
                }
            );
        }
        if (column <= 1) {
            valueIndex[1] = index;
            result[1] = addressList[1].values[index].name;
            await getArea(addressList[1].values[index || 0].areaCodeId).then(
                areaList => {
                  addressList[2] = { values: areaList.data, key: '区' }
                  if(!!picker) {
                    picker.setColumnValues(++column, areaList.data)
                  }
                    if (value) {
                        index = areaList.data.findIndex(item => {
                            return item.name == value[2];
                        });
                        index = index > -1 ? index : 0;
                    } else {
                        index = 0;
                    }
                }
            );
        }
        if (column <= 2) {
            valueIndex[2] = index;
            result[2] = addressList[2].values[index].name;
            if (this.data.hasStreet) {
                await getStreet(addressList[2].values[index || 0].areaCodeId).then(
                    streetList => {
                      addressList[3] = { values: streetList.data, key: '街道' }
                      if(!!picker) {
                        picker.setColumnValues(++column, streetList.data)
                      }
                        if (value) {
                            index = streetList.data.findIndex(item => {
                                return item.name == value[3];
                            });
                            index = index > -1 ? index : 0;
                        } else {
                            index = 0;
                        }
                    }
                );
            }
        }
        if (column <= 3 && this.data.hasStreet) {
            valueIndex[3] = index;
            result[3] =
            addressList[3].length > 0
                    ? addressList[3][index].name
                    : "暂无街道";
        }
        if (column <= -1 && !value) {
            result = [];
            result_show = null;
        }
        // result_show = result.join("-") || null;
        this.setData({
          addressList,
          valueIndex,
          result_show
        });
        // this.triggerEvent("change", result_show)
      }, 300, false)
    },
    lifetimes: {
        // 组件初始化时
        attached: async function() {
            let value = this.data.content;
            value = value ? value.split("-") : null;
            this.getAddressList(-1, 0, value);
        }
    }
});