UAW/src/views/home/calenView.vue

<template>
  <div class="calen">
    <!-- <el-calendar :range="['2024-03-21', '2024-04-22']">
    </el-calendar> -->
    <div class="calen-list">
      <li v-for="(item,index) in current" :key="index">
        <div class="weiqiandao" v-if="item.type == -1">
          <img src="./../../assets/home/Icon_xross.png" alt="">
        </div>
        <div class="qiandao" v-if="item.type == 1">
          <img src="./../../assets/home/Checkmark.png" alt="">
        </div>
        <div class="weidaoshijian" v-if="item.type == 0">{{ index+1 }}</div>
      </li>
    </div>
  </div>
</template>

<script>
import { getToken } from './../../utils/cookies.js'

export default {
  props: {
    activityData: Object
  },
  data() {
    return {
      userData: JSON.parse(localStorage.getItem("userData")),
      monthData: [],
      startDay: '',
      endDay: '',
      current: []
    }
  },
  mounted() {
    console.log(this.activityData,this.userData)
    this.generateMonth()
  },
  methods: {
    monthInit(time) {
      let endTime = new Date(time)
      let endYyyy =  endTime.getFullYear()
      let endMM =  String(endTime.getMonth() + 1).padStart(2, '0')
      let endDD =  String(endTime.getDate()).padStart(2, '0')
      return endYyyy + '' + endMM + '' + endDD
      // // 时间戳转日期格式
      // startDay = String(startDay.getDate()).padStart(2, '0')
      // endDay = String(endDay.getDate()).padStart(2, '0')
      // console.log(startDay, endDay)
      // 计算之间相差天数

    },

    // 初始化日历样式
    generateMonth() {
      let dayMils = 24 * 60 * 60 * 1000;
      let month = Math.floor((this.activityData.endTime - this.activityData.startTime) / 24 / 60 / 60 / 1000)
      for(let i = 0; i < month; i++ ){
        if((i*dayMils+this.activityData.startTime) < this.activityData.endTime) {
          this.current.push({time: this.monthInit(i*dayMils+this.activityData.startTime), type: -1})
        }
      }
      this.getCheckInit()
    },

    // 获取签到列表
    async getCheckInit(){
      let dayTime = Math.round(new Date())
      let token = getToken()
      let res = await this.$axios.get(`/api/user/checkin/list/1month`, {
        params: "",
        headers: { Authorization: `Bearer ${token}` }
      })
      for(let i = 0; i < this.current.length; i++) {
        for(let j = 0; j < res.data.data.length; j++) {
          if(this.current[i].time > res.data.data[0].day) {
            this.current[i].type = 0
          } else if (this.current[i].time == res.data.data[j].day) {
            this.current[i].type = 1
          }
        }
      }
    },
    getArrDifSameValue(arr1,arr2){
      var result = [];
      for(var i = 0; i < arr2.length; i++){
        var obj = arr2[i];
        var id = obj.day;
        var isExist = false;
        for(var j = 0; j < arr1.length; j++){
          var aj = arr1[j];
          var n = aj.time;
          if(n == id){
            isExist = true;
            break;
          }
        }
        if(isExist){
          result.push(obj);
        }
      }
      return result;
    },
  },
}
</script>

<style lang="scss" scoped>
.calen {
  width: 360px;
  margin: 0 auto;
  margin-top: 10px;
  .calen-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    li {
      flex: 1;
      /*
        // 间隙为5px
      */
      margin: 0 5px 10px 0;
      font-size: 12px;
      /*
        // 这里的10px = (分布个数3-1)*间隙5px, 可以根据实际的分布个数和间隙区调整
      */
      width: calc((100% - 30px) /7);
      /*
        // 加入这两个后每个item的宽度就生效了
      */
      min-width: calc((100% - 30px) / 7);
      /*
        // 加入这两个后每个item的宽度就生效了
      */
      max-width: calc((100% - 30px) / 7);
      /*
        // 去除第3n个的margin-right
      */
      &:nth-child(7n) { 
        margin-right: 0;
      }
      div {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        img {
          width: 10px;
          height: 10px;
        }
      }
      .weiqiandao {
        background: url('./../../assets/home/Missed.png') no-repeat;
        background-size: 100% 100%;
      }
      .qiandao {
        background: url('./../../assets/home/Done.png') no-repeat;
        background-size: 100% 100%;
      }
      .weidaoshijian {
        background: url('./../../assets/home/Laag 5.png') no-repeat;
        background-size: 100% 100%;
      }
    }
  }
  ::v-deep .el-calendar {
    .el-calendar__header {
      display: none;
    }
  }
}
</style>