classroom-music-activation/miniprogram/common-components/w-area/index.ts

// components/w-area/index.ts
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    show: {
      type: Boolean,
      value: false,
      observer: "_show",
    },
    /** 选中的数据 */
    value: {
      type: Object as any,
      value: {},
      observer: "_value",
    },
    /**
     * 示例
     * [{
     *  id: xxx,
     *  code: xxx,
     *  name: xxx,
     *  area: [{
     *    id: xxx,
     *    code: xxx,
     *    name: xxx,
     *    area: []
     *  }]
     * }]
     */
    columns: {
      type: Array as any,
      value: [],
      observer: "_columns",
    },
    zIndex: {
      type: Number,
      value: 100,
    },
    // 数据分隔符
    separator: {
      type: String,
      value: "/",
    },
    /**
     * 可见的选项个数
     */
    visibleItemCount: {
      type: Number,
      value: 6,
    },
    itemHeight: {
      type: Number,
      value: 46,
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    innerShow: false,
    showAfterLeave: false,
    areaList: [] as any,
    cacheArea: [] as { cityCode: string; shiftCityCode: string }[], // 临时存储的对应关系
    provinceCode: null as any, // 省
    cityCode: null, // 市
    regionCode: null, // 区
  },

  /**
   * 组件的方法列表
   */
  methods: {
    submitArea(event: any) {
      const selectedOptions: any = event.detail.values || [];
      const provinceCode = selectedOptions[0].code || null;
      const provinceName = selectedOptions[0].name || "";
      const cityCode = selectedOptions[1].code || null;
      const cityName = selectedOptions[1].name || "";
      const regionCode = selectedOptions[2]?.code || null;
      const regionName = selectedOptions[2]?.name || "";
      const separator = this.data.separator;

      const formatAfterCityCode = this.formateCityCode(regionCode, cityCode);

      const codes: any = {
        provinceCode,
        cityCode: formatAfterCityCode,
        regionCode,
      };
      this.setData({
        show: false,
        value: codes,
      });

      this.triggerEvent("input", codes);
      this.triggerEvent("confirm", {
        ...codes,
        name:
          (provinceName || "") +
          (cityName ? separator + cityName : "") +
          (regionName ? separator + regionName : ""),
      });
    },
    onClose() {
      this.triggerEvent("cancel");
    },
    onAfterLeave() {
      this.setData({
        showAfterLeave: true,
      });
    },
    onBeforeEnter() {
      this.setData({
        showAfterLeave: false,
      });
    },
    formateArea(area: any[]) {
      const province_list: { [_: string]: string } = {};
      const city_list: { [_: string]: string } = {};
      const county_list: { [_: string]: string } = {};
      area.forEach((item: any) => {
        province_list[item.code] = item.name;
      });
      area.forEach((item: any) => {
        item.areas &&
          item.areas.forEach((city: any, index: number) => {
            let code = city.code + "";
            // 某些数据不标准 这里需要转换一下
            if (code[4] !== "0" || code[5] !== "0") {
              // 现在把区域的数据改为市的
              const newCode =
                code.substring(0, 2) +
                (index < 10
                  ? `a${index}`
                  : index < 20
                  ? `b${index - 10}`
                  : index < 30
                  ? `c${index - 20}`
                  : `d${index - 30}`) +
                "00";
              this.data.cacheArea.push({
                cityCode: code,
                shiftCityCode: newCode,
              });
              code = newCode;
            }
            city_list[code] = city.name;
          });
      });
      area.forEach((item: any) => {
        item.areas &&
          item.areas.forEach((city: any) => {
            city.areas &&
              city.areas.forEach((county: any) => {
                county_list[county.code] = county.name;
              });
          });
      });
      return {
        province_list,
        city_list,
        county_list,
      };
    },
    // 转换
    formateCityCode(
      regionCode: string | null,
      cityCode: string | null,
      reverse?: boolean
    ) {
      if (!regionCode && cityCode) {
        const cityCodeObj = this.data.cacheArea.find((item: any) => {
          return item[reverse ? "cityCode" : "shiftCityCode"] == cityCode;
        });
        return cityCodeObj
          ? cityCodeObj[reverse ? "shiftCityCode" : "cityCode"]
          : "";
      }
      return cityCode;
    },
    formatValue() {
      const value = this.data.value;
      if(!value || value && !value.provinceCode) return
      this.setData({
        provinceCode: value.provinceCode || null,
        cityCode: (this.formateCityCode(value.regionCode, value.cityCode, true) ||
          null) as any,
        regionCode: value.regionCode,
      });
    },
    _show() {
      this.setData({
        innerShow: this.data.show,
      });
    },
    _value() {
      this.formatValue()
    },
    // 数组初始化，为了处理只有两层数据
    _columns() {
      if (this.data.columns.length <= 0) return;
      const areaList = this.formateArea(this.data.columns);
      this.setData({
        areaList,
      }, () => {
        this.formatValue()
      });
    },
  },
});