feat: 取消点赞

src/api/course.js

@@ -121,3 +121,11 @@ export const setCourseLike = (uid, courseId) => {
       return res.data;
     });
 };
+
+export const setCourseDislike = (uid, courseId) => {
+  return axios
+    .post(`${COURSE_MODULE}/cancel_like/${courseId}?uid=${uid}`)
+    .then(res => {
+      return res.data;
+    });
+};

src/components/CourseItem.vue

@@ -37,10 +37,13 @@
         fab
         dark
         small
-        color="red"
+        :color="!liked ? 'red' : 'black'"
         @click="handleLike"
       >
-        <v-icon dark>
+        <v-icon v-if="liked" dark>
+          mdi-thumb-down
+        </v-icon>
+        <v-icon dark v-else>
           mdi-heart
         </v-icon>
       </v-btn>
@@ -94,6 +97,10 @@ export default Vue.extend({
     courseLikes: {
       type: Number,
       default: 0
+    },
+    liked: {
+      type: Boolean,
+      default: false
     }
   },
   data() {

src/views/student/CourseList.vue

@@ -30,6 +30,7 @@
           :manageable="course.manageable"
           :course-color="colorList[course.id % colorList.length]"
           :course-likes="course.likes"
+          :liked="course.liked"
           @buy-course="showDialog"
           @set-like="setLikeOrDislike"
         >
@@ -74,6 +75,7 @@
                     :manageable="course.manageable"
                     :course-color="colorList[course.id % colorList.length]"
                     :course-likes="course.likes"
+                    :liked="course.liked"
                     @buy-course="showDialog"
                     @set-like="setLikeOrDislike"
                   >
@@ -128,6 +130,7 @@
           :manageable="course.manageable"
           :course-color="colorList[course.id % colorList.length]"
           :course-likes="course.likes"
+          :liked="course.liked"
           @buy-course="showDialog"
           @set-like="setLikeOrDislike"
         >
@@ -175,6 +178,7 @@
           :manageable="course.manageable"
           :course-color="colorList[course.id % colorList.length]"
           :course-likes="course.likes"
+          :liked="course.liked"
           @buy-course="showDialog"
           @set-like="setLikeOrDislike"
         >
@@ -260,7 +264,9 @@ import {
   getCoursesByKey,
   getBoughtCourses,
   getHotCourses,
-  setCourseLike
+  setCourseLike,
+  getCourseById,
+  setCourseDislike
 } from "@/api/course";
 import {
   cancelCoupon,
@@ -474,28 +480,39 @@ export default {
       const uid = window.localStorage.getItem("userId");
       // 通过一个接口来获取该用户对当前课程的点赞情况，根据结果进入不同的分支
       // TODO Add your code here
-
-      // 分支1：若当前用户没有对该课程点赞则调用点赞接口
-      setCourseLike(uid, courseId).then(res => {
-        if (res.code === 1) {
-          //点赞成功，设置提示条的内容，颜色，并显示
-          this.snackBarMsg = res.msg;
-          this.snackBarColor = "success";
-          this.showSnackBar = true;
-          // 点赞成功后，课程的点赞数会变化，也会影响热门课程的排序，因此调用以下方法更新页面中的数据
-          this.fetchData();
+      getCourseById({ courseId, uid }).then(res => {
+        if (res.liked) {
+          // 分支2：若当前用户已经为该课程点过赞了，则调用取消点赞接口完成相关操作，可以仿照分支1的示例进行
+          // TODO Add your code here
+          setCourseDislike(uid, courseId).then(res => {
+            if (res.code === 1) {
+              this.snackBarMsg = res.msg;
+              this.snackBarColor = "success";
+              this.showSnackBar = true;
+              this.fetchData();
+            }
+          });
         } else {
-          // 点赞失败，设置提示条的内容、颜色，并显示。目前这里显示的内容是： 点赞失败、请勿重复点赞。
-          // 如果你的代码实现正确（以及后端代码） 应当不会出现这种情况。
-          // 原因是在重复点赞前，你应当在这里已经判断出点过赞，因此应当跳转到分支2去执行取消点赞的逻辑
-          this.snackBarMsg = res.msg;
-          this.snackBarColor = "warning";
-          this.showSnackBar = true;
+          // 分支1：若当前用户没有对该课程点赞则调用点赞接口
+          setCourseLike(uid, courseId).then(res => {
+            if (res.code === 1) {
+              //点赞成功，设置提示条的内容，颜色，并显示
+              this.snackBarMsg = res.msg;
+              this.snackBarColor = "success";
+              this.showSnackBar = true;
+              // 点赞成功后，课程的点赞数会变化，也会影响热门课程的排序，因此调用以下方法更新页面中的数据
+              this.fetchData();
+            } else {
+              // 点赞失败，设置提示条的内容、颜色，并显示。目前这里显示的内容是： 点赞失败、请勿重复点赞。
+              // 如果你的代码实现正确（以及后端代码） 应当不会出现这种情况。
+              // 原因是在重复点赞前，你应当在这里已经判断出点过赞，因此应当跳转到分支2去执行取消点赞的逻辑
+              this.snackBarMsg = res.msg;
+              this.snackBarColor = "warning";
+              this.showSnackBar = true;
+            }
+          });
         }
       });
-
-      // 分支2：若当前用户已经为该课程点过赞了，则调用取消点赞接口完成相关操作，可以仿照分支1的示例进行
-      // TODO Add your code here
     },
     confirmPayment() {
       this.settleDialog = false;