mini_program/components/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支持
        addGlobalClass: true
    },
    properties: {
        calendarConfig: {
            type: Object,
            value: {}
        }
    },
    data: {
        handleMap: {
            prev_year: 'chooseYear',
            prev_month: 'chooseMonth',
            next_month: 'chooseMonth',
            next_year: 'chooseYear',
            calendarDisplayTime: ''
        }
    },
    lifetimes: {
        attached: function () {
            this.initComp()
        },
        detached: function () {
            initialTasks.flag = 'finished'
            initialTasks.tasks.length = 0
        },
    },
    methods: {
        initComp() {
            const calendarConfig = this.setDefaultDisableDate()
            this.setConfig(calendarConfig);
            this.backToday()
        },
        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
            })
            let myMonth = newMonth < 10 ? '0' + newMonth : newMonth;
            let calendarDisplayTime = `${newYear}-${myMonth}`;
            this.setData({
                'calendar.curYear': newYear,
                'calendar.curMonth': myMonth,
                calendarDisplayTime
            })
            renderCalendar.call(this, newYear, newMonth)
        },
        bindDateChange(res) {
            let value = res.detail.value;
            let arr = value.split('-');
            let newYear = parseInt(arr[0]);
            let newMonth = parseInt(arr[1]);
            this.setData({
                'calendar.curYear': newYear,
                'calendar.curMonth': newMonth,
                calendarDisplayTime: value
            })
            renderCalendar.call(this, newYear, newMonth)
        },
        backToday() {
            let timer = new Date()
            let year = timer.getFullYear()
            let month = timer.getMonth() + 1
            let nowDate = timer.getDate()
            month = month.length > 1 ? month : '0' + month
            let date = `${year}-${month}`
            wx.setStorageSync("date", {time: `${year}-${month}-${nowDate}`})
            whenSingleSelect.call(this, parseInt(nowDate) - 1)
            if (date !== this.data.calendarDisplayTime) {
                let res = {detail: {value: date}}
                this.bindDateChange(res)
                this.setData({
                    calendarDisplayTime: date
                })
            }
            this.triggerEvent('callSomeFun', '')
        },
        /**
         * 日期点击事件
         * @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 {
                let year;
                let month;
                let day;
                parseInt(date.year) < 10 ? year = '0' + date.year : year = date.year;
                parseInt(date.month) < 10 ? month = '0' + date.month : month = date.month;
                parseInt(date.day) < 10 ? day = '0' + date.day : day = date.day;
                wx.setStorageSync("date", {time: `${year}-${month}-${day}`})
                whenSingleSelect.call(this, idx)
                this.triggerEvent('callSomeFun', '')
            }
            // 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
        }
    },
})