更新UI

.env

@@ -1,5 +1,8 @@
-# file serve
-VUE_APP_FILE_SERVE = '/GCLSFileServer/ServiceInterface'
+# FileServer
+VUE_APP_FileServer = '/GCLSFileServer/ServiceInterface'
 
-# WebSI
-VUE_APP_WEB_SI = '/GCLSLearnWebSI/ServiceInterface'
+# LearnWebSI
+VUE_APP_LearnWebSI = '/GCLSLearnWebSI/ServiceInterface'
+
+# BookWebSI
+VUE_APP_BookWebSI = '/GCLSBookWebSI/ServiceInterface'

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "cSpell.words": [
+    "GCLS",
+    "KHPJ",
+    "XYZP"
+  ]
+}

src/api/app.js

@@ -10,7 +10,7 @@ export function GetLanguageList() {
 
   return request({
     method: 'post',
-    url: process.env.VUE_APP_FILE_SERVE,
+    url: process.env.VUE_APP_FileServer,
     params
   });
 }
@@ -26,7 +26,7 @@ export function GetWordPack(Parameter) {
   };
   return request({
     method: 'post',
-    url: process.env.VUE_APP_FILE_SERVE,
+    url: process.env.VUE_APP_FileServer,
     data,
     transformRequest: [
       function (data) {

src/api/course.js

@@ -1,15 +1,67 @@
 import { request, getRequestParameter } from '@/utils/request';
+import qs from 'qs';
 
 /**
  * @description 创建课程
  * @param {Object} Parameter
  */
-export function createCourse(Parameter) {
-  let params = getRequestParameter('teaching-course_manager-CreateCourse', Parameter);
+export function CreateCourse(Parameter) {
+  let data = getRequestParameter('teaching-course_manager-CreateCourse', JSON.stringify(Parameter));
 
+  // 解决传数组的问题
   return request({
     method: 'post',
-    url: process.env.VUE_APP_WEB_SI,
+    url: process.env.VUE_APP_LearnWebSI,
+    data,
+    transformRequest: [
+      function (data) {
+        return qs.stringify(data);
+      }
+    ],
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
+    }
+  });
+}
+
+/**
+ * @description 得到课程信息（包含课节信息）
+ * @param {Object} id 课程ID
+ */
+export function GetCourseInfo_ContainCSItem(Parameter) {
+  let params = getRequestParameter(
+    'teaching-course_manager-GetCourseInfo_ContainCSItem',
+    Parameter
+  );
+  return request({
+    method: 'post',
+    url: process.env.VUE_APP_FileServer,
+    params
+  });
+}
+
+/**
+ * @description 添加教材到课程
+ * @param {Object} course_id 课程id book_id 教材ID
+ */
+export function AddBookToCourse(Parameter) {
+  let params = getRequestParameter('teaching-course_manager-AddBookToCourse', Parameter);
+  return request({
+    method: 'post',
+    url: process.env.VUE_APP_LearnWebSI,
+    params
+  });
+}
+
+/**
+ * @description 从课程移除教材
+ * @param {Object} course_id 课程ID book_id 教材ID
+ */
+export function RemoveBookFromCourse(Parameter) {
+  let params = getRequestParameter('teaching-course_manager-RemoveBookFromCourse', Parameter);
+  return request({
+    method: 'post',
+    url: process.env.VUE_APP_LearnWebSI,
     params
   });
 }

src/api/list.js

@@ -8,7 +8,37 @@ export function getMyOrgList() {
 
   return request({
     method: 'post',
-    url: process.env.VUE_APP_WEB_SI,
+    url: process.env.VUE_APP_LearnWebSI,
+    params
+  });
+}
+
+/**
+ * @description 分页查询教材列表
+ * @param {Object} Parameter 查询条件
+ */
+export function PageQueryBookList(Parameter) {
+  let params = getRequestParameter('book-book_manager-PageQueryBookList', Parameter);
+  return request({
+    method: 'post',
+    url: process.env.VUE_APP_BookWebSI,
+    params
+  });
+}
+
+/**
+ * @description 分页查询教材列表（为课程选择配套教材）
+ * @param {Object} Parameter 查询条件
+ * @returns
+ */
+export function PageQueryBookList_SelectBookForCourse(Parameter) {
+  let params = getRequestParameter(
+    'cominfo_query-book_query-PageQueryBookList_SelectBookForCourse',
+    Parameter
+  );
+  return request({
+    method: 'post',
+    url: process.env.VUE_APP_LearnWebSI,
     params
   });
 }

src/api/live.js

@@ -12,7 +12,7 @@ export function createEnterLiveRoomLink(Parameter) {
 
   return request({
     method: 'post',
-    url: process.env.VUE_APP_WEB_SI,
+    url: process.env.VUE_APP_LearnWebSI,
     params
   });
 }

src/api/table.js

@@ -9,7 +9,7 @@ export function getMyTaskListDateTeacher(Parameter) {
 
   return request({
     method: 'post',
-    url: process.env.VUE_APP_WEB_SI,
+    url: process.env.VUE_APP_LearnWebSI,
     params
   });
 }
@@ -23,7 +23,7 @@ export function getCSItemInfoBox(Parameter) {
 
   return request({
     method: 'post',
-    url: process.env.VUE_APP_WEB_SI,
+    url: process.env.VUE_APP_LearnWebSI,
     params
   });
 }
@@ -38,7 +38,7 @@ export function pageQueryMyCourseList(Parameter) {
 
   return request({
     method: 'post',
-    url: process.env.VUE_APP_WEB_SI,
+    url: process.env.VUE_APP_LearnWebSI,
     params
   });
 }

src/api/user.js

@@ -7,7 +7,7 @@ import { request, getRequestParameter } from '@/utils/request';
 export function login(Parameter) {
   return request({
     method: 'post',
-    url: process.env.VUE_APP_WEB_SI,
+    url: process.env.VUE_APP_LearnWebSI,
     params: {
       MethodName: 'login_control-Login',
       Parameter: Parameter
@@ -23,7 +23,7 @@ export function updateLanguageType(Parameter) {
   let params = getRequestParameter('login_control-UpdateLanguageType', Parameter);
   return request({
     method: 'post',
-    url: process.env.VUE_APP_WEB_SI,
+    url: process.env.VUE_APP_LearnWebSI,
     params
   });
 }

src/components/StepBar.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="step">
+    <div class="step-container">
+      <div v-for="(item, i) in stepList" :key="i">
+        <div :class="['step-container-wrapper', { active: i === stepNumber }]">
+          <span class="step-number">{{ i + 1 }}</span>
+          <span class="step-name">{{ stepName(i) }}</span>
+          <span v-if="i < 2" class="step-line" />
+        </div>
+        <div :class="['step-container-name', { active: i === stepNumber }]">{{ item.name }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'StepBar',
+  props: {
+    // 步骤条第几步，以 0 开始
+    stepNumber: {
+      default: 0,
+      type: Number
+    }
+  },
+  data() {
+    return {
+      stepList: [
+        {
+          name: '课程信息'
+        },
+        {
+          name: '选择教材'
+        },
+        {
+          name: '创建任务'
+        }
+      ]
+    };
+  },
+  methods: {
+    stepName(num) {
+      if (num === this.stepNumber) {
+        return '进行中';
+      }
+      if (num > this.stepNumber) {
+        return '等待中';
+      }
+      if (num < this.stepNumber) {
+        return '已完成';
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.step {
+  position: fixed;
+  top: $header-h + 1px;
+  left: 0;
+  z-index: 9;
+  width: 100%;
+  height: $step-h;
+  background-color: #fff;
+
+  &-container {
+    width: $basicWidth;
+    min-width: $basicWidth;
+    height: 100%;
+    margin: 0 auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &-wrapper {
+      color: #808080;
+
+      & .step-number {
+        border: 1px solid #808080;
+        padding: 9px 14px;
+        border-radius: 50%;
+      }
+
+      & .step-name {
+        margin-left: 16px;
+      }
+
+      & .step-line {
+        display: inline-block;
+        vertical-align: middle;
+        margin: 0 24px 0 48px;
+        width: 240px;
+        height: 1px;
+        background-color: #d9d9d9;
+      }
+
+      &.active {
+        color: #000;
+
+        & .step-number {
+          border-color: $basicColor;
+          color: #fff;
+          background-color: $basicColor;
+        }
+      }
+    }
+
+    &-name {
+      font-size: 14px;
+      margin-top: 18px;
+      padding-left: 54px;
+      color: #808080;
+
+      &.active {
+        color: #000;
+      }
+    }
+  }
+}
+</style>

src/icons/svg/dollar.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.4">
+<path d="M24 0H0V24H24V0Z" fill="white" fill-opacity="0.01"/>
+<path d="M12 1V23" stroke="#2C2C2C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.5 3C17.5 3 12.4853 3 10 3C7.5147 3 5.5 5.0147 5.5 7.5C5.5 9.9853 7.5147 12 10 12" stroke="#2C2C2C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.5 21C6.5 21 11.5147 21 14 21C16.4853 21 18.5 18.9853 18.5 16.5C18.5 14.0147 16.4853 12 14 12H10" stroke="#2C2C2C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

src/layouts/components/BreadCrumb.vue

@@ -64,7 +64,7 @@ export default {
       height: 100%;
       vertical-align: bottom;
       margin-right: 24px;
-      background-color: $buttonColor;
+      background-color: $basicColor;
     }
 
     .el-icon-arrow-right {

src/layouts/components/LayoutHeader.vue

@@ -131,7 +131,7 @@ export default {
         height: 48px;
 
         &-current-name {
-          color: $buttonColor;
+          color: $basicColor;
         }
       }
     }

src/router/index.js

@@ -49,6 +49,11 @@ const routes = [
       {
         path: '/create_course_step_table/course_info',
         component: () => import('@/views/teacher/create_course/step_table/CourseInfo')
+      },
+      {
+        path: '/create_course_step_table/select_book/:id',
+        name: 'SelectBook',
+        component: () => import('@/views/teacher/create_course/step_table/SelectBook')
       }
     ]
   },

src/styles/element-ui.scss

@@ -0,0 +1,36 @@
+.avatar-uploader {
+  display: inline-block;
+
+  & .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+
+    &:hover {
+      border-color: #409eff;
+    }
+  }
+
+  &-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 90px;
+    height: 90px;
+    line-height: 90px;
+    text-align: center;
+  }
+
+  & .avatar {
+    width: 90px;
+    height: 90px;
+    display: block;
+  }
+}
+
+.el-button.el-button--primary {
+  background-color: $basicColor;
+  border-color: $basicColor;
+  color: #fff;
+}

src/styles/index.scss

@@ -1,5 +1,6 @@
 @import './variables.scss';
 @import './mixin.scss';
+@import './element-ui.scss';
 
 body {
   height: 100%;
@@ -49,12 +50,10 @@ div:focus {
   outline: none;
 }
 
-.container {
-  width: 1000px;
-  margin: 0 auto;
-  height: 100%;
-}
-
 .t-right {
   text-align: right;
 }
+
+.tip {
+  color: #aaa;
+}

src/styles/mixin.scss

@@ -46,5 +46,9 @@
     &.is-background .el-pager li {
       background-color: #fff;
     }
+
+    &.is-background .el-pager li:not(.disabled).active {
+      background-color: $basicColor;
+    }
   }
 }

src/styles/variables.scss

@@ -1,5 +1,6 @@
 $header-h: 74px;
+$step-h: 124px;
 $basicWidth: 1200px;
 
 $bacColor: #f5f5f5;
-$buttonColor: #f90;
+$basicColor: #f90;

src/utils/validate.js

@@ -1,4 +1,5 @@
 /**
+ * @description 是否外链
  * @param {string} path
  * @returns {Boolean}
  */
@@ -7,17 +8,18 @@ export function isExternal(path) {
 }
 
 /**
- * @description 只允许输入数字
+ * @description 只允许输入两位小数
  * @param {String} value
  * @returns Number
  */
-export function onlyNumber(value) {
+export function twoDecimal(value) {
   if (!value) {
-    return 0;
+    return '';
   }
   let val = value;
   val = val.replace(/[^\d.]/g, ''); // 清除"数字"和"."以外的字符
   val = val.replace(/\.{2,}/g, '.'); // 只保留第一个 "." 清除多余的
   val = val.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
+  val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); // 只能输入两位小数
   return val;
 }

src/views/teacher/add_course/AddCourse.vue

@@ -54,18 +54,16 @@
       </el-form-item>
       <el-form-item label="开班学员数：">
         <el-input
-          v-model="form.student_count_start"
+          v-model.number="form.student_count_start"
           type="text"
           class="people-input"
-          @input="studentCountStartInput"
         ></el-input>
       </el-form-item>
       <el-form-item label="最大学员数：">
         <el-input
-          v-model="form.student_count_max"
+          v-model.number="form.student_count_max"
           type="text"
           class="people-input"
-          @input="studentCountMaxInput"
         ></el-input>
         <el-checkbox v-model="form.is_auto_close" class="student-checkbox">
           人数满足自动封班
@@ -96,9 +94,8 @@
 <script>
 import { updateWordPack } from '@/utils/i18n';
 import { fileUpload } from '@/api/app';
-import { onlyNumber } from '@/utils/validate';
 import { getMyOrgList } from '@/api/list';
-import { createCourse } from '@/api/course';
+import { CreateCourse } from '@/api/course';
 
 export default {
   data() {
@@ -140,10 +137,10 @@ export default {
     confirm() {
       this.$refs.form.validate(valid => {
         if (valid) {
-          createCourse(this.form).then(response => {
+          CreateCourse(this.form).then(response => {
             if (response.status === 1) {
               this.$message.success('创建课程成功！');
-              this.$router.push('/main');
+              this.$router.push('/');
             }
           });
         } else {
@@ -158,12 +155,6 @@ export default {
     addTeacher() {
       this.$message.info('该功能暂未实现！');
     },
-    studentCountStartInput(value) {
-      this.form.student_count_start = onlyNumber(value);
-    },
-    studentCountMaxInput(value) {
-      this.form.student_count_max = onlyNumber(value);
-    },
     beforeUpload(file) {
       let isImage = /^image/.test(file.type);
       if (!isImage) {
@@ -191,28 +182,35 @@ export default {
     margin-bottom: 15px;
     font-weight: 700;
   }
+
   &-cover {
     .el-form-item__label {
       @extend .line-middle;
     }
   }
+
   .el-form-item__label {
     font-size: 16px;
   }
+
   .name-input,
   .introduce-textarea {
     width: 530px;
   }
+
   .people-input,
   .mechanism-input {
     width: 185px;
   }
+
   .student-checkbox {
     margin-left: 28px;
   }
+
   .horizontal-bar {
     margin: 0 24px;
   }
+
   .el-button {
     width: 140px;
     height: 40px;
@@ -228,33 +226,4 @@ export default {
   vertical-align: text-bottom;
   margin-left: 38px;
 }
-
-.avatar-uploader {
-  display: inline-block;
-  & .el-upload {
-    border: 1px dashed #d9d9d9;
-    border-radius: 6px;
-    cursor: pointer;
-    position: relative;
-    overflow: hidden;
-    &:hover {
-      border-color: #409eff;
-    }
-  }
-
-  &-icon {
-    font-size: 28px;
-    color: #8c939d;
-    width: 90px;
-    height: 90px;
-    line-height: 90px;
-    text-align: center;
-  }
-
-  & .avatar {
-    width: 90px;
-    height: 90px;
-    display: block;
-  }
-}
 </style>

src/views/teacher/create_course/step_table/CourseInfo.vue

@@ -1,21 +1,224 @@
 <template>
   <div class="course-info">
-    <div class="step"></div>
+    <step-bar :step-number="0" />
+    <div class="course-info-container">
+      <el-form
+        ref="form"
+        :model="form"
+        :rules="formRules"
+        label-position="left"
+        label-width="120px"
+        hide-required-asterisk
+      >
+        <el-form-item label="课程封面" class="cover">
+          <el-upload
+            action="no"
+            class="avatar-uploader"
+            :http-request="upload"
+            :before-upload="beforeUpload"
+            :show-file-list="false"
+            accept="image/*"
+          >
+            <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar" />
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
+        </el-form-item>
+
+        <el-form-item label="课程名称" prop="name">
+          <el-input v-model="form.name" type="text" class="name-input" placeholder="请输入" />
+        </el-form-item>
+
+        <el-form-item label="课程介绍">
+          <el-input
+            v-model="form.intro"
+            type="textarea"
+            placeholder="请输入"
+            resize="none"
+            class="intro-input"
+            rows="4"
+          />
+        </el-form-item>
+
+        <el-form-item label="授课教师">
+          <el-button class="teacher" icon="el-icon-plus" circle />
+        </el-form-item>
+
+        <el-form-item label="课程周期">
+          <el-date-picker
+            v-model="form.date"
+            type="daterange"
+            range-separator="~"
+            value-format="yyyy-MM-dd"
+            unlink-panels
+          />
+        </el-form-item>
+
+        <el-form-item label="学生数量">
+          <el-input v-model.number.lazy="form.student_count_start" class="student-count" />
+          <el-checkbox v-model="form.is_auto_close">报满后自动封班</el-checkbox>
+        </el-form-item>
+
+        <el-form-item label="加入方式">
+          <el-radio v-model="form.student_enter_control_type" :label="0">公开</el-radio>
+          <el-radio v-model="form.student_enter_control_type" :label="1">需要申请</el-radio>
+        </el-form-item>
+
+        <el-form-item label="价格">
+          <el-input v-model="form.price" class="price" @input="price">
+            <svg-icon slot="prepend" icon-class="dollar" />
+          </el-input>
+        </el-form-item>
+
+        <el-form-item label="课后评价">
+          <el-radio v-model="form.is_enable_KHPJ" :label="true">开启</el-radio>
+          <el-radio v-model="form.is_enable_KHPJ" :label="false">关闭</el-radio>
+          <span class="tip">每节课后学生可对课程及老师进行打分及评价</span>
+        </el-form-item>
+
+        <el-form-item label="学生自评">
+          <el-radio v-model="form.is_enable_XYZP" :label="true">开启</el-radio>
+          <el-radio v-model="form.is_enable_XYZP" :label="false">关闭</el-radio>
+          <span class="tip">每节课后学生需对自己的课上表现进行打分及评价</span>
+        </el-form-item>
+
+        <el-form-item>
+          <el-button type="primary" class="next-step" @click.prevent="nextStep">
+            下一步<i class="el-icon-right" />
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
   </div>
 </template>
 
 <script>
-export default {};
+import StepBar from '@/components/StepBar';
+import { fileUpload } from '@/api/app';
+import { CreateCourse } from '@/api/course';
+import { twoDecimal } from '@/utils/validate';
+
+export default {
+  name: 'CourseInfo',
+  components: { StepBar },
+  data() {
+    return {
+      form: {
+        imageUrl: '',
+        picture_id: '',
+        name: '',
+        intro: '',
+        teacher_id_list: [],
+        date: [],
+        begin_date: '',
+        end_date: '',
+        student_count_start: '',
+        is_auto_close: false,
+        student_enter_control_type: 0,
+        price: '',
+        is_enable_KHPJ: false,
+        is_enable_XYZP: false
+      },
+      formRules: {
+        name: { required: true, message: '课程名称不能为空', trigger: 'blur' }
+      }
+    };
+  },
+  methods: {
+    nextStep() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.form.begin_date = this.form.date[0];
+          this.form.end_date = this.form.date[1];
+
+          CreateCourse(this.form).then(response => {
+            this.$message.success('创建课程成功！');
+            this.$router.push({ path: `/create_course_step_table/select_book/${response.id}` });
+          });
+        } else {
+          return false;
+        }
+      });
+    },
+    beforeUpload(file) {
+      let isImage = /^image/.test(file.type);
+      if (!isImage) {
+        this.$message.error('上传的文件不是图片，请重新上传！');
+      }
+      return isImage;
+    },
+    upload(file) {
+      fileUpload('Open', file).then(response => {
+        const { file_info_list } = response;
+        if (file_info_list.length > 0) {
+          const { file_url, file_id } = file_info_list[0];
+          this.form.imageUrl = file_url;
+          this.form.picture_id = file_id;
+        }
+      });
+    },
+    price(val) {
+      this.form.price = twoDecimal(val);
+    }
+  }
+};
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
+@import '~@/styles/mixin.scss';
+
 .course-info {
-  .step {
-    position: fixed;
-    top: $header-h + 1px;
-    width: 100%;
-    height: 156px;
+  @include container;
+
+  margin-top: $step-h;
+  margin-bottom: 20px;
+
+  &-container {
+    width: $basicWidth;
+    min-width: $basicWidth;
+    min-height: calc(100vh - #{$header-h} - #{$step-h} - 80px);
+    padding: 48px 64px;
     background-color: #fff;
+    border-radius: 8px;
+
+    .el-form {
+      .cover .el-form-item__label {
+        line-height: 107px;
+      }
+
+      .name-input {
+        width: 600px;
+      }
+
+      .intro-input {
+        width: 600px;
+      }
+
+      .teacher {
+        border-width: 0;
+        background-color: $basicColor;
+
+        .el-icon-plus {
+          color: #fff;
+        }
+      }
+
+      .student-count {
+        width: 120px;
+        margin-right: 28px;
+      }
+
+      .price {
+        width: 120px;
+
+        .el-input-group__prepend {
+          padding: 0 12.5px;
+        }
+      }
+
+      .next-step .el-icon-right {
+        margin-left: 12px;
+      }
+    }
   }
 }
 </style>

src/views/teacher/create_course/step_table/CreateTask.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="task">
+    <step-bar :step-number="2" />
+  </div>
+</template>
+
+<script>
+import StepBar from '@/components/StepBar';
+import { GetCourseInfo_ContainCSItem } from '@/api/course';
+
+export default {
+  name: 'CreateTask',
+  components: {
+    StepBar
+  },
+  data() {
+    return {
+      id: this.$route.params.id
+    };
+  },
+  created() {},
+  methods: {
+    getCourseInfo() {
+      GetCourseInfo_ContainCSItem().then(response => {});
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import '~@/styles/mixin.scss';
+
+.task {
+  @include container;
+}
+</style>

src/views/teacher/create_course/step_table/SelectBook.vue

@@ -0,0 +1,256 @@
+<template>
+  <div class="select-book">
+    <step-bar :step-number="1" />
+    <div class="select-book-container">
+      <div class="select-book-container-title">配套教材</div>
+      <div class="select-book-container-table">
+        <div class="search">
+          <div>
+            <el-input
+              v-model="search"
+              prefix-icon="el-icon-search"
+              placeholder="输入关键字搜索"
+              class="keyword"
+              @keyup.enter.native="queryBookList"
+            />
+            <!-- <el-button class="buy">去购买</el-button><span class="tip">只能添加已购买的资源</span> -->
+          </div>
+          <div>
+            <!-- <el-button type="info">最新</el-button> -->
+          </div>
+        </div>
+        <div class="book">
+          <div class="book-list">
+            <div v-for="item in book_list" :key="item.id" class="book-list-item">
+              <div
+                :class="['book-list-item-img', { selected: item.is_selected === 'true' }]"
+                @click="addOrRemoveBookToCourse($event, item.id)"
+              >
+                <img :src="item.picture_url" alt="book" />
+              </div>
+              <div class="book-list-item-name">{{ item.name }}</div>
+            </div>
+          </div>
+          <div class="book-bottom">
+            <el-pagination
+              layout="prev, pager, next"
+              :total="total_count"
+              :current-page="cur_page"
+              :page-size="page_capacity"
+              @prev-click="changePage"
+              @next-click="changePage"
+              @current-change="changePage"
+            />
+            <div>
+              <el-button class="prev-step"><i class="el-icon-back" />课程信息</el-button>
+              <el-button type="primary" class="next-step">
+                下一步<i class="el-icon-right" />
+              </el-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import StepBar from '@/components/StepBar';
+import { PageQueryBookList_SelectBookForCourse } from '@/api/list';
+import { AddBookToCourse, RemoveBookFromCourse } from '@/api/course';
+
+export default {
+  name: 'SelectBook',
+  components: {
+    StepBar
+  },
+  data() {
+    return {
+      id: this.$route.params.id,
+      search: '',
+      page_capacity: 14,
+      cur_page: 1,
+      total_count: 0,
+      book_list: []
+    };
+  },
+  created() {
+    this.queryBookList();
+  },
+  methods: {
+    queryBookList() {
+      let data = {
+        name: this.search,
+        course_id: this.id,
+        page_capacity: this.page_capacity,
+        cur_page: this.cur_page
+      };
+      PageQueryBookList_SelectBookForCourse(data).then(({ book_list, cur_page, total_count }) => {
+        this.cur_page = cur_page;
+        this.total_count = total_count;
+        this.book_list = book_list;
+      });
+    },
+    changePage(newPage) {
+      this.cur_page = newPage;
+      this.queryBookList();
+    },
+    addOrRemoveBookToCourse(e, book_id) {
+      let isSelected = false;
+      let classList;
+      if (e.target.classList.contains('book-list-item-img')) {
+        classList = e.target.classList;
+        isSelected = classList.contains('selected');
+      } else {
+        classList = e.target.parentElement.classList;
+        isSelected = classList.contains('selected');
+      }
+      let data = {
+        course_id: this.id,
+        book_id
+      };
+
+      if (isSelected) {
+        RemoveBookFromCourse(data).then(({ status }) => {
+          if (status === 1) {
+            this.$message.success('移除教材成功');
+            classList.remove('selected');
+          }
+        });
+      } else {
+        AddBookToCourse(data).then(({ status }) => {
+          if (status === 1) {
+            this.$message.success('为课程添加教材成功');
+            classList.add('selected');
+          }
+        });
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import '~@/styles/mixin.scss';
+
+.select-book {
+  @include container;
+
+  margin-top: $step-h;
+
+  &-container {
+    background-color: #fff;
+    width: $basicWidth;
+    min-width: $basicWidth;
+    height: calc(100vh - #{$header-h} - #{$step-h} - 64px);
+    padding: 24px 32px;
+    border-radius: 8px;
+
+    &-title {
+      font-size: 20px;
+      font-weight: 700;
+      padding-bottom: 24px;
+    }
+
+    &-table {
+      .search {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 24px;
+
+        .keyword {
+          width: 300px;
+        }
+
+        .buy {
+          color: $basicColor;
+          margin-left: 16px;
+        }
+
+        .tip {
+          margin-left: 16px;
+        }
+      }
+
+      .book {
+        height: calc(100vh - #{$header-h} - #{$step-h} - 224px);
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+
+        &-list {
+          display: flex;
+          justify-content: space-between;
+          flex-wrap: wrap;
+
+          &-item {
+            display: inline-block;
+            width: 120px;
+            min-height: 192px;
+            margin-right: 48px;
+
+            &-img {
+              border: 1px solid #c4c4c4;
+              width: 100%;
+              height: 160px;
+              cursor: pointer;
+              position: relative;
+
+              img {
+                width: 100%;
+                height: 100%;
+              }
+
+              &.selected {
+                border: 2px solid $basicColor;
+
+                &::after {
+                  content: '√';
+                  line-height: 30px;
+                  text-align: center;
+                  color: #fff;
+                  display: inline-block;
+                  background-color: $basicColor;
+                  width: 24px;
+                  height: 24px;
+                  border-top-left-radius: 5px;
+                  position: absolute;
+                  bottom: 0;
+                  right: 0;
+                }
+              }
+            }
+
+            &-name {
+              margin-top: 8px;
+              word-wrap: break-word;
+            }
+
+            &:nth-child(7n) {
+              margin-right: 0;
+            }
+
+            &:nth-child(n + 8) {
+              margin-top: 40px;
+            }
+          }
+        }
+
+        &-bottom {
+          display: flex;
+          justify-content: space-between;
+          align-items: flex-end;
+
+          .prev-step .el-icon-back {
+            margin-right: 12px;
+          }
+
+          .next-step .el-icon-right {
+            margin-left: 12px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/teacher/main/CurriculaList.vue

@@ -15,7 +15,7 @@
         </el-select>
       </div>
       <div class="curricula-search-button">
-        <el-button @click="queryMyCourseList">查询</el-button>
+        <el-button type="primary" @click="queryMyCourseList">查询</el-button>
       </div>
     </div>
     <div class="curricula-container">
@@ -45,8 +45,7 @@
       @next-click="changePage"
       @current-change="changePage"
       @size-change="changePageSize"
-    >
-    </el-pagination>
+    />
   </div>
 </template>
 
@@ -130,8 +129,6 @@ export default {
 
     &-button {
       .el-button {
-        background-color: $buttonColor;
-        color: #fff;
         width: 114px;
       }
     }

src/views/teacher/main/index.vue

@@ -91,7 +91,7 @@ export default {
       &.active {
         color: #fff;
         font-weight: 700;
-        background-color: $buttonColor;
+        background-color: $basicColor;
       }
     }
   }