update 课程列表

src/api/select.js

@@ -71,10 +71,10 @@ export function GetFinishStatusList_Course() {
 }
 
 /**
- * 得到学员课程状态列表
+ * 得到学员课程购买状态列表
  */
-export function GetStudentCourseStatusList() {
-  let params = getRequestParams('dict_manager-GetStudentCourseStatusList');
+export function GetStudentCourseBuyStatusList() {
+  let params = getRequestParams('dict_manager-GetStudentCourseBuyStatusList');
 
   return request({
     method: 'post',

src/router/index.js

@@ -47,7 +47,7 @@ const routes = [
       {
         path: '/main',
         name: 'Main',
-        component: () => import('@/views/teacher/main')
+        component: () => import('@/views/main')
       }
     ]
   },

src/views/course_details/index.vue

@@ -627,7 +627,7 @@ export default {
     },
     // 获取当前时间到指定时间的倒计时
     getBackTime() {
-      let targetTime = new Date(this.CourseData.end_date).getTime();
+      let targetTime = new Date(this.CourseData.begin_date).getTime();
       // 目标时间戳 - 当前时间戳 = 倒计时
       this.timer = setInterval(() => {
         let backTime = targetTime - new Date().getTime();

src/views/main/curricula_list/student.vue

@@ -0,0 +1,261 @@
+<template>
+  <div class="curricula-student">
+    <!-- 查询条件 -->
+    <div class="curricula-student-search">
+      <div class="curricula-student-search-condition">
+        <el-input v-model="search" prefix-icon="el-icon-search">
+          <el-button slot="append" @click="queryMyCourseList">搜索</el-button>
+        </el-input>
+      </div>
+      <div class="curricula-student-search-button">
+        <el-select v-model="teacher_id">
+          <el-option label="-请选择-" value="" />
+          <el-option
+            v-for="item in teacher_list"
+            :key="item.teacher_id"
+            :label="item.teacher_name"
+            :value="item.teacher_id"
+          />
+        </el-select>
+        <el-select v-model="finish_status">
+          <el-option label="-请选择-" :value="-1" />
+          <el-option
+            v-for="item in finish_status_list"
+            :key="item.finish_status"
+            :label="item.name"
+            :value="item.finish_status"
+          ></el-option>
+        </el-select>
+        <el-select v-model="buy_status">
+          <el-option label="-请选择-" :value="-1" />
+          <el-option
+            v-for="item in buy_status_list"
+            :key="item.status"
+            :label="item.name"
+            :value="item.status"
+          ></el-option>
+        </el-select>
+        <el-button type="primary" @click="queryMyCourseList">查询</el-button>
+      </div>
+    </div>
+    <!-- 课程列表 -->
+    <div class="curricula-student-container">
+      <div class="curricula-student-container-title">
+        <div>
+          <span class="title">课程列表</span>
+          <span class="tip"> 你也可以去 学习中心 选择更多的课程。 </span>
+        </div>
+      </div>
+      <div class="curricula-student-container-list">
+        <el-table :data="courseList">
+          <el-table-column prop="course_name" label="课程名称" width="300" />
+          <el-table-column label="课程教师" prop="teacher_name_desc" width="200" />
+          <el-table-column label="课程周期" width="260">
+            <template slot-scope="{ row }">
+              <i class="el-icon-date" /> {{ row.date_space_view_text }}
+            </template>
+          </el-table-column>
+          <el-table-column label="完成状态" width="140">
+            <template slot-scope="{ row }">
+              <span
+                class="status-name"
+                :style="{ 'background-color': statusColor(row.finish_status) }"
+              />
+              <span :style="{ color: statusColor(row.finish_status) }">
+                {{ row.finish_status_name }}
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column label="购买状态">
+            <template slot-scope="{ row }">
+              <span>{{ row.buy_status_name }}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+    <el-pagination
+      background
+      :page-sizes="[10, 20, 30, 40, 50]"
+      :page-size="page_capacity"
+      layout="prev, pager, next, total, sizes, jumper"
+      :total="total_count"
+      :current-page="cur_page"
+      @prev-click="changePage"
+      @next-click="changePage"
+      @current-change="changePage"
+      @size-change="changePageSize"
+    />
+  </div>
+</template>
+
+<script>
+import { updateWordPack } from '@/utils/i18n';
+import { PageQueryMyJoinCourseList_Student } from '@/api/table';
+import {
+  GetFinishStatusList_Course,
+  GetMyJoinCourseTeacherList_Student,
+  GetStudentCourseBuyStatusList
+} from '@/api/select';
+
+export default {
+  data() {
+    return {
+      search: '',
+      // 完成状态
+      finish_status_list: [],
+      finish_status: -1,
+      // 购买状态
+      buy_status_list: [],
+      buy_status: -1,
+      teacher_list: [],
+      teacher_id: '',
+      page_capacity: 10,
+      cur_page: 1,
+      total_count: 0,
+      courseList: []
+    };
+  },
+  created() {
+    this.queryMyCourseList();
+    this.initData();
+    updateWordPack({
+      word_key_list: ['Learn_New_Courses']
+    });
+  },
+  methods: {
+    initData() {
+      GetFinishStatusList_Course().then(({ finish_status_list }) => {
+        this.finish_status_list = finish_status_list;
+      });
+      GetStudentCourseBuyStatusList().then(({ status_list }) => {
+        this.buy_status_list = status_list;
+      });
+      GetMyJoinCourseTeacherList_Student().then(({ teacher_list }) => {
+        this.teacher_list = teacher_list;
+      });
+    },
+    changePage(newPage) {
+      this.cur_page = newPage;
+      this.queryMyCourseList();
+    },
+    changePageSize(pageSize) {
+      this.page_capacity = pageSize;
+      this.queryMyCourseList();
+    },
+    queryMyCourseList() {
+      let data = {
+        teacher_id: this.teacher_id,
+        finish_status: this.finish_status,
+        course_name: this.search,
+        page_capacity: this.page_capacity,
+        cur_page: this.cur_page,
+        buy_status: this.buy_status
+      };
+      PageQueryMyJoinCourseList_Student(data).then(({ course_list, total_count }) => {
+        this.courseList = course_list;
+        this.total_count = total_count;
+      });
+    },
+    statusColor(val) {
+      if (val === 50) {
+        return '#FF5050';
+      }
+      if (val === 51) {
+        return '#2ECE5B';
+      }
+      if (val === 52) {
+        return '#68CEFA';
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import '~@/styles/mixin.scss';
+
+.curricula-student {
+  @include pagination;
+
+  &-search {
+    display: flex;
+    justify-content: space-between;
+
+    &-condition {
+      > .el-input {
+        width: 528px;
+      }
+    }
+
+    &-button {
+      .el-button {
+        width: 114px;
+      }
+
+      .el-select {
+        width: 160px;
+        margin-right: 12px;
+      }
+    }
+  }
+
+  &-container {
+    width: 100%;
+    min-height: calc(100vh - 325px);
+    margin-top: 16px;
+    background-color: #fff;
+    border-radius: 8px;
+
+    &-title {
+      height: 88px;
+      padding: 24px 32px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .title {
+        font-size: 20px;
+        font-weight: 700;
+        margin-right: 36px;
+      }
+
+      .tip {
+        color: #aaa;
+      }
+
+      .create {
+        width: 138px;
+
+        div {
+          display: flex;
+          justify-content: space-around;
+        }
+      }
+    }
+
+    &-list {
+      @include list;
+
+      margin-top: 0;
+
+      .el-dropdown {
+        cursor: pointer;
+
+        .svg-icon {
+          font-size: 19px;
+        }
+      }
+
+      .status-name {
+        display: inline-block;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        margin-right: 8px;
+        margin-bottom: 1px;
+      }
+    }
+  }
+}
+</style>

src/views/teacher/main/CurriculaList.vue → src/views/main/curricula_list/teacher.vue

@@ -1,73 +1,46 @@
 <template>
-  <div class="curricula">
+  <div class="curricula-teacher">
     <!-- 查询条件 -->
-    <div class="curricula-search">
-      <div class="curricula-search-condition">
+    <div class="curricula-teacher-search">
+      <div class="curricula-teacher-search-condition">
         <el-input v-model="search" prefix-icon="el-icon-search">
           <el-button slot="append" @click="queryMyCourseList">搜索</el-button>
         </el-input>
       </div>
-      <div class="curricula-search-button">
-        <el-select v-if="userType === 'STUDENT'" v-model="teacher_id">
-          <el-option label="-请选择-" value="" />
-          <el-option
-            v-for="item in teacher_list"
-            :key="item.teacher_id"
-            :label="item.teacher_name"
-            :value="item.teacher_id"
-          />
-        </el-select>
+      <div class="curricula-teacher-search-button">
         <el-select v-model="finish_status">
           <el-option label="-请选择-" :value="-1" />
           <el-option
             v-for="item in finish_status_list"
-            :key="userType === 'TEACHER' ? item.finish_status : item.status"
+            :key="item.finish_status"
             :label="item.name"
-            :value="userType === 'TEACHER' ? item.finish_status : item.status"
+            :value="item.finish_status"
           ></el-option>
         </el-select>
         <el-button type="primary" @click="queryMyCourseList">查询</el-button>
       </div>
     </div>
     <!-- 课程列表 -->
-    <div class="curricula-container">
-      <div class="curricula-container-title">
+    <div class="curricula-teacher-container">
+      <div class="curricula-teacher-container-title">
         <div>
           <span class="title">课程列表</span>
-          <span v-if="userType === 'STUDENT'" class="tip">
-            你也可以去 学习中心 选择更多的课程。
-          </span>
         </div>
-        <div v-if="userType === 'TEACHER'">
+        <div>
           <el-button class="create" @click="$router.push('/create_course')">
             <div><svg-icon icon-class="create" /><span>创建课程</span></div>
           </el-button>
         </div>
       </div>
-      <div class="curricula-container-list">
+      <div class="curricula-teacher-container-list">
         <el-table :data="courseList">
-          <el-table-column
-            :prop="userType === 'TEACHER' ? 'name' : 'course_name'"
-            label="课程名称"
-            width="320"
-          />
-          <el-table-column
-            v-if="userType === 'STUDENT'"
-            label="教师"
-            prop="teacher_name_desc"
-            width="200"
-          />
+          <el-table-column prop="name" label="课程名称" width="320" />
           <el-table-column label="课程周期">
             <template slot-scope="{ row }">
-              <template v-if="userType === 'TEACHER'">
-                <i class="el-icon-date" /> {{ row.begin_date }} - {{ row.end_date }}
-              </template>
-              <template v-else>
-                <i class="el-icon-date" /> {{ row.date_space_view_text }}
-              </template>
+              <i class="el-icon-date" /> {{ row.begin_date }} - {{ row.end_date }}
             </template>
           </el-table-column>
-          <el-table-column v-if="userType === 'TEACHER'" fixed="right" width="80">
+          <el-table-column fixed="right" width="80">
             <template slot-scope="{ row }">
               <el-dropdown trigger="click">
                 <span class="el-dropdown-link">
@@ -87,12 +60,6 @@
               </el-dropdown>
             </template>
           </el-table-column>
-          <el-table-column v-if="userType === 'STUDENT'" label="状态">
-            <template slot-scope="{ row }">
-              <span class="status-name" :style="{ 'background-color': statusColor(row.status) }" />
-              <span :style="{ color: statusColor(row.status) }">{{ row.status_name }}</span>
-            </template>
-          </el-table-column>
         </el-table>
       </div>
     </div>
@@ -113,22 +80,15 @@
 
 <script>
 import { updateWordPack } from '@/utils/i18n';
-import { PageQueryMyCourseList, PageQueryMyJoinCourseList_Student } from '@/api/table';
-import {
-  GetFinishStatusList_Course,
-  GetMyJoinCourseTeacherList_Student,
-  GetStudentCourseStatusList
-} from '@/api/select';
+import { PageQueryMyCourseList } from '@/api/table';
+import { GetFinishStatusList_Course } from '@/api/select';
 
 export default {
-  name: 'CurriculaList',
   data() {
     return {
-      userType: this.$store.state.user.user_type,
       search: '',
       finish_status_list: [],
       teacher_list: [],
-      teacher_id: '',
       finish_status: -1,
       page_capacity: 10,
       cur_page: 1,
@@ -139,35 +99,16 @@ export default {
   created() {
     this.queryMyCourseList();
     this.getFinishStatusList_Course();
-    if (this.userType === 'STUDENT') {
-      this.getMyJoinCourseTeacherList_Student();
-    }
     updateWordPack({
       word_key_list: ['Learn_New_Courses']
     });
   },
   methods: {
     getFinishStatusList_Course() {
-      if (this.userType === 'TEACHER') {
-        GetFinishStatusList_Course().then(({ finish_status_list }) => {
-          this.finish_status_list = finish_status_list;
-        });
-      } else {
-        GetStudentCourseStatusList().then(({ status_list }) => {
-          this.finish_status_list = status_list;
-        });
-      }
-    },
-    getMyJoinCourseTeacherList_Student() {
-      GetMyJoinCourseTeacherList_Student().then(({ teacher_list }) => {
-        this.teacher_list = teacher_list;
+      GetFinishStatusList_Course().then(({ finish_status_list }) => {
+        this.finish_status_list = finish_status_list;
       });
     },
-    selectTab(status, i) {
-      this.status = status;
-      this.curTab = i;
-      this.search();
-    },
     changePage(newPage) {
       this.cur_page = newPage;
       this.queryMyCourseList();
@@ -177,30 +118,16 @@ export default {
       this.queryMyCourseList();
     },
     queryMyCourseList() {
-      if (this.userType === 'TEACHER') {
-        const queryCriteria = {
-          finish_status: this.finish_status,
-          name: this.search,
-          page_capacity: this.page_capacity,
-          cur_page: this.cur_page
-        };
-        PageQueryMyCourseList(queryCriteria).then(({ course_list, total_count }) => {
-          this.courseList = course_list;
-          this.total_count = total_count;
-        });
-      } else {
-        let data = {
-          teacher_id: this.teacher_id,
-          status_list: [this.finish_status],
-          course_name: this.search,
-          page_capacity: this.page_capacity,
-          cur_page: this.cur_page
-        };
-        PageQueryMyJoinCourseList_Student(data).then(({ course_list, total_count }) => {
-          this.courseList = course_list;
-          this.total_count = total_count;
-        });
-      }
+      const queryCriteria = {
+        finish_status: this.finish_status,
+        name: this.search,
+        page_capacity: this.page_capacity,
+        cur_page: this.cur_page
+      };
+      PageQueryMyCourseList(queryCriteria).then(({ course_list, total_count }) => {
+        this.courseList = course_list;
+        this.total_count = total_count;
+      });
     },
     statusColor(val) {
       if (val === 0) {
@@ -232,7 +159,7 @@ export default {
 <style lang="scss">
 @import '~@/styles/mixin.scss';
 
-.curricula {
+.curricula-teacher {
   @include pagination;
 
   &-search {
@@ -277,10 +204,6 @@ export default {
         margin-right: 36px;
       }
 
-      .tip {
-        color: #aaa;
-      }
-
       .create {
         width: 138px;
 
@@ -317,7 +240,7 @@ export default {
 }
 </style>
 
-<style scope>
+<style scoped>
 .el-dropdown-menu .svg-icon {
   margin-right: 8px;
 }

src/views/teacher/main/index.vue → src/views/main/index.vue

@@ -17,14 +17,16 @@
 
 <script>
 import TaskList from './TaskList';
-import CurriculaList from './CurriculaList';
+import CurriculaListStudent from './curricula_list/student';
+import CurriculaListTeacher from './curricula_list/teacher';
 import { updateWordPack } from '@/utils/i18n';
 
 export default {
   name: 'Main',
   components: {
     TaskList,
-    CurriculaList
+    CurriculaListStudent,
+    CurriculaListTeacher
   },
   data() {
     return {
@@ -45,7 +47,11 @@ export default {
   },
   computed: {
     currentTabComponent: function () {
-      return this.currentTab;
+      if (this.currentTab === 'TaskList') {
+        return this.currentTab;
+      }
+      let suffix = this.$store.state.user.user_type === 'TEACHER' ? 'Teacher' : 'Student';
+      return this.currentTab + suffix;
     }
   },
   created() {