feat: 增加我的听歌排行 (#274) (#1197)

netease_api/routes/index.js

@@ -25,6 +25,7 @@ const table = {
   '/artist/sublist': require('../module/artist_sublist'),
   '/login/refresh': require('../module/login_refresh'),
   '/user/playlist': require('../module/user_playlist'),
+  '/user/record': require('../module/user_record'),
   '/album/sublist': require('../module/album_sublist'),
   '/artist/album': require('../module/artist_album'),
   '/personalized': require('../module/personalized'),

src/api/user.js

@@ -50,6 +50,23 @@ export function userPlaylist(params) {
   });
 }
 
+/**
+ * 获取用户播放记录
+ * 说明 : 登录后调用此接口 , 传入用户 id, 可获取用户播放记录
+ * - uid : 用户 id
+ * - type : type=1 时只返回 weekData, type=0 时返回 allData
+ * @param {Object} params
+ * @param {number} params.uid
+ * @param {number} params.type
+ */
+export function userPlayHistory(params) {
+  return request({
+    url: '/user/record',
+    method: 'get',
+    params,
+  });
+}
+
 /**
  * 喜欢音乐列表（需要登录）
  * 说明 : 调用此接口 , 传入用户 id, 可获取已喜欢音乐id列表(id数组)

src/components/TrackListItem.vue

@@ -80,6 +80,8 @@
     <div v-if="showTrackTime" class="time">
       {{ track.dt | formatTime }}
     </div>
+
+    <div v-if="track.playCount" class="count"> {{ track.playCount }}</div>
   </div>
 </template>
 
@@ -349,7 +351,8 @@ button {
     -webkit-line-clamp: 2;
     overflow: hidden;
   }
-  .time {
+  .time,
+  .count {
     font-size: 16px;
     width: 50px;
     cursor: default;

src/store/actions.js

@@ -5,6 +5,7 @@ import { getPlaylistDetail } from '@/api/playlist';
 import { getTrackDetail } from '@/api/track';
 import {
   userPlaylist,
+  userPlayHistory,
   userLikedSongsIDs,
   likedAlbums,
   likedArtists,
@@ -164,6 +165,30 @@ export default {
       }
     });
   },
+  fetchPlayHistory: ({ state, commit }) => {
+    if (!isAccountLoggedIn()) return;
+    return Promise.all([
+      userPlayHistory({ uid: state.data.user?.userId, type: 0 }),
+      userPlayHistory({ uid: state.data.user?.userId, type: 1 }),
+    ]).then(result => {
+      const data = {};
+      const dataType = { 0: 'allData', 1: 'weekData' };
+      if (result[0] && result[1]) {
+        for (let i = 0; i < result.length; i++) {
+          const songData = result[i][dataType[i]].map(item => {
+            const song = item.song;
+            song.playCount = item.playCount;
+            return song;
+          });
+          data[[dataType[i]]] = songData;
+        }
+        commit('updateLikedXXX', {
+          name: 'playHistory',
+          data: data,
+        });
+      }
+    });
+  },
   fetchUserProfile: ({ commit }) => {
     if (!isAccountLoggedIn()) return;
     return userAccount().then(result => {

src/views/library.vue

@@ -87,6 +87,13 @@
           >
             云盘
           </div>
+          <div
+            class="tab"
+            :class="{ active: currentTab === 'playHistory' }"
+            @click="updateCurrentTab('playHistory')"
+          >
+            听歌排行
+          </div>
         </div>
         <button
           v-show="currentTab === 'playlists'"
@@ -144,6 +151,20 @@
           :extra-context-menu-item="['removeTrackFromCloudDisk']"
         />
       </div>
+
+      <div v-show="currentTab === 'playHistory'">
+        <button class="playHistory-button" @click="playHistoryMode = 'week'">
+          最近一周
+        </button>
+        <button class="playHistory-button" @click="playHistoryMode = 'all'">
+          所有時間
+        </button>
+        <TrackList
+          :tracks="playHistoryList"
+          :column-number="1"
+          type="tracklist"
+        />
+      </div>
     </div>
 
     <input
@@ -202,6 +223,7 @@ export default {
       likedSongs: [],
       lyric: undefined,
       currentTab: 'playlists',
+      playHistoryMode: 'week',
     };
   },
   computed: {
@@ -245,6 +267,14 @@ export default {
       }
       return playlists;
     },
+    playHistoryList() {
+      if (this.show && this.playHistoryMode === 'week') {
+        return this.liked.playHistory.weekData;
+      } else if (this.show && this.playHistoryMode === 'all') {
+        return this.liked.playHistory.allData;
+      }
+      return [];
+    },
   },
   created() {
     setTimeout(() => {
@@ -279,6 +309,7 @@ export default {
       this.$store.dispatch('fetchLikedArtists');
       this.$store.dispatch('fetchLikedMVs');
       this.$store.dispatch('fetchCloudDisk');
+      this.$store.dispatch('fetchPlayHistory');
     },
     playLikedSongs() {
       this.$store.state.player.playPlaylistByID(
@@ -526,4 +557,17 @@ button.tab-button {
     transform: scale(0.92);
   }
 }
+
+button.playHistory-button {
+  color: var(--color-text);
+  border-radius: 8px;
+  padding: 10px;
+  transition: 0.2s;
+  opacity: 0.68;
+  font-weight: 500;
+  &:hover {
+    opacity: 1;
+    background: var(--color-secondary-bg);
+  }
+}
 </style>