feat:增加vant预览图片组件

src/components/Food/FoodCard.vue

@@ -2,10 +2,7 @@
   <div class="life-record-card card-item">
     <el-image v-if="props.foodItem?.recordList.length > 0"
               :src="AListUrl + props.foodItem?.recordList[0].imageUrl"
-              :preview-src-list="previewImageList"
+              fit="contain" alt="暂无成果" @click="viewImageClick">
-              :initial-index="0"
-              show-progress
-              fit="contain" alt="暂无成果">
       <template #error>
         <div class="image-slot">
           <span>暂无图片</span>
@@ -62,12 +59,13 @@
 
 <script setup lang="ts">
 import { useFoodStore } from '@/store/food.ts'
-import { computed, defineProps, onMounted, PropType, reactive } from 'vue'
+import { 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'
 import { AListUrl } from '@/utils'
+import { showImagePreview } from 'vant'
 
 const router = useRouter()
 const foodStore = useFoodStore()
@@ -88,9 +86,10 @@ onMounted(() => {
   foodCardInfo.recommendRate = props.foodItem?.recommendRate as number
 })
 
-const previewImageList = computed(() => {
+const viewImageClick = () => {
-  return props.foodItem?.recordList.map((item) => `${AListUrl}${item.imageUrl}`)
+  const imageList = props.foodItem?.recordList.map((item) => `${AListUrl}${item.imageUrl}`)
-})
+  showImagePreview(imageList)
+}
 
 const editFoodRecipeClick = async () => {
   const id = props.foodItem?.id

src/components/Food/FoodDailyList.vue

@@ -1,57 +0,0 @@
-<template>
-  <div class="food-daily-list">
-    <el-date-picker v-model="foodStore.queryRecord.year"
-                    type="year" :editable="false" style="width: 120px;"
-                    @change="foodStore.refreshInfo()"/>
-
-    <el-empty v-if="foodDailyInfo.dateList.length === 0"/>
-
-    <el-scrollbar>
-      <food-daily-item v-for="(item, index) in foodDailyInfo.dateList"
-                       :key="index" :date="item"/>
-    </el-scrollbar>
-  </div>
-</template>
-
-<script setup lang="ts">
-import FoodDailyItem from '@/components/Food/FoodDailyItem.vue'
-import { reactive, watch } from 'vue'
-import { useFoodStore } from '@/store/food.ts'
-
-const foodStore = useFoodStore()
-
-watch(() => foodStore.isRefresh, () => {
-  updateInfo()
-})
-
-const foodDailyInfo = reactive({
-  dateList: [] as string[]
-})
-
-const updateInfo = () => {
-  const dateList = foodStore.foodRecordList.map((item) => item.date)
-  foodDailyInfo.dateList = [...new Set(dateList)] as string[]
-}
-</script>
-
-<style lang="scss">
-.food-daily-list {
-  height: calc(100vh - 120px);
-  overflow: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 1vh;
-
-  .el-date-editor {
-    align-self: center;
-  }
-
-  .el-scrollbar {
-    .el-scrollbar__view {
-      display: flex;
-      flex-direction: column;
-      gap: 2vh;
-    }
-  }
-}
-</style>

src/components/Food/FoodRecipeList.vue

@@ -1,45 +0,0 @@
-<template>
-  <div class="food-list card-item">
-    <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>
-
-    <el-pagination
-        v-model:current-page="foodStore.pageInfo.currentPage"
-        :page-size="foodStore.pageInfo.pageSize"
-        layout="total, prev, pager, next"
-        :total="foodStore.pageInfo.totalSize"
-        @change="changePageEvent"
-    />
-
-    <el-button v-if="isLargeScreen()"
-               type="primary" :icon="Plus" circle
-               @click="addFoodRecipeClick" class="add-new" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { Plus } from '@element-plus/icons-vue'
-import FoodCard from '@/components/Food/FoodCard.vue'
-import { useFoodStore } from '@/store/food.ts'
-import { isLargeScreen } from '@/utils'
-
-const foodStore = useFoodStore()
-
-const addFoodRecipeClick = () => {
-  foodStore.foodRecipeApiType = 'ADD'
-  foodStore.foodRecipeDialog = {
-    title: '新增菜谱',
-    visible: true,
-    data: foodStore.getEmptyFoodRecipe()
-  }
-}
-
-const changePageEvent = (value: number) => {
-  foodStore.pageInfo.currentPage = value
-  foodStore.queryFoodRecipeList()
-}
-</script>

src/styles/home/food.mobile.module.scss

@@ -4,17 +4,10 @@
   gap: 10px;
 
   .food-list {
-    position: relative;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     //align-items: center;
-    gap: 1vh;
-
-    .list {
-      display: flex;
-      flex-direction: column;
     gap: 10px;
   }
-  }
 }

src/styles/home/food.module.scss

@@ -1,39 +0,0 @@
-.food-view {
-  .food-list {
-    background-color: #F5F5F5;
-    flex-grow: 1;
-
-    overflow: auto;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    //align-items: center;
-    gap: 1vh;
-
-    padding: 10px;
-
-    .list {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      column-gap: 2vw;
-      row-gap: 2vh;
-    }
-
-    @media (min-width: 1280px) and (max-width: 1500px) {
-      .list {
-        grid-template-columns: repeat(2, 1fr);
-      }
-    }
-
-    @media (max-width: 1280px) {
-      .list {
-        grid-template-columns: repeat(1, 1fr);
-      }
-    }
-
-    .el-pagination {
-      align-self: center;
-    }
-  }
-}

src/views/food/recipe.vue

@@ -2,14 +2,12 @@
   <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="暂无美食记录"/>
 
-      <div v-else class="list">
+    <div v-else class="food-list">
       <food-card v-for="(item, index) in foodStore.foodRecipeList"
                  :key="index" :food-item="item"/>
     </div>
-    </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()