- Modified MusicAlbumView.vue, making it display real data from backend.

src/components/LeftSideBar.vue

@@ -9,21 +9,7 @@ import {getPlaylistsByUser} from "../api/playlist";
 
 const emit = defineEmits();
 
-const musicAlbums = ref([
-    { id: 1, image: require('../assets/pictures/playlists/1.jpg'), title: '歌单 1' },
-    { id: 2, image: require('../assets/pictures/playlists/2.jpg'), title: '歌单 2' },
-    { id: 3, image: require('../assets/pictures/playlists/3.jpg'), title: '歌单 3' },
-    { id: 4, image: require('../assets/pictures/playlists/1.jpg'), title: '歌单 1' },
-    { id: 5, image: require('../assets/pictures/playlists/2.jpg'), title: '歌单 2' },
-    { id: 6, image: require('../assets/pictures/playlists/3.jpg'), title: '歌单 3' },
-    { id: 7, image: require('../assets/pictures/playlists/1.jpg'), title: '歌单 1' },
-    { id: 8, image: require('../assets/pictures/playlists/2.jpg'), title: '歌单 2' },
-    { id: 9, image: require('../assets/pictures/playlists/3.jpg'), title: '歌单 3' },
-    { id: 10, image: require('../assets/pictures/playlists/1.jpg'), title: '歌单 1' },
-    { id: 11 ,image: require('../assets/pictures/playlists/2.jpg'), title: '歌单 2' },
-    { id: 12, image: require('../assets/pictures/playlists/3.jpg'), title: '歌单 3' },
-    // 更多歌单
-]);
+const musicAlbums = ref([]);
 
 let albumHoveredIndex = ref(null);
 let hoverOnAlbum= ref(false);
@@ -118,7 +104,7 @@ defineProps({
                     class="musicAlbum-image"
                     :style="{opacity:albumHoveredIndex === album.id ? 0.4 :1}"
                 />
-                <play-button @click="emit('setCurrentPlaylist', album.id);" v-if="albumHoveredIndex === album.id" class="play-button"/>
+                <play-button @click="emit('setCurrentPlaylist', album);" v-if="albumHoveredIndex === album.id" class="play-button"/>
                 
                 <div class="musicAlbum-description">
                     <p style="padding-bottom: 5px;font-size: 18px">{{ album.title }}</p>

src/components/musicAlbumView.vue

@@ -11,14 +11,17 @@ const props = defineProps({
 	musicList: {},
 });
 const gradientColor = computed(() => `linear-gradient(to bottom, ${backgroundColor.value} , #1F1F1F 50%)`)
-const albumInfo = ref({
-	id: 1,
-	image: require('../assets/pictures/playlists/1.jpg'),
-	name: '歌单 1',
-	creator: 'Kriskyy',
-	songCount: 6,
-	totalTime: '20:54'
-});
+
+// const albumInfo = ref({
+	// id: 1,
+	// image: require('../assets/pictures/playlists/1.jpg'),
+	// name: '歌单 1',
+	// creator: 'Kriskyy',
+	// songCount: 6,
+	// totalTime: '20:54'
+// });
+
+
 
 // const musicList = ref([
 // 	{
@@ -168,13 +171,14 @@ const enterAuthorDescription = (authorName) => {
 <template>
 	<div class="album-content" :style="{backgroundImage: gradientColor}">
 		<div class="header">
-			<img :src="albumInfo.image" alt="" class="album-image" @load="updateBackground"/>
+			<img src="../assets/pictures/songs/4.jpg" alt="" class="album-image" @load="updateBackground"/>
+<!--			<img :src="albumInfo.image" alt="" class="album-image" @load="updateBackground"/>-->
 			<div class="header-content">
 				<p style="text-align: left;margin:20px 0 0 15px">歌单</p>
 				<p class="header-album-name" style="font-weight: bolder;font-size:100px;margin:10px 0 35px 10px;">
-					{{ albumInfo.name }}</p>
+					{{ albumInfo.title }}</p>
 				<div class="header-content-detail">
-					<p class="header-creator" @click="enterPersonalSpace">{{ albumInfo.creator }}</p>
+					<p class="header-creator" @click="enterPersonalSpace">{{ albumInfo.description }}</p>
 					<p>•</p>
 					<p style="margin-left:6px">歌曲数量: {{ musicList.length }}</p>
 				</div>

src/views/HomePage.vue

@@ -68,9 +68,12 @@ const currentSongIndex = ref(0);
 /*
     PLAYLISTS
  */
+const playlists = ref([]);
+const currentPlaylist = ref(1);
 const currentPlaylistId = ref(1);
 const receivePlaylistId = (value) => {
-	currentPlaylistId.value = value;
+	currentPlaylist.value = value;
+	currentPlaylistId.value = value.id;
 	console.log("Current Playlist Id:", currentPlaylistId.value)
 	getSongsByPlaylist({
 		playlist_id: currentPlaylistId.value,
@@ -81,10 +84,8 @@ const receivePlaylistId = (value) => {
 		console.log("Failed to get songs!");
 	});
 };
-const playlists = ref([]);
-setInterval(() => {
-	console.log(currentPlaylistId.value, playlists.value)
-}, 600)
+
+
 
 function toggleComment() {
 	show_comment.value = !show_comment.value
@@ -247,6 +248,8 @@ onMounted(() => {
 		user_id: currentUserId.value,
 	}).then((res) => {
 		playlists.value = res.data.result;
+		currentPlaylist.value = playlists.value[0];
+		currentPlaylistId.value = currentPlaylist.value.id;
 		getSongsByPlaylist({
 			playlist_id: currentPlaylistId.value,
 		}).then((res) => {
@@ -274,7 +277,7 @@ onMounted(() => {
 					<Comment :song-id=currentSongId :user-id=currentUserId></Comment>
 				</el-container>
 				<el-container v-if="!show_comment" class="playlist-container" style="overflow: auto; height: 610px">
-					<MusicAlbumView :album-info="" :music-list="songs"/>
+					<MusicAlbumView :album-info="currentPlaylist" :music-list="songs"/>
 				</el-container>
 			</div>
 			<div v-if="showRightContent" class="right-content">