增加缩略图显示

rain

2025-04-21 375a12e9e2ff2cdd10a812b45484cb475bb9e31b

增加缩略图显示

 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>