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.
329 lines
9.1 KiB
329 lines
9.1 KiB
<template>
|
|
<view class="calendar">
|
|
<view class="calendar-title flex flex-center-x">
|
|
<view class="pre-month operate" @click="gotoPreMonth">
|
|
<view class="iconfont iconxiangyou" style="transform: rotate(180deg);"></view>
|
|
</view>
|
|
{{ monthYear }}
|
|
<view class="next-month operate" @click="gotoNextMonth">
|
|
<view class="iconfont iconxiangyou"></view>
|
|
</view>
|
|
</view>
|
|
<view class='showData'>
|
|
<view class="title">日</view>
|
|
<view class="title">一</view>
|
|
<view class="title">二</view>
|
|
<view class="title">三</view>
|
|
<view class="title">四</view>
|
|
<view class="title">五</view>
|
|
<view class="title">六</view>
|
|
</view>
|
|
<view class='content'>
|
|
<view
|
|
v-for="(item, index) in allArr"
|
|
:key="index"
|
|
:class="['itemData']"
|
|
class="flex flex-center-x"
|
|
@click="chooseDay(item)"
|
|
>
|
|
<view
|
|
:class="['date', {
|
|
'nowDay': item.month === 'current' && nowYear === currentYear && nowMonth === currentMonth && nowDate === item.date,
|
|
'hasPlan': item.month === 'current' && dateList.filter(v => v.date === `${currentYear}-${formatterNum(currentMonth)}-${formatterNum(item.date)}`).length > 0,
|
|
'isClock': item.month === 'current' && dateList.includes(`${currentYear}-${formatterNum(currentMonth)}-${formatterNum(item.date)}`)
|
|
}]"
|
|
>{{ item.month === 'current' ? item.date : '' }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getMonthRecord } from '@/api/learning';
|
|
export default {
|
|
props: {
|
|
calendarData: {
|
|
type: Array,
|
|
require: true,
|
|
},
|
|
type: {
|
|
type: String,
|
|
require: true,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
currentMonthDateLen: 0, // 当月天数
|
|
preMonthDateLen: 0, // 当月中，上月多余天数
|
|
currentYear: new Date().getFullYear(), // 当前显示的年
|
|
currentMonth: new Date().getMonth() + 1, // 当前显示的月
|
|
// eslint-disable-next-line prefer-template
|
|
monthYear: new Date().getFullYear() + '年' + (new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : (new Date().getMonth() + 1)) + '月', //当前年月
|
|
nowYear: new Date().getFullYear(), // 当前显示的月
|
|
nowMonth: new Date().getMonth() + 1, // 当前显示的月
|
|
nowDate: new Date().getDate(), // 当前显示的日
|
|
allArr: [],
|
|
dateList: [],
|
|
};
|
|
},
|
|
mounted() {
|
|
this.getAllArr();
|
|
this.getDateList();
|
|
},
|
|
methods: {
|
|
async getDateList() {
|
|
const { data } = await getMonthRecord(
|
|
{
|
|
month: `${this.currentYear}-${this.currentMonth < 10 ? '0' + this.currentMonth : this.currentMonth}`,
|
|
}
|
|
);
|
|
this.dateList = data;
|
|
console.log(data);
|
|
},
|
|
// 获取某年某月总共多少天
|
|
getDateLen(year, month) {
|
|
let actualMonth = month - 1;
|
|
let timeDistance = +new Date(year, month) - +new Date(year, actualMonth);
|
|
return timeDistance / (1000 * 60 * 60 * 24);
|
|
},
|
|
// 获取某月1号是周几
|
|
getFirstDateWeek(year, month) {
|
|
return new Date(year, month - 1, 1).getDay();
|
|
},
|
|
// 上月 年、月
|
|
preMonth(year, month) {
|
|
if (month == 1) {
|
|
return {
|
|
year: --year,
|
|
month: 12
|
|
};
|
|
} else {
|
|
return {
|
|
year: year,
|
|
month: --month
|
|
};
|
|
}
|
|
},
|
|
// 下月 年、月
|
|
nextMonth(year, month) {
|
|
if (month == 12) {
|
|
return {
|
|
year: ++year,
|
|
month: 1
|
|
};
|
|
} else {
|
|
return {
|
|
year: year,
|
|
month: ++month
|
|
};
|
|
}
|
|
},
|
|
// 获取当月数据，返回数组
|
|
getCurrentArr(){
|
|
let currentMonthDateLen = this.getDateLen(this.currentYear, this.currentMonth); // 获取当月天数
|
|
let currentMonthDateArr = []; // 定义空数组
|
|
if (currentMonthDateLen > 0) {
|
|
for (let i = 1; i <= currentMonthDateLen; i++) {
|
|
currentMonthDateArr.push({
|
|
month: 'current', // 只是为了增加标识，区分上下月
|
|
date: i
|
|
});
|
|
}
|
|
}
|
|
this.currentMonthDateLen = currentMonthDateLen;
|
|
return currentMonthDateArr;
|
|
},
|
|
// 获取当月中，上月多余数据，返回数组
|
|
getPreArr(){
|
|
let preMonthDateLen = this.getFirstDateWeek(this.currentYear, this.currentMonth); // 当月1号是周几 == 上月残余天数）
|
|
let preMonthDateArr = []; // 定义空数组
|
|
if (preMonthDateLen > 0) {
|
|
let { year, month } = this.preMonth(this.currentYear, this.currentMonth); // 获取上月 年、月
|
|
let date = this.getDateLen(year, month); // 获取上月天数
|
|
for (let i = 0; i < preMonthDateLen; i++) {
|
|
preMonthDateArr.unshift({ // 尾部追加
|
|
month: 'pre', // 只是为了增加标识，区分当、下月
|
|
date: date
|
|
});
|
|
date--;
|
|
}
|
|
}
|
|
this.preMonthDateLen = preMonthDateLen;
|
|
return preMonthDateArr;
|
|
},
|
|
// 获取当月中，下月多余数据，返回数组
|
|
getNextArr() {
|
|
let nextMonthDateLen = 35 - this.preMonthDateLen - this.currentMonthDateLen; // 下月多余天数
|
|
let nextMonthDateArr = []; // 定义空数组
|
|
if (nextMonthDateLen > 0) {
|
|
for (let i = 1; i <= nextMonthDateLen; i++) {
|
|
nextMonthDateArr.push({
|
|
month: 'next',// 只是为了增加标识，区分当、上月
|
|
date: i
|
|
});
|
|
}
|
|
}
|
|
return nextMonthDateArr;
|
|
},
|
|
// 整合当月所有数据
|
|
getAllArr(){
|
|
let preArr = this.getPreArr();
|
|
let currentArr = this.getCurrentArr();
|
|
let nextArr = this.getNextArr();
|
|
let allArr = [...preArr, ...currentArr, ...nextArr];
|
|
this.allArr = allArr;
|
|
let sendObj = {
|
|
currentYear: this.currentYear,
|
|
currentMonth: this.currentMonth,
|
|
monthYear: this.currentYear + '年' + (this.currentMonth < 10 ? '0' + this.currentMonth : this.currentMonth) + '月',
|
|
nowYear: this.nowYear,
|
|
nowMonth: this.nowMonth,
|
|
nowDate: this.nowDate,
|
|
fullDate: this.nowYear + '-' + this.nowMonth + '-' + this.nowDate,
|
|
allArr: allArr
|
|
};
|
|
this.$emit('sendObj', sendObj);
|
|
},
|
|
// 点击 上月
|
|
gotoPreMonth() {
|
|
let { year, month } = this.preMonth(this.currentYear, this.currentMonth);
|
|
this.currentYear = year;
|
|
this.currentMonth = month;
|
|
this.monthYear = year + '年' + (month < 10 ? '0' + month : month) + '月';
|
|
this.getAllArr();
|
|
this.getDateList();
|
|
},
|
|
// 点击 下月
|
|
gotoNextMonth() {
|
|
let { year, month } = this.nextMonth(this.currentYear, this.currentMonth);
|
|
this.currentYear = year;
|
|
this.currentMonth = month;
|
|
this.monthYear = year + '年' + (month < 10 ? '0' + month : month) + '月';
|
|
this.getAllArr();
|
|
this.getDateList();
|
|
},
|
|
clockPreTask(id) {
|
|
this.$emit('clock', id);
|
|
},
|
|
chooseDay(item) {
|
|
if (item.month === 'current') {
|
|
this.nowYear = this.currentYear;
|
|
this.nowMonth = this.currentMonth;
|
|
this.nowDate = item.date;
|
|
this.$emit('change');
|
|
}
|
|
},
|
|
formatterNum(num) {
|
|
return Number(num) < 10 ? `0${num}` : num;
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.calendar{
|
|
width: 100%;
|
|
padding-bottom: 70rpx;
|
|
.calendar-title {
|
|
font-size: 30rpx;
|
|
color: #333;
|
|
font-weight: bold;
|
|
color: #333;
|
|
height: 102rpx;
|
|
border-bottom: 1rpx solid #e6e6e6;
|
|
justify-content: center;
|
|
.operate {
|
|
>view {
|
|
color: #b0b0b0;
|
|
}
|
|
&.pre-month {
|
|
margin-right: 35rpx;
|
|
}
|
|
&.next-month {
|
|
margin-left: 35rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.showData{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
}
|
|
.showData .title{
|
|
width: calc(100% / 7);
|
|
height: 78rpx;
|
|
line-height: 48rpx;
|
|
text-align: center;
|
|
flex-shrink: 0;
|
|
font-size: 24rpx;
|
|
color: #B3B3B3;
|
|
padding: 15rpx 0;
|
|
}
|
|
.calendar .tit{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.calendar .content{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
}
|
|
.calendar .content .itemData{
|
|
width: calc(100% / 7);
|
|
height: 78rpx;
|
|
flex-shrink: 0;
|
|
font-size: 14px;
|
|
justify-content: center;
|
|
&.week-hidden {
|
|
display: none;
|
|
}
|
|
.date {
|
|
color: #333;
|
|
font-size: 24rpx;
|
|
line-height: 48rpx;
|
|
position: relative;
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
text-align: center;
|
|
&.nowDay {
|
|
background: #027DFF;
|
|
border-radius: 50%;
|
|
color: #fff;
|
|
}
|
|
&.hasPlan {
|
|
&:after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 7rpx;
|
|
height: 7rpx;
|
|
border-radius: 50%;
|
|
left: 50%;
|
|
bottom: -8rpx;
|
|
transform: translateX(-50%);
|
|
background: #FF0327;
|
|
white-space: nowrap;
|
|
line-height: 0;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
&.isClock {
|
|
&:after {
|
|
content: '√';
|
|
position: absolute;
|
|
width: 12rpx;
|
|
height: 8rpx;
|
|
left: 50%;
|
|
bottom: 0rpx;
|
|
font-size: 20rpx;
|
|
color: #FF0327;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|