nd_wxapp/component/calendar/index.js

import Week from './func/week'
import { Logger, Slide, GetDate, initialTasks } from './func/utils'
import initCalendar, {
  jump,
  getCurrentYM,
  whenChangeDate,
  renderCalendar,
  whenMulitSelect,
  whenSingleSelect,
  whenChooseArea,
  getCalendarDates
} from './main.js'

const slide = new Slide()
const logger = new Logger()
const getDate = new GetDate()

Component({
  options: {
    styleIsolation: 'apply-shared',
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  properties: {
    calendarConfig: {
      type: Object,
      value: {}
    }
  },
  data: {
    handleMap: {
      prev_year: 'chooseYear',
      prev_month: 'chooseMonth',
      next_month: 'chooseMonth',
      next_year: 'chooseYear'
    }
  },
  lifetimes: {
    attached: function() {
      this.initComp()
    },
    detached: function() {
      initialTasks.flag = 'finished'
      initialTasks.tasks.length = 0
    }
  },
  methods: {
    initComp() {
      const calendarConfig = this.setDefaultDisableDate()
      this.setConfig(calendarConfig)
    },
    setDefaultDisableDate() {
      const calendarConfig = this.properties.calendarConfig || {}
      if (calendarConfig.disableMode && !calendarConfig.disableMode.date) {
        calendarConfig.disableMode.date = getDate.toTimeStr(getDate.todayDate())
      }
      return calendarConfig
    },
    setConfig(config) {
      if (config.markToday && typeof config.markToday === 'string') {
        config.highlightToday = true
      }
      config.theme = config.theme || 'default'
      this.weekMode = config.weekMode
      this.setData(
        {
          calendarConfig: config
        },
        () => {
          initCalendar(this, config)
        }
      )
    },
    chooseDate(e) {
      const { type } = e.currentTarget.dataset
      if (!type) return
      const methodName = this.data.handleMap[type]
      this[methodName](type)
    },
    chooseYear(type) {
      const { curYear, curMonth } = this.data.calendar
      if (!curYear || !curMonth) return logger.warn('异常：未获取到当前年月')
      if (this.weekMode) {
        return console.warn('周视图下不支持点击切换年月')
      }
      let newYear = +curYear
      let newMonth = +curMonth
      if (type === 'prev_year') {
        newYear -= 1
      } else if (type === 'next_year') {
        newYear += 1
      }
      this.render(curYear, curMonth, newYear, newMonth)
    },
    chooseMonth(type) {
      const { curYear, curMonth } = this.data.calendar
      if (!curYear || !curMonth) return logger.warn('异常：未获取到当前年月')
      if (this.weekMode) return console.warn('周视图下不支持点击切换年月')
      let newYear = +curYear
      let newMonth = +curMonth
      if (type === 'prev_month') {
        newMonth = newMonth - 1
        if (newMonth < 1) {
          newYear -= 1
          newMonth = 12
        }
      } else if (type === 'next_month') {
        newMonth += 1
        if (newMonth > 12) {
          newYear += 1
          newMonth = 1
        }
      }
      this.render(curYear, curMonth, newYear, newMonth)
    },
    render(curYear, curMonth, newYear, newMonth) {
      whenChangeDate.call(this, {
        curYear,
        curMonth,
        newYear,
        newMonth
      })
      this.setData({
        'calendar.curYear': newYear,
        'calendar.curMonth': newMonth
      })
      renderCalendar.call(this, newYear, newMonth)
    },
    /**
     * 日期点击事件
     * @param {!object} e 事件对象
     */
    tapDayItem(e) {
      const { idx, date = {} } = e.currentTarget.dataset
      const { day, disable } = date
      if (disable || !day) return
      const config = this.data.calendarConfig || this.config || {}
      const { multi, chooseAreaMode } = config
      if (multi) {
        whenMulitSelect.call(this, idx)
      } else if (chooseAreaMode) {
        whenChooseArea.call(this, idx)
      } else {
        whenSingleSelect.call(this, idx)
      }
      this.setData({
        'calendar.noDefault': false
      })
    },
    doubleClickToToday() {
      if (this.config.multi || this.weekMode) return
      if (this.count === undefined) {
        this.count = 1
      } else {
        this.count += 1
      }
      if (this.lastClick) {
        const difference = new Date().getTime() - this.lastClick
        if (difference < 500 && this.count >= 2) {
          jump.call(this)
        }
        this.count = undefined
        this.lastClick = undefined
      } else {
        this.lastClick = new Date().getTime()
      }
    },
    /**
     * 日历滑动开始
     * @param {object} e
     */
    calendarTouchstart(e) {
      const t = e.touches[0]
      const startX = t.clientX
      const startY = t.clientY
      this.slideLock = true // 滑动事件加锁
      this.setData({
        'gesture.startX': startX,
        'gesture.startY': startY
      })
    },
    /**
     * 日历滑动中
     * @param {object} e
     */
    calendarTouchmove(e) {
      const { gesture } = this.data
      const { preventSwipe } = this.properties.calendarConfig
      if (!this.slideLock || preventSwipe) return
      if (slide.isLeft(gesture, e.touches[0])) {
        this.handleSwipe('left')
        this.slideLock = false
      }
      if (slide.isRight(gesture, e.touches[0])) {
        this.handleSwipe('right')
        this.slideLock = false
      }
    },
    calendarTouchend(e) {
      this.setData({
        'calendar.leftSwipe': 0,
        'calendar.rightSwipe': 0
      })
    },
    handleSwipe(direction) {
      let swipeKey = 'calendar.leftSwipe'
      let swipeCalendarType = 'next_month'
      let weekChangeType = 'next_week'
      if (direction === 'right') {
        swipeKey = 'calendar.rightSwipe'
        swipeCalendarType = 'prev_month'
        weekChangeType = 'prev_week'
      }
      this.setData({
        [swipeKey]: 1
      })
      this.currentYM = getCurrentYM()
      if (this.weekMode) {
        this.slideLock = false
        this.currentDates = getCalendarDates()
        if (weekChangeType === 'prev_week') {
          Week(this).calculatePrevWeekDays()
        } else if (weekChangeType === 'next_week') {
          Week(this).calculateNextWeekDays()
        }
        this.onSwipeCalendar(weekChangeType)
        this.onWeekChange(weekChangeType)
        return
      }
      this.chooseMonth(swipeCalendarType)
      this.onSwipeCalendar(swipeCalendarType)
    },
    onSwipeCalendar(direction) {
      this.triggerEvent('onSwipe', {
        directionType: direction,
        currentYM: this.currentYM
      })
    },
    onWeekChange(direction) {
      this.triggerEvent('whenChangeWeek', {
        current: {
          currentYM: this.currentYM,
          dates: [...this.currentDates]
        },
        next: {
          currentYM: getCurrentYM(),
          dates: getCalendarDates()
        },
        directionType: direction
      })
      this.currentDates = null
      this.currentYM = null
    }
  }
})