feat: save mv to your library

src/api/mv.js

@@ -13,6 +13,7 @@ export function mvDetail(mvid) {
     method: "get",
     params: {
       mvid,
+      timestamp: new Date().getTime(),
     },
   });
 }
@@ -27,7 +28,6 @@ export function mvDetail(mvid) {
  * @param {number} params.id
  * @param {number=} params.r
  */
-
 export function mvUrl(params) {
   return request({
     url: "/mv/url",
@@ -35,6 +35,7 @@ export function mvUrl(params) {
     params,
   });
 }
+
 /**
  * 相似 mv
  * 说明 : 调用此接口 , 传入 mvid 可获取相似 mv
@@ -47,3 +48,22 @@ export function simiMv(mvid) {
     params: { mvid },
   });
 }
+
+/**
+ * 收藏/取消收藏 MV
+ * 说明 : 调用此接口,可收藏/取消收藏 MV
+ * - mvid: mv id
+ * - t: 1 为收藏,其他为取消收藏
+ * @param {Object} params
+ * @param {number} params.mvid
+ * @param {number=} params.t
+ */
+
+export function likeAMV(params) {
+  params.timestamp = new Date().getTime();
+  return request({
+    url: "/mv/sub",
+    method: "post",
+    params,
+  });
+}

src/components/MvRow.vue

@@ -74,7 +74,7 @@ export default {
           artistName = mv.creator[0].userName;
           artistID = mv.creator[0].userId;
         }
-        return `<a href="/artist/${artistID}">${artistName}</a>`;
+        return `<a href="/#/artist/${artistID}">${artistName}</a>`;
       } else if (this.subtitle === "publishTime") {
         return mv.publishTime;
       }

src/views/mv.vue

@@ -11,6 +11,12 @@
           }}</router-link>
           -
           {{ mv.data.name }}
+          <div class="like-button" v-show="accountLogin">
+            <button-icon @click.native="likeMV">
+              <svg-icon icon-class="heart-solid" v-if="mv.subed"></svg-icon>
+              <svg-icon icon-class="heart" v-else></svg-icon>
+            </button-icon>
+          </div>
         </div>
         <div class="info">
           {{ mv.data.playCount | formatPlayCount }} Views ·
@@ -26,17 +32,20 @@
 </template>
 
 <script>
+import { mvDetail, mvUrl, simiMv, likeAMV } from "@/api/mv";
+import { isAccountLoggedIn } from "@/utils/auth";
 import NProgress from "nprogress";
-import { mvDetail, mvUrl, simiMv } from "@/api/mv";
-import Plyr from "plyr";
 import "@/assets/css/plyr.css";
+import Plyr from "plyr";
 
+import ButtonIcon from "@/components/ButtonIcon.vue";
 import MvRow from "@/components/MvRow.vue";
 
 export default {
   name: "mv",
   components: {
     MvRow,
+    ButtonIcon,
   },
   data() {
     return {
@@ -53,6 +62,11 @@ export default {
       simiMvs: [],
     };
   },
+  computed: {
+    accountLogin() {
+      return isAccountLoggedIn();
+    },
+  },
   methods: {
     getData(id) {
       mvDetail(id).then((data) => {
@@ -81,6 +95,14 @@ export default {
         this.simiMvs = data.mvs;
       });
     },
+    likeMV() {
+      likeAMV({
+        mvid: this.mv.data.id,
+        t: this.mv.subed ? 0 : 1,
+      }).then((data) => {
+        if (data.code === 200) this.mv.subed = !this.mv.subed;
+      });
+    },
   },
   mounted() {
     let videoOptions = {
@@ -154,4 +176,13 @@ export default {
     opacity: 0.88;
   }
 }
+
+.like-button {
+  display: inline-block;
+  .svg-icon {
+    height: 18px;
+    width: 18px;
+    color: var(--color-primary);
+  }
+}
 </style>