实现轮播组预览

smsb-plus-ui/src/views/smsb/itemProgram/component/MediaAssetBoard.vue

@@ -49,7 +49,8 @@
 
 <script setup lang="ts">
 import { ref, computed, watch, onUnmounted, defineProps, defineEmits } from 'vue';
-import { getItem } from '@/api/smsb/source/item';
+import { getItem, getItemFileRelList } from '@/api/smsb/source/item';
+import { getMinioData } from '@/api/smsb/source/minioData';
 
 const emit = defineEmits(['update:mediaId', 'resize', 'click']);
 
@@ -69,10 +70,17 @@ const props = withDefaults(
   }
 );
 
-const mediaItems = ref<any[]>([]);
+interface MediaItem {
+  id: string | number;
+  type: number; // 1-图片 2-视频
+  url: string;
+  duration: number; // 秒
+  name?: string;
+}
+
+const mediaItems = ref<MediaItem[]>([]);
 const currentMediaIndex = ref(0);
 let slideInterval: number | null = null;
-const SLIDE_DURATION = 10000; // 10秒切换一次
 
 // 解析轮播组数据
 const carouselGroup = computed(() => {
@@ -101,37 +109,87 @@ const startSlideShow = () => {
   clearSlideShow();
   if (mediaItems.value.length <= 1) return;
 
-  slideInterval = window.setInterval(() => {
-    currentMediaIndex.value = (currentMediaIndex.value + 1) % mediaItems.value.length;
-  }, SLIDE_DURATION);
+  const playNext = () => {
+    const currentItem = mediaItems.value[currentMediaIndex.value];
+    const duration = (currentItem?.duration || 5) * 1000; // 转为毫秒，默认5秒
+
+    // console.log(`播放第 ${currentMediaIndex.value + 1}/${mediaItems.value.length} 项，类型: ${currentItem.type}，时长: ${duration}ms`);
+
+    slideInterval = window.setTimeout(() => {
+      currentMediaIndex.value = (currentMediaIndex.value + 1) % mediaItems.value.length;
+      playNext();
+    }, duration);
+  };
+
+  // 开始第一项播放
+  playNext();
+};
+
+// 获取文件类型（1-图片，2-视频）
+const getFileType = (type: number): number => {
+  // 1-图片，2-视频，3-音频
+  return type === 2 ? 2 : 1; // 视频为2，其他都视为图片
 };
 
 // 加载轮播组媒体项
 const loadCarouselGroupMedia = async () => {
+  // console.log('开始加载轮播组媒体项', carouselGroup.value);
   try {
     if (!carouselGroup.value || !carouselGroup.value.id) {
+      // console.log('轮播组ID不存在');
       mediaItems.value = [];
       return;
     }
 
-    // 获取轮播组详情
-    const res = await getItem(carouselGroup.value.id);
-    if (res.data && Array.isArray(res.data.fileIdList)) {
-      mediaItems.value = res.data.fileIdList.map((fileId: string | number) => ({
-        id: fileId,
-        type: 1, // 默认为图片类型
-        url: `/api/source/file/${fileId}`
-      }));
-    } else {
+    // 1. 获取轮播组关联的文件关系列表
+    const relRes = await getItemFileRelList(carouselGroup.value.id);
+    // console.log('获取到轮播组关联文件关系:', relRes.data);
+
+    if (!Array.isArray(relRes.data) || relRes.data.length === 0) {
+      // console.log('轮播组没有关联的文件');
       mediaItems.value = [];
+      return;
     }
-  } catch (error) {
-    console.error('Failed to load carousel group media:', error);
-    mediaItems.value = [];
-  } finally {
-    // 重置索引并开始轮播
+
+    // 2. 处理每个关联文件
+    const items: MediaItem[] = [];
+    for (const rel of relRes.data) {
+      try {
+        // 获取文件详情
+        // console.log(`加载文件详情: ${rel.fileId}`);
+        const fileRes = await getMinioData(rel.fileId);
+        const fileInfo = fileRes.data;
+        // console.log('文件详情:', fileInfo);
+
+        if (fileInfo) {
+          // 使用 fileUrl 如果存在，否则回退到构建的 URL
+          const fileUrl = fileInfo.fileUrl || `/api/source/file/${rel.fileId}`;
+          // console.log(`文件 ${fileInfo.originalName} 的 URL:`, fileUrl);
+
+          items.push({
+            id: rel.fileId,
+            type: getFileType(fileInfo.type),
+            url: fileUrl,
+            duration: rel.duration || 5, // 使用关联关系中的 duration
+            name: fileInfo.originalName
+          });
+        }
+      } catch (fileError) {
+        console.error(`加载文件 ${rel.fileId} 详情失败:`, fileError);
+      }
+    }
+
+    // 3. 按sort排序
+    items.sort((a, b) => (a as any).sort - (b as any).sort);
+    mediaItems.value = items;
+    // console.log('最终媒体项列表:', mediaItems.value);
+
+    // 4. 开始轮播
     currentMediaIndex.value = 0;
     startSlideShow();
+  } catch (error) {
+    console.error('加载轮播组媒体项失败:', error);
+    mediaItems.value = [];
   }
 };