EAIFrontend/src/views/CourseSquare/component/Course/index.vue

<!--
  Description: 课程广场课程卡片展示组件，一行展示五个课程
  Author: BaiQi
  Created Date: 2024-6-30
-->
<template>
  <div class="course-content">
    <div class="course-header">
      <div class="header-title">
      {{ props.title }}
        <el-button class="header-more" link @click="handleMore">
          更多>>
        </el-button>
      </div>
    </div>
    <div class="course-items-container">
      <el-card v-for="item in getCoursesSlice()" :key="item.courseId" class="course-item active" @click="handleClick(item.courseId)">
        <div style="width: 200px; height: 120px">
          <img :src="convertImageUrl(item.courseImages[0], item.courseName)" :alt="item.courseName" class="course-item-img">
        </div>
        <div class="course-item-content">
          <div style="font-weight: bold; font-size: 16px; margin: 5px 0">{{item.courseName}}</div>
          <div style="line-height: 1.5;" class="collapsed" ><span style="color: rgba(0, 0, 0, 0.6)">课程描述：</span>{{item.description}}</div>
          <div style="line-height: 1.5; margin-top: 5px" class="collapsed" ><span  style="color: rgba(0, 0, 0, 0.6)">任课教师：</span>{{item.teacherNames.join(",")}}</div>
        </div>
      </el-card>
      <template v-if="getCoursesSlice().length < 5">

        <el-card v-for="item in 5 - getCoursesSlice().length" :key="item" class="course-item">
          <template #header>
            <template v-if="props.type === 'all'">
              敬请期待
            </template>
            <template v-if="props.type === 'my'">
              暂无课程
            </template>
          </template>
        </el-card>
      </template>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import {defineProps, onMounted, reactive, ref} from 'vue';
  import './index.scss'
  import useApis from "@/apis";
  import router from "@/router";
  import type {CourseQuery} from "@/types/query";
  import {useStore} from "@/store";
  import { convertImageUrl } from '@/utils/convertUtil';

  const apis = useApis()
  const store = useStore()
  const role:'teachers' | 'student' = store.user.role === 'STUDENT' ?   'student':'teachers';

  const props = defineProps<{
    title: string,
    type: 'all' | 'my'
  }>()

  // 课程数据
  const courses = reactive({
    course: [],
  })

  //只获取前五个课程
  const getCoursesSlice = () => {
    return courses.course.slice(0, 5)
  }

  const handleMore = () => {
    router.push({
      name: 'moreCourse',
      query: {
        title: props.title,
        type: props.type
      }
    }).then(() => {
      window.location.reload();
    })
  }

  // 处理课程卡片的点击事件
  const handleClick = (value:number) => {
    router.push(`/home/courseDetail/${value}`)
  }

  const query = reactive<CourseQuery>({
    courseId:null,
    teacherId:null,
    studentId:null,
    courseName:null,
    semester:null,
  })

  const fetchData = () => {
    if(props.type === 'all'){
      fetchAllCourse()
    } else if(props.type === 'my'){
      fetchCourseByUserId()
    }else{
      alert("获取课程失败")
    }
  }

  const fetchAllCourse = () => {
    apis.getAllCourse(query, 0, 10)
        .then((res: any) => {
          courses.course = res.data.data.records
        })
        .catch((err: any) => {
          console.error("错误信息",err);
        })
        .finally(() => {});
  }

  const fetchCourseByUserId = () => {
    if(role === 'student'){
      apis.getCourseByStudentId()
          .then((res: any) => {
            courses.course = res.data.data.records
          })
          .catch((err: any) => {
            console.error(err);
          })
          .finally(() => {});
    } else if(role === "teachers"){
      apis.getCourseByTeacherId()
          .then((res: any) => {
            courses.course = res.data.data.records
          })
          .catch((err: any) => {
            console.error(err);
          })
          .finally(() => {});
    }
  }

  onMounted(()=>{
    fetchData()
  })


</script>

<script lang="ts">
export default {
  name: "Course"
}
</script>

<style scoped>
.collapsed {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* Limit to 2 lines */
  max-height: 3em; /* Height for 2 lines of text */
  min-height: 3em;
}
</style>