|
|
@@ -1,40 +1,10 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <el-row>
|
|
|
- <el-col :md="12">
|
|
|
- <div class="category-btn">
|
|
|
- <el-button
|
|
|
- v-for="(item, index) in category"
|
|
|
- :key="index"
|
|
|
- type="info"
|
|
|
- size="mini"
|
|
|
- :plain="currentCategory !== item.id"
|
|
|
- @click="chooseCategory(item)"
|
|
|
- >{{ item.name }}
|
|
|
- </el-button>
|
|
|
- </div>
|
|
|
- </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="warning"
|
|
|
- size="mini"
|
|
|
- :plain="currentChildCategory !== item.id"
|
|
|
- @click="getVideoList(item.id)"
|
|
|
- >{{ item.name }}
|
|
|
- </el-button>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
<!--电影列表，与推荐列表-->
|
|
|
<el-row id="movie-list">
|
|
|
<!--电影列表-->
|
|
|
<el-col :md="18">
|
|
|
- <el-col v-if="totalSize !== 0" v-for="(video, index) in dataList" :key="index" :md="6" :sm="12" :xs="12">
|
|
|
+ <el-col v-for="(video, index) in dataList" v-if="totalSize !== 0" :key="index" :md="6" :sm="12" :xs="12">
|
|
|
<video-card :video="video" />
|
|
|
</el-col>
|
|
|
<!--
|
|
|
@@ -57,6 +27,7 @@
|
|
|
|
|
|
<!--热播列表-->
|
|
|
<el-col :md="6">
|
|
|
+ <v-jstree :data="treeNode" whole-row @item-click="itemClick" />
|
|
|
<hot-video />
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
@@ -72,12 +43,13 @@
|
|
|
<script>
|
|
|
import VideoCard from 'components/card/VideoCard'
|
|
|
import HotVideo from '@/components/card/HotVideo'
|
|
|
+import VJstree from 'vue-jstree'
|
|
|
|
|
|
-import { videoCategory, categoryVideos} from '@/api/video'
|
|
|
+import { videoCategory, categoryVideos } from '@/api/video'
|
|
|
|
|
|
export default {
|
|
|
name: 'Video',
|
|
|
- components: { VideoCard, HotVideo },
|
|
|
+ components: { VideoCard, HotVideo, VJstree },
|
|
|
data() {
|
|
|
return {
|
|
|
// 屏幕宽度, 为了控制分页条的大小
|
|
|
@@ -88,16 +60,7 @@ export default {
|
|
|
totalSize: 0,
|
|
|
dataList: [],
|
|
|
categoryId: 20,
|
|
|
- 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: [],
|
|
|
+ treeNode: []
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
@@ -105,14 +68,7 @@ export default {
|
|
|
|
|
|
videoCategory().then(resp => {
|
|
|
if (resp.code === 0) {
|
|
|
- for (let i = 0; i < resp.data.length; i++) {
|
|
|
- this.category.push(resp.data[i])
|
|
|
- this.categoryMap.Set(resp.data[i].id, resp.data[i])
|
|
|
- }
|
|
|
-
|
|
|
- this.currentCategory = 1
|
|
|
- this.childCategory = this.categoryMap.Get(this.currentCategory).children
|
|
|
- this.currentChildCategory = 19
|
|
|
+ this.treeNode = resp.data
|
|
|
} else {
|
|
|
this.$notify({
|
|
|
title: '提示',
|
|
|
@@ -171,15 +127,8 @@ export default {
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
- chooseCategory(item) {
|
|
|
- this.currentCategory = item.id
|
|
|
- this.childCategory = this.categoryMap.Get(item.id).children
|
|
|
- },
|
|
|
- getVideoList(categoryId) {
|
|
|
- this.currentChildCategory = categoryId
|
|
|
- this.categoryId = categoryId;
|
|
|
- this.currentPage = 1
|
|
|
- this.dataList = []
|
|
|
+ itemClick(node) {
|
|
|
+ this.categoryId = node.model.value
|
|
|
this.videoPageWrapper(this.categoryId, this.currentPage)
|
|
|
}
|
|
|
}
|
