feat: add more albums by this artist section in album page

src/views/album.vue

@@ -55,6 +55,17 @@
         © {{ album.company }}
       </div>
     </div>
+    <div class="more-by" v-if="filteredMoreAlbums.length !== 0">
+      <div class="section-title"> More by {{ album.artist.name }} </div>
+      <div>
+        <CoverRow
+          type="album"
+          :items="filteredMoreAlbums"
+          subText="albumType+releaseYear"
+          :showPlayButton="true"
+        />
+      </div>
+    </div>
     <transition name="fade">
       <div
         class="shade"
@@ -74,14 +85,16 @@
 
 <script>
 import { mapMutations, mapActions, mapState } from "vuex";
-import NProgress from "nprogress";
+import { getArtistAlbum } from "@/api/artist";
 import { getTrackDetail } from "@/api/track";
 import { playAlbumByID } from "@/utils/play";
 import { getAlbum } from "@/api/album";
+import NProgress from "nprogress";
 
 import ExplicitSymbol from "@/components/ExplicitSymbol.vue";
 import ButtonTwoTone from "@/components/ButtonTwoTone.vue";
 import TrackList from "@/components/TrackList.vue";
+import CoverRow from "@/components/CoverRow.vue";
 import Cover from "@/components/Cover.vue";
 
 export default {
@@ -91,6 +104,7 @@ export default {
     ButtonTwoTone,
     TrackList,
     ExplicitSymbol,
+    CoverRow,
   },
   data() {
     return {
@@ -104,24 +118,11 @@ export default {
       tracks: [],
       showFullDescription: false,
       show: false,
+      moreAlbums: [],
     };
   },
   created() {
-    getAlbum(this.$route.params.id)
-      .then((data) => {
-        this.album = data.album;
-        this.tracks = data.songs;
-        NProgress.done();
-        this.show = true;
-        return this.tracks;
-      })
-      .then((tracks) => {
-        // to get explicit mark
-        let trackIDs = tracks.map((t) => t.id);
-        getTrackDetail(trackIDs.join(",")).then((data) => {
-          this.tracks = data.songs;
-        });
-      });
+    this.loadData(this.$route.params.id);
   },
   computed: {
     ...mapState(["player"]),
@@ -130,6 +131,12 @@ export default {
       this.tracks.map((t) => (time = time + t.dt));
       return time;
     },
+    filteredMoreAlbums() {
+      let moreAlbums = this.moreAlbums.filter((a) => a.id !== this.album.id);
+      let realAlbums = moreAlbums.filter((a) => a.type === "专辑");
+      let restItems = moreAlbums.filter((a) => a.type !== "专辑");
+      return [...realAlbums, ...restItems].slice(0, 5);
+    },
   },
   methods: {
     ...mapMutations(["appendTrackToPlayerList"]),
@@ -140,6 +147,32 @@ export default {
       }
       playAlbumByID(id, trackID);
     },
+    loadData(id) {
+      getAlbum(id).then((data) => {
+        this.album = data.album;
+        this.tracks = data.songs;
+        NProgress.done();
+        this.show = true;
+
+        // to get explicit mark
+        let trackIDs = this.tracks.map((t) => t.id);
+        getTrackDetail(trackIDs.join(",")).then((data) => {
+          this.tracks = data.songs;
+        });
+
+        // get more album by this artist
+        getArtistAlbum({ id: this.album.artist.id, limit: 200 }).then(
+          (data) => {
+            this.moreAlbums = data.hotAlbums;
+          }
+        );
+      });
+    },
+  },
+  beforeRouteUpdate(to, from, next) {
+    NProgress.start();
+    this.loadData(to.params.id);
+    next();
   },
 };
 </script>
@@ -245,7 +278,8 @@ export default {
 
 .extra-info {
   margin-top: 36px;
-  font-size: 14px;
+  margin-bottom: 36px;
+  font-size: 12px;
   color: rgba(0, 0, 0, 0.48);
   div {
     margin-bottom: 8px;
@@ -254,4 +288,15 @@ export default {
     color: rgba(0, 0, 0, 0.68);
   }
 }
+
+.more-by {
+  border-top: 1px solid rgba(0, 0, 0, 0.08);
+  padding-top: 22px;
+  .section-title {
+    font-size: 22px;
+    font-weight: 600;
+    color: rgba(0, 0, 0, 0.88);
+    margin-bottom: 8px;
+  }
+}
 </style>