zhishifufei_uniapp/pages/learningCenter/components/calendar.vue

<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>