feat: add similar artists to artist page

src/api/artist.js

@@ -89,3 +89,17 @@ export function followAArtist(params) {
     params,
   });
 }
+
+/**
+ * 相似歌手
+ * 说明 : 调用此接口 , 传入歌手 id, 可获得相似歌手
+ * - id: 歌手 id
+ * @param {number} id
+ */
+export function similarArtists(id) {
+  return request({
+    url: "/simi/artist",
+    method: "post",
+    params: { id },
+  });
+}

src/components/CoverRow.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="cover-row">
+  <div class="cover-row" :style="rowStyles">
     <div
       class="item"
       v-for="item in items"
@@ -47,6 +47,16 @@ export default {
     type: { type: String, required: true },
     subText: { type: String, default: "null" },
     showPlayCount: { type: Boolean, default: false },
+    columnNumber: { type: Number, default: 5 },
+    gap: { type: String, default: "44px 24px" },
+  },
+  computed: {
+    rowStyles() {
+      return {
+        "grid-template-columns": `repeat(${this.columnNumber}, 1fr)`,
+        gap: this.gap,
+      };
+    },
   },
   methods: {
     getSubText(item) {
@@ -93,7 +103,8 @@ export default {
           return "https://p2.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg?param=512x512";
         }
       }
-      return item.img1v1Url || item.picUrl || item.coverImgUrl;
+      let img = item.img1v1Url || item.picUrl || item.coverImgUrl;
+      return `${img}?param=512x512`;
     },
   },
 };
@@ -102,8 +113,6 @@ export default {
 <style lang="scss" scoped>
 .cover-row {
   display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  gap: 44px 24px;
 }
 
 .item {
@@ -134,7 +143,6 @@ export default {
 .item.artist {
   display: flex;
   flex-direction: column;
-  justify-content: center;
   text-align: center;
   .cover {
     display: flex;

src/views/artist.vue

@@ -101,6 +101,16 @@
         :showPlayButton="true"
       />
     </div>
+
+    <div class="similar-artists" v-if="similarArtists.length !== 0">
+      <div class="section-title">相似歌手</div>
+      <CoverRow
+        type="artist"
+        :columnNumber="7"
+        gap="36px 28px"
+        :items="similarArtists.slice(0, 14)"
+      />
+    </div>
   </div>
 </template>
 
@@ -111,6 +121,7 @@ import {
   getArtistAlbum,
   artistMv,
   followAArtist,
+  similarArtists,
 } from "@/api/artist";
 import { isAccountLoggedIn } from "@/utils/auth";
 import NProgress from "nprogress";
@@ -144,6 +155,7 @@ export default {
       showMorePopTracks: false,
       mvs: [],
       hasMoreMV: false,
+      similarArtists: [],
     };
   },
   computed: {
@@ -176,6 +188,9 @@ export default {
         this.mvs = data.mvs;
         this.hasMoreMV = data.hasMore;
       });
+      similarArtists(id).then((data) => {
+        this.similarArtists = data.artists;
+      });
     },
     goToAlbum(id) {
       this.$router.push({
@@ -343,4 +358,10 @@ export default {
     }
   }
 }
+
+.similar-artists {
+  .section-title {
+    margin-bottom: 24px;
+  }
+}
 </style>