feat: add see more mv button in artist page

src/api/artist.js

@@ -61,15 +61,15 @@ export function toplistOfArtists(type = null) {
 /**
  * 获取歌手 mv
  * 说明 : 调用此接口 , 传入歌手 id, 可获得歌手 mv 信息 , 具体 mv 播放地址可调 用/mv传入此接口获得的 mvid 来拿到 , 如 : /artist/mv?id=6452,/mv?mvid=5461064
- * @param {number} id 歌手 id, 可由搜索接口获得
+ * @param {number} params.id 歌手 id, 可由搜索接口获得
+ * @param {number} params.offset
+ * @param {number} params.limit
  */
-export function artistMv(id) {
+export function artistMv(params) {
   return request({
     url: "/artist/mv",
     method: "get",
-    params: {
+    params,
-      id,
-    },
   });
 }
 

src/components/MvRow.vue

@@ -51,9 +51,11 @@ export default {
       this.$router.push({ path: "/mv/" + id, query });
     },
     getUrl(mv) {
-      if (mv.cover !== undefined) return mv.cover;
+      if (mv.cover !== undefined) return mv.cover.replace(/^http:/, "https:");
-      if (mv.imgurl16v9 !== undefined) return mv.imgurl16v9;
+      if (mv.imgurl16v9 !== undefined)
-      if (mv.coverUrl !== undefined) return mv.coverUrl;
+        return mv.imgurl16v9.replace(/^http:/, "https:");
+      if (mv.coverUrl !== undefined)
+        return mv.coverUrl.replace(/^http:/, "https:");
     },
     getID(mv) {
       if (mv.id !== undefined) return mv.id;

src/router/index.js

@@ -49,6 +49,14 @@ const routes = [
       keepAlive: true,
     },
   },
+  {
+    path: "/artist/:id/mv",
+    name: "artistMV",
+    component: () => import("@/views/artistMV.vue"),
+    meta: {
+      keepAlive: true,
+    },
+  },
   {
     path: "/mv/:id",
     name: "mv",

src/views/artist.vue

@@ -81,7 +81,12 @@
       />
     </div>
     <div class="mvs" v-if="mvs.length !== 0">
-      <div class="section-title">MVs</div>
+      <div class="section-title"
+        >MVs
+        <router-link :to="`/artist/${this.artist.id}/mv`">{{
+          $t("home.seeMore")
+        }}</router-link>
+      </div>
       <MvRow :mvs="mvs" subtitle="publishTime" />
     </div>
     <div class="eps" v-if="eps.length !== 0">
@@ -163,7 +168,7 @@ export default {
         this.albumsData = data.hotAlbums;
         this.latestRelease = data.hotAlbums[0];
       });
-      artistMv(id).then((data) => {
+      artistMv({ id }).then((data) => {
         this.mvs = data.mvs;
       });
     },
@@ -256,6 +261,15 @@ export default {
   color: var(--color-text);
   margin-bottom: 16px;
   margin-top: 46px;
+
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  a {
+    font-size: 13px;
+    font-weight: 600;
+    opacity: 0.68;
+  }
 }
 
 .latest-release {

src/views/artistMV.vue

@@ -0,0 +1,96 @@
+<template>
+  <div v-show="show">
+    <h1>
+      <img class="avatar" :src="artist.img1v1Url | resizeImage(1024)" />{{
+        artist.name
+      }}'s Music Videos
+    </h1>
+    <MvRow :mvs="mvs" subtitle="publishTime" />
+    <div class="load-more">
+      <ButtonTwoTone v-show="hasMore" @click.native="loadMVs" color="grey">{{
+        $t("explore.loadMore")
+      }}</ButtonTwoTone>
+    </div>
+  </div>
+</template>
+
+<script>
+import { artistMv, getArtist } from "@/api/artist";
+import NProgress from "nprogress";
+
+import ButtonTwoTone from "@/components/ButtonTwoTone.vue";
+import MvRow from "@/components/MvRow.vue";
+
+export default {
+  name: "artistMV",
+  components: {
+    MvRow,
+    ButtonTwoTone,
+  },
+  data() {
+    return {
+      id: 0,
+      show: false,
+      hasMore: true,
+      artist: {},
+      mvs: [],
+    };
+  },
+  methods: {
+    loadData() {
+      getArtist(this.id).then((data) => {
+        this.artist = data.artist;
+      });
+      this.loadMVs();
+    },
+    loadMVs() {
+      artistMv({ id: this.id, limit: 100, offset: this.mvs.length + 1 }).then(
+        (data) => {
+          this.mvs.push(...data.mvs);
+          this.hasMore = data.hasMore;
+          NProgress.done();
+          this.show = true;
+        }
+      );
+    },
+  },
+  created() {
+    this.id = this.$route.params.id;
+    this.loadData();
+  },
+  activated() {
+    if (this.$route.params.id !== this.id) {
+      this.id = this.$route.params.id;
+      this.mvs = [];
+      this.artist = {};
+      this.show = false;
+      this.hasMore = true;
+      this.loadData();
+    }
+  },
+  beforeRouteUpdate(to, from, next) {
+    NProgress.start();
+    this.id = to.params.id;
+    this.loadData();
+    next();
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+h1 {
+  font-size: 42px;
+  color: var(--color-text);
+  .avatar {
+    height: 44px;
+    margin-right: 12px;
+    vertical-align: -7px;
+    border-radius: 50%;
+    border: rgba(0, 0, 0, 0.2);
+  }
+}
+.load-more {
+  display: flex;
+  justify-content: center;
+}
+</style>

src/views/library.vue

@@ -253,18 +253,24 @@ export default {
       });
     },
     loadLikedAlbums() {
+      NProgress.start();
       likedAlbums().then((data) => {
         this.albums = data.data;
+        NProgress.done();
       });
     },
     loadLikedArtists() {
+      NProgress.start();
       likedArtists().then((data) => {
         this.artists = data.data;
+        NProgress.done();
       });
     },
     loadLikedMVs() {
+      NProgress.start();
       likedMVs().then((data) => {
         this.mvs = data.data;
+        NProgress.done();
       });
     },
   },