合并likeSongs页面和playlist页面

src/components/Player.vue

@@ -17,19 +17,18 @@
     </div>
     <div class="controls">
       <div class="playing">
-        <router-link :to="`/album/${currentTrack.al.id}`"
+        <img :src="currentTrack.al.picUrl | resizeImage" @click="goToAlbum" />
-          ><img :src="currentTrack.al.picUrl | resizeImage" />
-        </router-link>
         <div class="track-info">
-          <div class="name">
+          <div class="name" @click="goToList">
-            <router-link
+            {{ currentTrack.name }}
-              :to="'/' + player.listInfo.type + '/' + player.listInfo.id"
-              >{{ currentTrack.name }}</router-link
-            >
           </div>
           <div class="artist">
-            <span v-for="(ar, index) in currentTrack.ar" :key="ar.id">
+            <span
-              <router-link :to="`/artist/${ar.id}`">{{ ar.name }}</router-link>
+              v-for="(ar, index) in currentTrack.ar"
+              :key="ar.id"
+              @click="goToArtist(ar.id)"
+            >
+              {{ ar.name }}
               <span v-if="index !== currentTrack.ar.length - 1">, </span>
             </span>
           </div>
@@ -175,7 +174,6 @@ export default {
   },
   methods: {
     ...mapMutations([
-      "updatePlayerList",
       "turnOnShuffleMode",
       "turnOffShuffleMode",
       "updatePlayerState",
@@ -263,6 +261,20 @@ export default {
         }
       });
     },
+    goToList() {
+      if (this.player.listInfo.id === this.settings.user.likedSongPlaylistID)
+        this.$router.push({ path: "/library/liked-songs" });
+      else
+        this.$router.push({
+          path: "/" + this.player.listInfo.type + "/" + this.player.listInfo.id,
+        });
+    },
+    goToAlbum() {
+      this.$router.push({ path: "/album/" + this.currentTrack.al.id });
+    },
+    goToArtist(id) {
+      this.$router.push({ path: "/artist/" + id });
+    },
   },
 };
 </script>
@@ -307,6 +319,7 @@ export default {
     height: 46px;
     border-radius: 5px;
     box-shadow: 0 6px 8px -2px rgba(0, 0, 0, 0.16);
+    cursor: pointer;
   }
   .track-info {
     height: 46px;
@@ -337,7 +350,7 @@ export default {
       -webkit-line-clamp: 1;
       overflow: hidden;
       word-break: break-all;
-      a {
+      span {
         cursor: pointer;
         &:hover {
           text-decoration: underline;

src/router/index.js

@@ -93,7 +93,7 @@ const routes = [
   {
     path: "/library/liked-songs",
     name: "likedSongs",
-    component: () => import("@/views/likedSongs"),
+    component: () => import("@/views/playlist"),
     meta: {
       requireLogin: true,
     },

src/views/likedSongs.vue

@@ -1,235 +0,0 @@
-<template>
-  <div>
-    <h1>
-      <img class="head" :src="settings.user.avatarUrl | resizeImage" />{{
-        settings.user.nickname
-      }}'s Liked Songs
-    </h1>
-
-    <TrackList :tracks="tracks" :type="'playlist'" :id="playlist.id" />
-  </div>
-</template>
-
-<script>
-import { mapMutations, mapActions, mapState } from "vuex";
-import NProgress from "nprogress";
-import { getPlaylistDetail } from "@/api/playlist";
-import { playPlaylistByID } from "@/utils/play";
-import { getTrackDetail } from "@/api/track";
-import { mapTrackPlayableStatus } from "@/utils/common";
-
-import TrackList from "@/components/TrackList.vue";
-
-export default {
-  name: "Playlist",
-  components: {
-    TrackList,
-  },
-  data() {
-    return {
-      playlist: {
-        trackIds: [],
-      },
-      tracks: [],
-      loadingMore: false,
-      lastLoadedTrackIndex: 9,
-    };
-  },
-  created() {
-    this.id = this.settings.user.likedSongPlaylistID;
-    getPlaylistDetail(this.id)
-      .then((data) => {
-        this.playlist = data.playlist;
-        this.tracks = data.playlist.tracks;
-        this.tracks = mapTrackPlayableStatus(this.tracks);
-        NProgress.done();
-        if (this.playlist.trackCount > this.tracks.length) {
-          window.addEventListener("scroll", this.handleScroll, true);
-        }
-        return data;
-      })
-      .then(() => {
-        if (this.playlist.trackCount > this.tracks.length) {
-          this.loadingMore = true;
-          this.loadMore();
-        }
-      });
-  },
-  destroyed() {
-    window.removeEventListener("scroll", this.handleScroll, true);
-  },
-  computed: {
-    ...mapState(["player", "settings"]),
-  },
-  methods: {
-    ...mapMutations([
-      "updatePlayerList",
-      "appendTrackToPlayerList",
-      "shuffleTheList",
-    ]),
-    ...mapActions(["playFirstTrackOnList", "playTrackOnListByID"]),
-    playPlaylistByID(trackID = "first") {
-      playPlaylistByID(this.playlist.id, trackID);
-    },
-    shufflePlay() {
-      this.playPlaylistByID();
-      this.shuffleTheList();
-    },
-    loadMore() {
-      let trackIDs = this.playlist.trackIds.filter((t, index) => {
-        if (
-          index > this.lastLoadedTrackIndex &&
-          index <= this.lastLoadedTrackIndex + 50
-        )
-          return t;
-      });
-      trackIDs = trackIDs.map((t) => t.id);
-      getTrackDetail(trackIDs.join(",")).then((data) => {
-        this.tracks.push(...data.songs);
-        this.tracks = mapTrackPlayableStatus(this.tracks);
-        this.lastLoadedTrackIndex += trackIDs.length;
-        this.loadingMore = false;
-      });
-    },
-    handleScroll(e) {
-      let dom = document.querySelector("html");
-      let scrollHeight = Math.max(dom.scrollHeight, dom.scrollHeight);
-      let scrollTop = e.target.scrollingElement.scrollTop;
-      let clientHeight =
-        dom.innerHeight || Math.min(dom.clientHeight, dom.clientHeight);
-      if (clientHeight + scrollTop + 200 >= scrollHeight) {
-        if (
-          this.lastLoadedTrackIndex + 1 === this.playlist.trackIds.length ||
-          this.loadingMore
-        )
-          return;
-        this.loadingMore = true;
-        this.loadMore();
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-h1 {
-  font-size: 42px;
-  .head {
-    height: 44px;
-    margin-right: 12px;
-    vertical-align: -7px;
-    border-radius: 50%;
-    border: rgba(0, 0, 0, 0.2);
-  }
-}
-
-.playlist-info {
-  display: flex;
-  width: 78vw;
-  margin-bottom: 72px;
-  .info {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    flex: 1;
-    margin-left: 56px;
-    .title {
-      font-size: 36px;
-      font-weight: 700;
-    }
-    .artist {
-      font-size: 18px;
-      color: rgba(0, 0, 0, 0.88);
-      margin-top: 24px;
-    }
-    .date-and-count {
-      font-size: 14px;
-      color: rgba(0, 0, 0, 0.68);
-      margin-top: 2px;
-    }
-    .description {
-      font-size: 14px;
-      color: rgba(0, 0, 0, 0.68);
-      margin-top: 24px;
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 3;
-      overflow: hidden;
-      cursor: pointer;
-      &:hover {
-        transition: color 0.3s;
-        color: rgba(0, 0, 0, 0.88);
-      }
-    }
-    .buttons {
-      margin-top: 32px;
-      display: flex;
-      button {
-        display: flex;
-        align-items: center;
-        font-size: 18px;
-        font-weight: 600;
-        background-color: rgba(51, 94, 234, 0.1);
-        color: #335eea;
-        padding: 8px 16px;
-        border-radius: 8px;
-        margin-right: 12px;
-        .svg-icon {
-          width: 16px;
-          height: 16px;
-          margin-right: 8px;
-        }
-      }
-      .shuffle {
-        padding: 8px 11px;
-        .svg-icon {
-          margin: 0;
-        }
-      }
-    }
-  }
-}
-
-.shade {
-  background: rgba(255, 255, 255, 0.38);
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  .description-full {
-    background: rgba(255, 255, 255, 0.78);
-    box-shadow: 0 12px 16px -8px rgba(0, 0, 0, 0.1);
-    border: 1px solid rgba(0, 0, 0, 0.08);
-    backdrop-filter: blur(12px);
-    padding: 32px;
-    border-radius: 12px;
-    width: 50vw;
-    margin: auto 0;
-    font-size: 14px;
-    z-index: 100;
-    display: flex;
-    flex-direction: column;
-
-    .close {
-      display: flex;
-      justify-content: flex-end;
-      font-size: 16px;
-      margin-top: 20px;
-      color: #335eea;
-      cursor: pointer;
-    }
-  }
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.2s;
-}
-.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
-  opacity: 0;
-}
-</style>

src/views/playlist.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-show="show">
-    <div class="playlist-info">
+    <div class="playlist-info" v-if="!isLikeSongsPage">
       <Cover
         :url="playlist.coverImgUrl | resizeImage(1024)"
         :showPlayButton="true"
@@ -60,6 +60,14 @@
       </div>
     </div>
 
+    <div class="user-info" v-else>
+      <h1>
+        <img class="avatar" :src="settings.user.avatarUrl | resizeImage" />{{
+          settings.user.nickname
+        }}'s Liked Songs
+      </h1>
+    </div>
+
     <TrackList :tracks="tracks" :type="'playlist'" :id="playlist.id" />
 
     <transition name="fade">
@@ -114,7 +122,11 @@ export default {
     };
   },
   created() {
-    this.loadData(this.$route.params.id);
+    if (this.$route.name === "likedSongs") {
+      this.loadData(this.settings.user.likedSongPlaylistID);
+    } else {
+      this.loadData(this.$route.params.id);
+    }
   },
   destroyed() {
     window.removeEventListener("scroll", this.handleScroll, true);
@@ -124,13 +136,12 @@ export default {
     isLoggedIn() {
       return isLoggedIn();
     },
+    isLikeSongsPage() {
+      return this.$route.name === "likedSongs";
+    },
   },
   methods: {
-    ...mapMutations([
+    ...mapMutations(["appendTrackToPlayerList"]),
-      "updatePlayerList",
-      "appendTrackToPlayerList",
-      "shuffleTheList",
-    ]),
     ...mapActions(["playFirstTrackOnList", "playTrackOnListByID"]),
     playPlaylistByID(trackID = "first") {
       let trackIDs = this.playlist.trackIds.map((t) => t.id);
@@ -291,6 +302,19 @@ export default {
   }
 }
 
+.user-info {
+  h1 {
+    font-size: 42px;
+    .avatar {
+      height: 44px;
+      margin-right: 12px;
+      vertical-align: -7px;
+      border-radius: 50%;
+      border: rgba(0, 0, 0, 0.2);
+    }
+  }
+}
+
 .fade-enter-active,
 .fade-leave-active {
   transition: opacity 0.2s;