update Video.vue

src/views/home/Video.vue

@@ -34,7 +34,7 @@
     <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">
+        <el-col v-if="totalSize !== 0" v-for="(video, index) in dataList" :key="index" :md="6" :sm="12" :xs="12">
           <video-card :video="video" />
         </el-col>
         <!--
@@ -45,15 +45,12 @@
         -->
         <el-col :span="24" class="pagination">
           <el-pagination
-            background
             :small="screenWidth <= 768"
-            hide-on-single-page
-            layout="prev, next"
+            layout="prev, pager, next"
             :page-size="pageSize"
             :current-page="currentPage"
             :total="totalSize"
-            @prev-click="prevClick"
-            @next-click="nextClick"
+            @current-change="handleCurrentChange"
           />
         </el-col>
       </el-col>
@@ -63,7 +60,7 @@
         <hot-video />
       </el-col>
     </el-row>
-    <el-row v-if="showEmpty" class="not-result">
+    <el-row v-if="totalSize === 0" class="not-result">
       <el-col :span="12" :offset="6">
         <img src="@/assets/img/icon/not-result.png">
         <div>没有视频数据</div>
@@ -89,7 +86,7 @@ export default {
       pageSize: 12,
       totalPages: 0,
       totalSize: 0,
-      videoList: [],
+      dataList: [],
       prevId: '0',
       nextId: '0',
       categoryId: 1,
@@ -104,18 +101,17 @@ export default {
       },
       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(res.data[i])
-          this.categoryMap.Set(res.data[i].id, res.data[i])
+    videoCategory().then(resp => {
+      if (resp.code === 0) {
+        for (let i = 0; i < resp.data.length; i++) {
+          const name = resp.data[i].name
+          this.category.push(resp.data[i])
+          this.categoryMap.Set(resp.data[i].id, resp.data[i])
         }
 
         this.currentCategory = 1
@@ -124,7 +120,7 @@ export default {
       } else {
         this.$notify({
           title: '提示',
-          message: res.msg,
+          message: resp.msg,
           type: 'error',
           duration: 3000
         })
@@ -149,6 +145,12 @@ export default {
     }
   },
   methods: {
+    handleCurrentChange(currentPage) {
+      this.currentPage = currentPage
+      this.videoPageWrapper(this.categoryId, this.currentPage)
+      // 回到顶部
+      scrollTo(0, 0)
+    },
     prevClick(pageNumber) {
       this.currentPage = pageNumber
       this.videoPageWrapper(this.categoryId, this.prevId)
@@ -162,21 +164,18 @@ export default {
       scrollTo(0, 0)
     },
     videoPageWrapper(categoryId, nextId) {
-      categoryVideos(categoryId, nextId).then(res => {
-        if (res.code === 0) {
-          const resData = res.data
-          this.showEmpty = resData.list.length <= 0;
-
-          this.videoList = resData.list
-          this.totalPages = resData.totalPages
-          this.totalSize = resData.totalSize
-          this.nextId = resData.nextId
-
+      categoryVideos(categoryId, nextId).then(resp => {
+        if (resp.code === 0) {
+          const respData = resp.data
+          this.dataList = respData.list
+          this.totalPages = respData.totalPages
+          this.totalSize = respData.totalSize
+          this.nextId = respData.nextId
           this.prevId = nextId
         } else {
           this.$notify({
             title: '提示',
-            message: res.msg,
+            message: resp.msg,
             type: 'error',
             duration: 3000
           })
@@ -201,7 +200,7 @@ export default {
       this.nextId = 0
       this.currentPage = 1
 
-      this.videoList = []
+      this.dataList = []
       this.videoPageWrapper(this.categoryId, this.nextId)
     }
   }
@@ -209,6 +208,22 @@ export default {
 </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%;
@@ -231,23 +246,4 @@ export default {
   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>