front/src/views/videocourse/video_course.vue

<template>
  <div :class="{'video_contianer':!nestedMode}">
    <el-card>
      <mx-condition ref="condition" :query-params="queryParams" :require-fields="requireFields" @query="handleQuery"
                    @invalid="handleInvalidQuery"></mx-condition>
    </el-card>
    <!-- 视频主体 -->
    <el-card class="video_content" v-if="videoList.length > 0">
      <div slot="header">
        <mx-search-group justify="end" :span="6" v-model="sectionName" placeholder="请输入搜索内容" @search="searchVideo">
          <el-col v-if="isFrontTeacher" :span="18" style="margin-bottom: 0"><span class="f-warning">*收藏后方可发布作业</span>
          </el-col>
        </mx-search-group>
      </div>
      <el-row :gutter="20">
        <el-col :span="6" class="video_item" v-for="item in videoList" :key="item.id">
          <img :src="item.img" alt="" @click="
             toVideoDetail(
                item.pack_id,
                item.chapter_id,
                item.id,
                item.section_aliId,
                item.aliIdType
              )
            "
          />
          <p class="fx-row jc-between ai-center">
            <span class="text-ellipsis"> {{ item.section_name }} </span>
            <!-- 老师才能收藏 -->
            <span v-if="role" @click="toCollect(item)" class="pointer iconfont icon-shoucang"
                  :class="{'f-primary':item.isCollect}"></span>
          </p>
        </el-col>
      </el-row>
      <!-- 分页 -->
      <div class="split_page">
        <pagination v-show="total > 0" :total="total" :page.sync="pageForm.pageNum" :limit.sync="pageForm.pageSize"
                    :pageSizes="[16,32]" @pagination="getVideoList"/>
      </div>
    </el-card>
    <evaluation-empty v-if="videoList.length == 0"/>
  </div>
</template>
<script>
import { collectVideoCourse, videoList } from '@/api/webApi/webVideo'
import MxSearchGroup from '@/components/MxSearch/mx-search-group'
import MxCondition from '@/components/MxCondition/mx-condition'
import { checkRole } from '@/utils/permission'
import { mapGetters } from 'vuex'

export default {
  name: 'video-course',
  components: { MxSearchGroup, MxCondition },
  props: { 'nestedMode': { type: Boolean, default: false } },
  data() {
    return {
      pageForm: {
        pageNum: 1,
        pageSize: 16
      },
      role: checkRole(['frontTeacher', 'frontHeadteacher']),
      sectionName: '',
      queryParams: {
        videoType: '',
        videoCourse: '',
        videoGrade: '',
        videoVersion: '',
        videoPack: ''
      },
      requireFields: [
        'videoType',
        'videoCourse',
        'videoGrade',
        'videoVersion',
        'videoPack'
      ],
      total: 0,
      packNewList: [],
      videoList: [] // 视频列表
    }
  },
  computed: {
    ...mapGetters(['isFrontTeacher'])
  },
  methods: {
    handleInvalidQuery() {

    },
    toVideoDetail(id, chapter_id, childrenId, section_aliId, aliIdType) {
      this.$router.push({
        path: '/video_course/detail', query: {
          packId: id,
          chapter_id: chapter_id,
          childrenId: childrenId,
          section_aliId,
          aliIdType: aliIdType
        }
      })
    },
    handleQuery() {
      this.getVideoList()
    },
    searchVideo() {
      this.getVideoList()
    },
    toCollect(item) {
      collectVideoCourse({
        isCollect: !item.isCollect,
        id: item.id
      }).then(res => {
        item.isCollect = !item.isCollect
      }).catch(_ => {

      })
    },
    // 获取视频列表
    getVideoList() {
      videoList({
        course: this.queryParams.videoCourse, // 科目
        subject: this.queryParams.videoType, // 大类
        grade: this.queryParams.videoGrade, // 年级
        version: this.queryParams.videoVersion, // 版本
        pack: this.queryParams.videoPack,
        ...this.pageForm,
        sectionName: this.sectionName
      }).then((res) => {
        this.total = res.total
        this.videoList = res.rows
      })
    }
  }
}
</script>
<style scoped>
.el-card {
  margin-bottom: 32px;
}

.video_contianer {
  padding: 20px;
}

.video_item > img {
  cursor: pointer;
}

.video_content .el-col {
  margin-bottom: 42px;
}

.video_item {
  border-radius: 4px;
}

.video_item > img {
  width: 100%;
}


.video_item > p {
  padding: 5px 10px;
  box-shadow: 0px 1px 4px 0px rgba(47, 78, 154, 0.14);
}
</style>