sunshine-meet-wx/miniprogram/components/popup-modal/index.ts

const https = require("../../api/serverData");
const pinyin = require('js-pinyin');
import { convertTime } from "../../utils/util"
import {
  storeBindingsBehavior
} from 'mobx-miniprogram-bindings'
import { store } from "../../store/index";



Component({
  behaviors: [storeBindingsBehavior],
  properties: {
    popupType: {
      type: String,
      value: ''
    },
    popupKey: {
      type: String,
      value: ''
    },
    popupTitle: {
      type: String,
      value: ''
    },
    popupValue: {
      type: null,
      value: ''
    },
    popupApi: {
      type: String,
      value: ''
    },
    show: {
      type: Boolean,
      value: false
    },
  },
  data: {
    popupOptions: [],
    loading: false,
    value: "",
    label: "",

    mapData: [],
    indexList: [],
    cityList: []
  },
  storeBindings: {
    store: store,
    fields: {
      token: () => store.token,
    },
    actions: {
      setStore: 'setStore',
    }
  },
  observers: { // 设置组件的侦听属性
    show(val) {
      if (val) {
        const {
          popupType,
          popupValue
        } = this.data
        if (popupType === "radio" || popupType === 'city') {
          this.setData({
            value: String(popupValue)
          })
        }
        if (popupType === 'checkbox' || popupType === "radio") {
          this.getDateList()
        } else if (popupType === 'city') {
          this.getMapAreaList()
        } else if (popupType === 'time') {

          this.setData({
            popupOptions: [],
            value: popupValue
          })
        }

      }

    },
  },
  methods: {
    async getMapAreaList() {
      const {
        popupValue,
      } = 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(popupValue))
      if (index !== -1) {
        name = this.data.mapData[index].label
      }
      this.setData({
        indexList,
        cityList: arr,
        value: popupValue,
        label: name,
        loading: false
      })
    },
    async getDateList() {
      let resList = []
      const {
        popupType,
        popupValue
      } = this.data
      const {
        code,
        data,
        msg
      } = await https[this.data.popupApi]({
        page: 1,
        limit: 999999,
        status: '1'
      })
      if (code === 1) {
        const {
          list
        } = data

        list.forEach(si => {
          if (popupType === 'checkbox') {
            let index = popupValue.findIndex((s) => s + '' === si.id + '')
            resList.push({
              ...si,
              selected: index !== -1
            })
          } else {
            resList.push({
              ...si,
              name: si.name ? si.name : String(si.max) !== '0' ? `${si.min}~${si.max}人` : `${si.min}+人`
            })
          }
        })


      } else {
        await this.setStore("", "");
      }
      this.setData({
        popupOptions: resList,
        loading: false
      })
    },
    radioChange(e) {
      const index = Number(e.currentTarget.dataset.index)
      const options = this.data.popupOptions
      const value = index === "" ? "" : options[index].id
      const label = index === "" ? "" : options[index].name
      this.returnItem({
        value,
        label
      })
    },
    timeConfirm(e) {
      let str = "",
        time1 = "",
        time2 = "",
        num = 0;
      if (e.detail.length === 2) {
        time1 = convertTime(e.detail[0]);
        time2 = convertTime(e.detail[1]);
        let timeStamp1 = new Date(e.detail[0]).valueOf(),
          timeStamp2 = new Date(e.detail[1]).valueOf(),
          timeType1 = convertTime(e.detail[0], 'MM.DD'),
          timeType2 = convertTime(e.detail[1], 'MM.DD'),
          conver = 1000 * 60 * 60 * 24;
        num = ((timeStamp2 - timeStamp1) / conver) + 1
        str = `${timeType1}-${timeType2},${num}天`
      }


      this.returnItem({
        value: time1,
        label: str,
        count: num,
        end: time2
      })

    },
    bindViewTap(e) {
      const {
        pindex,
        index
      } = e.currentTarget.dataset
      this.returnItem({
        value: this.data.cityList[pindex].list[index].value,
        label: this.data.cityList[pindex].list[index].label,
      })
    },


    //复选框确定
    checkboxSelected() {
      const options = this.data.popupOptions
      let list = [],
        str = "";
      options.forEach((s) => {
        if (s.selected) {
          list.push(s.id)
          str += str === '' ? s.name : `+${s.name}`
        }
      });
      this.returnItem({
        value: list,
        label: str,
      })
    },
    //复选框选择
    checkboxChange(e) {
      const index = Number(e.currentTarget.dataset.index)
      const options = this.data.popupOptions
      options[Number(index)].selected = !options[Number(index)].selected
      this.setData({
        popupOptions: options
      });
    },
    onItemClick(e) {
      const {
        value,
        label
      } = e.detail
      this.returnItem({
        value,
        label,
      })
    },
    onClickLeft() {
      this.triggerEvent("leftClick")
    },
    returnItem(model) {
      let modal = {
        popupType: this.data.popupType,
        popupKey: this.data.popupKey,
        ...model
      }
      this.triggerEvent("itemClick", modal)
    },
    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
    },
    showToastMsg(msg: string) {
      wx.showToast({
        title: msg,
        icon: 'none',
        duration: 2000
      })
    },
  }
})