front/src/views/videocourse/video_course.vue

<template >
  <div class="video_contianer">
    <el-card>
      <div slot="header" >
        <mx-search-group  justify="space-between" :span="6" v-model="form.sectionName" placeholder="请输入搜索内容" @search="searchVideo">
          <div class="spans">
          <span
            v-for="item in videoType"
            :key="item.code"
            class="pointer"
            :class="typeActive == item.code ? 'active_text' : ''"
            @click="toggleType(item.code)"
          >{{ item.label }}</span
          >
          </div>
        </mx-search-group>
<!--        <div class="search_btn" style="float: right; overflow: auto">-->
<!--          <input-->
<!--            v-model="form.sectionName"-->
<!--            @keyup.enter="searchVideo"-->
<!--            placeholder="请输入搜索内容"-->
<!--          />-->
<!--          <img src="@/assets/images/icon_search.png" @click="searchVideo" />-->
<!--        </div>-->
      </div>
      <div class="radio_contianer">
        <div style="margin-bottom: 16px">
          <span>科目</span>
          <el-radio-group v-model="form.course" @change="getGrade" size="mini">
            <el-radio-button
              :label="item.code"
              v-for="item in subjects"
              :key="item.code"
              >{{ item.label }}</el-radio-button
            >
          </el-radio-group>
        </div>
        <div style="margin-bottom: 16px">
          <span>年级</span>
          <el-radio-group v-model="form.grade" @change="getVersion" size="mini">
            <el-radio-button
              :label="item.code"
              v-for="item in grade"
              :key="item.code"
              >{{ item.label }}</el-radio-button
            >
          </el-radio-group>
        </div>
        <div style="margin-bottom: 16px" v-if="version.length > 0">
          <span>版本</span>
          <el-radio-group
            v-model="form.version"
            size="mini"
            @change="toggleCondition"
          >
            <el-radio-button
              :label="item.code"
              v-for="item in version"
              :key="item.code"
              >{{ item.label }}</el-radio-button
            >
          </el-radio-group>
        </div>
        <div style="margin-bottom: 16px" v-if="packList.length > 0">
          <span>分类</span>
          <el-radio-group
            v-model="form.pack"
            size="mini"
            @change="togglePack($event)"
          >
            <el-radio-button
              :label="item.value"
              v-for="item in packList"
              :key="item.code"
              >{{ item.label }}</el-radio-button
            >
          </el-radio-group>
        </div>
      </div>
    </el-card>
    <!-- 视频主体 -->
    <el-card class="video_content" v-if="videoList.length > 0">
      <el-row :span="24">
        <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>{{ item.section_name }}</p>
        </el-col>
      </el-row>
      <!-- 分页 -->
      <div class="split_page">
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="form.pageNum"
          :limit.sync="form.pageSize"
          :pageSizes="[16,32]"
          @pagination="getVideoList"
        />
      </div>
    </el-card>
    <evaluation-empty v-if="videoList.length == 0" />
  </div>
</template>
<script>
import {
  videoSubjects,
  videoType,
  videoGrades,
  videoVersions,
  packList,
  videoList,
  videoInfo,
} from "@/api/webApi/webVideo";
import MxSearchGroup from '@/components/MxSearch/mx-search-group'
import FormSearch from "@/components/formSearch";
export default {
  components: {MxSearchGroup },
  data() {
    return {
      input: "",
      typeActive: 0,
      videoType: [],
      form: {
        course: "", // 科目
        subject: "", // 大类
        grade: "", // 年级
        version: "", // 版本
        pageNum: 1,
        pageSize: 16,
        pack: 0,
        sectionName: "",
      },
      subjects: [], // 课程
      grade: [], // 年级
      version: [], //  版本
      packList: [], // 分类
      total: 0,
      packNewList: [],
      videoList: [], // 视频列表
    };
  },
  methods: {
    tohandle(code) {
      console.log(code);
    },
    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
        },
      });
    },
    searchVideo() {
      this.getVideoList();
    },
    // 获取视频课程大类
    getVideoType() {
      videoType().then((res) => {
        this.videoType = res.rows;
        if (res.rows.length > 0) {
          this.toggleType(res.rows[0].code);
        }
      });
    },
    //  切换大类获取科目
    toggleType(params) {
      this.typeActive = params;
      this.form.subject = params;
      let { subject } = this.form;
      // 获取科目
      videoSubjects({ subject }).then((res) => {
        this.subjects = res.rows;
        if (res.rows.length > 0) {
          this.form.course = res.rows[0].code;
        }
        // 获取年级
        this.getGrade();
      });
    },
    // 获取年级
    getGrade() {
      let { subject, course } = this.form;
      videoGrades({ subject, course }).then((res) => {
        console.log(JSON.stringify(res.rows));
        this.grade = res.rows;
        if (res.rows.length > 0) {
          this.form.grade = res.rows[0].code;
        }
        this.getVersion();
      });
    },
    // 获取版本
    getVersion() {
      let { subject, course, grade } = this.form;
      videoVersions({ subject, course, grade }).then((res) => {
        let resArr = res.rows.filter((item) => {
          return item != null;
        });
        if (resArr.length > 0) {
          this.version = resArr;
          this.form.version = this.version[0].code;
          this.getPack();
        } else {
          this.version = []
          this.form.version = ''
          this.videoList = []
        }
      });
    },
    // 获取包分类
    getPack() {
      packList(this.form).then((res) => {
        if (res.rows.length > 0) {
          this.form.pack = res.rows[0].value;
          this.packList = res.rows;
          this.getVideoList();
        } else {
          this.packList = []
          this.form.pack = ''
          this.videoList = []
        }
      });
    },
    // 获取视频列表
    getVideoList() {
      videoList(this.form).then((res) => {
        console.log(res);
        this.total = res.total;
        this.videoList = res.rows;
      });
    },
    togglePack(pack) {
      this.form.pack = pack;
      this.getVideoList();
    },
    toggleCondition(code) {
      this.form.version = code;
      this.getPack();
    }
  },
  created() {
    this.getVideoType();
  },
};
</script>
<style scoped>
.el-card {
  margin-bottom: 32px;
}

.video_contianer {
  padding: 20px;
}
.spans {
  margin-left: 10px;
}
.spans > span {
  height: 100%;
  display: inline-block;
  padding: 6px 19px;
  border-radius: 16px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  margin-right: 8px;
  border: 1px solid #eee;
}
.active_text {
  background: #47c6a2;
  color: white;
}
.search_btn {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.search_btn input {
  border: 0;
  height: 100%;
}
.search_btn input:focus {
  outline: 0;
}
.search_btn img {
  cursor: pointer;
}
.radio_contianer {
  margin-top: 24px;
}
.radio_contianer span {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #232323;
  line-height: 20px;
  height: 20px;
  margin-right: 16px;
}
.radio_contianer .el-radio-button {
  margin-right: 8px;
}
.video_content p {
  margin: 0;
  padding: 0;
  text-align: left;
  height: 27px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #343434;
  line-height: 20px;
  margin-top: 11px;
}
.video_item > img {
  cursor: pointer;
}
.video_content .el-col {
  margin-bottom: 42px;
}
.video_item > img {
  width: 100%;
  padding-right: 22px;
}
</style>
<style >
.radio_contianer .el-radio-button__inner {
  border-left: 1px solid #dcdfe6;
}
.radio_contianer .el-radio-button:first-child:last-child .el-radio-button__inner {
  border-radius: 16px;
}
.radio_contianer .el-radio-button .el-radio-button__inner {
  border-radius: 16px;
}
.split_page .el-pager > li {
  border-radius: 50%;
}
</style>