SEEC-Portal-Front/src/views/CoursePage/CoursePage.vue

<template>
  <el-row id="course-page-body">
    <el-col :span="3">
      <el-menu background-color="#f8f9fb" default-active="1" style="position: fixed;"
               @select="handleSelect">
        <el-menu-item index="0">
          <el-icon>
            <Back/>
          </el-icon>
          <span style="padding-left: 20px">返回首页</span>
        </el-menu-item>
        <el-menu-item index="1">
          <el-icon>
            <Folder/>
          </el-icon>
          <span style="padding-left: 20px">全部课程</span>
        </el-menu-item>
        <el-menu-item index="2">
          <el-icon>
            <FolderChecked/>
          </el-icon>
          <span style="padding-left: 20px">我的课程</span>
        </el-menu-item>
      </el-menu>
    </el-col>
    <el-col :span="1"/>
    <el-col :span="18">
      <el-card>
        <template #header>
          <span style="font-weight: bold; font-size: larger">
            {{ activeName }}
          </span>
        </template>
        <div v-if="this.activeIndex === '1'" class="course-page-main">
          <CourseCard v-for="course in courses_all" :key="course.id" :courseVO="course"/>
        </div>
        <div v-if="this.activeIndex === '2' && isStudent" class="course-page-main">
          <CourseCard v-for="course in courses_my" :key="course.id" :courseVO="course"/>
        </div>
        <!--todo-->
        <div v-if="this.activeIndex === '2' && isTeacher">
          教师请前往
          <span style="cursor: pointer;color: red"
                @click="$router.push('/manage')">管理页面</span>
          查看相关课程。
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import { Back, Folder, FolderChecked } from "@element-plus/icons-vue";
import CourseCard from "@/components/CourseCard";

export default {
  name: "CoursePage",
  components: { FolderChecked, Folder, Back, CourseCard },
  data() {
    return {
      activeIndex: "1",
      courses_all: [],
      courses_my: [],
    };
  },
  computed: {
    activeName() {
      if (this.activeIndex === "1") {
        return "全部课程";
      } else {
        return "我的课程";
      }
    },
    isTeacher() {
      return this.$store.getters.isTeacher;
    },
    isStudent() {
      return this.$store.getters.isStudent;
    },
  },

  mounted() {
    this.$apis.getAllCourses().then(res => {
      this.courses_all = res.data.data;
    });
    if (this.isStudent) {
      if (this.$store.state.user.token) {
        this.courses_my = this.$apis.getStudentCourses().then(res => {
          this.courses_my = res.data.data;
        });
      }
    }
  },

  methods: {
    handleSelect(index) {
      if (index === "0") {
        this.$router.push("portal");
      }
      this.activeIndex = index;
    },
  },
};
</script>

<style scoped>
#course-page-body {
  margin: 40px 60px 80px 60px;
  min-height: calc(100vh - 340px);
  position: relative;
}

.course-page-main {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 20px;
}
</style>