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'
import { history } from '@/api/task/index'

const data = ref(dayjs())
const yam = ref(dayjs(data.value).format('YYYY-MM'))
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
    }
    data.value = tempDate
  }
  else {
    formerly.value = true
    data.value = dayjs(data.value).subtract(1, 'month')
  }
  month.value = data.value.month() + 1
  yam.value = data.value.format('YYYY-MM')
  getHistory(yam.value)
}
// 自定义日历头
function format(val: string | number | dayjs.Dayjs | Date | null | undefined) {
  const newVal = dayjs(val).format('YYYY年MM月')
  return newVal
}

// 自定义日期样式 0未领取  1 已领取
const getCellTypeClass = function (value: { $D: string | number }) {
  const getData: any = datesData.value[value.$D - 1]
  if (!getData && !formerly.value) {
    return 'future-date'
  }
  if (formerly.value) {
    return 'past-date'
  }
  switch (getData.signType) {
    case 0:
      return 'past-date'
    case 1:
      return 'current-date'
  }
}
function getHistory(time: string) {
  history({ yearAndMonth: time }).then((res) => {
    console.log(res, 666)

    datesData.value = res
  })
}

onMounted(async () => {
  getHistory(yam.value)
})
</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>
      <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 - 1]?.awardIntegral ? datesData[value.$D - 1]?.awardIntegral : "1" }}点数
              </div>
            </div>
            <div v-if="dayjs(value).isSame(dayjs(), 'day') && datesData[value.$D - 1]?.signType === 0 " 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>