61 lines
1.7 KiB
Vue
61 lines
1.7 KiB
Vue
<template>
|
|
<div class="common-mobile-view food-record">
|
|
<el-tabs v-model="foodStore.recordSegment"
|
|
stretch class="record-tabs"
|
|
@tab-click="handleClick">
|
|
<el-tab-pane label="菜谱" name="recipe">
|
|
<food-recipe v-loading="foodStore.isLoading" element-loading-text="加载中"/>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="日历" name="daily">
|
|
<food-daily v-loading="foodStore.isLoading" element-loading-text="加载中"/>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="时间轴" name="timeline">
|
|
<food-timeline v-loading="foodStore.isLoading" element-loading-text="加载中"/>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import FoodRecipe from '@/components/Food/FoodRecipe.vue'
|
|
import FoodDaily from '@/components/Food/FoodDaily.vue'
|
|
import FoodTimeline from '@/components/Food/FoodTimeline.vue'
|
|
import { useFoodStore } from '@/store/food'
|
|
import type { TabsPaneContext } from 'element-plus'
|
|
import { onMounted } from 'vue'
|
|
|
|
const foodStore = useFoodStore()
|
|
|
|
onMounted(async () => {
|
|
await foodStore.queryCategory()
|
|
await foodStore.queryRecipeList()
|
|
})
|
|
|
|
const handleClick = async (tab: TabsPaneContext) => {
|
|
switch (tab.paneName) {
|
|
case 'recipe':
|
|
await foodStore.queryCategory()
|
|
await foodStore.queryRecipeList()
|
|
break
|
|
case 'daily':
|
|
foodStore.queryDateType = 'month'
|
|
await foodStore.queryRecordList()
|
|
break
|
|
case 'timeline':
|
|
foodStore.queryDateType = 'year'
|
|
await foodStore.queryRecordList()
|
|
break
|
|
default:
|
|
break
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.food-record {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
}
|
|
</style>
|