refactor(StudyDetailPage): 移除测试音频数据并优化音频列表处理

移除不再使用的测试音频数据，优化音频列表处理逻辑，确保音频封面统一

refactor(StudyDetailPage): 移除测试音频数据并优化音频列表处理
移除不再使用的测试音频数据，优化音频列表处理逻辑，确保音频封面统一
hookehuyr
Commit 0714138649f8bb76ba0ed0c11a1431436c6b8800 07141386 1 parent 243e2874
Showing 2 changed files with 12 additions and 69 deletions
src/components/ui/AudioPlayer.vue
src/views/study/StudyDetailPage.vue
--- a/src/components/ui/AudioPlayer.vue
View file @0714138
+++ b/src/components/ui/AudioPlayer.vue
View file @0714138
 <!--
  * @Date: 2025-04-07 12:35:35
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-04-07 17:37:34
+ * @LastEditTime: 2025-05-08 10:20:49
- * @FilePath: /mlaj/src/components/ui/audioPlayer.vue
+ * @FilePath: /mlaj/src/components/ui/AudioPlayer.vue
  * @Description: 音频播放器组件，支持播放控制、进度条调节、音量控制、播放列表等功能
 -->
 <template>
--- a/src/views/study/StudyDetailPage.vue
View file @0714138
+++ b/src/views/study/StudyDetailPage.vue
View file @0714138
@@ -8,7 +8,7 @@
             <!-- 固定区域：视频播放和标签页 -->
             <div class="fixed top-0 left-0 right-0 z-10 top-wrapper">
                 <!-- 视频播放区域 -->
-                <div v-if="course.course_type === 'video'" class="w-full bg-black relative">
+                <div v-if="course.course_type === 'video'" class="w-full relative">
                     <!-- 视频封面和播放按钮 -->
                     <div v-if="!isPlaying" class="relative w-full" style="aspect-ratio: 16/9;">
                         <img :src="courseFile.cover" :alt="course.title" class="w-full h-full object-cover" />
@@ -22,13 +22,17 @@
                         </div>
                     </div>
                     <!-- 视频播放器 -->
-                    <VideoPlayer v-show="isPlaying" ref="videoPlayerRef" :video-url="courseFile.url" :autoplay="false"
+                    <VideoPlayer v-show="isPlaying" ref="videoPlayerRef" :video-url="courseFile.list.length ? courseFile['list'][0]['url'] : ''" :autoplay="false"
                         @onPlay="handleVideoPlay" @onPause="handleVideoPause" />
                 </div>
                 <div v-if="course.course_type === 'audio'" class="w-full relative" style="border-bottom: 1px solid #F3F4F6;">
                     <!-- 音频播放器 -->
                     <AudioPlayer :songs="audioList" />
                 </div>
+                <!-- 图片列表展示区域 -->
+                <div v-if="course.course_type === 'image'" class="w-full relative">image</div>
+                <!-- 文件列表展示区域 -->
+                <div v-if="course.course_type === 'file'" class="w-full relative">file</div>
                 <!-- 标签页区域 -->
                 <div class="px-4 py-3 bg-white">
                     <van-tabs v-model:active="activeTab" sticky animated swipeable shrink @change="handleTabChange">
@@ -250,65 +254,6 @@ const popupFinished = ref(false);
 const popupLimit = ref(5);
 const popupPage = ref(0);
-// 测试音频数据
-// const audioList = ref([
-//     {
-//         id: 1,
-//         title: '示例音频 1',
-//         artist: '演唱者 1',
-//         cover: 'https://cdn.ipadbiz.cn/mlaj/images/zMRLZh40kms.jpg',
-//         url: 'https://img.tukuppt.com/newpreview_music/09/03/95/5c8af46b01eb138909.mp3'
-//     },
-//     {
-//         id: 2,
-//         title: '示例音频 2',
-//         artist: '演唱者 2',
-//         cover: 'https://cdn.ipadbiz.cn/mlaj/images/zMRLZh40kms.jpg',
-//         url: 'https://img.tukuppt.com/newpreview_music/08/99/00/5c88d4a8d1f5745026.mp3'
-//     },
-//     {
-//         id: 3,
-//         title: '示例音频 3',
-//         artist: '演唱者 3',
-//         cover: 'https://cdn.ipadbiz.cn/mlaj/images/zMRLZh40kms.jpg',
-//         url: 'https://img.tukuppt.com/newpreview_music/09/03/95/5c8af46b01eb138909.mp3'
-//     },
-//     {
-//         id: 4,
-//         title: '示例音频 4',
-//         artist: '演唱者 4',
-//         cover: 'https://cdn.ipadbiz.cn/mlaj/images/zMRLZh40kms.jpg',
-//         url: 'https://img.tukuppt.com/newpreview_music/09/03/72/5c8ad96fbf47328809.mp3'
-//     },
-//     {
-//         id: 5,
-//         title: '示例音频 5',
-//         artist: '演唱者 5',
-//         cover: 'https://cdn.ipadbiz.cn/mlaj/images/zMRLZh40kms.jpg',
-//         url: 'https://img.tukuppt.com/newpreview_music/09/03/95/5c8af46b01eb138909.mp3'
-//     },
-//     {
-//         id: 6,
-//         title: '示例音频 6',
-//         artist: '演唱者 6',
-//         cover: 'https://cdn.ipadbiz.cn/mlaj/images/zMRLZh40kms.jpg',
-//         url: 'https://img.tukuppt.com/newpreview_music/09/03/72/5c8ad96fbf47328809.mp3'
-//     },
-//     {
-//         id: 7,
-//         title: '示例音频 7',
-//         artist: '演唱者 7',
-//         cover: 'https://cdn.ipadbiz.cn/mlaj/images/zMRLZh40kms.jpg',
-//         url: 'https://img.tukuppt.com/newpreview_music/09/03/95/5c8af46b01eb138909.mp3'
-//     },
-//     {
-//         id: 8,
-//         title: '示例音频 8',
-//         artist: '演唱者 8',
-//         cover: 'https://cdn.ipadbiz.cn/mlaj/images/zMRLZh40kms.jpg',
-//         url: 'https://img.tukuppt.com/newpreview_music/09/03/72/5c8ad96fbf47328809.mp3'
-//     },
-// ]);
 const audioList = ref([]);
 // 设置页面标题
@@ -357,11 +302,6 @@ const handleLessonClick = async (lesson) => {
         course.value = data;
         courseFile.value = data.file;
-        // 音频列表处理
-        if (data.course_type === 'audio') {
-            audioList.value = [data.file];
-        }
-
         // 获取评论列表
         const comment = await getGroupCommentListAPI({ group_id: data.group_id, schedule_id: data.id });
         if (comment.code) {
@@ -397,7 +337,10 @@ onMounted(async () => {
             courseFile.value = data.file;
             // 音频列表处理
             if (data.course_type === 'audio') {
-                audioList.value = [data.file];
+                audioList.value = data.file.list;
+                data.file.list.forEach((item, index) => {
+                    item.cover = 'https://cdn.ipadbiz.cn/mlaj/images/audio_d_cover.jpg'
+                })
             }
             // 获取评论列表