GCLS_Page_Learn/src/views/main/curricula_list/student.vue

<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" @change="queryMyCourseList">
          <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">
            你也可以去 <a @click="goLearningCenter">学习中心</a> 选择更多的课程。
          </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="360" />
          <el-table-column label="课程周期" width="280">
            <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';
      }
    },
    goLearningCenter() {
      window.location.href = `/GCLS-LC/#/EnterSys`;
    }
  }
};
</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;

        > a {
          color: $basicColor;
        }
      }

      .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>