feat:更新美食模块图片功能

src/components/Food/FoodCard.vue

@@ -1,19 +1,17 @@
 <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="AListPath + item.imageUrl"
-                  fit="contain" alt="暂无成果">
-          <template #error>
-            <div class="image-slot">
-              <span>暂无图片</span>
-            </div>
-          </template>
-        </el-image>
-      </el-carousel-item>
-    </el-carousel>
+    <el-image v-if="props.foodItem?.recordList.length > 0"
+              :src="AListPath + props.foodItem?.recordList[0].imageUrl"
+              :preview-src-list="previewImageList"
+              :initial-index="0"
+              show-progress
+              fit="contain" alt="暂无成果">
+      <template #error>
+        <div class="image-slot">
+          <span>暂无图片</span>
+        </div>
+      </template>
+    </el-image>
 
     <el-empty v-else description="暂无成果" />
 
@@ -65,8 +63,8 @@
 <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 { computed, defineProps, onMounted, PropType, reactive } from 'vue'
+import { IFoodRecipe } from '@/types/food.ts'
 import { useRouter } from 'vue-router'
 import { formatDate } from 'vue3-common/utils/dateUtil'
 import { commonElMessageBox } from 'vue3-common/utils/elUtil'
@@ -91,9 +89,9 @@ onMounted(() => {
   foodCardInfo.recommendRate = props.foodItem?.recommendRate as number
 })
 
-const getFoodRecord = (recordList: IFoodRecord[]) => {
-  return recordList.filter((item) => item.imageUrl)
-}
+const previewImageList = computed(() => {
+  return props.foodItem?.recordList.map((item) => `${AListPath}${item.imageUrl}`)
+})
 
 const editFoodRecipeClick = async () => {
   const id = props.foodItem?.id
@@ -112,10 +110,6 @@ const deleteFoodRecipeClick = () => {
     foodStore.handleFoodRecipeApi(props.foodItem)
   })
 }
-
-const changeFoodEvent = (current: number) => {
-  foodCardInfo.currentFoodIndex = current
-}
 </script>
 
 <style lang="scss">