fix:can't show all songs of current playlist

xiaozhu188 · Jun 11, 2020 · be7553e · be7553e
1 parent e6b11f2
commit be7553e
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 75 deletions.
diff --git a/src/renderer/api/song.js b/src/renderer/api/song.js
@@ -9,10 +9,10 @@ export function getSongUrl (id) {
 }
 
 // 歌曲详情
-export function getSongDetail (id) {
+export function getSongDetail (ids) {
   return request.get('/song/detail', {
     params: {
-      id
+      ids
     }
   })
 }

diff --git a/src/renderer/views/Playlist/_id.vue b/src/renderer/views/Playlist/_id.vue
@@ -9,8 +9,9 @@
           </div>
           <div slot="description">
             <div class="creator">
-              <img  class="creator-avatar" v-lazy="`${playlist.creator.avatarUrl}?param=32y32`" />
-              <router-link :to="`/user?id=${playlist.creator.userId}`" class="name">{{playlist.creator.nickname}}</router-link>
+              <img class="creator-avatar" v-lazy="`${playlist.creator.avatarUrl}?param=32y32`" />
+              <router-link :to="`/user?id=${playlist.creator.userId}`" class="name">{{playlist.creator.nickname}}
+              </router-link>
               <span class="time">{{playlist.createTime | toDate}}创建</span>
             </div>
             <ul class="actions">
@@ -32,7 +33,10 @@
                 <a-button size="small" icon="share-alt">分享({{playlist.shareCount}})</a-button>
               </li>
               <li class="item">
-                <a-button size="small" @click="downloadAll"><z-icon type="download"></z-icon> 下载全部</a-button>
+                <a-button size="small" @click="downloadAll">
+                  <z-icon type="download"></z-icon>
+                  下载全部
+                </a-button>
               </li>
             </ul>
             <div class="tags">
@@ -50,7 +54,8 @@
               <span v-else>无</span>
             </div>
           </div>
-          <img slot="avatar" width="200" height="200" v-lazy="`${playlist.coverImgUrl}?param=200y200`" :key="playlist.id" />
+          <img slot="avatar" width="200" height="200" v-lazy="`${playlist.coverImgUrl}?param=200y200`"
+               :key="playlist.id" />
         </a-list-item-meta>
         <ul class="action">
           <li class="action-item">
@@ -67,13 +72,14 @@
 
     <tab-bar @search="searchSongs" />
     <keep-alive>
-      <router-view :tracks="songs"/>
+      <router-view :tracks="songs" />
     </keep-alive>
   </div>
 </template>
 
 <script>
 import { getPlaylistDetail } from '@/api/playlist'
+import { getSongDetail } from '@/api/song'
 import TabBar from '@/components/Common/tabBar'
 import Loading from '@/components/Common/loading'
 import ZIcon from '@/components/ZIcon/index.vue'
@@ -125,11 +131,11 @@ export default {
         this.loading = true
         let res = await getPlaylistDetail(id)
         this.playlist = res.playlist
-        this.tracks = res.playlist.tracks.map(track => {
-          return normalSong(track)
-        })
-        this.loading = false
+        let ids = res.playlist.trackIds.map(item => item.id).join(',')
+        let { songs } = await getSongDetail(ids)
+        this.tracks = songs.map(track => normalSong(track))
       } catch (error) {
+      } finally {
         this.loading = false
       }
     },
@@ -171,81 +177,82 @@ export default {
 </script>
 
 <style scoped>
-.intro >>> .ant-list-item {
-  align-items: initial;
-}
+  .intro >>> .ant-list-item {
+    align-items: initial;
+  }
 
-.intro >>> .ant-avatar {
-  border-radius: 0;
-}
+  .intro >>> .ant-avatar {
+    border-radius: 0;
+  }
 
-.intro >>> .ant-list-item-content {
-  position: absolute;
-  right: 0;
-  top: 0;
-}
-.intro >>> .ant-list-item-meta-title {
-  padding-right: 120px;
-  line-height: 1.1;
-}
+  .intro >>> .ant-list-item-content {
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+
+  .intro >>> .ant-list-item-meta-title {
+    padding-right: 120px;
+    line-height: 1.1;
+  }
 </style>
 <style lang="less" scoped>
-.intro {
-  padding: 20px;
-  .creator {
-    display: flex;
-    align-items: center;
-    .creator-avatar {
-      border-radius: 50%;
-      margin-right: 5px;
+  .intro {
+    padding: 20px;
+    .creator {
+      display: flex;
+      align-items: center;
+      .creator-avatar {
+        border-radius: 50%;
+        margin-right: 5px;
+      }
+      .name {
+        margin-right: 5px;
+        color: #333;
+      }
+      .time {
+        font-size: 13px;
+      }
     }
-    .name {
-      margin-right: 5px;
-      color: #333;
+    .actions {
+      margin: 15px 0;
+      .item {
+        display: inline-block;
+        margin-right: 10px;
+      }
+      .ant-btn {
+        font-size: 12px;
+      }
     }
-    .time {
+    .tags {
+      display: flex;
+      margin-bottom: 10px;
       font-size: 13px;
+      a {
+        font-size: 13px;
+        color: #006fe3;
+      }
     }
-  }
-  .actions {
-    margin: 15px 0;
-    .item {
-      display: inline-block;
-      margin-right: 10px;
-    }
-    .ant-btn {
+    .action {
+      display: flex;
+      text-align: right;
       font-size: 12px;
-    }
-  }
-  .tags {
-    display: flex;
-    margin-bottom: 10px;
-    font-size: 13px;
-    a {
-      font-size: 13px;
-      color: #006fe3;
-    }
-  }
-  .action {
-    display: flex;
-    text-align: right;
-    font-size: 12px;
-    height: fit-content;
-    .action-item {
-      padding: 0 10px;
-      margin-top: 12px;
-      &:not(:last-child) {
-        border-right: 1px solid #ddd;
+      height: fit-content;
+      .action-item {
+        padding: 0 10px;
+        margin-top: 12px;
+        &:not(:last-child) {
+          border-right: 1px solid #ddd;
+        }
       }
     }
   }
-}
 
-.desc {
-  display: -webkit-box;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-}
+  .desc {
+    display: -webkit-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
 </style>