sunshine-meet-wx/components/city-bar/index.js

const https = require("../../utils/serverData");
const pinyin = require('js-pinyin');

Component({
  properties: {
    changeValue: "",
    changeLabel: ""
  },
  data: {
    mapData: [],
    loading: false,
    indexList: [],
    value: "",
    label: "",
    cityList: []
  },

  attached: async function () {
    const {
      changeValue,
    } = this.data
    this.setData({
      loading: true
    })

    let mapData = await this.getAreaList()
    this.setData({
      mapData
    })
    mapData.map(item => {
      item.pinyin = pinyin.getFullChars(item.label);
    });

    let provice = {};
    mapData.map((item) => {
      const Initials = item.pinyin[0].toUpperCase();
      // 如果对象里有当前字母项则直接 push 一个对象,如果没有则创建一个新的键并赋值;     
      if (provice[Initials]) {
        provice[Initials].push(item);
      } else {
        provice[Initials] = [item];
      }
    });
    // 将数据转为数组，并按字母顺利排列
    let filterData = [];
    for (let key in provice) {
      const obj = {
        letter: key,
        list: provice[key]
      };
      filterData.push(obj)
    }
    filterData.sort((a, b) => {
      return a.letter.localeCompare(b.letter)
    });
    // 为索引字符数组赋值
    let indexList = [],
      arr = [];
    filterData.forEach((item) => {
        indexList.push(item.letter)
        let model = {
          letter: item.letter,
          list: []
        }
        item.list.forEach((si, sii) => {
          const modelb = {
            ...si,
            order: Math.floor(item.list.length / 3) > Math.floor(sii / 3) ? false : true
          }
          model.list.push(modelb);
        })
        arr.push(model);
      }

    );
    let name = "";
    let index = mapData.findIndex((s) => String(s.id) === String(changeValue))
    if (index !== -1) {
      name = this.data.mapData[index].name
    }
    this.setData({
      indexList: indexList,
      cityList: arr,
      value: String(changeValue),
      label: name,
      loading: false
    })
    console.log(changeValue,);
    console.log(this.data.value);
  },
  methods: {
    async getAreaList() {
      const {
        code,
        data
      } = await https.getArea({
        level: 2
      })
      let arr = code === 1 ? data.list : [];
      arr.map((s) => {
        return s.value = s.id, s.label = s.name
      })

      return arr
    },
    bindViewTap(e) {
      const {
        pindex,
        index
      } = e.currentTarget.dataset
      const model = {
        value: this.data.cityList[pindex].list[index].value,
        label: this.data.cityList[pindex].list[index].label,
      }
      this.setData(model)
      console.log(model);
      this.triggerEvent("itemClick", model)
    },
  }
})