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