update

src/api/video.js

@@ -33,8 +33,9 @@ export function similarVideo(videoId) {
 }
 
 // 视频分页接口
-export function videoPage(pageNumber, lastId) {
-  return get(videoApi.videoPageApi + '?pageNumber=' + pageNumber + '&lastId=' + lastId)
+export function videoPage(pageNumber, prevId, nextId, categoryId) {
+  return get(videoApi.videoPageApi +
+    '?pageNumber=' + pageNumber + '&prevId=' + prevId + '&nextId=' + nextId + '&categoryId=' + categoryId)
 }
 
 // 视频详情接口

src/views/home/Video.vue

@@ -4,14 +4,14 @@
       <el-col :md="12">
         <div class="category-btn">
           <el-button
-            v-for="(item, index) in videoCategory"
+            v-for="(item, index) in category"
             :key="index"
             type="primary"
             size="medium"
-            :plain="currentIndex !== index"
+            :plain="currentCategory !== index"
             circle
-            @click="btnClick(item.cid, index)"
-          >{{ item.cname }}
+            @click="chooseCategory(item, index)"
+          >{{ item }}
           </el-button>
         </div>
       </el-col>
@@ -20,18 +20,18 @@
         <recommend />
       </el-col>
     </el-row>
-    <el-row v-if="false">
+    <el-row>
       <el-col :md="12">
         <div class="category-btn">
           <el-button
-            v-for="(item, index) in videoCategory"
+            v-for="(item, index) in childCategory"
             :key="index"
             type="primary"
             size="medium"
-            :plain="currentIndex !== index"
+            :plain="currentChildCategory !== index"
             circle
-            @click="btnClick(item.cid, index)"
-          >{{ item.cname }}
+            @click="getVideoList(item.id, index)"
+          >{{ item.name }}
           </el-button>
         </div>
       </el-col>
@@ -54,11 +54,12 @@
             background
             :small="screenWidth <= 768"
             hide-on-single-page
-            layout="prev, pager, next"
+            layout="prev, next"
             :page-size="pageSize"
             :current-page="currentPage"
-            :total="totalPages"
-            @current-change="handleCurrentChange"
+            :total="totalSize"
+            @prev-click="prevClick"
+            @next-click="nextClick"
           />
         </el-col>
       </el-col>
@@ -87,28 +88,40 @@ export default {
       currentPage: 1,
       pageSize: 12,
       totalPages: 0,
+      totalSize: 0,
       videoList: [],
-      lastId: '0',
+      prevId: '0',
+      nextId: '0',
+      categoryId: 2,
       currentIndex: 0,
-      videoCategory: [
-        { cname: '全部', cid: 11010 },
-        { cname: '电影', cid: 11011 },
-        { cname: '音乐', cid: 11012 }
-      ]
+      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: []
     }
   },
   created() {
     document.title = '视频'
-
-    this.currentPage = 1
     videoCategory().then(res => {
-      console.log(res.data)
+      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 lastId = query.lastId
-    if (lastId !== undefined) {
-      this.lastId = lastId
+    /*const query = this.$route.query
+    var nextId = query.nextId
+    if (nextId !== undefined) {
+      this.nextId = nextId
     }
 
     var pageNumber = query.pageNumber
@@ -120,13 +133,13 @@ export default {
           path: '/video',
           query: {
             pageNumber: this.currentPage,
-            lastId: this.lastId
+            nextId: this.nextId
           }
         })
       }
-    }
+    }*/
 
-    this.videoPageWrapper(this.currentPage, this.lastId)
+    this.videoPageWrapper(this.currentPage, this.prevId, this.nextId, this.categoryId)
   },
   mounted() {
     // 当窗口宽度改变时获取屏幕宽度
@@ -138,37 +151,41 @@ export default {
     }
   },
   methods: {
-    handleCurrentChange(pageNumber) {
+    prevClick(pageNumber) {
       this.currentPage = pageNumber
-      this.$router.push({
-        path: '/video',
-        query: {
-          pageNumber: this.currentPage,
-          lastId: this.lastId
-        }
-      })
-
-      this.videoPageWrapper(this.currentPage, this.lastId)
+      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, lastId) {
-      videoPage(pageNumber, lastId).then(res => {
+    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.lastId = resData.lastId
+          this.totalSize = resData.totalSize
+          this.prevId = resData.prevId
+          this.nextId = resData.nextId
         }
       })
     },
-    btnClick(cid, index) {
-      this.currentIndex = index
-      // 页码变为1
-      console.log('选择分区')
-      /* this.$store.commit('updatePage', 1)
-      this.$store.commit('saveCid', cid)
-      this.$store.dispatch('getPageBean')*/
+    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)
     }
   }
 }

src/views/user/Home.vue

@@ -97,8 +97,10 @@
           layout="prev, pager, next"
           :page-size="pageSize"
           :current-page="currentPage"
-          :total="totalPages"
+          :total="totalSize"
           @current-change="handleCurrentChange"
+          @prev-click="handleCurrentChange"
+          @next-click="handleCurrentChange"
         />
       </el-col>
     </el-row>
@@ -136,7 +138,7 @@ export default {
       activeName: 'video',
       currentPage: 1,
       pageSize: 12,
-      totalPages: 0,
+      totalSize: 0,
       videoList: [],
       statusList: [],
       followerList: [],
@@ -149,9 +151,6 @@ export default {
     }
   },
   created() {
-    const pageNumber = this.$route.params.pageNumber
-    const lastId = this.$route.params.lastId
-
     this.userId = this.$route.params.id
     getUserInfo(this.userId).then(res => {
       if (res.code === 0) {
@@ -161,7 +160,6 @@ export default {
     })
 
     checkRelation(this.userId).then(res => {
-      console.log(res)
       if (res.code === 0) {
         if (res.data) {
           this.followButton.text = '已关注'
@@ -191,41 +189,51 @@ export default {
     }
   },
   methods: {
+    initPagination() {
+      this.pageSize = 12
+      this.currentPage = 1
+      this.totalSize = 0
+    },
     handleCurrentChange(pageNumber) {
       this.currentPage = pageNumber
-      /*this.$router.push({
-        path: '/user/' + this.userId + '?pageNumber=' + pageNumber + '&lastId=' + this.lastId,
-        query: {
-          pageNumber: this.currentPage,
-          lastId: this.lastId
-        }
-      });*/
-      this.userVideoListWrapper(this.currentPage, this.userId, this.lastId)
+      if (this.activeName === 'video') {
+        this.userVideoListWrapper(this.currentPage, this.userId, this.lastId)
+      } else if (this.activeName === 'status') {
+        this.userStatusListWrapper(this.currentPage, this.userId, this.lastId)
+      } else if (this.activeName === 'following') {
+        getUserFollowing(this.userId).then(res => {
+          if (res.code === 0) {
+            this.followingList = res.data
+          }
+        })
+      } else if (this.activeName === 'follower') {
+        getUserFollower(this.userId).then(res => {
+          if (res.code === 0) {
+            this.followerList = res.data
+          }
+        })
+      }
+
       // 回到顶部
       scrollTo(0, 0)
     },
     tabClick(tab) {
-      const  tabName = tab.name
-      if (tabName === 'video') {
-        console.log('获取视频')
-      } else if (tabName === 'status') {
-        userStatus(this.userId, 1).then(res => {
-          if (res.code === 0) {
-            this.statusList = res.data.list
-            if (this.statusList.length === 0) {
-              this.showEmpty = true
-            } else {
-              this.showEmpty = false
-            }
-          }
-        })
-      } else if (tabName === 'following') {
+      this.activeName = tab.name
+      if (this.activeName === 'video') {
+        this.currentPage = 1
+        this.lastId = 0
+        this.userVideoListWrapper(this.currentPage, this.userId, this.lastId)
+      } else if (this.activeName === 'status') {
+        this.currentPage = 1
+        this.lastId = 0
+        this.userStatusListWrapper(this.currentPage, this.userId, this.lastId)
+      } else if (this.activeName === 'following') {
         getUserFollowing(this.userId).then(res => {
           if (res.code === 0) {
             this.followingList = res.data
           }
         })
-      } else if (tabName === 'follower') {
+      } else if (this.activeName === 'follower') {
         getUserFollower(this.userId).then(res => {
           if (res.code === 0) {
             this.followerList = res.data
@@ -258,7 +266,7 @@ export default {
         if (res.code === 0) {
           const resData = res.data
           this.videoList = resData.list
-          this.totalPages = resData.totalPages
+          this.totalSize = resData.totalSize
           this.lastId = resData.lastId
 
           if (this.videoList.length !== 0) {
@@ -268,6 +276,18 @@ export default {
           }
         }
       })
+    },
+    userStatusListWrapper(pageNumber, userId, lastId) {
+      userStatus(userId, pageNumber).then(res => {
+        if (res.code === 0) {
+          this.statusList = res.data.list
+          if (this.statusList.length === 0) {
+            this.showEmpty = true
+          } else {
+            this.showEmpty = false
+          }
+        }
+      })
     }
   }
 }