parentNew/src/components/calendar.vue

<template>
  <view class="wrap">
    <view class="header-cal">
      <view v-for="(item, index) in date" :key="index">{{ item }}<view></view> </view>
    </view>
    <view class="date-box">
      <view v-for="(item, index) in dateArr" :key="index" @tap="calendarTap(item, index)">
        <view
          class="date-head1"
          :class="[todayIndex === index ? 'operationInProgress' : showBusiness ? item.styleClass : '', { showOverdue: item.showOverdue, 'date-class': item.dateClass }]"
        >
          <view>{{ item.dateNum }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    year: {
      type: Number,
      value: 0
    },
    month: {
      type: Number,
      value: 0
    },
    showBusiness: {
      // 是否显示业务标记
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      date: ['日', '一', '二', '三', '四', '五', '六'],
      dateArr: [],
      todayIndex: -1 // 操作索引,默认指向当天
    }
  },
  onLoad(options) {},
  methods: {
    calendarTap(item, index) {
      this.todayIndex = index
      this.$emit('changeDate', item.date)
    },
    selCalendar(year, month) {
      this.dateInit(year, month - 1)
    },
    setAttendance(attendance) {
      // 设置日历考勤
      const start = this.dateArr.findIndex(item => item.dateNum)
      attendance.map((item, index) => {
        if (item !== 'stateless') {
          const pos = start + index
          const dateObj = this.dateArr[pos]
          this.$set(dateObj, 'styleClass', item)
          this.$set(this.dateArr, pos, dateObj)
        }
      })
    },
    setClass(days) {
      //区分有课日期
      this.dateArr.map(item => {
        this.$set(item, 'dateClass', days.includes(item.dateNum))
      })
    },
    dateInit(setYear, setMonth) {
      // 1.获取当前时间
      var date = new Date()
      var currentYear = date.getFullYear() // 获取完整的年份(4位)
      var currentMonth = date.getMonth() + 1 // 获取当前月份(0-11,0代表1月)
      var currentDate = date.getDate() // 获取当前日(1-31)
      var currentTime = '' + currentYear + (currentMonth > 9 ? currentMonth : '0' + currentMonth) + (currentDate > 9 ? currentDate : '0' + currentDate)
      // 全部时间的月份都是按0~11基准，显示月份才+1
      const dateArr = [] // 需要遍历的日历数组数据
      let arrLen = 0 // dateArr的数组长度
      const now = setYear ? new Date(setYear, setMonth) : new Date()
      const year = setYear || now.getFullYear()
      let nextYear = 0
      const month = setMonth || now.getMonth() // 没有+1方便后面计算当月总天数
      const nextMonth = month + 1 > 11 ? 1 : month + 1
      const startWeek = new Date(year + '/' + (month + 1) + '/' + 1).getDay() // 目标月1号对应的星期
      let dayNums = new Date(year, nextMonth, 0).getDate() // 获取目标月有多少天
      let obj = {}
      let num = 0
      let showOverdue = 0

      if (month + 1 > 11) {
        nextYear = year + 1
        dayNums = new Date(nextYear, nextMonth, 0).getDate()
      }
      arrLen = startWeek + dayNums // 渲染日期格子数量包括空格子
      for (let i = 0; i < arrLen; i++) {
        if (i >= startWeek) {
          num = i - startWeek + 1
          // 计算 -- 需要渲染的过期时间
          const renderingTime = '' + year + (month + 1 > 9 ? month + 1 : '0' + (month + 1)) + (num > 9 ? num : '0' + num)
          if (Number(currentTime) > Number(renderingTime)) {
            showOverdue = 1 // 过期
          } else {
            showOverdue = 0 // 有效
          }
          obj = {
            year: year,
            month: month + 1,
            dateNum: num,
            date: renderingTime,
            showOverdue: showOverdue
          }
        } else {
          obj = {}
        }
        dateArr[i] = obj
      }
      this.dateArr = dateArr
    }
  }
}
</script>

<style lang="scss" scoped>
.date-show {
  position: relative;
  width: 250rpx;
  font-family: PingFang-SC-Regular;
  font-size: 40rpx;
  color: #282828;
  text-align: center;
  margin: 59rpx auto 10rpx;
}
.lt-arrow,
.rt-arrow {
  position: absolute;
  top: 1rpx;
  width: 60rpx;
  height: 60rpx;
}
.lt-arrow image,
.rt-arrow image {
  width: 14rpx;
  height: 26rpx;
}
.lt-arrow {
  left: -110rpx;
  transform: rotate(180deg);
}
.rt-arrow {
  right: -100rpx;
}
.header-cal {
  font-size: 0;
  /* padding: 0 24rpx;  */
}
.header-cal > view {
  display: inline-block;
  width: 14.285%;
  color: #5fd0e4;
  font-size: 30rpx;
  text-align: center;
  /* border-bottom: 1px solid #D0D0D0;  */
  padding: 39rpx 0;
}
.weekMark {
  position: relative;
}
.weekMark view {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-bottom: 1px solid #22a7f6;
}
.date-box {
  font-size: 0;
  padding: 10rpx 0;
}
.date-box > view {
  position: relative;
  display: inline-block;
  width: 14.285%;
  color: #020202;
  font-size: 40rpx;
  text-align: center;
  vertical-align: middle;
  margin: 15rpx 0;
}
.date-head1 {
  position: relative;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 26rpx;
  border-radius: 12rpx;
  color: #ccc;
}
.date-head2 {
  background: #20ba96;
  color: #fff;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 26rpx;
  border-radius: 12rpx;
}
.date-class {
  color: #000;
}
.date-weight {
  font-size: 22rpx;
  padding: 15rpx 0;
}
.nowDay .date-weight {
  color: #22a7f6;
}
/* 过期样式*/
.showOverdue {
  color: #5fd0e4;
}
/* 正在操作样式*/
.operationInProgress {
  // background: #20ba96;
  // color: #fff;
  color: #20ba96;
}
/* 正常样式*/
.normal {
  // background: #4db8e4;
  // color: #fff;
  &:after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-color: #39b54a transparent;
    border-width: 0 0 12px 12px;
    border-style: solid;
  }
}
/* 异常样式*/
.abnormal {
  // background: #ff7361;
  // color: #fff;
  &:after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-color: #ff7361 transparent;
    border-width: 0 0 12px 12px;
    border-style: solid;
  }
}
.leave {
  // background: #3390f5;
  // color: #fff;
  &:after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-color: #3390f5 transparent;
    border-width: 0 0 12px 12px;
    border-style: solid;
  }
}
.late {
  // background: #fbbd08;
  // color: #fff;
  &:after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-color: #fbbd08 transparent;
    border-width: 0 0 12px 12px;
    border-style: solid;
  }
}
.absenteeism {
  background: #e54d42;
  color: #fff;
}
</style>