WholeProcessPlatform/frontend-sjgl/src/components/previewMedia/index.vue

<template>
  <!-- 媒体预览 Modal -->
  <a-modal
    :open="visible"
    :title="videoPreviewTitle"
    :footer="null"
    width="900px"
    @cancel="closeMediaPreview"
    :zIndex="2000"
  >
    <div class="flex h-[60vh] gap-4">
      <!-- 左侧：混合列表 (图片+视频) -->
      <div class="w-1/4 overflow-y-auto border-r pr-2 media-list-container">
        <div
          v-for="(item, index) in previewList"
          :key="index"
          class="mb-2 cursor-pointer list-item"
          :class="{ select: index == currentMediaIndex }"
          @click="currentMediaIndex = index"
        >
          <span class="file-name">{{ item.name }}</span>
          <!-- 删除按钮 -->
          <div
            class="list-item-delete"
            v-if="isDel"
            @click.stop="handleDeleteMedia(item, index)"
          >
            <CloseCircleOutlined />
          </div>
        </div>
      </div>

      <!-- 右侧：动态预览区域 -->
      <div
        class="w-3/4 flex flex-col items-center justify-center bg-gray-100 relative p-4"
      >
        <a-spin v-if="imageLoading" tip="图片加载中..." size="large" />
        <!-- 图片预览 -->
        <div
          v-if="
            currentMediaItem &&
            currentMediaItem.url != '' &&
            currentMediaItem.type === 'image'
          "
        >
          <img
            v-show="!imageLoading && !imageLoadError"
            :src="currentMediaItem.url"
            alt="preview"
            class="max-w-full max-h-[50vh] object-contain"
            @load="onImageLoad"
            @error="onImageError"
          />

          <!-- 3. 加载失败提示 -->
          <div
            v-if="!imageLoading && imageLoadError"
            class="text-gray-400 flex flex-col items-center"
          >
            <ExclamationCircleOutlined style="font-size: 24px; margin-bottom: 8px" />
            <span>图片加载失败</span>
          </div>
        </div>
        <div
          v-else-if="
            currentMediaItem &&
            currentMediaItem.url == '' &&
            currentMediaItem.type === 'image'
          "
          class="text-gray-400"
        >
          暂无图片预览
        </div>

        <!-- 视频预览 -->
        <video
          v-else-if="
            currentMediaItem &&
            currentMediaItem.url != '' &&
            currentMediaItem.type === 'video'
          "
          :src="currentMediaItem.url"
          controls
          autoplay
          class="max-w-full max-h-[50vh]"
        >
          您的浏览器不支持视频播放
        </video>
        <div
          v-else-if="
            currentMediaItem &&
            currentMediaItem.url == '' &&
            currentMediaItem.type === 'video'
          "
          class="text-gray-400"
        >
          暂无视频预览
        </div>

        <!-- 底部切换控制 -->
        <div class="absolute bottom-4 flex gap-4 z-10">
          <a-button
            shape="circle"
            :icon="h(LeftOutlined)"
            @click="prevMedia"
            :disabled="currentMediaIndex === 0"
          />
          <span class="self-center text-gray-600 bg-white px-2 rounded shadow-sm">
            {{ currentMediaIndex + 1 }} / {{ previewList.length }}
          </span>
          <a-button
            shape="circle"
            :icon="h(RightOutlined)"
            @click="nextMedia"
            :disabled="currentMediaIndex === previewList.length - 1"
          />
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, nextTick, computed, watch, h } from "vue";
import { message, Modal } from "ant-design-vue"; // 假设使用 ant-design-vue
import {
  LeftOutlined,
  RightOutlined,
  CloseCircleOutlined,
  ExclamationCircleOutlined,
} from "@ant-design/icons-vue";
import { deleteFile } from "@/api/guoYuSheShiShuJuTianBao";
// 图片加载状态
const imageLoading = ref(false);
const imageLoadError = ref(false);

interface MediaItem {
  id: string;
  type: "image" | "video";
  name: string;
  url: string;
}
const props = defineProps<{
  visible: boolean;
  videoPreviewTitle: string;
  previewList: MediaItem[];
  previewListIndex: number;
  taskId?: string;
  isDel?: boolean;
}>();

const emit = defineEmits(["update:visible", "deleteMedia"]);
const currentMediaIndex = ref(props.previewListIndex);

// 计算当前选中的项
const currentMediaItem = computed(() => props.previewList[currentMediaIndex.value]);

const closeMediaPreview = () => {
  emit("update:visible", false);
  nextTick(() => {
    currentMediaIndex.value = 0;
  });
};

// 【新增】统一切换逻辑
const prevMedia = () => {
  if (currentMediaIndex.value > 0) {
    currentMediaIndex.value--;
  }
};
// 【新增】统一下一逻辑
const nextMedia = () => {
  if (currentMediaIndex.value < props.previewList.length - 1) {
    currentMediaIndex.value++;
  }
};

// 【新增】统一删除逻辑
const handleDeleteMedia = (item: any, index: number) => {
  Modal.confirm({
    title: "确认删除",
    content: "确定要从预览列表中移除该项吗？",
    zIndex: 2002,
    onOk: async () => {
      return new Promise(async (resolve, reject) => {
        const params = {
          id: item.id,
          taskId: props.taskId,
          type:
            props.videoPreviewTitle == "图片预览"
              ? 1
              : props.videoPreviewTitle == "视频预览"
              ? 2
              : 0,
          filename: item.name,
        };
        try {
          let res: any = await deleteFile(params);
          if (res && res?.code == 0) {
            message.success("删除成功");

            emit("deleteMedia", item, props.videoPreviewTitle, index);
            if (props.previewList.length === 0) {
              closeMediaPreview();
            } else {
              // 调整索引
              if (index <= currentMediaIndex.value) {
                currentMediaIndex.value = Math.max(0, currentMediaIndex.value - 1);
              }
            }
            resolve(true);
          } else {
            message.error("删除失败");
            reject();
          }
        } catch (e) {
          message.error("删除失败");
          reject();
        }
      }).catch(() => console.log("Oops errors!"));
    },
  });
};

// 【新增】图片加载完成回调
const onImageLoad = () => {
  imageLoading.value = false;
  imageLoadError.value = false;
};

// 【新增】图片加载失败回调
const onImageError = () => {
  imageLoading.value = false;
  imageLoadError.value = true;
};
watch(
  () => props.previewListIndex,
  (newIndex) => {
    currentMediaIndex.value = newIndex;
  }
);
watch(
  () => props.visible,
  (newVisible) => {
    if (newVisible) {
      if (props.videoPreviewTitle == "图片预览") {
        imageLoading.value = true;
        imageLoadError.value = false;
      }
    }
  }
);
watch(currentMediaIndex, (newIndex) => {
  const item = props.previewList[newIndex];
  if (item && item.type === "image") {
    imageLoading.value = true;
    imageLoadError.value = false;
  } else {
    imageLoading.value = false;
    imageLoadError.value = false;
  }
});
</script>
<style scoped lang="scss">
.media-list-container {
  background-color: rgb(234, 241, 251);
  padding: 10px;

  .list-item {
    width: 100%;
    height: 36px;
    line-height: 36px;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s;

    &:hover {
      background-color: rgba(255, 255, 255, 0.5);
    }

    .file-name {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 13px;
    }

    &.select {
      color: #ffffff;
      background-color: rgb(37, 93, 138);
    }

    .list-item-delete {
      color: red;
      cursor: pointer;
      opacity: 0;
      transition: opacity 0.3s;
      margin-left: 8px;

      &:hover {
        transform: scale(1.1);
      }
    }

    &:hover .list-item-delete {
      opacity: 1;
    }
  }
}
</style>