107 lines
2.3 KiB
Vue
107 lines
2.3 KiB
Vue
<template>
|
|
<div class="food-daily">
|
|
<v-calendar ref="calendarRef" :attributes='dailyInfo.attrs'
|
|
@dayclick="dateClick" @did-move="changeMonthClick"
|
|
:is-dark="appStore.isDark"
|
|
class="food-calendar card-item"/>
|
|
|
|
<food-daily-item :date="dailyInfo.calendarDate"/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import FoodDailyItem from '@/components/Food/FoodDailyItem.vue'
|
|
import { reactive, watch, ref, onMounted } from 'vue'
|
|
import { useFoodStore } from '@/store/food.ts'
|
|
import { formatDate } from 'vue3-common/utils/dateUtil'
|
|
import { useAppStore } from '@/store/app'
|
|
|
|
const calendarRef = ref()
|
|
const foodStore = useFoodStore()
|
|
const appStore = useAppStore()
|
|
|
|
onMounted(async () => {
|
|
foodStore.queryDateType = 'month'
|
|
await foodStore.refreshInfo()
|
|
|
|
const { month } = foodStore.queryRecord
|
|
calendarRef.value.move(new Date(month))
|
|
})
|
|
|
|
watch(() => foodStore.isRefresh, () => {
|
|
updateInfo()
|
|
})
|
|
|
|
const dailyInfo = reactive({
|
|
calendarDate: '',
|
|
attrs: [] as any[]
|
|
})
|
|
|
|
const updateInfo = () => {
|
|
getCalendarMoveDate()
|
|
getCalendarAttrDates()
|
|
}
|
|
|
|
const getCalendarMoveDate = () => {
|
|
dailyInfo.calendarDate = formatDate(new Date())
|
|
|
|
const foodLength = foodStore.recordList.length
|
|
if (foodLength > 0) {
|
|
const today = formatDate(new Date())
|
|
if (foodStore.recordList.some((item) => item.date === today)) {
|
|
dailyInfo.calendarDate = today
|
|
} else {
|
|
dailyInfo.calendarDate = formatDate(foodStore.recordList[foodLength - 1].date)
|
|
}
|
|
} else {
|
|
dailyInfo.calendarDate = ''
|
|
}
|
|
}
|
|
|
|
const getCalendarAttrDates = () => {
|
|
dailyInfo.attrs = []
|
|
dailyInfo.attrs.push({
|
|
key: 'today',
|
|
highlight: true,
|
|
dates: new Date()
|
|
})
|
|
|
|
const dateList = foodStore.recordList.map((item) => item.date)
|
|
dailyInfo.attrs.push({
|
|
dot: 'red',
|
|
dates: [...new Set(dateList)]
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 选择日期事件
|
|
* @param day 日期
|
|
*/
|
|
const dateClick = (day) => {
|
|
dailyInfo.calendarDate = formatDate(day.date)
|
|
}
|
|
|
|
/**
|
|
* 选择月份事件
|
|
*/
|
|
const changeMonthClick = async (value) => {
|
|
foodStore.queryRecord.month = value[0].id
|
|
await foodStore.refreshInfo()
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.food-daily {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1vh;
|
|
|
|
.food-calendar {
|
|
width: 100%;
|
|
justify-self: center;
|
|
align-self: center;
|
|
}
|
|
}
|
|
</style>
|