feat:更新个人中心UI

src/views/record/index.vue

@@ -1,26 +1,16 @@
 <template>
   <div class="common-mobile-view food-record">
-    <div class="food-query">
-      <el-input
-          v-model="foodInfo.query"
-          placeholder="搜索菜友食谱" :prefix-icon="Search" clearable
-          :maxlength="20" show-word-limit
-      />
-    </div>
-
-    <hr style="width: 100%;"/>
-
     <el-tabs v-model="foodStore.recordSegment"
              stretch class="record-tabs"
              @tab-click="handleClick">
       <el-tab-pane label="菜谱" name="recipe">
-        <food-recipe />
+        <food-recipe v-loading="foodStore.isLoading" element-loading-text="加载中"/>
       </el-tab-pane>
       <el-tab-pane label="日历" name="daily">
-        <food-daily />
+        <food-daily v-loading="foodStore.isLoading" element-loading-text="加载中"/>
       </el-tab-pane>
       <el-tab-pane label="时间轴" name="timeline">
-        <food-timeline />
+        <food-timeline v-loading="foodStore.isLoading" element-loading-text="加载中"/>
       </el-tab-pane>
     </el-tabs>
   </div>
@@ -30,41 +20,30 @@
 import FoodRecipe from '@/components/Food/FoodRecipe.vue'
 import FoodDaily from '@/components/Food/FoodDaily.vue'
 import FoodTimeline from '@/components/Food/FoodTimeline.vue'
-import { Search } from '@element-plus/icons-vue'
-import { reactive } from 'vue'
 import { useFoodStore } from '@/store/food'
-import { TabsPaneContext } from 'element-plus'
+import type { TabsPaneContext } from 'element-plus'
+import { onMounted } from 'vue'
 
 const foodStore = useFoodStore()
 
-const foodInfo = reactive({
-  query: ''
+onMounted(async () => {
+  await foodStore.queryCategory()
+  await foodStore.queryRecipeList()
 })
 
-const recordSegmentList = [{
-  label: '菜谱',
-  value: 'recipe'
-},
-{
-  label: '日历',
-  value: 'daily'
-},
-{
-  label: '时间轴',
-  value: 'timeline'
-}]
-
-const handleClick = async (tab: TabsPaneContext, event: Event) => {
+const handleClick = async (tab: TabsPaneContext) => {
   switch (tab.paneName) {
     case 'recipe':
+      await foodStore.queryCategory()
+      await foodStore.queryRecipeList()
       break
     case 'daily':
       foodStore.queryDateType = 'month'
-      await foodStore.refreshInfo()
+      await foodStore.queryRecordList()
       break
     case 'timeline':
       foodStore.queryDateType = 'year'
-      await foodStore.refreshInfo()
+      await foodStore.queryRecordList()
       break
     default:
       break
@@ -77,12 +56,5 @@ const handleClick = async (tab: TabsPaneContext, event: Event) => {
   display: flex;
   flex-direction: column;
   gap: 5px;
-
-  .food-query {
-  }
-
-  .record-tabs {
-
-  }
 }
 </style>