You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
323 lines
10 KiB
323 lines
10 KiB
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 |
|
} |
|
}, |
|
}) |