联调完成

src/api/course.js

@@ -7,24 +7,10 @@ import { COURSE_MODULE } from "./_prefix";
  * @returns 
  */
 export const getCourseById = payload => {
-  // const { uid, courseId } = payload;
-  // return axios.get(`${COURSE_MODULE}/${courseId}?uid=${uid}`);
-  return Promise.resolve(
-    {
-      "id": 1,
-      "name": "软件工程与计算 I",
-      "type": "中级", 
-      "intro": "通过Scheme、Python和Java语言，让你分别体会函数式编程范式、结构化编程范式和面向对象编程范式",
-      "picture": "course1.png",
-      "school": "南京大学",
-      "createTime": "2020-12-20T02:00:00.000+00:00",
-      "cost": 1,
-      "teacherId": 1,
-      "teacherName": "刘钦",
-      "bought": false,
-      "manageable": true
-    }
-  );
+  const { uid, courseId } = payload;
+  return axios.get(`${COURSE_MODULE}/${courseId}?uid=${uid}`).then(res => {
+    return res.data;
+  });
 }
 
 /**
@@ -33,78 +19,10 @@ export const getCourseById = payload => {
  * @returns 
  */
 export const getCoursesByKey = payload => {
-  // const { uid, key, page } = payload;
-  // return axios.get(`${COURSE_MODULE}/all/${page}?uid=${uid}&key=${key}`);
-  return Promise.resolve(
-    {
-      "pageNum": 1,
-      "pageSize": 3,
-      "size": 3,
-      "startRow": 1,
-      "endRow": 3,
-      "total": 4,
-      "pages": 2,
-      "list": [
-        {
-          "id": 1,
-          "name": "软件工程与计算 I",
-          "type": "中级",
-          "intro": "通过Scheme、Python和Java语言，让你分别体会函数式编程范式、结构化编程范式和面向对象编程范式",
-          "picture": "course1.png",
-          "school": "南京大学",
-          "createTime": "2020-12-20T02:00:00.000+00:00",
-          "cost": 1,
-          "teacherId": 1,
-          "teacherName": "刘钦",
-          "bought": true,
-          "manageable": false
-        },
-        {
-          "id": 2,
-          "name": "软件工程与计算 II",
-          "type": "中级",
-          "intro": "基于DevOps培养团队开发中小规模软件系统的能力",
-          "picture": "course2.png",
-          "school": "南京大学",
-          "createTime": "2020-12-20T02:00:00.000+00:00",
-          "cost": 0,
-          "teacherId": 1,
-          "teacherName": "刘钦",
-          "bought": false,
-          "manageable": false
-        },
-        {
-          "id": 3,
-          "name": "程序猿与攻城狮",
-          "type": "初级",
-          "intro": "我们将由5位老师从不同的角度来说说他们对软件工程的理解。我们并非试图去覆盖所有软件工程的知识点，我们只是希望去让对软件工程有兴趣的你们了解到\"我要学什么\"\"我应如何学\"\"我今后能做什么\"这样一些基本的问题的部分答案。\r\n\r\n   刘钦老师会介绍软件工程的历史和软件工程建模；丁二玉老师会谈谈软件工程师和软件工程团队；冯桂焕老师会通过案例让大家体验人机交互的魅力；陈振宇老师会从概率统计讲到软件测试；刘嘉老师会娓娓道来他对最热门的移动互联网发展的本质的理解。",
-          "picture": "course3.png",
-          "school": "南京大学",
-          "createTime": "2020-12-20T02:00:00.000+00:00",
-          "cost": 1,
-          "teacherId": 1,
-          "teacherName": "刘钦",
-          "bought": false,
-          "manageable": false
-        }
-      ],
-      "prePage": 0,
-      "nextPage": 2,
-      "isFirstPage": true,
-      "isLastPage": false,
-      "hasPreviousPage": false,
-      "hasNextPage": true,
-      "navigatePages": 8,
-      "navigatepageNums": [
-        1,
-        2
-      ],
-      "navigateFirstPage": 1,
-      "navigateLastPage": 2,
-      "lastPage": 2,
-      "firstPage": 1
-    }
-  );
+  const { uid, key, page } = payload;
+  return axios.get(`${COURSE_MODULE}/all/${page}?uid=${uid}&key=${key}`).then(res => {
+    return res.data;
+  });
 }
 
 /**
@@ -113,63 +31,10 @@ export const getCoursesByKey = payload => {
  * @returns 
  */
 export const getCoursesByType = payload => {
-  // const { uid, type, page } = payload;
-  // return axios.get(`${COURSE_MODULE}/type/${page}?uid=${uid}&type=${type}`);
-  return Promise.resolve(
-    {
-      "pageNum": 1,
-      "pageSize": 3,
-      "size": 2,
-      "startRow": 1,
-      "endRow": 2,
-      "total": 2,
-      "pages": 1,
-      "list": [
-        {
-          "id": 3,
-          "name": "程序猿与攻城狮",
-          "type": "初级",
-          "intro": "我们将由5位老师从不同的角度来说说他们对软件工程的理解。我们并非试图去覆盖所有软件工程的知识点，我们只是希望去让对软件工程有兴趣的你们了解到\"我要学什么\"\"我应如何学\"\"我今后能做什么\"这样一些基本的问题的部分答案。\r\n\r\n   刘钦老师会介绍软件工程的历史和软件工程建模；丁二玉老师会谈谈软件工程师和软件工程团队；冯桂焕老师会通过案例让大家体验人机交互的魅力；陈振宇老师会从概率统计讲到软件测试；刘嘉老师会娓娓道来他对最热门的移动互联网发展的本质的理解。",
-          "picture": "course3.png",
-          "school": "南京大学",
-          "createTime": "2020-12-20T02:00:00.000+00:00",
-          "cost": 1,
-          "teacherId": 1,
-          "teacherName": "刘钦",
-          "bought": false,
-          "manageable": false
-        },
-        {
-          "id": 4,
-          "name": "基于Java的面向对象编程范式",
-          "type": "初级",
-          "intro": "本课程完成了编程思维、结构化编程范式、面向对象编程方式的介绍，并且着重强调了面向对象编程中封装、协作和可修改性三个重要概念。通过客观题和6道编程题的训练，进一步加深对面向对象编程范式的理解，初步领略面向对象编程范式的风采。",
-          "picture": "course4.png",
-          "school": "南京大学",
-          "createTime": "2020-12-20T02:00:00.000+00:00",
-          "cost": 1,
-          "teacherId": 1,
-          "teacherName": "刘钦",
-          "bought": false,
-          "manageable": false
-        }
-      ],
-      "prePage": 0,
-      "nextPage": 0,
-      "isFirstPage": true,
-      "isLastPage": true,
-      "hasPreviousPage": false,
-      "hasNextPage": false,
-      "navigatePages": 8,
-      "navigatepageNums": [
-        1
-      ],
-      "navigateFirstPage": 1,
-      "navigateLastPage": 1,
-      "lastPage": 1,
-      "firstPage": 1
-    }
-  );
+  const { uid, type, page } = payload;
+  return axios.get(`${COURSE_MODULE}/type/${page}?uid=${uid}&type=${type}`).then(res => {
+    return res.data;
+  });
 }
 
 /**
@@ -178,75 +43,15 @@ export const getCoursesByType = payload => {
  * @returns 
  */
 export const getBoughtCourses = uid => {
-  // return axios.get(`${COURSE_MODULE}/sid/${uid}`);
-  return Promise.resolve(
-    [
-      {
-        "id": 1,
-        "name": "软件工程与计算 I",
-        "type": "中级",
-        "intro": "通过Scheme、Python和Java语言，让你分别体会函数式编程范式、结构化编程范式和面向对象编程范式",
-        "picture": "course1.png",
-        "school": "南京大学",
-        "createTime": "2020-12-20T02:00:00.000+00:00",
-        "cost": 1,
-        "teacherId": 1,
-        "teacherName": "刘钦",
-        "bought": true,
-        "manageable": false
-      },
-      {
-        "id": 2,
-        "name": "软件工程与计算 II",
-        "type": "中级",
-        "intro": "通过Scheme、Python和Java语言，让你分别体会函数式编程范式、结构化编程范式和面向对象编程范式",
-        "picture": "course1.png",
-        "school": "南京大学",
-        "createTime": "2020-12-20T02:00:00.000+00:00",
-        "cost": 1,
-        "teacherId": 1,
-        "teacherName": "刘钦",
-        "bought": true,
-        "manageable": false
-      },
-    ]
-  );
+  return axios.get(`${COURSE_MODULE}/sid/${uid}`).then(res => {
+    return res.data;
+  });
 }
 
 export const getTeacherCourses = uid => {
-  // return axios.get(`${COURSE_MODULE}/tid/${uid}`);
-  return Promise.resolve(
-    [
-      {
-        "id": 1,
-        "name": "软件工程与计算 I",
-        "type": "中级",
-        "intro": "通过Scheme、Python和Java语言，让你分别体会函数式编程范式、结构化编程范式和面向对象编程范式",
-        "picture": "course1.png",
-        "school": "南京大学",
-        "createTime": "2020-12-20T02:00:00.000+00:00",
-        "cost": 1,
-        "teacherId": 1,
-        "teacherName": "刘钦",
-        "bought": false,
-        "manageable": true
-      },
-      {
-        "id": 2,
-        "name": "软件工程与计算 II",
-        "type": "中级",
-        "intro": "通过Scheme、Python和Java语言，让你分别体会函数式编程范式、结构化编程范式和面向对象编程范式",
-        "picture": "course1.png",
-        "school": "南京大学",
-        "createTime": "2020-12-20T02:00:00.000+00:00",
-        "cost": 1,
-        "teacherId": 1,
-        "teacherName": "刘钦",
-        "bought": false,
-        "manageable": true
-      },
-    ]
-  );
+  return axios.get(`${COURSE_MODULE}/tid/${uid}`).then(res => {
+    return res.data;
+  });
 }
 
 /**
@@ -255,28 +60,10 @@ export const getTeacherCourses = uid => {
  * @returns 
  */
 export const createCourse = payload => {
-  // const { name, type, intro, picture, school, cost, teacherId, teacherName, bought, manageable } = payload;
-  // return axios.post(`${COURSE_MODULE}/create`, {
-  //   name, type, intro, picture, school, cost, teacherId, teacherName, bought, manageable
-  // });
-  return Promise.resolve(
-    {
-      "code": 1,
-      "msg": "课程创建成功。",
-      "data": {
-        "id": 6,
-        "name": "测试课程",
-        "type": "初级",
-        "intro": "介绍",
-        "picture": "1.png",
-        "school": "NJU",
-        "createTime": "2021-03-13T02:23:30.817+00:00",
-        "cost": 10,
-        "teacherId": 1,
-        "teacherName": "刘钦",
-        "bought": false,
-        "manageable": true
-      }
-    }
-  );
+  const { name, type, intro, picture, school, cost, teacherId, teacherName, bought, manageable } = payload;
+  return axios.post(`${COURSE_MODULE}/create`, {
+    name, type, intro, picture, school, cost, teacherId, teacherName, bought, manageable
+  }).then(res => {
+    return res.data;
+  });
 }

src/api/courseWare.js

@@ -7,23 +7,10 @@ import { COURSE_WARE } from "./_prefix";
  * @returns 
  */
 export const getCourseWare = payload => {
-  // const { courseWareId, uid } = payload;
-  // return axios.get(`${COURSE_WARE}/${courseWareId}?uid=${uid}`);
-  return Promise.resolve(
-    {
-      "id": 2,
-      "courseId": 1,
-      "number": 1,
-      "title": "00 - Overview",
-      "fileName": null,
-      "fileType": null,
-      "fileSize": null,
-      "freeFlag": false,
-      "downloadFlag": true,
-      "availableFlag": false,
-      "uploadTime": "2020-12-18T02:00:00.000+00:00"
-    }
-  );
+  const { courseWareId, uid } = payload;
+  return axios.get(`${COURSE_WARE}/${courseWareId}?uid=${uid}`).then(res => {
+    return res.data;
+  });
 }
 
 /**
@@ -32,38 +19,10 @@ export const getCourseWare = payload => {
  * @returns 
  */
 export const getCourseWareByCourse = payload => {
-  // const { courseId, uid } = payload;
-  // return axios.get(`${COURSE_WARE}/course/${courseId}?uid=${uid}`);
-  return Promise.resolve(
-    [
-      {
-        "id": 2,
-        "courseId": 1,
-        "number": 1,
-        "title": "00 - Overview",
-        "fileName": "33c70532-551f-43a9-b18f-5bdf2d71b77d.png",
-        "fileType": "png",
-        "fileSize": "1.12 MB",
-        "freeFlag": false,
-        "downloadFlag": true,
-        "availableFlag": false,
-        "uploadTime": "2020-12-18T02:00:00.000+00:00"
-      },
-      {
-        "id": 3,
-        "courseId": 1,
-        "number": 1,
-        "title": "01 - LEC1",
-        "fileName": "33c70532-551f-43a9-b18f-5bdf2d71b77d.png",
-        "fileType": "png",
-        "fileSize": "1.12 MB",
-        "freeFlag": false,
-        "downloadFlag": true,
-        "availableFlag": false,
-        "uploadTime": "2020-12-18T02:00:00.000+00:00"
-      },
-    ]
-  );
+  const { courseId, uid } = payload;
+  return axios.get(`${COURSE_WARE}/course/${courseId}?uid=${uid}`).then(res => {
+    return res.data;
+  });
 }
 
 /**
@@ -72,29 +31,12 @@ export const getCourseWareByCourse = payload => {
  * @returns 
  */
 export const createCourseWare = payload => {
-  // const { courseId, number, title, fileName, fileType, fileSize, freeFlag, downloadFlag, availableFlag } = payload;
-  // return axios.post(`${COURSE_WARE}/create`, {
-  //   courseId, number, title, fileName, fileType, fileSize, freeFlag, downloadFlag, availableFlag
-  // });
-  return Promise.resolve(
-    {
-      "code": 1,
-      "msg": "课件创建成功",
-      "data": {
-        "id": 198,
-        "courseId": 1,
-        "number": 53,
-        "title": "测试课件",
-        "fileName": "123.pdf",
-        "fileType": "pdf",
-        "fileSize": "11 MB",
-        "freeFlag": false,
-        "downloadFlag": true,
-        "availableFlag": false,
-        "uploadTime": "2021-03-13T03:18:03.730+00:00"
-      }
-    }
-  );
+  const { courseId, number, title, fileName, fileType, fileSize, freeFlag, downloadFlag, availableFlag } = payload;
+  return axios.post(`${COURSE_WARE}/create`, {
+    courseId, number, title, fileName, fileType, fileSize, freeFlag, downloadFlag, availableFlag
+  }).then(res => {
+    return res.data;
+  });
 }
 
 /**
@@ -103,29 +45,12 @@ export const createCourseWare = payload => {
  * @returns 
  */
 export const updateCourseWare = payload => {
-  // const { id, courseId, number, title, fileName, fileType, fileSize, freeFlag, downloadFlag, availableFlag } = payload;
-  // return axios.post(`${COURSE_WARE}/update`, {
-  //   id, courseId, number, title, fileName, fileType, fileSize, freeFlag, downloadFlag, availableFlag
-  // });
-  return Promise.resolve(
-    {
-      "code": 1,
-      "msg": "课件更新成功",
-      "data": {
-        "id": 198,
-        "courseId": 1,
-        "number": 53,
-        "title": "测试课件abc",
-        "fileName": "123.pdf",
-        "fileType": "pdf",
-        "fileSize": "11 MB",
-        "freeFlag": false,
-        "downloadFlag": true,
-        "availableFlag": false,
-        "uploadTime": "2021-03-13T03:25:59.948+00:00"
-      }
-    }
-  );
+  const { id, courseId, number, title, fileName, fileType, fileSize, freeFlag, downloadFlag, availableFlag } = payload;
+  return axios.post(`${COURSE_WARE}/update`, {
+    id, courseId, number, title, fileName, fileType, fileSize, freeFlag, downloadFlag, availableFlag
+  }).then(res => {
+    return res.data;
+  });
 }
 
 /**
@@ -134,12 +59,7 @@ export const updateCourseWare = payload => {
  * @returns 
  */
 export const deleteCourseWare = courseWareId => {
-  // return axios.post(`${COURSE_WARE}/delete/${courseWareId}`);
-  return Promise.resolve(
-    {
-      "code": 1,
-      "msg": "课件删除成功",
-      "data": null
-    }
-  );
+  return axios.post(`${COURSE_WARE}/delete/${courseWareId}`).then(res => {
+    return res.data;
+  });
 }

src/api/file.js

@@ -1,17 +1,10 @@
 import axios from "axios";
 import { FILE_MODULE } from "./_prefix";
 
+export const FILE_BASE_PATH = "http://courselearning.seec.seecoder.cn/file";
+
 export const uploadFile = payload => {
-  // return axios.post(`${FILE_MODULE}/upload`, payload);
-  return Promise.resolve(
-    {
-      "code": 1,
-      "msg": "文件上传成功",
-      "data": {
-        "name": "33c70532-551f-43a9-b18f-5bdf2d71b77d.jpg",
-        "type": "jpg",
-        "size": "0.01 MB"
-      }
-    }
-  );
+  return axios.post(`${FILE_MODULE}/upload`, payload).then(res => {
+    return res.data;
+  });
 }

src/api/order.js

@@ -7,25 +7,12 @@ import { ORDER_MODULE } from "./_prefix";
  * @returns 
  */
 export const createOrder = payload => {
-  // const { courseId, courseName, cost, userId, status } = payload;
-  // return axios.post(`${ORDER_MODULE}/create`, {
-  //   courseId, courseName, cost, userId, status
-  // });
-  return Promise.resolve(
-    {
-      "code": 0,
-      "msg": "当前用户已经购买过此课程，或者有上一笔未支付的订单",
-      "data": {
-        "id": 1,
-        "cost": 1,
-        "courseId": 1,
-        "courseName": "软件工程与计算 I",
-        "createTime": "2021-03-13T07:50:23.000+00:00",
-        "userId": 2,
-        "status": 1
-      }
-    }
-  );
+  const { courseId, courseName, cost, userId, status } = payload;
+  return axios.post(`${ORDER_MODULE}/create`, {
+    courseId, courseName, cost, userId, status
+  }).then(res => {
+    return res.data;
+  });
 }
 
 /**
@@ -34,23 +21,10 @@ export const createOrder = payload => {
  * @returns 
  */
 export const updateOrder = payload => {
-  // const { orderId, orderStatus } = payload;
-  // return axios.post(`${ORDER_MODULE}/update?orderId=${orderId}&orderStatus=${orderStatus}`);
-  return Promise.resolve(
-    {
-      "code": 1,
-      "msg": "课程购买成功",
-      "data": {
-        "id": 3,
-        "cost": 1,
-        "courseId": 1,
-        "courseName": "软件工程与计算 I",
-        "createTime": "2021-03-13T08:08:02.000+00:00",
-        "userId": 2,
-        "status": 1
-      }
-    }
-  );
+  const { orderId, orderStatus } = payload;
+  return axios.post(`${ORDER_MODULE}/update?orderId=${orderId}&orderStatus=${orderStatus}`).then(res => {
+    return res.data;
+  });
 }
 
 /**
@@ -59,36 +33,7 @@ export const updateOrder = payload => {
  * @returns 
  */
 export const getOrdersByUser = uid => {
-  // return axios.get(`${ORDER_MODULE}/uid/${uid}`);
-  return Promise.resolve(
-    [
-      {
-        "id": 3,
-        "cost": 1,
-        "courseId": 1,
-        "courseName": "软件工程与计算 I",
-        "createTime": "2021-03-13T08:08:02.000+00:00",
-        "userId": 2,
-        "status": 1
-      },
-      {
-        "id": 1,
-        "cost": 1,
-        "courseId": 1,
-        "courseName": "软件工程与计算 I",
-        "createTime": "2021-03-13T08:08:02.000+00:00",
-        "userId": 2,
-        "status": 1
-      },
-      {
-        "id": 2,
-        "cost": 1,
-        "courseId": 1,
-        "courseName": "软件工程与计算 I",
-        "createTime": "2021-03-13T08:08:02.000+00:00",
-        "userId": 2,
-        "status": 1
-      }
-    ]
-  );
+  return axios.get(`${ORDER_MODULE}/uid/${uid}`).then(res => {
+    return res.data;
+  });
 }

src/api/user.js

@@ -8,24 +8,28 @@ import { USER_MODULE } from "./_prefix";
  */
 export const register = payload => {
   console.log(payload);
-  // const { uname, phone, password, picture, userRole = "STUDENT" } = payload;
-  // return axios.post(`${USER_MODULE}/register`, {
-  //   uname, phone, password, picture, userRole
-  // })
-  return Promise.resolve({
-    "code": 1,
-    "msg": "账号注册成功！",
-    "data": {
-      "id": 3,
-      "uname": "小张同学",
-      "phone": "102123456789",
-      "password": null,
-      "picture": "1.png",
-      "balance": 0,
-      "userRole": "STUDENT",
-      "createTime": "2021-03-13T01:45:48.246+00:00"
-    }
+  const { uname, phone, password, picture, userRole = "STUDENT" } = payload;
+  return axios.post(`${USER_MODULE}/register`, {
+    uname, phone, password, picture, userRole
+  }).then(res => {
+    return res.data;
   });
+
+  /** 前后端分离开发时 前端可以自己写简易的 mock  */
+  // return Promise.resolve({  
+  //   "code": 1,
+  //   "msg": "账号注册成功！",
+  //   "data": {
+  //     "id": 3,
+  //     "uname": "小张同学",
+  //     "phone": "102123456789",
+  //     "password": null,
+  //     "picture": "1.png",
+  //     "balance": 0,
+  //     "userRole": "STUDENT",
+  //     "createTime": "2021-03-13T01:45:48.246+00:00"
+  //   }
+  // });
 };
 
 /**
@@ -35,21 +39,9 @@ export const register = payload => {
  */
 export const login = payload => {
   console.log(payload);
-  // const { phone, password } = payload;
-  // return axios.post(`${USER_MODULE}/login`, { phone, password });
-  return Promise.resolve({
-    "code": 1,
-    "msg": "账号登陆成功！",
-    "data": {
-      "id": 2,
-      "uname": "小明",
-      "phone": "10212345678",
-      "password": null,
-      "picture": null,
-      "balance": 0,
-      "userRole": "TEACHER",
-      "createTime": "2020-12-18T02:00:00.000+00:00"
-    }
+  const { phone, password } = payload;
+  return axios.post(`${USER_MODULE}/login`, { phone, password }).then(res => {
+    return res.data;
   });
 }
 
@@ -60,24 +52,10 @@ export const login = payload => {
  */
 export const recharge = payload => {
   console.log(payload);
-  // const { userId, value } = payload;
-  // return axios.post(`${USER_MODULE}/recharge`, { userId, value });
-  return Promise.resolve(
-    {
-      "code": 1,
-      "msg": "充值成功",
-      "data": {
-        "id": 1,
-        "uname": "刘钦",
-        "phone": "10112345678",
-        "password": null,
-        "picture": null,
-        "balance": 50,
-        "userRole": "TEACHER",
-        "createTime": "2020-12-18T02:00:00.000+00:00"
-      }
-    }
-  );
+  const { userId, value } = payload;
+  return axios.post(`${USER_MODULE}/recharge`, { userId, value }).then(res => {
+    return res.data;
+  });
 }
 
 /**
@@ -87,17 +65,7 @@ export const recharge = payload => {
  */
 export const getUser = uid => {
   console.log(uid);
-  // return axios.get(`${USER_MODULE}/${uid}`);
-  return Promise.resolve(
-    {
-      "id": 2,
-      "uname": "小明",
-      "phone": "10212345678",
-      "password": null,
-      "picture": null,
-      "balance": 0,
-      "userRole": "STUDENT",
-      "createTime": "2020-12-18T02:00:00.000+00:00"
-    }
-  );
+  return axios.get(`${USER_MODULE}/${uid}`).then(res => {
+    return res.data;
+  });
 }

src/components/CourseItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card :color="courseColor" dark width="320" class="ma-4 pa-2">
+  <v-card :color="courseColor" dark width="380" height="260" class="ma-4 pa-2">
     <v-card-title class="headline">
       {{ courseName }}
       <v-chip
@@ -13,6 +13,7 @@
     </v-card-title>
 
     <v-card-text class="text">
+      【{{ type }}课程】
       {{ text }}
     </v-card-text>
 
@@ -23,7 +24,12 @@
       <v-btn text v-show="status === -1 || !hasLogin" @click="handlePeek"
         >浏览课程</v-btn
       >
-      <v-btn text v-show="status === -1" @click="buyCourse">购买课程</v-btn>
+      <v-btn
+        text
+        v-show="status === -1 || (status === 0 && !bought)"
+        @click="buyCourse"
+        >{{ cost === 0 ? "免费购买" : "购买课程" }}</v-btn
+      >
     </v-card-actions>
   </v-card>
 </template>

src/components/CourseItemTeacher.vue

@@ -1,10 +1,11 @@
 <template>
-  <v-card :color="courseColor" dark width="320" class="ma-4 pa-2">
+  <v-card :color="courseColor" dark width="380" height="260" class="ma-4 pa-2">
     <v-card-title class="headline">
       {{ courseName }}
     </v-card-title>
 
     <v-card-text class="text">
+      【{{ type }}课程】
       {{ text }}
     </v-card-text>
 
@@ -65,4 +66,9 @@ export default Vue.extend({
 });
 </script>
 
-<style scoped></style>
+<style scoped>
+.text {
+  height: 85px;
+  overflow: hidden;
+}
+</style>

src/views/Home.vue

@@ -192,7 +192,7 @@ export default {
       const typeMap = { primary: "初级", medium: "中级", advanced: "高级" };
       getCoursesByType({ uid: "", type: typeMap[type], page }).then((res) => {
         console.log(res);
-        this[type].totalPage = res.total;
+        this[type].totalPage = res.pages;
         this[type].list = res.list;
       });
     },
@@ -205,7 +205,7 @@ export default {
       }).then((res) => {
         console.log(res);
         this.searchCourse = res.list;
-        this.searchTotalPage = res.total;
+        this.searchTotalPage = res.pages;
       });
     },
   },

src/views/Login.vue

@@ -25,7 +25,11 @@
       </v-alert>
       <form class="pa-12 grey lighten-5 mt-10 form">
         <v-text-field v-model="phone" label="手机号码"></v-text-field>
-        <v-text-field v-model="password" label="密码"></v-text-field>
+        <v-text-field
+          v-model="password"
+          label="密码"
+          type="password"
+        ></v-text-field>
         <v-btn class="ml-0 mt-8 info" @click="handleLogin">
           登录
         </v-btn>
@@ -72,6 +76,9 @@ export default {
           window.localStorage.setItem("userRole", res.data.userRole);
           this.username = res.data.uname;
           this.showSuccessDialog = true;
+          setTimeout(() => {
+            this.showSuccessDialog = false;
+          }, 1000);
           if (res.data.userRole === "STUDENT") {
             setTimeout(() => {
               this.$router.push("/student");
@@ -83,8 +90,12 @@ export default {
             }, 800);
           }
         } else {
-          this.showFailDialog = true;
           this.msg = res.msg;
+          this.showFailDialog = true;
+
+          setTimeout(() => {
+            this.showFailDialog = false;
+          }, 1000);
         }
       });
     },

src/views/Register.vue

@@ -86,9 +86,15 @@ export default {
           window.localStorage.setItem("userRole", res.data.userRole);
           this.username = res.data.uname;
           this.showSuccessDialog = true;
+          setTimeout(() => {
+            this.showSuccessDialog = false;
+          }, 1000);
         } else {
-          this.showFailDialog = true;
           this.msg = res.msg;
+          this.showFailDialog = true;
+          setTimeout(() => {
+            this.showFailDialog = false;
+          }, 1000);
         }
       });
     },

src/views/student/CourseList.vue

@@ -73,11 +73,49 @@
       </v-row>
       <v-row>
         <v-pagination
+          class="mt-4"
           v-model="searchCurrentPage"
           :length="searchTotalPage"
           circle
         ></v-pagination>
       </v-row>
+
+      <v-row class="ma-12">
+        <v-divider></v-divider>
+      </v-row>
+
+      <!-- 已购课程 -->
+      <v-row class="mt-8 mb-2 ml-1">
+        <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 boughtCoursesList"
+          :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]"
+          @buy-course="showDialog"
+        >
+        </course-item>
+      </v-row>
     </v-container>
 
     <!-- 购买提示对话框 -->
@@ -129,7 +167,11 @@
 
 <script>
 import CourseItem from "@/components/CourseItem.vue";
-import { getCoursesByType, getCoursesByKey } from "@/api/course";
+import {
+  getCoursesByType,
+  getCoursesByKey,
+  getBoughtCourses,
+} from "@/api/course";
 import { createOrder } from "@/api/order";
 
 export default {
@@ -169,6 +211,8 @@ export default {
       searchCourse: [],
       searchTotalPage: 1,
       searchCurrentPage: 1,
+      //
+      boughtCoursesList: [],
     };
   },
   watch: {
@@ -219,6 +263,7 @@ export default {
         this.msg =
           (res.code === 1 ? "「购买成功」！" : "「购买失败」！") + res.msg;
         this.dialog2 = true;
+        this.getUserBoughtCourses();
       });
     },
 
@@ -227,7 +272,7 @@ export default {
       const typeMap = { primary: "初级", medium: "中级", advanced: "高级" };
       getCoursesByType({ uid, type: typeMap[type], page }).then((res) => {
         console.log(res);
-        this[type].totalPage = res.total;
+        this[type].totalPage = res.pages;
         this[type].list = res.list;
       });
     },
@@ -241,7 +286,14 @@ export default {
       }).then((res) => {
         console.log(res);
         this.searchCourse = res.list;
-        this.searchTotalPage = res.total;
+        this.searchTotalPage = res.pages;
+      });
+    },
+
+    getUserBoughtCourses() {
+      const uid = window.localStorage.getItem("userId");
+      getBoughtCourses(uid).then((res) => {
+        this.boughtCoursesList = res || [];
       });
     },
   },
@@ -251,6 +303,7 @@ export default {
       this.handleGetCoursesByType(1, t);
     });
     this.handleSearchCourse();
+    this.getUserBoughtCourses();
   },
 };
 </script>

src/views/student/CourseStudy.vue

@@ -195,6 +195,7 @@
 <script>
 import { getCourseWareByCourse } from "@/api/courseWare";
 import { getCourseById } from "@/api/course";
+import { FILE_BASE_PATH } from "@/api/file";
 
 export default {
   name: "CourseEdit",
@@ -255,14 +256,16 @@ export default {
     },
 
     handleDownloadFile() {
-      setTimeout(() => {
-        this.alertMsg = "下载成功！";
-        this.showAlert = true;
-        this.dialog = false;
-      }, 500);
-      setTimeout(() => {
-        this.showAlert = false;
-      }, 1500);
+      // downloadFile(this.currentFile.fileName).then((res) => {
+      //   console.log(res);
+      //   this.alertMsg = "下载成功！";
+      //   this.showAlert = true;
+      //   this.dialog = false;
+      //   setTimeout(() => {
+      //     this.showAlert = false;
+      //   }, 1000);
+      // });
+      window.open(`${FILE_BASE_PATH}/${this.currentFile.fileName}`);
     },
   },
 

src/views/teacher/CourseEdit.vue

@@ -13,6 +13,35 @@
         {{ alertMsg }}
       </v-alert>
 
+      <!-- dialog-->
+      <template>
+        <v-row justify="center">
+          <v-dialog v-model="deleteDialog" persistent max-width="600px">
+            <v-card>
+              <v-card-title>
+                <span class="headline">删除课件</span>
+              </v-card-title>
+              <v-card-text>
+                是否确认删除课件 {{ currentEditFile.name }} ?
+              </v-card-text>
+              <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="blue darken-1" text @click="dialog = false">
+                  取消
+                </v-btn>
+                <v-btn
+                  color="red darken-1"
+                  text
+                  @click="handleDeleteCourseWare"
+                >
+                  删除
+                </v-btn>
+              </v-card-actions>
+            </v-card>
+          </v-dialog>
+        </v-row>
+      </template>
+
       <!-- dialog-->
       <template>
         <v-row justify="center">
@@ -73,6 +102,11 @@
                       ></v-select>
                     </v-col>
                   </v-row>
+                  <v-row class="pa-2">
+                    <v-btn color="error" @click="showDeleteFileDialog">
+                      删除课件
+                    </v-btn>
+                  </v-row>
                 </v-container>
               </v-card-text>
               <v-card-actions>
@@ -196,6 +230,7 @@ import {
   getCourseWareByCourse,
   createCourseWare,
   updateCourseWare,
+  deleteCourseWare,
 } from "@/api/courseWare";
 import { getCourseById } from "@/api/course";
 
@@ -212,6 +247,7 @@ export default {
       showAlert: false,
       alertMsg: "",
       dialog: false,
+      deleteDialog: false,
       currentEditFile: {
         id: 0,
         courseId: 0,
@@ -299,6 +335,23 @@ export default {
         }, 1000);
       });
     },
+
+    showDeleteFileDialog() {
+      this.deleteDialog = true;
+    },
+
+    handleDeleteCourseWare() {
+      deleteCourseWare(this.currentEditFile.id).then((res) => {
+        this.alertMsg = res.msg;
+        this.deleteDialog = false;
+        this.dialog = false;
+        this.showAlert = true;
+        this.refreshFile();
+        setTimeout(() => {
+          this.showAlert = false;
+        }, 1000);
+      });
+    },
   },
 
   mounted() {

vue.config.js

@@ -1,3 +1,15 @@
 module.exports = {
-  transpileDependencies: ["vuetify"]
+  transpileDependencies: ["vuetify"],
+  devServer: {
+    proxy: {
+      "^/api": {
+        target: "http://courselearning.seec.seecoder.cn/",
+        ws: true,
+        changeOrigin: true,
+        pathRewrite: {
+        '^/api/': '/', // remove base path
+        },
+      }
+    } 
+  }
 };