From 375a12e9e2ff2cdd10a812b45484cb475bb9e31b Mon Sep 17 00:00:00 2001
From: rain <1679827795@qq.com>
Date: Mon, 21 Apr 2025 15:41:11 +0800
Subject: [PATCH] 增加缩略图显示
---
src/views/tickets/ticket.vue | 42 +++++++++++++++++++++++++++++++++++-------
1 files changed, 35 insertions(+), 7 deletions(-)
diff --git a/src/views/tickets/ticket.vue b/src/views/tickets/ticket.vue
index 7c9a530..3e5e526 100644
--- a/src/views/tickets/ticket.vue
+++ b/src/views/tickets/ticket.vue
@@ -286,8 +286,13 @@
<div class="media-box">
<div class="media-title">事件图片</div>
<div class="media-content">
- <el-image v-if="currentDetail.mediaUrl" :src="currentDetail.mediaUrl"
- :preview-src-list="[currentDetail.mediaUrl]" fit="cover" style="width: 100%; height: 300px;">
+ <el-image
+ v-if="currentDetail.mediaUrl"
+ :src="getThumbUrl(currentDetail.mediaUrl)"
+ :preview-src-list="[currentDetail.mediaUrl]"
+ fit="cover"
+ style="width: 100%; height: 300px; cursor: pointer;"
+ >
<template #placeholder>
<div class="image-placeholder">
<i class="el-icon-picture-outline"></i>
@@ -311,9 +316,13 @@
<template v-if="currentDetail.status === 5">
<div class="media-title">工单处理图片</div>
<div class="media-content">
- <el-image v-if="currentDetail.updatePhotoUrl" :src="currentDetail.updatePhotoUrl"
- :preview-src-list="[currentDetail.updatePhotoUrl]" fit="cover"
- style="width: 100%; height: 300px;">
+ <el-image
+ v-if="currentDetail.updatePhotoUrl"
+ :src="getThumbUrl(currentDetail.updatePhotoUrl)"
+ :preview-src-list="[currentDetail.updatePhotoUrl]"
+ fit="cover"
+ style="width: 100%; height: 300px; cursor: pointer;"
+ >
<template #placeholder>
<div class="image-placeholder">
<i class="el-icon-picture-outline"></i>
@@ -404,8 +413,15 @@
</div>
<div class="review-image-container">
- <el-image v-if="currentReviewImage" :src="currentReviewImage" fit="cover" :preview-src-list="getImageList()"
- :initial-index="currentImageIndex - 1" class="preview-image">
+ <el-image
+ v-if="currentReviewImage"
+ :src="getThumbUrl(currentReviewImage)"
+ fit="cover"
+ :preview-src-list="getImageList()"
+ :initial-index="currentImageIndex - 1"
+ class="preview-image"
+ style="cursor: pointer;"
+ >
<template #error>
<div class="image-error">
<i class="el-icon-picture-outline"></i>
@@ -2081,6 +2097,18 @@
this.updateCurrentReviewImage();
}
},
+
+ /**
+ * 获取缩略图地址
+ * @param {string} url 原图地址
+ * @returns {string} 缩略图地址
+ */
+ getThumbUrl(url) {
+ if (!url) return '';
+ const lastDot = url.lastIndexOf('.');
+ if (lastDot === -1) return url;
+ return url.slice(0, lastDot) + '_small' + url.slice(lastDot);
+ },
},
};
</script>
--
Gitblit v1.9.3