mirror of
https://github.com/algerkong/AlgerMusicPlayer.git
synced 2026-04-24 16:27:23 +08:00
✨ feat: 优化音乐封面显示逻辑,确保在缺失封面时使用默认图片,并更新推荐专辑组件以显示封面
This commit is contained in:
@@ -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;
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user