点赞+热门课程

src/api/_prefix.js

@@ -5,3 +5,5 @@ export const ORDER_MODULE = `${API_VERSION}/course_order`;
 export const COURSE_WARE = `${API_VERSION}/course_ware`;
 export const FILE_MODULE = `${API_VERSION}/file`;
 export const USER_MODULE = `${API_VERSION}/user`;
+export const RECHARGE_MODULE = `${API_VERSION}/recharge`
+export const COUPON_MODULE = `${API_VERSION}/coupon`

src/api/course.js

@@ -66,4 +66,16 @@ export const createCourse = payload => {
   }).then(res => {
     return res.data;
   });
-}
+}
+
+export const getHotCourses = () => {
+  return axios.get(`${COURSE_MODULE}/hot/1`).then(res => {
+    return res.data
+  })
+}
+
+export const setCourseLike = (uid, courseId) => {
+  return axios.post(`${COURSE_MODULE}/like/${courseId}?uid=${uid}`).then(res => {
+    return res.data
+  })
+}

src/api/recharge.js

@@ -0,0 +1,15 @@
+import axios from "axios";
+import {RECHARGE_MODULE} from "@/api/_prefix";
+
+/**
+ * 用户充值 POST /user/recharge
+ * @param {*} payload
+ * @returns
+ */
+export const recharge = payload => {
+  console.log(payload);
+  const { userId, value } = payload;
+  return axios.post(`${RECHARGE_MODULE}/`, { userId, value }).then(res => {
+    return res.data;
+  });
+}

src/api/user.js

@@ -45,18 +45,7 @@ export const login = payload => {
   });
 }
 
-/**
- * 用户充值 POST /user/recharge
- * @param {*} payload 
- * @returns 
- */
-export const recharge = payload => {
-  console.log(payload);
-  const { userId, value } = payload;
-  return axios.post(`${USER_MODULE}/recharge`, { userId, value }).then(res => {
-    return res.data;
-  });
-}
+
 
 /**
  *  获取用户 GET /user/{uid}

src/components/CourseItem.vue

@@ -31,6 +31,21 @@
         >{{ cost === 0 ? "免费购买" : "购买课程" }}</v-btn
       >
     </v-card-actions>
+    <v-row justify="end" class="pr-5">
+      <v-btn
+          class="mx-2 align-self-center"
+          fab
+          dark
+          small
+          color="red"
+          @click="handleLike"
+      >
+        <v-icon dark>
+          mdi-heart
+        </v-icon>
+      </v-btn>
+      <span class="align-self-center">点赞： {{ courseLikes }}</span>
+    </v-row>
   </v-card>
 </template>
 
@@ -76,6 +91,10 @@ export default Vue.extend({
       type: String,
       default: "#BCAAA4",
     },
+    courseLikes:{
+      type: Number,
+      default: 0
+    }
   },
   data() {
     return {
@@ -97,6 +116,9 @@ export default Vue.extend({
     handlePeek() {
       this.$router.push(`/student/peek/${this.courseId}`);
     },
+    handleLike(){
+      this.$emit("set-like",this.courseId)
+    }
   },
   computed: {
     text: function() {

src/views/Home.vue

@@ -26,6 +26,7 @@
                     :manageable="course.manageable"
                     :course-color="colorList[course.id % colorList.length]"
                     :hasLogin="false"
+                    :course-likes="course.likes"
                     @buy-course="showDialog"
                   >
                   </course-item>
@@ -71,6 +72,7 @@
           :manageable="course.manageable"
           :course-color="colorList[course.id % colorList.length]"
           :hasLogin="false"
+          :course-likes="course.likes"
           @buy-course="showDialog"
         >
         </course-item>

src/views/student/CourseList.vue

@@ -1,6 +1,41 @@
 <template>
   <div>
     <v-container class="ma-8 pa-4">
+      <!-- 热门课程 -->
+      <v-row class="mt-8 mb-2">
+        <v-chip
+            class="ma-2"
+            color="deep-purple lighten-3"
+            label
+            text-color="white"
+        >
+          <v-icon left>
+            mdi-label
+          </v-icon>
+          热门课程
+        </v-chip>
+      </v-row>
+      <v-row>
+        <course-item
+            cols="12"
+            md="4"
+            v-for="course in hotCourseList"
+            :key="course.id"
+            :courseName="course.name"
+            :courseId="course.id"
+            :description="course.intro"
+            :type="course.type"
+            :cost="course.cost"
+            :bought="course.bought"
+            :manageable="course.manageable"
+            :course-color="colorList[course.id % colorList.length]"
+            :course-likes="course.likes"
+            @buy-course="showDialog"
+            @set-like="setLike"
+        >
+        </course-item>
+      </v-row>
+
       <template>
         <!-- 分类课程 -->
         <v-row class="mt-2 mb-8">
@@ -38,7 +73,9 @@
                     :bought="course.bought"
                     :manageable="course.manageable"
                     :course-color="colorList[course.id % colorList.length]"
+                    :course-likes="course.likes"
                     @buy-course="showDialog"
+                    @set-like="setLike"
                   >
                   </course-item>
                 </v-row>
@@ -90,7 +127,9 @@
           :bought="course.bought"
           :manageable="course.manageable"
           :course-color="colorList[course.id % colorList.length]"
+          :course-likes="course.likes"
           @buy-course="showDialog"
+          @set-like="setLike"
         >
         </course-item>
       </v-row>
@@ -135,17 +174,26 @@
           :bought="course.bought"
           :manageable="course.manageable"
           :course-color="colorList[course.id % colorList.length]"
+          :course-likes="course.likes"
           @buy-course="showDialog"
+          @set-like="setLike"
         >
         </course-item>
       </v-row>
     </v-container>
 
     <!-- 购买提示对话框 -->
-    <v-dialog v-model="dialog" width="500">
+    <v-dialog v-model="dialog" width="1000">
       <v-card>
         <v-card-title>购买课程</v-card-title>
-
+        <v-data-table
+            :headers="couponHeaders"
+            :items="coupons"
+            class="elevation-1"
+            show-select
+            @item-selected="onSelectCoupon"
+        >
+        </v-data-table>
         <v-card-text>
           是否花费 「{{ currentCoursePrice }}元」购买课程 「{{
             currentCourseName
@@ -185,6 +233,9 @@
         </v-card-actions>
       </v-card>
     </v-dialog>
+    <v-snackbar v-model="showLikeAlert" :color="setLikeColor" top>
+      {{ setLikeMsg }}
+    </v-snackbar>
   </div>
 </template>
 
@@ -193,7 +244,7 @@ import CourseItem from "@/components/CourseItem.vue";
 import {
   getCoursesByType,
   getCoursesByKey,
-  getBoughtCourses,
+  getBoughtCourses, getHotCourses, setCourseLike,
 } from "@/api/course";
 import { createOrder } from "@/api/order";
 
@@ -238,6 +289,47 @@ export default {
       searchCurrentPage: 1,
       //
       boughtCoursesList: [],
+      hotCourseList: [],
+      showLikeAlert: false,
+      setLikeMsg: '',
+      setLikeColor: 'success',
+      couponHeaders:[
+        {
+          text: "优惠券名称",
+          value: "name"
+        },
+        {
+          text: "优惠券类型",
+          value: "type"
+        },
+        {
+          text: "优惠券描述",
+          value: "description"
+        },
+        {
+          text: "优惠额度",
+          value: "cutDown"
+        },
+        {
+          text: "优惠比例",
+          value: "discount"
+        },
+        {
+          text: "与其他优惠券同时使用",
+          value: "sharable"
+        },
+      ],
+      coupons:[{
+        id: 1,
+        name:"name",
+        type:"universal",
+        description:"description",
+        cutDown: 20,
+        discount: 0,
+        sharable: false,
+        selected: false
+      }],
+      selectedCoupons:[]
     };
   },
 
@@ -285,12 +377,13 @@ export default {
         cost: this.currentCoursePrice,
         userId: uid,
         status: 2,
+        origin: this.currentCoursePrice
       }).then((res) => {
         this.dialog = false;
         this.msg =
           (res.code === 1 ? "「购买成功」！" : "「购买失败」！") + res.msg;
         this.dialog2 = true;
-        this.getUserBoughtCourses();
+        this.fetchData()
       });
     },
 
@@ -317,20 +410,59 @@ export default {
       });
     },
 
+    handleHotCourse(){
+      getHotCourses().then(res=>{
+        this.hotCourseList = res.list
+      })
+    },
+
     getUserBoughtCourses() {
       const uid = window.localStorage.getItem("userId");
       getBoughtCourses(uid).then((res) => {
         this.boughtCoursesList = res || [];
       });
     },
+
+    fetchData(){
+      ["primary", "medium", "advanced"].forEach((t) => {
+        this.handleGetCoursesByType(1, t);
+      });
+      this.handleSearchCourse();
+      this.getUserBoughtCourses();
+      this.handleHotCourse()
+
+    },
+
+    onSelectCoupon({item, value}){
+      if(value){
+        this.selectedCoupons.push(item)
+      }else{
+        this.selectedCoupons = this.selectedCoupons.filter((val)=>{
+          return val.id !== item.id
+        })
+      }
+      console.log(this.selectedCoupons)
+    },
+
+    setLike(courseId){
+      const uid = window.localStorage.getItem('userId')
+      setCourseLike(uid, courseId).then(res=>{
+        if (res.code === 1){
+          this.setLikeMsg = res.msg
+          this.setLikeColor = 'success'
+          this.showLikeAlert = true
+          this.fetchData()
+        }else{
+          this.setLikeMsg = res.msg
+          this.setLikeColor = 'warning'
+          this.showLikeAlert = true
+        }
+      })
+    }
   },
 
   mounted() {
-    ["primary", "medium", "advanced"].forEach((t) => {
-      this.handleGetCoursesByType(1, t);
-    });
-    this.handleSearchCourse();
-    this.getUserBoughtCourses();
+    this.fetchData()
   },
 };
 </script>

src/views/student/CoursePeek.vue

@@ -4,11 +4,28 @@
       <v-row>
         <v-col>
           <form class="pa-12 grey lighten-5 mt-8">
-            <v-text-field
-              v-model="courseInfo.name"
-              label="课程名称"
-              readonly
-            ></v-text-field>
+            <div class="d-flex justify-space-between">
+              <v-text-field
+                  class="d-inline-block"
+                  v-model="courseInfo.name"
+                  label="课程名称"
+                  readonly
+              ></v-text-field>
+              <v-btn
+                  class="mx-2 align-self-center"
+                  fab
+                  dark
+                  small
+                  color="red"
+              >
+                <v-icon dark>
+                  mdi-heart
+                </v-icon>
+              </v-btn>
+              <span class="align-self-center">点赞： {{ courseInfo.likes }}</span>
+
+            </div>
+
             <v-text-field
               v-model="courseInfo.id"
               label="课程ID"

src/views/student/CourseStudy.vue

@@ -139,7 +139,7 @@
         </v-col>
         <!-- 课程信息 -->
         <v-col>
-          <form class="pa-12 grey lighten-5 mt-8">
+          <form class="pa-12 grey lighten-5 mt-8" style="position: sticky;top: 0">
             <v-text-field
               v-model="courseInfo.name"
               label="课程名称"

src/views/student/UserCenter.vue

@@ -75,7 +75,8 @@
 </template>
 
 <script>
-import { getUser, recharge } from "@/api/user";
+import { getUser } from "@/api/user";
+import { recharge} from "@/api/recharge";
 
 export default {
   name: "UserCenter",

src/views/teacher/UserCenter.vue

@@ -75,7 +75,8 @@
 </template>
 
 <script>
-import { getUser, recharge } from "@/api/user";
+import { getUser } from "@/api/user";
+import {recharge} from "@/api/recharge";
 
 export default {
   name: "TeacherCenter",

vue.config.js

@@ -3,7 +3,8 @@ module.exports = {
   devServer: {
     proxy: {
       "^/api": {
-        target: "http://courselearning.seec.seecoder.cn/",
+        // target: "http://courselearning.seec.seecoder.cn/",
+        target: "http://localhost:8081",
         ws: true,
         changeOrigin: true,
         // pathRewrite: {