sunshine-meet-wx/components/popup-modal/index.js

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

Component({
  behaviors: [storeBindingsBehavior],
  properties: {
    popupType: "",
    popupKey: "",
    popupTitle: "",
    popupValue: "",
    popupApi: "",
    show: false
  },
  data: {
    popupOptions: [],
    loading: false,
    value: "",
    label: "",
  },
  storeBindings: {
    store: store,
    fields: {
      token: () => store.token,
    },
    actions: {
      setStore: 'setStore',
    }
  },
  observers: { // 设置组件的侦听属性
    show(val) {
      // console.log(val)
      if (val) {
        // wx.setNavigationBarTitle({
        //   title: this.data.popupTitle
        // })

        const {
          popupType,
          popupValue
        } = this.data
        if (popupType === "radio") {
          this.setData({
            value: popupValue
          })
        }
        if (popupType === 'checkbox' || popupType === "radio") {
          this.getDateList()
        } else {
          this.setData({
            popupOptions: [],
          })
        }

      }

    },
  },
  methods: {
    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

        // console.log(popupValue);
        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}+人`
            })
          }
        })
        console.log(resList);


      } 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) {
      // console.log(e.detail);
      let str = "",
        time1 = "",
        time2 = "",
        num = 0;
      if (e.detail.length === 2) {
        time1 = dayjs(e.detail[0]).format('YYYY-MM-DD');
        time2 = dayjs(e.detail[1]).format('YYYY-MM-DD');
        let timeStamp1 = new Date(e.detail[0]).valueOf(),
          timeStamp2 = new Date(e.detail[1]).valueOf(),
          timeType1 = dayjs(e.detail[0]).format('MM.DD'),
          timeType2 = dayjs(e.detail[1]).format('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
      })

    },


    //复选框确定
    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)
    },
    showToastMsg(msg) {
      wx.showToast({
        title: msg,
        icon: 'none',
        duration: 2000
      })
    },
  }
})