|
|
@@ -0,0 +1,183 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <!--电影列表，与推荐列表-->
|
|
|
+ <el-row id="movie-list">
|
|
|
+ <el-col :md="4">
|
|
|
+ <el-card class="box-card" :body-style="{ paddingTop: '0px' }">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>视频分区</span>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <v-jstree :data="treeNode" @item-click="itemClick" />
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <!--电影列表-->
|
|
|
+ <el-col :md="20">
|
|
|
+ <el-col v-for="(video, index) in dataList" :key="index" :md="6" :sm="12" :xs="12">
|
|
|
+ <video-card :video="video" />
|
|
|
+ </el-col>
|
|
|
+ <el-col v-if="totalSize === 0" class="not-result" :md="6" :sm="12" :xs="12">
|
|
|
+ <img src="@/assets/img/icon/not-result.png">
|
|
|
+ <div>没有视频数据</div>
|
|
|
+ </el-col>
|
|
|
+ <!--
|
|
|
+ 分页按钮：
|
|
|
+ page-size：每页显示条数
|
|
|
+ total：总条数
|
|
|
+ hide-on-single-page： 页数为一时隐藏
|
|
|
+ -->
|
|
|
+ <el-col :span="24" class="pagination">
|
|
|
+ <el-pagination
|
|
|
+ :small="screenWidth <= 768"
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :page-size="pageSize"
|
|
|
+ :current-page="currentPage"
|
|
|
+ :total="totalSize"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ />
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import VideoCard from 'components/card/VideoCard'
|
|
|
+import VJstree from 'vue-jstree'
|
|
|
+
|
|
|
+import { videoCategory, categoryVideos } from '@/api/video'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'ShortVideo',
|
|
|
+ components: { VideoCard, VJstree },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 屏幕宽度, 为了控制分页条的大小
|
|
|
+ screenWidth: document.body.clientWidth,
|
|
|
+ currentPage: 1,
|
|
|
+ pageSize: 12,
|
|
|
+ totalPages: 0,
|
|
|
+ totalSize: 0,
|
|
|
+ dataList: [],
|
|
|
+ categoryId: 20,
|
|
|
+ treeNode: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ document.title = '短视频主页'
|
|
|
+
|
|
|
+ videoCategory().then(resp => {
|
|
|
+ if (resp.code === 0) {
|
|
|
+ this.treeNode = resp.data
|
|
|
+ } else {
|
|
|
+ this.$notify({
|
|
|
+ title: '提示',
|
|
|
+ message: resp.msg,
|
|
|
+ type: 'error',
|
|
|
+ duration: 3000
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }).catch(error => {
|
|
|
+ this.$notify({
|
|
|
+ title: '提示',
|
|
|
+ message: error.message,
|
|
|
+ type: 'warning',
|
|
|
+ duration: 3000
|
|
|
+ })
|
|
|
+ })
|
|
|
+ this.videoPageWrapper(this.categoryId, this.currentPage)
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // 当窗口宽度改变时获取屏幕宽度
|
|
|
+ window.onresize = () => {
|
|
|
+ return () => {
|
|
|
+ window.screenWidth = document.body.clientWidth
|
|
|
+ this.screenWidth = window.screenWidth
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleCurrentChange(currentPage) {
|
|
|
+ this.currentPage = currentPage
|
|
|
+ this.videoPageWrapper(this.categoryId, this.currentPage)
|
|
|
+ // 回到顶部
|
|
|
+ scrollTo(0, 0)
|
|
|
+ },
|
|
|
+ videoPageWrapper(categoryId, currentPage) {
|
|
|
+ categoryVideos(categoryId, currentPage).then(resp => {
|
|
|
+ if (resp.code === 0) {
|
|
|
+ const respData = resp.data
|
|
|
+ this.dataList = respData.list
|
|
|
+ this.totalPages = respData.totalPages
|
|
|
+ this.totalSize = respData.totalSize
|
|
|
+ } else {
|
|
|
+ this.$notify({
|
|
|
+ title: '提示',
|
|
|
+ message: resp.msg,
|
|
|
+ type: 'error',
|
|
|
+ duration: 3000
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }).catch(error => {
|
|
|
+ this.$notify({
|
|
|
+ title: '提示',
|
|
|
+ message: error.message,
|
|
|
+ type: 'warning',
|
|
|
+ duration: 3000
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ itemClick(node) {
|
|
|
+ const model = node.model
|
|
|
+ this.categoryId = model.value
|
|
|
+ /* if (model.children.length === 0) {
|
|
|
+ this.categoryId = model.value
|
|
|
+ }*/
|
|
|
+
|
|
|
+ this.videoPageWrapper(this.categoryId, this.currentPage)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+/*处于手机屏幕时*/
|
|
|
+@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;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+#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;
|
|
|
+}
|
|
|
+</style>
|
