From c55544df46798ff04302fb59afdd170f4d3c5963 Mon Sep 17 00:00:00 2001
From: alger <algerkc@qq.com>
Date: Fri, 13 Sep 2024 17:07:45 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20=E4=BF=AE=E5=A4=8D=E6=8E=92?=
 =?UTF-8?q?=E8=A1=8C=E6=92=AD=E6=94=BE=E5=88=97=E8=A1=A8=E9=97=AE=E9=A2=98?=
 =?UTF-8?q?=20=20=E4=BC=98=E5=8C=96=E6=9A=82=E5=81=9C=E6=92=AD=E6=94=BE?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/SongItem.vue |  5 +++++
 src/views/user/index.vue           | 36 ++++++++++--------------------
 2 files changed, 17 insertions(+), 24 deletions(-)

diff --git a/src/components/common/SongItem.vue b/src/components/common/SongItem.vue
index ae28f92..5dae756 100644
--- a/src/components/common/SongItem.vue
+++ b/src/components/common/SongItem.vue
@@ -63,6 +63,11 @@ const emits = defineEmits(['play']);
 // 播放音乐 设置音乐详情 打开音乐底栏
 const playMusicEvent = async (item: SongResult) => {
   if (playMusic.value.id === item.id) {
+    if (play.value) {
+      store.commit('setPlayMusic', false);
+    } else {
+      store.commit('setPlayMusic', true);
+    }
     return;
   }
   await store.commit('setPlay', item);
diff --git a/src/views/user/index.vue b/src/views/user/index.vue
index fda4dc5..35f0ad9 100644
--- a/src/views/user/index.vue
+++ b/src/views/user/index.vue
@@ -38,11 +38,12 @@ const loadPage = async () => {
   const { data: playlistData } = await getUserPlaylist(user.value.userId);
   playList.value = playlistData.playlist;
 
-  // getUserRecord(user.value.userId).then(({ data: recordData }) => {
-  //   recordList.value = recordData.allData;
-  // });
   const { data: recordData } = await getUserRecord(user.value.userId);
-  recordList.value = recordData.allData;
+  recordList.value = recordData.allData.map((item: any) => ({
+    ...item,
+    ...item.song,
+    picUrl: item.song.al.picUrl,
+  }));
   infoLoading.value = false;
 };
 
@@ -64,19 +65,6 @@ const showPlaylist = async (id: number) => {
   list.value = data.playlist;
 };
 
-// 格式化歌曲列表项
-const formatDetail = computed(() => (detail: any) => {
-  const song = {
-    artists: detail.ar,
-    name: detail.al.name,
-    id: detail.al.id,
-  };
-
-  detail.song = song;
-  detail.picUrl = detail.al.picUrl;
-  return detail;
-});
-
 const handlePlay = () => {
   const tracks = recordList.value || [];
   store.commit('setPlayList', tracks);
@@ -113,8 +101,8 @@ const handlePlay = () => {
         <div class="uesr-signature">{{ userDetail.profile.signature }}</div>
 
         <div class="play-list" :class="setAnimationClass('animate__fadeInLeft')">
-          <div class="  ">创建的歌单</div>
-          <n-scrollbar v-loading="infoLoading">
+          <div class="title">创建的歌单</div>
+          <n-scrollbar>
             <div v-for="(item, index) in playList" :key="index" class="play-list-item" @click="showPlaylist(item.id)">
               <n-image :src="getImgUrl(item.coverImgUrl, '50y50')" class="play-list-item-img" lazy preview-disabled />
               <div class="play-list-item-info">
@@ -127,18 +115,18 @@ const handlePlay = () => {
         </div>
       </div>
     </div>
-    <div v-if="!isMobile" class="right" :class="setAnimationClass('animate__fadeInRight')">
+    <div v-if="!isMobile" v-loading="infoLoading" class="right" :class="setAnimationClass('animate__fadeInRight')">
       <div class="title">听歌排行</div>
       <div class="record-list">
-        <n-scrollbar v-loading="infoLoading">
+        <n-scrollbar>
           <div
             v-for="(item, index) in recordList"
-            :key="item.song.id"
+            :key="item.id"
             class="record-item"
             :class="setAnimationClass('animate__bounceInUp')"
-            :style="setAnimationDelay(index, 50)"
+            :style="setAnimationDelay(index, 25)"
           >
-            <song-item class="song-item" :item="formatDetail(item.song)" @play="handlePlay" />
+            <song-item class="song-item" :item="item" @play="handlePlay" />
             <div class="play-count">{{ item.playCount }}次</div>
           </div>
           <play-bottom />