opms_wechat/components/calendar.vue

<!--
 * @Author: liuzhenlin 461480418@qq.ocm
 * @Date: 2023-01-13 14:29:53
 * @LastEditors: liuzhenlin
 * @LastEditTime: 2023-01-13 17:19:02
 * @Description: file content
 * @FilePath: \opms\components\calendar.vue
-->
<template>
  <view class="schedule">
    <view id="calendar">
      <!-- 年份 月份 -->
      <view class="header">
        <u-row>
          <u-col span="4">
            <view class="calendar-btn" @click="preMonth">
              <u-icon name="arrow-left" color="#969696" size="18"></u-icon>
            </view>
          </u-col>
          <u-col span="4">
            <view class="year-month text-center">{{ currentYear }}年{{ currentMonth }}月</view>
          </u-col>
          <u-col span="4">
            <view class="calendar-btn right" @click="nextMonth">
              <u-icon name="arrow-right" color="#969696" size="18"></u-icon>
            </view>
          </u-col>
        </u-row>
      </view>

      <!-- 星期 -->
      <view class="weekdays">
        <view class="week-item" v-for="item in fropmsun ? weekDaysFropmsun : weekDays" :key="item">
          <view class="week">{{ item }}</view>
        </view>
      </view>
      <!-- 日期 -->
      <view class="days" id="daybox">
        <view v-for="(dayobject, i) in days" :key="i" @click="getClickDay(dayobject)" class="days-item">
          <view class="day" :class="{ active: curDayMsg.date == dayobject.date }">
            <view v-if="currentDate == dayobject.date" class="curDay"></view>
            <view class="cday" :class="{ 'other-month': dayobject.cMonth != currentMonth }">{{ dayobject.cDay }}</view>
            <!-- 优先展示节日，其次，如果农历初一，展示当前农历月份，否则展示农历日期 -->
            <view v-if="showlunar" class="idaycn" :class="{ 'other-month': dayobject.cMonth != currentMonth }">
              <text class="festival" v-if="dayobject.Term">
                {{ dayobject.Term }}
              </text>
              <text class="festival" v-else-if="dayobject.lunarFestival">
                {{ dayobject.lunarFestival }}
              </text>
              <text class="festival" v-else-if="dayobject.festival">
                {{ dayobject.festival }}
              </text>
              <text v-else>
                {{ dayobject.IDayCn }}
              </text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
  import calendar from '../utils/date'
  export default {
    name: 'zpCalendar',
    data() {
      return {
        currentDate: '',
        currentDay: 0,
        currentMonth: 0,
        currentYear: 0,
        currentWeek: 0,
        days: [],
        curDayMsg: [],
        weekDays: ['一', '二', '三', '四', '五', '六', '日'],
        weekDaysFropmsun: ['日', '一', '二', '三', '四', '五', '六'],
      }
    },
    props: {
      showlunar: {
        type: Boolean,
        default: true,
      },
      lines: {
        type: Number,
        default: 6, //一页几行
      },
      fropmsun: {
        type: Boolean,
        default: false,
      },
    },
    created() {
      this.initData()
    },
    methods: {
      // 初始化
      initData(cur) {
        let now, curMonthStartDay, curMonthStartWeek, curPageStartDay
        if (cur) {
          now = new Date(cur)
        } else {
          now = new Date()
        }
        this.currentYear = now.getFullYear()
        this.currentMonth = now.getMonth() + 1
        this.currentDay = now.getDay()
        let d = new Date()
        let year = d.getFullYear()
        let month = d.getMonth() + 1
        let date = d.getDate()
        this.currentDate = `${year}-${month}-${date}`
        // 获取当前月第一天
        curMonthStartDay = new Date(this.formatDate(now.getFullYear(), now.getMonth() + 1, 1))
        // 当前月第一天是周几
        curMonthStartWeek = curMonthStartDay.getDay() // 1,2,3,4,5,6,0
        if (curMonthStartWeek == 0) {
          curMonthStartWeek = 7
        }
        // 日历当前页开始日期
        curPageStartDay =
          curMonthStartDay - (this.fropmsun ? curMonthStartWeek : curMonthStartWeek - 1) * 24 * 60 * 60 * 1000
        // 循环获取日历当前页所有日期（7*this.lines \5/6\）
        this.days = []
        for (let i = 0; i < this.lines * 7; i++) {
          let year = new Date(curPageStartDay + i * 24 * 60 * 60 * 1000).getFullYear()
          let month = new Date(curPageStartDay + i * 24 * 60 * 60 * 1000).getMonth() + 1
          let day = new Date(curPageStartDay + i * 24 * 60 * 60 * 1000).getDate()
          let obj = calendar.solar2lunar(year, month, day)
          this.days.push(obj)
          if (obj['lunarFestival'] == '春节') {
            this.days[i - 1]['lunarFestival'] = '除夕'
          }
        }
        for (let i = 0; i < this.days.length; i++) {
          // 母亲节 5月的第2个星期日
          if (this.days[i]['date'].substr(5, 10) == '5-1' && this.days[i + 14 - this.days[i]['nWeek']]) {
            this.days[i + 14 - this.days[i]['nWeek']]['lunarFestival'] = '母亲节'
          }
          // 父亲节 6月的第3个星期日
          if (this.days[i]['date'].substr(5, 10) == '6-1' && this.days[i + 21 - this.days[i]['nWeek']]) {
            this.days[i + 21 - this.days[i]['nWeek']]['lunarFestival'] = '父亲节'
          }
        }
        if (!cur) {
          this.curDayMsg = calendar.solar2lunar(this.currentYear, this.currentMonth, now.getDate())
        }
      },
      // 上一月
      preMonth() {
        this.currentMonth--
        if (this.currentMonth == 0) {
          this.currentMonth = 12
          this.currentYear--
        }
        this.initData(this.formatDate(this.currentYear, this.currentMonth, 1))
      },

      // 下一月
      nextMonth() {
        this.currentMonth++
        if (this.currentMonth == 13) {
          this.currentMonth = 1
          this.currentYear++
        }
        this.initData(this.formatDate(this.currentYear, this.currentMonth, 1))
      },

      // 点击日期
      getClickDay(el) {
        this.curDayMsg = el
        this.$emit('clickDate', el.date)
      },

      // 格式化 -> 2020-11-20
      formatDate(year, month, day) {
        if (month < 10) month = '0' + month
        if (day < 10) day = '0' + day
        return year + '-' + month + '-' + day
      },
    },
    mounted() {},
  }
</script>
<style lang="scss" scoped>
  .schedule {
    width: 100%;
    height: 100%;
  }

  #calendar {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    padding: 3%;
  }
  .header {
    padding: 34rpx 44rpx 46rpx;
    .year-month {
      font-size: 32rpx;
      color: #323232;
    }
  }
  .weekdays {
    font-size: 28rpx;
    display: flex;
    color: #969696;
    justify-content: space-around;
    padding: 0 0 3% 0;
    .week-item {
      display: inline-block;
      width: 14.2%;
      .week {
        width: 78rpx;
        text-align: center;
      }
    }
  }

  .days {
    margin: 0;
    padding: 1% 0;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;

    .days-item {
      display: inline-block;
      width: 14.2%;
      height: 78rpx;
      margin-bottom: 24rpx;
      text-align: center;
      color: #000;
      cursor: pointer;

      .day {
        position: relative;
        width: 78rpx;
        height: 78rpx;
        .other-month {
          color: #cdcdcd;

          .festival {
            color: #cdcdcd;
          }
        }

        .cday {
          font-size: 28rpx;
          display: inline-block;
          text-align: center;
        }
      }
    }

    .curDay {
      position: absolute;
      top: 0;
      width: 12rpx;
      height: 12rpx;
      background: #ffb83c;
      left: 0;
      right: 0;
      margin: auto;
      bottom: -62rpx;
      border-radius: 50%;
    }

    .active {
      width: 78rpx;
      height: 78rpx;
      text-align: center;
      border-radius: 50%;
      background: #2c92f9 !important;
      color: #fff;

      .idaycn,
      .festival {
        color: #fff;
      }
    }

    .vishidden {
      visibility: hidden;
    }

    .idaycn {
      color: #000;
      font-size: 18rpx;
    }

    .festival {
      color: #f84141;
    }
  }
</style>