front/src/views/videocourse/video_course.vue

<template>
  <div class="video_contianer">
    <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">
        </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 class="pointer iconfont icon-shoucang"></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 { videoList } from '@/api/webApi/webVideo'
import MxSearchGroup from '@/components/MxSearch/mx-search-group'
import MxCondition from '@/components/MxCondition/mx-condition'

export default {
  components: { MxSearchGroup, MxCondition },
  data() {
    return {
      pageForm: {
        pageNum: 1,
        pageSize: 16
      },
      sectionName: '',
      queryParams: {
        videoType: '',
        videoCourse: '',
        videoGrade: '',
        videoVersion: '',
        videoPack: ''
      },
      requireFields: ['videoType', 'videoCourse',
        'videoGrade',
        'videoVersion',
        'videoPack'
      ],
      total: 0,
      packNewList: [],
      videoList: [] // 视频列表
    }
  },
  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()
    },
    // 获取视频列表
    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>