frontend/src/views/student/components/StudentCourseSlides.vue

<template>
  <tab-side-component>
    <back-title>{{course.name}}</back-title>
    <div class="sub-title">课件列表</div>
    <div class="no-content-warning" v-if="slides === null">
      <div class="no-content-warning-tip">加载中...</div>
    </div>
    <div class="no-content-warning" v-else-if="slides.length === 0">
      <div class="no-content-warning-tip">本课程尚无课件～</div>
    </div>
    <template v-for="slide of slides">
      <slide-card :key="slide.id" :slide="slide" :click-handler="handleSlideCardClick"></slide-card>
    </template>
    <c-button class="full-width secondary mt-16" @click="handleToManager">管理课程</c-button>
  </tab-side-component>
</template>

<script>
import TabSideComponent from '@/components/TabSideComponent'
import BackTitle from '@/components/BackTitle'
import SlideCard from '@/components/SlideCard'
import CButton from '@/components/CButton'
import { studentGetSlidesByCourse } from '@/server/slide'
import { SET_SLIDE_INFO } from '@/store/types/pdf-types'
import { SET_COURSE } from '@/store/types/main-types'
import { mapState } from 'vuex'

export default {
  components: { CButton, SlideCard, BackTitle, TabSideComponent },
  data () {
    return {
      slides: null
    }
  },
  watch: {
    $route () {
      this.init()
    }
  },
  computed: {
    ...mapState({
      course: state => state.main.courseInfo
    })
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      studentGetSlidesByCourse({ courseId: this.course.id, size: 100, sort: 'name' }).then(res => {
        this.slides = res.data
      }).catch(err => {
        this.$setErrorMessage('获取课程课件列表过程中：' + err.response.data.msg)
      })
    },
    handleSlideCardClick (slide) {
      this.$store.commit(SET_SLIDE_INFO, { slideInfo: slide })
      this.$router.push({ name: 'student-explore-slide-detail', params: { slideId: slide.id } })
    },
    handleToManager () {
      this.$store.commit(SET_COURSE, { courseInfo: this.course })
      this.$router.push({ name: 'student-course-detail', params: { courseId: this.course.id } })
    }
  }
}
</script>

<style lang="scss" scoped>
.c-input {
  margin-bottom: 24px;
}

.no-content-warning {
  height: unset;
}
</style>