81 lines
2.1 KiB
Vue
81 lines
2.1 KiB
Vue
<template>
|
|
<div class="mobile-health-view common-mobile-view">
|
|
<v-calendar ref="calendarRef" :attributes='dailyInfo.attrs'
|
|
@dayclick="dateClick" @did-move="changeMonthClick"
|
|
:is-dark="appStore.isDark"
|
|
class="health-calendar card-item"/>
|
|
|
|
<health-form />
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import HealthForm from '@/components/Health/HealthForm.vue'
|
|
import { CalendarDay } from 'v-calendar/dist/types/src/utils/page'
|
|
import { formatDate, getStartEndDate } from 'vue3-common/utils/dateUtil'
|
|
import { onMounted, reactive, watch } from 'vue'
|
|
import { useHealthStore } from '@/store/health'
|
|
import { useAppStore } from '@/store/app.ts'
|
|
import { IHealth } from '@/types/health'
|
|
|
|
const healthStore = useHealthStore()
|
|
const appStore = useAppStore()
|
|
|
|
const dailyInfo = reactive({
|
|
calendarDate: '',
|
|
attrs: [] as any[]
|
|
})
|
|
|
|
watch(() => healthStore.isRefresh, () => {
|
|
dailyInfo.attrs = []
|
|
updateRecordList()
|
|
})
|
|
|
|
onMounted(async () => {
|
|
const result = getStartEndDate(formatDate(new Date()), 'month')
|
|
healthStore.queryInfo = { startDate: result[0], endDate: result[1] }
|
|
|
|
await healthStore.refreshInfo()
|
|
healthStore.selectDate = formatDate(new Date())
|
|
healthStore.currentHealth = healthStore.getHealthDay(formatDate(new Date()))
|
|
})
|
|
|
|
const updateRecordList = () => {
|
|
healthStore.healthRecordList.forEach((item: IHealth) => {
|
|
dailyInfo.attrs.push({
|
|
dot: 'green',
|
|
dates: item.date
|
|
})
|
|
})
|
|
}
|
|
|
|
const dateClick = (day: CalendarDay) => {
|
|
healthStore.selectDate = formatDate(day.date)
|
|
healthStore.currentHealth = healthStore.getHealthDay(formatDate(day.date))
|
|
}
|
|
|
|
/**
|
|
* 选择月份事件
|
|
*/
|
|
const changeMonthClick = async (value) => {
|
|
const result = getStartEndDate(value[0].id, 'month')
|
|
healthStore.queryInfo = { startDate: result[0], endDate: result[1] }
|
|
|
|
await healthStore.refreshInfo()
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.mobile-health-view {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1vh;
|
|
|
|
.health-calendar {
|
|
justify-self: center;
|
|
align-self: center;
|
|
}
|
|
}
|
|
</style>
|