7 changed files with 289 additions and 17 deletions
@ -0,0 +1,5 @@
|
||||
import HisTory from './index.vue' |
||||
|
||||
export { |
||||
HisTory, |
||||
} |
||||
@ -0,0 +1,257 @@
|
||||
<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) |
||||
|
||||
// 切换月 将来月不能切换 |
||||
function changeMonth(type: number) { |
||||
if (type > 0) { |
||||
const tempDate = dayjs(data.value).add(1, 'month') |
||||
if (tempDate.isAfter(dayjs(), 'month')) { |
||||
return |
||||
} |
||||
data.value = tempDate |
||||
} |
||||
else { |
||||
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 data = datesData.value[value.$D] |
||||
|
||||
if (!data) { |
||||
return 'future-date' |
||||
} |
||||
|
||||
switch (data.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> |
||||
Loading…
Reference in new issue