tnbapp/src/views/home/Video.vue

<template>
  <div>
    <el-row>
      <el-col :md="12">
        <div class="category-btn">
          <el-button
            v-for="(item, index) in category"
            :key="index"
            type="primary"
            size="medium"
            :plain="currentCategory !== index"
            circle
            @click="chooseCategory(item, index)"
          >{{ item }}
          </el-button>
        </div>
      </el-col>
      <el-col :md="12">
        <!--猜您喜欢-->
<!--        <recommend />-->
      </el-col>
    </el-row>
    <el-row>
      <el-col :md="12">
        <div class="category-btn">
          <el-button
            v-for="(item, index) in childCategory"
            :key="index"
            type="primary"
            size="medium"
            :plain="currentChildCategory !== index"
            circle
            @click="getVideoList(item.id, index)"
          >{{ item.name }}
          </el-button>
        </div>
      </el-col>
    </el-row>
    <!--电影列表，与推荐列表-->
    <el-row id="movie-list">
      <!--电影列表-->
      <el-col :md="18">
        <el-col v-for="(video, index) in videoList" :key="index" :md="6" :sm="12" :xs="12">
          <video-card :video="video" />
        </el-col>
        <!--
          分页按钮：
          page-size：每页显示条数
          total：总条数
          hide-on-single-page： 页数为一时隐藏
        -->
        <el-col :span="24" class="pagination">
          <el-pagination
            background
            :small="screenWidth <= 768"
            hide-on-single-page
            layout="prev, next"
            :page-size="pageSize"
            :current-page="currentPage"
            :total="totalSize"
            @prev-click="prevClick"
            @next-click="nextClick"
          />
        </el-col>
      </el-col>

      <!--热播列表-->
      <el-col :md="6">
        <hot-list />
      </el-col>
    </el-row>
    <el-row v-if="showEmpty" class="not-result">
      <el-col :span="12" :offset="6">
        <img src="@/assets/img/icon/not-result.png">
        <div>没有视频数据</div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import VideoCard from 'components/card/VideoCard'
import Recommend from 'components/recommend/Recommend'
import HotList from 'components/hotlist/HotList'
import { videoCategory, videoPage} from '@/api/video'

export default {
  name: 'Video',
  components: { VideoCard, Recommend, HotList },
  data() {
    return {
      // 屏幕宽度, 为了控制分页条的大小
      screenWidth: document.body.clientWidth,
      currentPage: 1,
      pageSize: 12,
      totalPages: 0,
      totalSize: 0,
      videoList: [],
      prevId: '0',
      nextId: '0',
      categoryId: 2,
      currentIndex: 0,
      currentCategory: 0,
      currentChildCategory: 0,
      categoryMap: {
        Set: function(key, value) { this[key] = value },
        Get: function(key) { return this[key] },
        Contains: function(key) { return this.Get(key) !== null },
        Remove: function(key) { delete this[key] }
      },
      category: [],
      childCategory: [],
      showEmpty: true
    }
  },
  created() {
    document.title = '视频'

    videoCategory().then(res => {
      if (res.code === 0) {
        for (let i = 0; i < res.data.length; i++) {
          const name = res.data[i].name
          this.category.push(name)
          this.categoryMap.Set(name, res.data[i])
        }
      }
    })

    /*const query = this.$route.query
    var nextId = query.nextId
    if (nextId !== undefined) {
      this.nextId = nextId
    }

    var pageNumber = query.pageNumber
    if (pageNumber !== undefined) {
      const pn = parseInt(pageNumber)
      if (pn !== this.currentPage) {
        this.currentPage = pn
        this.$router.push({
          path: '/video',
          query: {
            pageNumber: this.currentPage,
            nextId: this.nextId
          }
        })
      }
    }*/

    this.videoPageWrapper(this.currentPage, this.prevId, this.nextId, this.categoryId)
  },
  mounted() {
    // 当窗口宽度改变时获取屏幕宽度
    window.onresize = () => {
      return () => {
        window.screenWidth = document.body.clientWidth
        this.screenWidth = window.screenWidth
      }
    }
  },
  methods: {
    prevClick(pageNumber) {
      this.currentPage = pageNumber
      this.videoPageWrapper(this.currentPage, this.prevId, this.prevId, this.categoryId)
      // 回到顶部
      scrollTo(0, 0)
    },
    nextClick(pageNumber) {
      this.currentPage = pageNumber
      this.videoPageWrapper(this.currentPage, this.prevId, this.nextId, this.categoryId)
      // 回到顶部
      scrollTo(0, 0)
    },
    videoPageWrapper(pageNumber, prevId, nextId, categoryId) {
      videoPage(pageNumber, prevId, nextId, categoryId).then(res => {
        if (res.code === 0) {
          const resData = res.data
          this.videoList = resData.list
          this.totalPages = resData.totalPages
          this.totalSize = resData.totalSize
          this.prevId = resData.prevId
          this.nextId = resData.nextId
        }
      })
    },
    chooseCategory(item, index) {
      this.currentCategory = index
      this.childCategory = this.categoryMap.Get(item).children
    },
    getVideoList(categoryId, index) {
      this.currentChildCategory = index
      this.categoryId = categoryId;
      this.prevId = 0
      this.nextId = 0
      this.currentPage = 1
      this.videoPageWrapper(this.currentPage, this.prevId, this.nextId, this.categoryId)
    }
  }
}
</script>

<style scoped>
#movie-list {
  padding-top: 15px;
  padding-left: 6%;
  padding-right: 6%;
}

.not-result {
  padding-top: 100px;
  padding-bottom: 100px;
  text-align: center;
}

.pagination {
  text-align: center;
  padding: 10px;
}

.category-btn {
  padding-left: 14%;
  padding-right: 6%;
  padding-top: 20px;
}
el-btn {
  background: #409eff;
}

/*处于手机屏幕时*/
@media screen and (max-width: 768px){
  #movie-list {
    padding-top: 8px;
    padding-left: 0.5%;
    padding-right: 0.5%;
  }

  .category-btn {
    padding-left: 0.5%;
    padding-right: 0.5%;
    padding-top: 3%;
    text-align: center;
  }
}
</style>