qn-ai-pc/src/views/task/components/HisTory/index.vue

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import dayjs from 'dayjs'
import { Button, Calendar } from 'ant-design-vue'
import {
  LeftOutlined,
  RightOutlined,
} from '@ant-design/icons-vue'

const data = ref(dayjs())
const datesData = ref<any>([])
const month = ref(data.value.month() + 1)
const formerly = ref(false)
// 切换月  将来月不能切换
function changeMonth(type: number) {
  if (type > 0) {
    const tempDate = dayjs(data.value).add(1, 'month')

    if (tempDate.isAfter(dayjs(), 'month')) {
      return
    }
    if (tempDate.isSame(dayjs(), 'month')) {
      formerly.value = false
      datesData.value = [
        {
          num: 10,
          type: 1,
        },
        {
          num: 1,
          type: 1,
        },

        {
          num: 1,
          type: 2,
        },
        {
          num: 10,
          type: 2,
        },
        {
          num: 1,
          type: 1,
        },
        {
          num: 1,
          type: 2,
        },
        {
          num: 1,
          type: 2,
        },
        {
          num: 1,
          type: 1,
        },
        {
          num: 1,
          type: 2,
        },
        {
          num: 1,
          type: 2,
        },
        {
          num: 10,
          type: 1,
        },
        {
          num: 1,
          type: 1,
        },
        {
          num: 1,
          type: 1,
        },

        {
          num: 1,
          type: 2,
        },
        {
          num: 10,
          type: 2,
        },
        {
          num: 1,
          type: 1,
        },
        {
          num: 1,
          type: 2,
        },
        {
          num: 1,
          type: 2,
        },
        {
          num: 1,
          type: 1,
        },
        {
          num: 1,
          type: 2,
        },
        {
          num: 1,
          type: 2,
        },
        {
          num: 10,
          type: 3,
        },

      ]
    }
    data.value = tempDate
  }
  else {
    datesData.value = []
    formerly.value = true
    data.value = dayjs(data.value).subtract(1, 'month')
  }
  month.value = data.value.month() + 1
}
// 自定义日历头
function format(val: string | number | dayjs.Dayjs | Date | null | undefined) {
  const newVal = dayjs(val).format('YYYY年MM月')
  return newVal
}

// 自定义日期样式 1已领取  2 过期 3 未领取   将来的直接 return
const getCellTypeClass = function (value: { $D: string | number }) {
  const getData = datesData.value[value.$D]
  if (!getData && !formerly.value) {
    return 'future-date'
  }
  if (formerly.value) {
    return 'past-date'
  }
  switch (getData.type) {
    case 1:
      return 'current-date'
    case 2:
      return 'past-date'
    case 3:
      return 'future-date'
  }
}

onMounted(async () => {
  // 假设fetchDatesData()是从后端获取日期数据的异步函数
  datesData.value = [
    {
      num: 10,
      type: 1,
    },
    {
      num: 1,
      type: 1,
    },

    {
      num: 1,
      type: 2,
    },
    {
      num: 10,
      type: 2,
    },
    {
      num: 1,
      type: 1,
    },
    {
      num: 1,
      type: 2,
    },
    {
      num: 1,
      type: 2,
    },
    {
      num: 1,
      type: 1,
    },
    {
      num: 1,
      type: 2,
    },
    {
      num: 1,
      type: 2,
    },
    {
      num: 10,
      type: 1,
    },
    {
      num: 1,
      type: 1,
    },
    {
      num: 1,
      type: 1,
    },

    {
      num: 1,
      type: 2,
    },
    {
      num: 10,
      type: 2,
    },
    {
      num: 1,
      type: 1,
    },
    {
      num: 1,
      type: 2,
    },
    {
      num: 1,
      type: 2,
    },
    {
      num: 1,
      type: 1,
    },
    {
      num: 1,
      type: 2,
    },
    {
      num: 1,
      type: 2,
    },
    {
      num: 10,
      type: 3,
    },

  ]
})
</script>

<template>
  <div class="haitoryBox">
    <Calendar
      v-model:value="data"
      :fullscreen="false"
    >
      <template #headerRender="{ value }">
        <div class="header">
          <Button type="link" style="margin-right: 8px;color: #B3B6BB;" @click="changeMonth(-1)">
            <LeftOutlined />
          </Button>
          <span>{{ format(value) }}</span>
          <Button type="link" style="margin-left: 8px;color: #B3B6BB;" @click="changeMonth(1)">
            <RightOutlined />
          </Button>
        </div>
      </template>
      <!-- :class="getDateClass(value)" -->
      <template #dateFullCellRender="{ current: value }">
        <div v-if="value.month() === data.month() && value.year() === data.year()">
          <div class="cellBox">
            <div class="cellItem" :class="getCellTypeClass(value)">
              <div class="count">
                {{ datesData[value.$D]?.num ? datesData[value.$D]?.num : "1" }}点数
              </div>
            </div>
            <div v-if="dayjs(value).isSame(dayjs(), 'day') && datesData[value.$D]?.type === 3 " class="getbtn">
              领取
            </div>
            <div v-else class="monthday">
              {{ month }}.{{ value.date() }}
            </div>
          </div>
        </div>
      </template>
    </Calendar>
  </div>
</template>

<style scoped lang="scss">
.haitoryBox {
  width: 30vw;
  .header {
    width: 97%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .cellBox {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    .getbtn {
      width: 35px;
      height: 14px;
      background: linear-gradient(180deg, #ffb33d 0%, #ff9b00 100%);
      border-radius: 11px;
      font-size: 10px;
      color: white;
      margin-top: 1px;
    }
    .monthday {
      width: 35px;
      height: 14px;
      font-size: 11px;
    }
    .cellItem {
      width: 40px;
      height: 50px;
      &.future-date {
        width: 40px;
        height: 50px;
        background-image: url(@/assets/images/task/dlq.png);
        background-size: 100% 100%;
      }
      &.past-date {
        width: 40px;
        height: 50px;
        background-image: url(@/assets/images/task/wlq.png);
        background-size: 100% 100%;
      }
      &.current-date {
        width: 40px;
        height: 50px;
        background-image: url(@/assets/images/task/ylq.png);
        background-size: 100% 100%;
      }
      &.current-date2 {
        width: 100px;
        height: 50px;
        background-image: url(@/assets/images/task/ylq.png);
        background-size: 100% 100%;
      }
      .count {
        font-size: 9px;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: 500;
        color: #ff9b00;
        text-align: center;
        font-weight: bold;
        padding-top: 3px;
      }
    }
  }
}
</style>