添加 ShortVideo 页面

src/components/layout/NavBar.vue

@@ -14,8 +14,8 @@
         </a>
       </el-col>
       <el-col :sm="1" class="right">
-        <a href="/audio" class="tit">
-          <span>音频</span>
+        <a href="/shortvideo" class="tit">
+          <span>短视频</span>
         </a>
       </el-col>
       <el-col :sm="1" class="right">

src/router/index.js

@@ -6,6 +6,7 @@ const Home = () => import('views/home/Index')
 const TimelineIndex = () => import('views/home/Timeline')
 const StatusPage = () => import('views/home/Status')
 const VideoIndex = () => import('views/home/Video')
+const ShortVideoIndex = () => import('views/home/ShortVideo')
 const VideoPage = () => import('views/home/VideoPage')
 const VideoList = () => import('views/home/VideoList')
 const LivePage = () => import('views/home/LivePage')
@@ -123,6 +124,11 @@ const routes = [
     name: 'VideoIndex',
     component: VideoIndex
   },
+  {
+    path: '/shortvideo',
+    name: 'ShortVideoIndex',
+    component: ShortVideoIndex
+  },
   {
     path: '/video/:id',
     name: 'VideoPage',

src/views/home/ShortVideo.vue

@@ -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>

src/views/home/Video.vue

@@ -2,7 +2,7 @@
   <div>
     <!--电影列表，与推荐列表-->
     <el-row id="movie-list">
-      <el-col :md="6">
+      <el-col :md="4">
         <el-card class="box-card" :body-style="{ paddingTop: '0px' }">
           <div slot="header" class="clearfix">
             <span>视频分区</span>
@@ -13,7 +13,7 @@
         </el-card>
       </el-col>
       <!--电影列表-->
-      <el-col :md="18">
+      <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>
@@ -60,7 +60,7 @@ export default {
       totalPages: 0,
       totalSize: 0,
       dataList: [],
-      categoryId: 20,
+      categoryId: 1,
       treeNode: []
     }
   },
@@ -129,12 +129,11 @@ export default {
       })
     },
     itemClick(node) {
+      this.currentPage = 1
+      this.dataList = []
+
       const model = node.model
       this.categoryId = model.value
-      /* if (model.children.length === 0) {
-        this.categoryId = model.value
-      }*/
-
       this.videoPageWrapper(this.categoryId, this.currentPage)
     }
   }