hookehuyr

refactor(AudioPlayer): 调整播放列表弹出层样式和行为

将播放列表弹出层的样式和行为进行优化,包括调整高度、添加遮罩层以及在选择歌曲后自动关闭播放列表
<!--
* @Date: 2025-04-07 12:35:35
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-04-07 17:20:54
* @LastEditTime: 2025-04-07 17:37:34
* @FilePath: /mlaj/src/components/ui/audioPlayer.vue
* @Description: 音频播放器组件,支持播放控制、进度条调节、音量控制、播放列表等功能
-->
......@@ -81,12 +81,13 @@
<!-- 播放列表弹出层 -->
<van-popup
teleport="body"
v-model:show="isPlaylistVisible"
position="bottom"
:overlay="false"
:overlay="true"
round
class="playlist-popup"
style="height: 100%"
style="height: 70vh"
>
<div class="playlist-header flex justify-between items-center px-4 py-3 border-b sticky top-0 bg-white z-10">
<h4 class="font-medium">播放列表 ({{ songs.length }})</h4>
......@@ -158,7 +159,6 @@ onMounted(() => {
const loadAudio = async () => {
if (!currentSong.value) return
isLoading.value = true
isPlaylistVisible.value = false // 关闭播放列表
try {
if (audio.value) {
audio.value.removeEventListener('timeupdate', updateProgress)
......@@ -306,6 +306,8 @@ const selectSong = async (index) => {
if (audio.value) {
await audio.value.play()
isPlaying.value = true
// 关闭播放列表
isPlaylistVisible.value = false
// 滚动到当前播放的音频
const playlistItems = document.querySelector('.playlist-items')
const activeItem = playlistItems?.querySelector('.active')
......
<!--
* @Date: 2025-03-24 13:04:21
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-04-07 17:17:52
* @LastEditTime: 2025-04-07 17:58:02
* @FilePath: /mlaj/src/views/profile/settings/AudioPlayerPage.vue
* @Description: 音频播放页面
-->
......@@ -37,7 +37,7 @@ const audioList = ref([
title: '示例音频 2',
artist: '演唱者 2',
cover: 'https://cdn.ipadbiz.cn/mlaj/images/zMRLZh40kms.jpg',
url: 'https://img.tukuppt.com/newpreview_music/09/03/72/5c8ad96fbf47328809.mp3'
url: 'https://img.tukuppt.com/newpreview_music/08/99/00/5c88d4a8d1f5745026.mp3'
},
{
id: 3,
......