feat:更新图片模块

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)
-    }
-  }
+  appStore.isShowMobileBack = true
+  await router.push({ name: 'JournalDetailId', params: { id } })
 }
 </script>