feat:重构模块

src/components/Food/FoodCard.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="life-record-card card-item">
+    <el-carousel v-if="props.foodItem?.recordList.length > 0"
+                 arrow="always" @change="changeFoodEvent">
+      <el-carousel-item v-for="(item, index) in getFoodRecord(props.foodItem?.recordList)"
+                        :key="index">
+        <el-image :src="serviceFileRootPath + item.imageUrl"
+                  fit="contain" alt="暂无成果">
+          <template #error>
+            <div class="image-slot">
+              <span>暂无图片</span>
+            </div>
+          </template>
+        </el-image>
+      </el-carousel-item>
+    </el-carousel>
+
+    <el-empty v-else description="暂无成果" />
+
+    <div class="record-info">
+      <div class="top-container">
+        <div class="info-list">
+          <div class="info-item">
+            <span class="title">{{ props.foodItem.name }}</span>
+          </div>
+        </div>
+
+        <div class="button-info">
+          <el-button v-if="!isMobile()"
+                     type="primary" :icon="Edit" circle :size="'small'"
+                     @click="editFoodRecipeClick"/>
+          <el-button type="primary" :icon="MoreFilled" circle :size="'small'"
+                     @click="viewFoodRecipeClick()" />
+          <el-button type="danger" :icon="DeleteFilled" circle :size="'small'"
+                     @click="deleteFoodRecipeClick()" />
+        </div>
+      </div>
+
+      <div class="bottom-container">
+        <div class="info-list">
+          <div class="info-item category-item">
+            <i class="fa-solid fa-utensils"></i>
+            {{ props.foodItem.category }}
+          </div>
+        </div>
+
+        <div v-if="props.foodItem?.recordList.length > 0" class="info-list">
+          <div class="info-item">
+            <i class="fa-solid fa-flag"></i>
+            {{ props.foodItem.recordList[foodCardInfo.currentFoodIndex].person}}
+          </div>
+          <div class="info-item">
+            <i class="fa-regular fa-calendar-check"></i>
+            {{ formatDate(props.foodItem.recordList[foodCardInfo.currentFoodIndex].date) }}
+          </div>
+        </div>
+
+        <div v-else>
+          <span>暂无成果</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Edit, MoreFilled, DeleteFilled } from '@element-plus/icons-vue'
+import { useFoodStore } from '@/store/food.ts'
+import { defineProps, onMounted, PropType, reactive } from 'vue'
+import { IFoodRecipe, IFoodRecord } from '@/types/food.ts'
+import { useRouter } from 'vue-router'
+import { formatDate } from 'vue3-common/utils/dateUtil'
+import { deepCopyObject } from 'vue3-common/utils/dataUtil'
+import { commonElMessageBox } from 'vue3-common/utils/elUtil'
+import { serviceFileRootPath } from '@/utils'
+import { isMobile } from 'vue3-common/utils/layoutUtil'
+
+const router = useRouter()
+const foodStore = useFoodStore()
+
+const foodCardInfo = reactive({
+  recommendRate: 0,
+  currentFoodIndex: 0
+})
+
+const props = defineProps({
+  foodItem: {
+    required: true,
+    type: Object as PropType<IFoodRecipe>
+  }
+})
+
+onMounted(() => {
+  foodCardInfo.recommendRate = props.foodItem?.recommendRate as number
+})
+
+const getFoodRecord = (recordList: IFoodRecord[]) => {
+  return recordList.filter((item) => item.imageUrl)
+}
+
+const editFoodRecipeClick = async () => {
+  const id = props.foodItem?.id
+  foodStore.foodRecipeApiType = 'UPDATE'
+  await foodStore.queryFoodRecipe(id as number)
+  foodStore.foodRecipeDialog = {
+    title: '编辑菜谱',
+    visible: true,
+    data: deepCopyObject(foodStore.currentFoodRecipe)
+  }
+}
+
+const viewFoodRecipeClick = async () => {
+  await router.push({ name: 'FoodDetailId', params: { id: props.foodItem?.id } })
+}
+
+const deleteFoodRecipeClick = () => {
+  foodStore.foodRecipeApiType = 'DELETE'
+  commonElMessageBox(`请确认是否删除该菜谱: ${props.foodItem?.name}?`).then(() => {
+    foodStore.handleFoodRecipeApi(props.foodItem?.id as number)
+  })
+}
+
+const changeFoodEvent = (current: number) => {
+  foodCardInfo.currentFoodIndex = current
+}
+</script>
+
+<style lang="scss">
+@use "@/styles/home/life.record.module";
+</style>