feat:重构模块

src/components/Food/FoodQuery.vue

@@ -0,0 +1,68 @@
+<template>
+  <div v-if="isMobile()" class="mobile-common-query card-item">
+    <div class="query-item">
+      <span>分类：</span>
+      <el-segmented v-model="foodStore.queryRecipe.category"
+                    :options="queryCategoryList"
+                    @change="queryFoodSegmented"/>
+    </div>
+  </div>
+
+  <div v-else class="common-query">
+    <el-select v-model="foodStore.queryDateType"
+               @change="foodStore.refreshInfo()"
+               style="width: 120px;align-self: center;">
+      <el-option v-for="(item, index) in dateTypeOptions" :key="index"
+                 :label="item.label" :value="item.value"/>
+    </el-select>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useFoodStore } from '@/store/food.ts'
+import { isMobile } from 'vue3-common/utils/layoutUtil'
+import { onMounted, ref } from 'vue'
+import { ICategory } from '@/types'
+
+const foodStore = useFoodStore()
+
+const queryCategoryList = ref([] as ICategory[])
+
+onMounted(async () => {
+  await foodStore.queryFoodCategory()
+  initCategoryList()
+})
+
+const dateTypeOptions = [{
+  label: '按月选择',
+  value: 'month'
+},
+{
+  label: '按年选择',
+  value: 'year'
+}]
+
+const initCategoryList = () => {
+  queryCategoryList.value = []
+  queryCategoryList.value.push({
+    label: '全部',
+    value: ''
+  })
+  foodStore.foodCategoryList.forEach((item) => {
+    queryCategoryList.value.push({
+      label: item,
+      value: item
+    })
+  })
+}
+
+const queryFoodSegmented = async () => {
+  foodStore.pageInfo = {
+    currentPage: 1,
+    pageSize: 3,
+    totalSize: 1
+  }
+  foodStore.foodRecipeList = []
+  await foodStore.queryMobileFoodRecipeList()
+}
+</script>