345 lines
10 KiB
JavaScript
345 lines
10 KiB
JavaScript
// component/calendar/calendar.js
|
|
const dayjs = require('dayjs');
|
|
Component({
|
|
/**
|
|
* 组件的属性列表
|
|
*/
|
|
properties: {
|
|
calendarAllList: {
|
|
type: Array
|
|
}
|
|
// isShow:{
|
|
// type:Boolean,
|
|
// value:false
|
|
// },
|
|
},
|
|
|
|
/**
|
|
* 组件的初始数据
|
|
*/
|
|
data: {
|
|
calendarWeek: ['一', '二', '三', '四', '五', '六', '日'],
|
|
currentTime: '',
|
|
nowYear: '',
|
|
nowMonth: '',
|
|
swiperHeight: '',
|
|
calendarPageIndex: 1,
|
|
selectedIndex: '',
|
|
isShow: false //是否展开
|
|
},
|
|
lifetimes: {
|
|
attached: function () {
|
|
//在组件实例进入页面节点树时执行
|
|
this.setData({
|
|
currentTime: `${new Date().getFullYear()}/${
|
|
new Date().getMonth() + 1
|
|
}/${new Date().getDate()}`,
|
|
nowYear: new Date().getFullYear(),
|
|
nowMonth:
|
|
new Date().getMonth() + 1 > 9
|
|
? new Date().getMonth() + 1
|
|
: '0' + (new Date().getMonth() + 1)
|
|
});
|
|
this.getMonthDate();
|
|
}
|
|
},
|
|
/**
|
|
* 组件的方法列表
|
|
*/
|
|
methods: {
|
|
setSwiperHeight() {
|
|
// swiper高度
|
|
const query = wx.createSelectorQuery().in(this);
|
|
if (this.data.isShow) {
|
|
query
|
|
.select('.currentBox')
|
|
.boundingClientRect(res => {
|
|
this.setData({
|
|
swiperHeight: res.height
|
|
});
|
|
})
|
|
.exec();
|
|
}
|
|
},
|
|
changeSwiper(e) {
|
|
let index = this.data.calendarPageIndex;
|
|
const diff = e.detail.current - index;
|
|
if (diff == 1 || diff == -2) {
|
|
// 向右边滑动，显示swiper左边内容
|
|
this.nextMonth();
|
|
} else if (diff == -1 || diff == 2) {
|
|
// 向左边滑动 显示swiper右边内容
|
|
this.prevMonth();
|
|
}
|
|
},
|
|
transitionStop(e) {
|
|
//更新轮播图当前index
|
|
this.setData({
|
|
calendarPageIndex: e.detail.current
|
|
});
|
|
this.setSwiperHeight();
|
|
},
|
|
prevMonth() {
|
|
//上一个月
|
|
if (!this.data.isShow) {
|
|
//收起时切换上下月有问题所以做了限制
|
|
return;
|
|
}
|
|
const index = this.data.calendarPageIndex;
|
|
let pre = index == 0 ? 2 : index - 1;
|
|
this.setData({
|
|
calendarPageIndex: pre
|
|
});
|
|
let year = new Date(this.data.currentTime).getFullYear();
|
|
let month = new Date(this.data.currentTime).getMonth() - 1;
|
|
if (month < 0) {
|
|
month = 11;
|
|
year--;
|
|
}
|
|
this.initDate(new Date(year, month, 1));
|
|
this.getMonthDate();
|
|
},
|
|
nextMonth() {
|
|
//下一个月
|
|
if (!this.data.isShow) {
|
|
return;
|
|
}
|
|
const index = this.data.calendarPageIndex;
|
|
let next = index == 2 ? 0 : index + 1;
|
|
this.setData({
|
|
calendarPageIndex: next
|
|
});
|
|
let year = new Date(this.data.currentTime).getFullYear();
|
|
let month = new Date(this.data.currentTime).getMonth() + 1;
|
|
if (month > 11) {
|
|
month = 0;
|
|
year++;
|
|
}
|
|
this.initDate(new Date(year, month, 1));
|
|
this.getMonthDate();
|
|
},
|
|
initDate(date = new Date()) {
|
|
//初始化日期
|
|
const year = date.getFullYear();
|
|
const month =
|
|
date.getMonth() < 9 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
|
|
const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
|
|
const currentDate = year + '/' + month + '/' + day;
|
|
this.setData({
|
|
currentTime: currentDate,
|
|
nowYear: year,
|
|
nowMonth: month
|
|
});
|
|
},
|
|
getMonthDate() {
|
|
let showMonthList = this.getShowMonthList();
|
|
const calendarAllList = [];
|
|
showMonthList.forEach(item => {
|
|
calendarAllList.push(this.getAllMonthDay(item));
|
|
});
|
|
let allList = [];
|
|
const index = this.data.calendarPageIndex;
|
|
if (index == 1) {
|
|
allList = [calendarAllList[0], calendarAllList[1], calendarAllList[2]];
|
|
} else if (index == 2) {
|
|
allList = [calendarAllList[2], calendarAllList[0], calendarAllList[1]];
|
|
} else if (index == 0) {
|
|
allList = [calendarAllList[1], calendarAllList[2], calendarAllList[0]];
|
|
}
|
|
this.setData({
|
|
calendarAllList: allList
|
|
});
|
|
if (!this.data.selectedIndex) {
|
|
//初始化才进
|
|
let day = new Date().getDate();
|
|
let index = allList[1].list.findIndex(
|
|
x => x.day == day && (!x.isLastMon || !x.isNextMon)
|
|
);
|
|
this.setData({
|
|
selectedIndex: index,
|
|
selectDate: allList[1].month,
|
|
currentSelectDate: allList[1].month + '-' + allList[1].list[index].day
|
|
});
|
|
}
|
|
this.setSwiperHeight();
|
|
if (!this.data.isShow) {
|
|
this.getCurrentWeek();
|
|
}
|
|
let params = {
|
|
date: this.data.nowYear + '-' + this.data.nowMonth,
|
|
calendarAllList: this.data.calendarAllList,
|
|
isShow: this.data.isShow
|
|
};
|
|
this.triggerEvent('selectMonth', params);
|
|
},
|
|
getAllMonthDay(time) {
|
|
//获取每月的每一天
|
|
const timeArr = time.split('-');
|
|
let dayLenth = new Date(timeArr[0], timeArr[1], 0).getDate();
|
|
let dayList = [];
|
|
for (let i = 0; i < dayLenth; i++) {
|
|
dayList.push({
|
|
day: i + 1,
|
|
// timestamp: new Date(`${timeArr[0]}-${Number(timeArr[1])}-${i+1}`).getTime(),
|
|
week: new Date(timeArr[0], timeArr[1] * 1 - 1, i + 1).getDay(),
|
|
date: dayjs(timeArr[0] + '-' + timeArr[1] + '-' + (i + 1)).format(
|
|
'YYYY-M-D'
|
|
),
|
|
isClock: 0
|
|
});
|
|
}
|
|
|
|
for (let j = 0; j < 7; j++) {
|
|
if (dayList[0].week != 1) {
|
|
// 补全月首日期
|
|
let month = Number(timeArr[1]) - 1 == 0 ? 12 : Number(timeArr[1]) - 1;
|
|
let year =
|
|
Number(timeArr[1]) - 1 == 0 ? Number(timeArr[0]) - 1 : timeArr[0];
|
|
const lastMonthDay = new Date(
|
|
timeArr[0],
|
|
Number(timeArr[1]) - 1,
|
|
0
|
|
).getDate();
|
|
const day = {
|
|
day: lastMonthDay - j,
|
|
// timestamp: new Date(`${year}-${month}-${lastMonthDay - j}`).getDay(),
|
|
week: new Date(year, month - 1, lastMonthDay - j).getDay(),
|
|
isLastMon: true,
|
|
date: dayjs(year + '-' + month + '-' + (lastMonthDay - j)).format(
|
|
'YYYY-M-D'
|
|
)
|
|
};
|
|
dayList.unshift(day);
|
|
}
|
|
if (dayList[dayList.length - 1].week != 0) {
|
|
// 补全末位 下月日期
|
|
let month = Number(timeArr[1]) + 1 > 12 ? 1 : Number(timeArr[1]) + 1;
|
|
let year =
|
|
Number(timeArr[1]) + 1 > 12 ? Number(timeArr[0]) + 1 : timeArr[0];
|
|
const day = {
|
|
day: j + 1,
|
|
// timestamp: new Date(`${year}-${month}-${j + 1}`).getTime(),
|
|
week: new Date(year, month - 1, j + 1).getDay(),
|
|
date: dayjs(year + '-' + month + '-' + (j + 1)).format('YYYY-M-D'),
|
|
isNextMon: true
|
|
};
|
|
dayList.push(day);
|
|
}
|
|
}
|
|
|
|
return {
|
|
month: `${timeArr[0]}-${Number(timeArr[1])}`,
|
|
list: dayList
|
|
};
|
|
},
|
|
getShowMonthList() {
|
|
//获取前后三个月的月份
|
|
const timeArr = this.data.currentTime.split('/');
|
|
let searchMonthList = [`${timeArr[0]}-${timeArr[1]}`];
|
|
if (Number(timeArr[1]) > 1 && Number(timeArr[1]) < 12) {
|
|
const preMonth = Number(timeArr[1]) - 1;
|
|
const nextMonth = Number(timeArr[1]) + 1;
|
|
searchMonthList = [
|
|
`${timeArr[0]}-${preMonth}`,
|
|
searchMonthList[0],
|
|
`${timeArr[0]}-${nextMonth}`
|
|
];
|
|
} else if (Number(timeArr[1]) == 1) {
|
|
const preYear = Number(timeArr[0]) - 1;
|
|
searchMonthList = [
|
|
`${preYear}-12`,
|
|
searchMonthList[0],
|
|
`${timeArr[0]}-02`
|
|
];
|
|
} else if (Number(timeArr[1]) == 12) {
|
|
const nextYear = Number(timeArr[0]) + 1;
|
|
searchMonthList = [
|
|
`${timeArr[0]}-11`,
|
|
searchMonthList[0],
|
|
`${nextYear}-01`
|
|
];
|
|
}
|
|
return searchMonthList;
|
|
},
|
|
selectWeekDay(e) {
|
|
let item = e.currentTarget.dataset.item;
|
|
if (item.isLastMon || item.isNextMon) {
|
|
return false;
|
|
}
|
|
this.setData({
|
|
currentSelectDate: item.date
|
|
});
|
|
this.triggerEvent('getSelectDate', this.data.currentSelectDate);
|
|
},
|
|
selectDay(e) {
|
|
//选择日期
|
|
let { arr_item, item, index } = e.currentTarget.dataset;
|
|
if (item.isLastMon || item.isNextMon || !this.data.isShow) {
|
|
return false;
|
|
}
|
|
this.setData({
|
|
selectedIndex: index,
|
|
selectDate: arr_item.month
|
|
});
|
|
let currentSelectDate = arr_item.month + '-' + arr_item.list[index].day;
|
|
this.setData({
|
|
currentSelectDate
|
|
});
|
|
this.triggerEvent('getSelectDate', currentSelectDate);
|
|
},
|
|
changeShowStatus() {
|
|
this.setData({
|
|
isShow: !this.data.isShow
|
|
});
|
|
this.setData({
|
|
currentTime: dayjs(this.data.currentSelectDate).format('YYYY/M/D')
|
|
});
|
|
this.getMonthDate();
|
|
this.setSwiperHeight();
|
|
},
|
|
getCurrentWeek() {
|
|
//初始化选择项的这一周
|
|
let list = [];
|
|
let currentMonth = dayjs(this.data.currentSelectDate).format('YYYY-M');
|
|
let item = this.data.calendarAllList.filter(
|
|
x => x.month === currentMonth
|
|
)[0];
|
|
item.list.map(x => (x.date = dayjs(x.date).format('YYYY-MM-DD')));
|
|
let weekOfDay = dayjs(this.data.currentSelectDate).format('d'); //计算今天是这周第几天
|
|
for (let i = 1; i < 8; i++) {
|
|
let dayTime;
|
|
if (weekOfDay == 0) {
|
|
dayTime = dayjs(this.data.currentSelectDate).subtract(7 - i, 'days');
|
|
} else {
|
|
if (i == 7) {
|
|
dayTime = dayjs(this.data.currentSelectDate).add(
|
|
i - weekOfDay,
|
|
'days'
|
|
);
|
|
} else {
|
|
dayTime = dayjs(this.data.currentSelectDate).subtract(
|
|
weekOfDay - i,
|
|
'days'
|
|
);
|
|
}
|
|
}
|
|
let obj = {
|
|
day: dayTime.format('D'),
|
|
date: dayTime.format('YYYY-M-D'),
|
|
isNextMon: dayTime.format('YYYY-M') > currentMonth ? true : false,
|
|
isLastMon: dayTime.format('YYYY-M') < currentMonth ? true : false,
|
|
isClock: item.list.filter(
|
|
x => x.date == dayTime.format('YYYY-MM-DD')
|
|
)[0].isClock
|
|
};
|
|
list.push(obj);
|
|
}
|
|
this.setData({
|
|
nowYear: dayjs(this.data.currentSelectDate).format('YYYY'),
|
|
nowMonth: dayjs(this.data.currentSelectDate).format('MM'),
|
|
showFalseList: list
|
|
});
|
|
}
|
|
}
|
|
});
|