diff --git a/src/components/MusicList.vue b/src/components/MusicList.vue
index a542e48..d360436 100644
--- a/src/components/MusicList.vue
+++ b/src/components/MusicList.vue
@@ -25,7 +25,7 @@
-
+
-
@@ -82,22 +84,31 @@ import PlayBottom from './common/PlayBottom.vue';
const store = useStore();
-const props = defineProps<{
- show: boolean;
- name: string;
- songList: any[];
- loading?: boolean;
- listInfo?: {
- trackIds: { id: number }[];
- [key: string]: any;
- };
-}>();
+const props = withDefaults(
+ defineProps<{
+ show: boolean;
+ name: string;
+ songList: any[];
+ loading?: boolean;
+ listInfo?: {
+ trackIds: { id: number }[];
+ [key: string]: any;
+ };
+ cover?: boolean;
+ }>(),
+ {
+ loading: false,
+ cover: true,
+ },
+);
+
const emit = defineEmits(['update:show', 'update:loading']);
const page = ref(0);
const pageSize = 20;
const isLoadingMore = ref(false);
const displayedSongs = ref([]);
+const loadingList = ref(false);
// 计算总数
const total = computed(() => {
@@ -166,6 +177,7 @@ const loadMoreSongs = async () => {
console.error('加载歌曲失败:', error);
} finally {
isLoadingMore.value = false;
+ loadingList.value = false;
}
};
@@ -185,6 +197,16 @@ const handleScroll = (e: Event) => {
}
};
+watch(
+ () => props.show,
+ (newVal) => {
+ loadingList.value = newVal;
+ if (!props.cover) {
+ loadingList.value = false;
+ }
+ },
+);
+
// 监听 songList 变化,重置分页状态
watch(
() => props.songList,
@@ -194,6 +216,7 @@ watch(
if (newSongs.length > pageSize) {
page.value = 1;
}
+ loadingList.value = false;
},
{ immediate: true },
);
@@ -254,6 +277,10 @@ watch(
&-list {
@apply flex-grow min-h-0;
+ &-content {
+ @apply min-h-[calc(80vh-60px)];
+ }
+
:deep(.n-virtual-list__scroll) {
scrollbar-width: none;
&::-webkit-scrollbar {
diff --git a/src/components/RecommendAlbum.vue b/src/components/RecommendAlbum.vue
index 68f8489..0602399 100644
--- a/src/components/RecommendAlbum.vue
+++ b/src/components/RecommendAlbum.vue
@@ -20,7 +20,14 @@
-
+
@@ -41,15 +48,28 @@ const loadAlbumList = async () => {
const showMusic = ref(false);
const songList = ref([]);
const albumName = ref('');
-
+const loadingList = ref(false);
+const albumInfo = ref({});
const handleClick = async (item: any) => {
+ songList.value = [];
+ albumInfo.value = {};
albumName.value = item.name;
+ loadingList.value = true;
showMusic.value = true;
const res = await getAlbum(item.id);
songList.value = res.data.songs.map((song: any) => {
song.al.picUrl = song.al.picUrl || item.picUrl;
return song;
});
+ albumInfo.value = {
+ ...res.data.album,
+ creator: {
+ avatarUrl: res.data.album.artist.img1v1Url,
+ nickname: `${res.data.album.artist.name} - ${res.data.album.company}`,
+ },
+ description: res.data.album.description,
+ };
+ loadingList.value = false;
};
onMounted(() => {
diff --git a/src/components/RecommendSinger.vue b/src/components/RecommendSinger.vue
index 358736d..b6cee54 100644
--- a/src/components/RecommendSinger.vue
+++ b/src/components/RecommendSinger.vue
@@ -53,6 +53,7 @@
v-model:show="showMusic"
name="每日推荐列表"
:song-list="dayRecommendData?.dailySongs"
+ :cover="false"
/>