feat: 优化音乐封面显示逻辑,确保在缺失封面时使用默认图片,并更新推荐专辑组件以显示封面

This commit is contained in:
alger
2025-04-11 20:07:51 +08:00
parent 2dc907a20f
commit bb7d1e332f
2 changed files with 31 additions and 8 deletions
+22 -1
View File
@@ -44,7 +44,7 @@
<div class="music-info"> <div class="music-info">
<div class="music-cover"> <div class="music-cover">
<n-image <n-image
:src="getImgUrl(cover ? listInfo?.coverImgUrl : displayedSongs[0]?.picUrl, '500y500')" :src="getCoverImgUrl"
class="cover-img" class="cover-img"
preview-disabled preview-disabled
:class="setAnimationClass('animate__fadeIn')" :class="setAnimationClass('animate__fadeIn')"
@@ -164,6 +164,24 @@ const total = computed(() => {
return props.songList.length; return props.songList.length;
}); });
const getCoverImgUrl = computed(() => {
if (props.listInfo?.coverImgUrl) {
return props.listInfo.coverImgUrl;
}
const song = props.songList[0];
if (song?.picUrl) {
return song.picUrl;
}
if (song?.al?.picUrl) {
return song.al.picUrl;
}
if (song?.album?.picUrl) {
return song.album.picUrl;
}
return '';
});
// 过滤歌曲列表 // 过滤歌曲列表
const filteredSongs = computed(() => { const filteredSongs = computed(() => {
if (!searchKeyword.value) { if (!searchKeyword.value) {
@@ -203,6 +221,9 @@ const filteredSongs = computed(() => {
// 格式化歌曲数据 // 格式化歌曲数据
const formatSong = (item: any) => { const formatSong = (item: any) => {
if (!item) {
return null;
}
return { return {
...item, ...item,
picUrl: item.al?.picUrl || item.picUrl, picUrl: item.al?.picUrl || item.picUrl,
@@ -26,7 +26,7 @@
v-model:show="showMusic" v-model:show="showMusic"
:name="albumName" :name="albumName"
:song-list="songList" :song-list="songList"
:cover="false" :cover="true"
:loading="loadingList" :loading="loadingList"
:list-info="albumInfo" :list-info="albumInfo"
/> />
@@ -62,17 +62,19 @@ const handleClick = async (item: any) => {
loadingList.value = true; loadingList.value = true;
showMusic.value = true; showMusic.value = true;
const res = await getAlbum(item.id); const res = await getAlbum(item.id);
songList.value = res.data.songs.map((song: any) => { const { songs, album } = res.data;
song.al.picUrl = song.al.picUrl || item.picUrl; songList.value = songs.map((song: any) => {
song.al.picUrl = song.al.picUrl || album.picUrl;
song.picUrl = song.al.picUrl || album.picUrl || song.picUrl;
return song; return song;
}); });
albumInfo.value = { albumInfo.value = {
...res.data.album, ...album,
creator: { creator: {
avatarUrl: res.data.album.artist.img1v1Url, avatarUrl: album.artist.img1v1Url,
nickname: `${res.data.album.artist.name} - ${res.data.album.company}` nickname: `${album.artist.name} - ${album.company}`
}, },
description: res.data.album.description description: album.description
}; };
loadingList.value = false; loadingList.value = false;
}; };