feat:增加vant预览图片组件

src/views/food/recipe.vue

@@ -2,13 +2,11 @@
   <div ref="foodRecipeRef" class="mobile-food-view common-mobile-view">
     <food-query />
 
-    <div class="food-list">
-      <el-empty v-if="foodStore.foodRecipeList.length === 0" description="暂无美食记录"/>
+    <el-empty v-if="foodStore.foodRecipeList.length === 0" description="暂无美食记录"/>
 
-      <div v-else class="list">
-        <food-card v-for="(item, index) in foodStore.foodRecipeList"
-                   :key="index" :food-item="item"/>
-      </div>
+    <div v-else class="food-list">
+      <food-card v-for="(item, index) in foodStore.foodRecipeList"
+                 :key="index" :food-item="item"/>
     </div>
 
     <van-floating-bubble icon="plus" @click="addClick" style="top: -60px;"/>

src/views/food/timeline.vue

@@ -25,7 +25,8 @@
         <div class="timeline-info card-item">
           <span>{{ item.name }}</span>
           <el-image :src="AListUrl + item.imageUrl"
-                    fit="contain" alt="暂无成果">
+                    fit="contain" alt="暂无成果"
+                    @click="viewImageClick(item)">
             <template #error>
               <div class="image-slot">
                 <span>暂无图片</span>
@@ -46,6 +47,8 @@ import { useFoodStore } from '@/store/food.ts'
 import { formatDate, getLastDate, getNextDate } from 'vue3-common/utils/dateUtil'
 import { AListUrl } from '@/utils'
 import { onMounted } from 'vue'
+import { showImagePreview } from 'vant'
+import { IFoodRecord } from '@/types/food.ts'
 
 const foodStore = useFoodStore()
 
@@ -54,6 +57,11 @@ onMounted(async () => {
   await foodStore.queryFoodRecordList()
 })
 
+const viewImageClick = (item: IFoodRecord) => {
+  const imageList = [AListUrl + item.imageUrl]
+  showImagePreview(imageList)
+}
+
 const changeDateEvent = async (value: Date) => {
   foodStore.queryRecord.year = String(value.getFullYear())
   await foodStore.queryFoodRecordList()