challengeFamily/components/activity/eventCalendar.js

const util = require("../../utils/util.js");
Component({
  properties: {
    sid: {
      type: Number,
      value: -1,
      observer: function (newVal){
        this.setData({ sid: newVal });
      }
    },
    calendarInfo:{
      type: Array,
      value: [],
      observer: function (newVal){
        this.setData({ calendarInfo: newVal });
        this.calendarInfo()
      }
    },
    presellOpen:{
      type: Number,
      value: 0,
      observer: function (newVal){
        this.setData({ presellOpen: newVal });
      }
    }
  },
  data: {
    sid:-1,
    s1Sid:-1,
    dateList: [], //日历主体渲染数组
    selectDay: {}, //选中时间
    open:true,  //展开、折叠日历
    monthList:[],
    selectedMonth:0,
    calendarInfo:[], //日历信息
    //selectDay:{},//日历选中日期
    presellOpen:0
  },
  methods: {
    // 解析月份列表
    calendarInfo() {
      let date={},monthList=[];
      this.data.calendarInfo.map((el,i) => {
        let dayVal=0,defalutDays=false;
        if (el.days && el.days.length>0) {
          el.days.forEach(it => {
            if (it.active) {
              dayVal=parseInt(it.days);
              defalutDays=true;
              this.setData({selectedMonth:i})
              let arr = it.month.split('-');
              date.year=parseInt(arr[0]);
              date.month=parseInt(arr[1]);
              date.day=parseInt(it.days);
              date.dateString=it.month+'-'+it.days;
            }
          });
          if (!defalutDays) {
            // dayVal=parseInt(el.days[0].days);
            dayVal = this.getDefaultDay(el.days,0);
          }
        }
        monthList.push({date:el.month+'-'+dayVal,month:el.month.split('-')[1]})
      });
      this.setData({monthList})
      this.setMonth(date.year, date.month, date.day,this.data.selectedMonth,this.data.sid)
    },
    // 递归遍历获取默认选中天数
    getDefaultDay(arr,i){
      if (arr.length>0 && i<arr.length) {
        if (arr[i].actNum>0 || arr[i].waitActNum>0) {
          return arr[i].days;
        } else {
          return this.getDefaultDay(arr,i+1);
        }
      }else{
        return 0;
      }
    },
    /**
     * 时间戳转化为年 月 日 时 分 秒
     * time: 需要被格式化的时间，可以被new Date()解析即可
     * format：格式化之后返回的格式，年月日时分秒分别为Y, M, D, h, m, s，这个参数不填的话则显示多久前
     */
    formatTime(time, format) {
      function formatNumber(n) {
        n = n.toString()
        return n[1] ? n : '0' + n
      }

      function getDate(time, format) {
        const formateArr = ['Y', 'M', 'D', 'h', 'm', 's']
        const returnArr = []
        const date = new Date(time)
        returnArr.push(date.getFullYear())
        returnArr.push(formatNumber(date.getMonth() + 1))
        returnArr.push(formatNumber(date.getDate()))
        returnArr.push(formatNumber(date.getHours()))
        returnArr.push(formatNumber(date.getMinutes()))
        returnArr.push(formatNumber(date.getSeconds()))
        for (const i in returnArr) {
          format = format.replace(formateArr[i], returnArr[i])
        }
        return format
      }

      function getDateDiff(time) {
        let r = ''
        const ft = new Date(time)
        const nt = new Date()
        const nd = new Date(nt)
        nd.setHours(23)
        nd.setMinutes(59)
        nd.setSeconds(59)
        nd.setMilliseconds(999)
        const d = parseInt((nd - ft) / 86400000)
        switch (true) {
          case d === 0:
            const t = parseInt(nt / 1000) - parseInt(ft / 1000)
            switch (true) {
              case t < 60:
                r = '刚刚'
                break
              case t < 3600:
                r = parseInt(t / 60) + '分钟前'
                break
              default:
                r = parseInt(t / 3600) + '小时前'
            }
            break
          case d === 1:
            r = '昨天'
            break
          case d === 2:
            r = '前天'
            break
          case d > 2 && d < 30:
            r = d + '天前'
            break
          default:
            r = getDate(time, 'Y-M-D')
        }
        return r
      }
      if (!format) {
        return getDateDiff(time)
      } else {
        return getDate(time, format)
      }
    },
    //picker设置月份
    editMonth(e) {
      let i = e.currentTarget.dataset.index;
      const arr = e.currentTarget.dataset.item.split("-");
      const year = parseInt(arr[0])
      const month = parseInt(arr[1])
      const day = parseInt(arr[2])
      this.setMonth(year, month,day,i,'',1)
    },
    //上月切换按钮点击
    lastMonth() {
      const lastMonth = new Date(this.data.selectDay.year, this.data.selectDay.month - 2)
      const year = lastMonth.getFullYear()
      const month = lastMonth.getMonth() + 1
      this.setMonth(year, month)
    },
    //下月切换按钮点击
    nextMonth() {
      const nextMonth = new Date(this.data.selectDay.year, this.data.selectDay.month)
      const year = nextMonth.getFullYear()
      const month = nextMonth.getMonth() + 1
      this.setMonth(year, month)
    },
    //设置月份
    setMonth(setYear, setMonth, setDay,index, sid,bol) {
      if (!util.isEmpty(index)) {
        this.setData({selectedMonth:index})
      }
      // if (this.data.selectDay.year !== setYear || this.data.selectDay.month !== setMonth || this.data.selectDay.day !== setDay || this.data.s1Sid != sid) {
        const data = {
          selectDay: {
            year: setYear,
            month: setMonth,
            day: setDay ? setDay : 0,
            dateString: setYear+'-'+setMonth+'-'+(setDay||0)
          }
        }
        if (!setDay) {
          data.open = true;
        }
        this.setData({selectDay:data.selectDay,s1Sid:sid})
        this.dateInit(setYear, setMonth)
        this.data.selectDay.bol=bol;
        this.triggerEvent("change", this.data.selectDay)
      // }
    },
    // //展开收起
    // openChange() {
    //   this.setData({
    //     open: !this.data.open
    //   })
    //   this.triggerEvent("aaa", { a: 0 })
    //   this.dateInit()
    // },
    //日历主体的渲染方法
    dateInit(setYear = this.data.selectDay.year, setMonth = this.data.selectDay.month) {
      console.log(setYear,setMonth)
      let dateList = []; //需要遍历的日历数组数据
      let now = new Date(setYear, setMonth - 1)//当前月份的1号
      let startWeek = now.getDay(); //目标月1号对应的星期
      let dayNum = new Date(setYear, setMonth, 0).getDate() //当前月有多少天
      let forNum = Math.ceil((startWeek + dayNum) / 7) * 7 //当前月跨越的天数（包括当前月天数周所涉及的上下月日期）
      if (this.data.open) {
        //展开状态，需要渲染完整的月份
        for (let i = 0; i < forNum; i++) {
          const now2 = new Date(now)
          let obj = {};
          if (i>=startWeek && i<(dayNum+startWeek)) {
            now2.setDate(i - startWeek + 1)
            let dayStatus=this.matchDay({y:now2.getFullYear(),m:now2.getMonth()+1,d:now2.getDate()})
            obj = {
              day: now2.getDate(),
              month: now2.getMonth() + 1,
              year: now2.getFullYear(),
              dateString: this.formatTime(now2, "Y-M-D")
            };
            if (!util.isEmpty(dayStatus)) {
              obj.actNum=dayStatus.actNum;
              obj.waitActNum=dayStatus.waitActNum;
            }
          } else {
            obj = {}
          }
          dateList[i] = obj;
        }
      } else {
        //非展开状态，只需要渲染当前周
        for (let i = 0; i < 7; i++) {
          const now2 = new Date(now)
          //当前周的7天
          now2.setDate(Math.ceil((this.data.selectDay.day + startWeek) / 7) * 7 - 6 - startWeek + i)
          let obj = {};
          obj = {
            day: now2.getDate(),
            month: now2.getMonth() + 1,
            year: now2.getFullYear(),
            dateString: this.formatTime(now2, "Y-M-D")
          };
          dateList[i] = obj;
        }
      }
      this.setData({
        dateList: dateList
      })
    },
    // 匹配日历-天
    matchDay(date){
      let obj={};
      this.data.calendarInfo.map(el => {
        let date1 = el.month.split('-');
        if (date.y==date1[0] && date.m==parseInt(date1[1])) {
          el.days.forEach(it => {
            if (date.d==it.days) {
              obj = it;
            }
          });
        }
      });
      return obj;
    },
    //一天被点击时
    selectChange(e) {
      if (util.isEmpty(e.currentTarget.dataset.actnum) && util.isEmpty(e.currentTarget.dataset.waitactnum)) {
        return false;
      }
      const year = e.currentTarget.dataset.year
      const month = e.currentTarget.dataset.month
      const day = e.currentTarget.dataset.day
      const dateString = e.currentTarget.dataset.dateString
      const selectDay = {
        year: year,
        month: month,
        day: day,
        dateString: dateString
      }
      if (this.data.selectDay.year !== year || this.data.selectDay.month !== month) {
        this.setMonth(year, month, day)
      } else if (this.data.selectDay.day !== day) {
        this.setData({
          selectDay: selectDay
        })
        this.data.selectDay.bol = 1;
        this.triggerEvent("change", this.data.selectDay)
      }
    }
  },
  observers: {
    spot: function (spot) {
      // this.setSpot()
    }
  }
})