［修改］学生课程页面

mock/serializers/user/UserSerializer.js

@@ -14,7 +14,7 @@ const makeId = require("../../util/makeId");
  * @param role
  * @returns {UserSerializerType}
  */
-module.exports = (role = "STUDENT") => {
+module.exports = (role = "TEACHER") => {
   return {
     id: makeId(),
     role: role,

src/api/course.js

@@ -25,6 +25,7 @@ export const getStudentCourses = () => {
  * @throws {StatusException} "课程名重复" | "课程选课码重复"
  */
 export const postTeacherCourse = ({ name, code }) => {
+  console.log(`name${name} code ${code}`);
   return request(`${COURSE_MODULE}/teacher`, {
     method: "POST",
     body: {

src/views/student/Home/index.vue

@@ -2,9 +2,14 @@
   <div>
     <section class="hero">
       <div class="hero-body">
-        <div class="container">
+        <div class="container hint">
           <h1 class="title">我的课程</h1>
           <h2 class="subtitle">展示我加入的全部课程</h2>
+          <img
+            class="newSubject"
+            src="../../../assets/white.png"
+            @click="isCardModalActive = true"
+          />
         </div>
       </div>
     </section>
@@ -37,3 +42,40 @@ export default {
   }
 };
 </script>
+<style lang="scss" scoped>
+@import "../../../assets/scss/app";
+.container.hint {
+  padding: 30px 20px 20px 30px;
+  /*background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);*/
+  /*TODO: 寻找质量更高的图片以防止对比度过低 */
+  background-image: url("../../../assets/login_background.png");
+  /*background-size: cover;*/
+  box-shadow: $default-shadow;
+  border-radius: $default-radius;
+  .title {
+    color: #ffffff;
+  }
+  .subtitle {
+    margin-top: -0.8em;
+    font-size: 1rem;
+    font-weight: bold;
+    color: #ffffff;
+  }
+}
+.newSubject {
+  height: 80px;
+  width: 80px;
+  position: absolute;
+  bottom: -40px;
+  left: 20px;
+  transition-property: all;
+  transition-duration: 0.2s;
+
+  &:hover {
+    height: 90px;
+    width: 90px;
+    bottom: -45px;
+    left: 15px;
+  }
+}
+</style>

src/views/teacher/Home/index.vue

@@ -8,7 +8,7 @@
           <img
             class="newSubject"
             src="../../../assets/white.png"
-            @click="isCardModalActive = true"
+            @click="newSubjectActive = true"
           />
         </div>
       </div>
@@ -23,7 +23,7 @@
       </div>
     </div>
     <!-- 成绩比例调控模态框 -->
-    <b-modal :active.sync="isCardModalActive" :width="320" scroll="keep">
+    <b-modal :active.sync="newSubjectActive" :width="320" scroll="keep">
       <div class="card">
         <div class="title">新建课程</div>
         <div class="content">
@@ -70,7 +70,7 @@
               placeholder="请输入选课码"
             ></b-input>
           </b-field>
-          <a class="button is-link" @click="isCardModalActive = false">新建</a>
+          <a class="button is-link" @click="newSubject">新建</a>
         </div>
       </div>
     </b-modal>
@@ -79,7 +79,7 @@
 
 <script>
 import Card from "@/components/Card";
-import { getTeacherCourses } from "@/api/course";
+import { getTeacherCourses, postTeacherCourse } from "@/api/course";
 import {
   required,
   minLength,
@@ -107,7 +107,7 @@ export default {
   data() {
     return {
       courses: [],
-      isCardModalActive: false,
+      newSubjectActive: false,
       username: "",
       coursename: "",
       coursenum: ""
@@ -115,6 +115,18 @@ export default {
   },
   mounted() {
     getTeacherCourses().then(value => (this.courses = value.data));
+  },
+  methods: {
+    //新建课程
+    newSubject() {
+      let subjectInfo = {
+        name: this.coursename,
+        code: this.coursenum
+      };
+      postTeacherCourse(subjectInfo).then(res => {
+        console.log(res);
+      });
+    }
   }
 };
 </script>
@@ -122,7 +134,6 @@ export default {
 @import "../../../assets/scss/app";
 .container.hint {
   padding: 30px 20px 20px 30px;
-
   /*background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);*/
   /*TODO: 寻找质量更高的图片以防止对比度过低 */
   background-image: url("../../../assets/login_background.png");