feat:更新图片模块

src/components/Anniversary/CategoryCard.vue

@@ -12,6 +12,7 @@ import { defineProps, PropType } from 'vue'
 import { IAnniversaryCategory } from '@/types/anniversary.ts'
 import { useAnniversaryStore } from '@/store/anniversary.ts'
 import { useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
 
 const props = defineProps({
   categoryItem: {
@@ -28,8 +29,12 @@ const router = useRouter()
 const anniversaryStore = useAnniversaryStore()
 
 const selectCategoryClick = () => {
+  if (props.count) {
     anniversaryStore.queryInfo.category = props.categoryItem?.name as string
     router.push({ name: 'AnniversaryList' })
+  } else {
+    ElMessage.info('暂无纪念日')
+  }
 }
 </script>
 

src/components/Food/Data/FoodRecordData.vue

@@ -12,9 +12,8 @@
           <el-card class="record-card">
             <span class="record-content">完成人：{{ item.person }}</span>
             <el-image v-if="item.imageUrl"
-                      :src="AListUrl + item.imageUrl"
-                      :preview-src-list="[AListUrl + item.imageUrl]"
-                      fit="contain" alt="暂无图片" class="record-image"/>
+                      :src="AListUrl + item.imageUrl" fit="cover" alt="暂无图片"
+                      @click="viewImageClick(item)" class="record-image"/>
           </el-card>
         </el-timeline-item>
       </el-timeline>
@@ -27,6 +26,13 @@
 import { useFoodStore } from '@/store/food.ts'
 import { AListUrl } from '@/utils'
 import { SvgIcon } from 'vue3-common'
+import { IFoodRecord } from '@/types/food.ts'
+import { showImagePreview } from 'vant'
 
 const foodStore = useFoodStore()
+
+const viewImageClick = (item: IFoodRecord) => {
+  const imageList = [AListUrl + item.imageUrl]
+  showImagePreview({ images: imageList, closeable: true })
+}
 </script>

src/components/Food/FoodCard.vue

@@ -13,7 +13,7 @@
     <el-empty v-else description="暂无成果" />
 
     <van-swipe-cell>
-      <div class="record-info" @click="viewFoodRecipeClick()">
+      <div class="record-info" @click="viewClick()">
         <div class="top-container">
           <div class="info-list">
             <div class="info-item">
@@ -49,9 +49,9 @@
 
       <template #right>
         <van-button square type="primary" text="编辑" style="height: 100%;"
-                    @click="editFoodRecipeClick"/>
+                    @click="editClick"/>
         <van-button square type="danger" text="删除" style="height: 100%;"
-                    @click="deleteFoodRecipeClick()"/>
+                    @click="deleteClick()"/>
       </template>
     </van-swipe-cell>
   </div>
@@ -88,21 +88,21 @@ onMounted(() => {
 
 const viewImageClick = () => {
   const imageList = props.foodItem?.recordList.map((item) => `${AListUrl}${item.imageUrl}`)
-  showImagePreview(imageList)
+  showImagePreview({ images: imageList, closeable: true })
 }
 
-const editFoodRecipeClick = async () => {
+const editClick = async () => {
   const id = props.foodItem?.id
   foodStore.foodRecipeApiType = 'UPDATE'
   await foodStore.queryFoodRecipe(id as number)
   await router.push({ name: 'FoodRecipeForm' })
 }
 
-const viewFoodRecipeClick = async () => {
+const viewClick = async () => {
   await router.push({ name: 'FoodDetailId', params: { id: props.foodItem?.id } })
 }
 
-const deleteFoodRecipeClick = () => {
+const deleteClick = () => {
   foodStore.foodRecipeApiType = 'DELETE'
   commonElMessageBox(`请确认是否删除该菜谱: ${props.foodItem?.name}?`).then(() => {
     foodStore.handleFoodRecipeApi(props.foodItem)

src/components/Food/FoodQuery.vue

@@ -26,7 +26,14 @@ onMounted(async () => {
 })
 
 const changeFoodNameEvent = async (value: string) => {
+  if (value) {
     const result = await searchFoodRecipeApi(value)
     foodStore.foodRecipeList = [result]
+  } else {
+    foodStore.pageInfo.currentPage = 1
+    foodStore.pageInfo.pageSize = 3
+    foodStore.foodRecipeList = []
+    await foodStore.queryMobileFoodRecipeList()
+  }
 }
 </script>

src/components/Journal/JournalCard.vue

@@ -38,8 +38,7 @@
       <el-image
           v-if="props.item?.imageUrl"
           :src="AListUrl + props.item?.imageUrl"
-          :preview-src-list="[AListUrl + props.item?.imageUrl]"
-          fit="contain"
+          fit="contain" @click="viewImageClick"
           class="media-content"/>
 
       <video
@@ -71,12 +70,11 @@ import { SvgIcon } from 'vue3-common'
 import { ArrowUp, ArrowDown } from '@element-plus/icons-vue'
 import { IJournal } from '@/types/journal.ts'
 import { formatDate } from 'vue3-common/utils/dateUtil'
-import { isMobile } from 'vue3-common/utils/layoutUtil'
-import { deepCopyObject } from 'vue3-common/utils/dataUtil'
 import { useJournalStore } from '@/store/journal.ts'
 import { useAppStore } from '@/store/app.ts'
 import { useRouter } from 'vue-router'
 import { AListUrl } from '@/utils'
+import { showImagePreview } from 'vant'
 
 const props = defineProps({
   item: {
@@ -108,21 +106,18 @@ const showToggle = computed(() => overflowLines.value > 0)
 
 const toggleExpand = () => expanded.value = !expanded.value
 
+const viewImageClick = () => {
+  const imageList = [AListUrl + props.item?.imageUrl]
+  showImagePreview({ images: imageList, closeable: true })
+}
+
 const editClick = async () => {
   const id = props.item?.id
   journalStore.journalApiType = 'UPDATE'
   journalStore.currentJournal = props.item
 
-  if (isMobile()) {
   appStore.isShowMobileBack = true
   await router.push({ name: 'JournalDetailId', params: { id } })
-  } else {
-    journalStore.journalDialog = {
-      title: '编辑日记',
-      visible: true,
-      data: deepCopyObject(journalStore.currentJournal)
-    }
-  }
 }
 </script>
 

src/components/Product/ProductCard.vue

@@ -1,8 +1,7 @@
 <template>
   <div class="life-record-card card-item">
     <el-image :src="AListUrl + props.productItem?.imageUrl"
-              :preview-src-list="[AListUrl + props.productItem?.imageUrl]"
-              fit="contain" alt="暂无成果">
+              fit="contain" alt="暂无成果" @click="viewImageClick">
       <template #error>
         <div class="image-slot">
           <span>暂无图片</span>
@@ -10,7 +9,8 @@
       </template>
     </el-image>
 
-    <div class="record-info">
+    <van-swipe-cell>
+      <div class="record-info" @click="editClick()">
         <div class="top-container">
           <div class="info-list">
             <div class="info-item">
@@ -22,13 +22,6 @@
               {{ props.productItem.price }}
             </div>
           </div>
-
-        <div class="button-info">
-          <el-button type="primary" :icon="Edit" circle :size="'small'"
-                     @click="editClick"/>
-          <el-button type="danger" :icon="DeleteFilled" circle :size="'small'"
-                     @click="deleteClick()" />
-        </div>
         </div>
 
         <div class="bottom-container">
@@ -55,17 +48,25 @@
           </div>
         </div>
       </div>
+
+      <template #right>
+        <van-button square type="primary" text="编辑" style="height: 100%;"
+                    @click="editClick"/>
+        <van-button square type="danger" text="删除" style="height: 100%;"
+                    @click="deleteClick()"/>
+      </template>
+    </van-swipe-cell>
   </div>
 </template>
 
 <script setup lang="ts">
-import { Edit, DeleteFilled } from '@element-plus/icons-vue'
 import { useProductStore } from '@/store/product.ts'
-import { defineProps, onMounted, PropType } from 'vue'
+import { defineProps, PropType } from 'vue'
 import { commonElMessageBox } from 'vue3-common/utils/elUtil'
 import { IProduct } from '@/types/product.ts'
 import { useRouter } from 'vue-router'
 import { AListUrl } from '@/utils'
+import { showImagePreview } from 'vant'
 
 const productStore = useProductStore()
 const router = useRouter()
@@ -77,9 +78,10 @@ const props = defineProps({
   }
 })
 
-onMounted(() => {
-
-})
+const viewImageClick = () => {
+  const imageList = [AListUrl + props.productItem?.imageUrl]
+  showImagePreview({ images: imageList, closeable: true })
+}
 
 const editClick = async () => {
   const id = props.productItem?.id

src/components/Travel/Data/TravelRecordData.vue

@@ -13,23 +13,14 @@
             <span class="record-content">旅行人：{{ item.persons.join('-') }}</span>
             <el-image v-for="(image, index) in item.imageList" :key="index"
                       :src="AListUrl + image"
-                      :preview-src-list="[AListUrl + image]"
-                      fit="contain" alt="暂无图片" class="record-image"/>
+                      fit="cover" alt="暂无图片" class="record-image"
+                      @click="viewImageClick(item, index)"/>
 
             <video v-for="(video, index) in item.videoList"
                    :key="index" controls style="width: 60%;min-height: 200px;">
               <source :src="AListUrl + video" type="video/mp4">
               您的浏览器不支持 HTML5 视频
             </video>
-
-<!--            <el-carousel v-if="item.imageList.length > 0"-->
-<!--                         arrow="always">-->
-<!--              <el-carousel-item v-for="(item, index) in item.imageList" :key="index">-->
-<!--                -->
-<!--              </el-carousel-item>-->
-<!--            </el-carousel>-->
-
-<!--            <el-empty v-else description="暂无记录"/>-->
           </el-card>
         </el-timeline-item>
       </el-timeline>
@@ -42,6 +33,13 @@
 import { SvgIcon } from 'vue3-common'
 import { useTravelStore } from '@/store/travel.ts'
 import { AListUrl } from '@/utils'
+import { showImagePreview } from 'vant'
+import { ITravelRecord } from '@/types/travel.ts'
 
 const travelStore = useTravelStore()
+
+const viewImageClick = (record: ITravelRecord, index: number) => {
+  const imageList = record.imageList.map((item) => `${AListUrl}${item}`)
+  showImagePreview({ images: imageList, closeable: true, startPosition: index })
+}
 </script>

src/components/Travel/TravelCard.vue

@@ -2,10 +2,7 @@
   <div class="life-record-card card-item">
     <el-image v-if="props.travelItem?.recordList.length > 0"
               :src="AListUrl + props.travelItem?.recordList[0].imageList[0]"
-              :preview-src-list="previewImageList"
-              :initial-index="0"
-              show-progress
-              fit="contain" alt="暂无成果">
+              fit="contain" alt="暂无成果" @click="viewImageClick">
       <template #error>
         <div class="image-slot">
           <span>暂无图片</span>
@@ -15,22 +12,14 @@
 
     <el-empty v-else description="暂无记录"/>
 
-    <div class="record-info">
+    <van-swipe-cell>
+      <div class="record-info" @click="viewClick">
         <div class="top-container">
           <div class="info-list">
             <div class="info-item">
               <span class="title">{{ props.travelItem.name }}</span>
             </div>
           </div>
-
-        <div class="button-info">
-          <el-button type="primary" :icon="Edit" circle :size="'small'"
-                     @click="editClick"/>
-          <el-button type="primary" :icon="MoreFilled" circle :size="'small'"
-                     @click="viewClick()"/>
-          <el-button type="danger" :icon="DeleteFilled" circle :size="'small'"
-                     @click="deleteClick()"/>
-        </div>
         </div>
 
         <div class="bottom-container">
@@ -57,20 +46,28 @@
           </div>
         </div>
       </div>
+
+      <template #right>
+        <van-button square type="primary" text="编辑" style="height: 100%;"
+                    @click="editClick"/>
+        <van-button square type="danger" text="删除" style="height: 100%;"
+                    @click="deleteClick()"/>
+      </template>
+    </van-swipe-cell>
   </div>
 </template>
 
 <script setup lang="ts">
-import { Edit, MoreFilled, DeleteFilled } from '@element-plus/icons-vue'
 import { useTravelStore } from '@/store/travel.ts'
 import { useAppStore } from '@/store/app.ts'
-import { computed, defineProps, PropType, reactive } from 'vue'
+import { defineProps, PropType, reactive } from 'vue'
 import { useRouter } from 'vue-router'
 import { formatDate } from 'vue3-common/utils/dateUtil'
 import { ITravelSpot } from '@/types/travel.ts'
 import { commonElMessageBox } from 'vue3-common/utils/elUtil'
 import { AListUrl } from '@/utils'
 import { parsePerson } from '@/utils/home/travelUtil.ts'
+import { showImagePreview } from 'vant'
 
 const router = useRouter()
 const travelStore = useTravelStore()
@@ -87,10 +84,10 @@ const props = defineProps({
   }
 })
 
-const previewImageList = computed(() => {
-  return props.travelItem.recordList.flatMap((record) =>
-    record.imageList.map((item) => `${AListUrl}${item}`))
-})
+const viewImageClick = () => {
+  const imageList = props.travelItem.recordList.flatMap((record) => record.imageList.map((item) => `${AListUrl}${item}`))
+  showImagePreview({ images: imageList, closeable: true })
+}
 
 const editClick = async () => {
   const id = props.travelItem?.id

src/store/anniversary.ts

@@ -32,7 +32,8 @@ export const useAnniversaryStore = defineStore('anniversary', {
       title: '',
       data: {}
     } as IDialog<IAnniversary>,
-    isRefresh: false
+    isRefresh: false,
+    isLoading: false
   }),
   actions: {
     async queryAnniversaryList() {

src/store/food.ts

@@ -13,7 +13,6 @@ import type { IDialog } from 'vue3-common/types'
 import { IHandleApi } from 'vue3-common/types'
 import { ElMessage } from 'element-plus'
 import { getCurrentMonth, getCurrentYear, getStartEndDate } from 'vue3-common/utils/dateUtil'
-import { isLargeScreen } from '@/utils'
 import { isMobile } from 'vue3-common/utils/layoutUtil'
 
 export const useFoodStore = defineStore('food', {
@@ -77,7 +76,7 @@ export const useFoodStore = defineStore('food', {
     rateColorList: ['#E2DEDC', '#F7BA2A', '#009FA8'],
     pageInfo: {
       currentPage: 1,
-      pageSize: isLargeScreen() ? 6 : 2,
+      pageSize: 3,
       totalSize: 1
     },
     isScrollEnd: false,

src/views/anniversary/list.vue

@@ -4,7 +4,7 @@
 
     <el-empty v-if="anniversaryStore.anniversaryList.length === 0" />
 
-    <div v-else class="anniversary-list">
+    <div v-else class="anniversary-list" v-loading="anniversaryStore.isLoading">
       <anniversary-card v-for="(item, index) in anniversaryStore.anniversaryList"
                         :key="index" :date-item="item" />
     </div>
@@ -24,7 +24,9 @@ const anniversaryStore = useAnniversaryStore()
 const router = useRouter()
 
 onMounted(async () => {
+  anniversaryStore.isLoading = true
   await anniversaryStore.queryAnniversaryList()
+  anniversaryStore.isLoading = false
 })
 
 const addClick = () => {

src/views/food/timeline.vue

@@ -23,9 +23,9 @@
                         :key="index" :timestamp="formatDate(item.date)"
                         placement="top">
         <div class="timeline-info card-item">
-          <span>{{ item.name }}</span>
+          <span class="name">{{ item.name }}</span>
           <el-image :src="AListUrl + item.imageUrl"
-                    fit="contain" alt="暂无成果"
+                    fit="cover" alt="暂无成果"
                     @click="viewImageClick(item)">
             <template #error>
               <div class="image-slot">
@@ -59,7 +59,7 @@ onMounted(async () => {
 
 const viewImageClick = (item: IFoodRecord) => {
   const imageList = [AListUrl + item.imageUrl]
-  showImagePreview(imageList)
+  showImagePreview({ images: imageList, closeable: true })
 }
 
 const changeDateEvent = async (value: Date) => {
@@ -106,6 +106,10 @@ const nextYearClick = async () => {
       flex-direction: column;
       gap: 10px;
 
+      .name {
+        font-weight: bold;
+      }
+
       .el-image {
         height: 300px;
       }

src/views/kpi/detail[id].vue

@@ -1,7 +1,8 @@
 <template>
   <div class="mobile-kpi-detail common-mobile-view">
     <el-form ref="formRef" :model="kpiStore.currentKpi"
-             :rules="rules" label-width="60px">
+             :rules="rules" label-position="top" label-width="60px"
+             class="form-item">
       <el-form-item label="日期" prop="date">
         <el-date-picker
             v-model="kpiStore.currentKpi.date"

vite.config.ts

@@ -5,7 +5,7 @@ import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 import { viteMockServe } from 'vite-plugin-mock'
 
 // const API_HOST = '14.103.235.151'
-const API_HOST = '127.0.0.1'
+const API_HOST = '192.168.1.7'
 
 // https://vitejs.dev/config/
 export default defineConfig({