hookehuyr

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

移除不再使用的测试音频数据,优化音频列表处理逻辑,确保音频封面统一
<!--
* @Date: 2025-04-07 12:35:35
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-04-07 17:37:34
* @FilePath: /mlaj/src/components/ui/audioPlayer.vue
* @LastEditTime: 2025-05-08 10:20:49
* @FilePath: /mlaj/src/components/ui/AudioPlayer.vue
* @Description: 音频播放器组件,支持播放控制、进度条调节、音量控制、播放列表等功能
-->
<template>
......
......@@ -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'
})
}
// 获取评论列表
......