更新用户收藏页面

src/api/collect.js

@@ -11,6 +11,6 @@ export function collectVideo(data) {
 }
 
 // 获取用户收藏
-export function getUserCollection() {
-  return get(collectApi.userCollectionApi)
+export function getUserCollection(pageNumber) {
+  return get(collectApi.userCollectionApi + '?pageNumber=' + pageNumber)
 }

src/views/user/Collection.vue

@@ -7,10 +7,10 @@
       separator-class="el-icon-arrow-right"
     >
       <el-breadcrumb-item :to="{ path: '' }"><a href="/">返回首页</a></el-breadcrumb-item>
-      <el-breadcrumb-item>我的收藏：共<span class="reslut">({{ videoList.length }}}</span>条</el-breadcrumb-item>
+      <el-breadcrumb-item>我的收藏：共<span class="reslut">({{ totalSize }}}</span>条</el-breadcrumb-item>
     </el-breadcrumb>
 
-    <el-row v-if="videoList.length !== 0" class="movie-list">
+    <el-row v-if="totalSize !== 0" class="movie-list">
       <el-col style="text-align: right">
         <el-button
           type="danger"
@@ -20,19 +20,29 @@
           @click="removeAll"
         >一键清空</el-button>
       </el-col>
-      <el-col v-for="(video,index) in videoList" :key="index" :md="6" :sm="8" :xs="12">
-        <video-card :video="video">
-          <el-button
-            slot="remove"
-            class="remove-slot"
-            type="danger"
-            icon="el-icon-delete"
-            circle
-            size="small"
-            title="移除该条收藏"
-            @click.stop="removeCollection(video)"
-          />
-        </video-card>
+      <el-col v-for="(video,index) in dataList" :key="index" :md="6" :sm="8" :xs="12">
+        <video-card :video="video"/>
+        <el-button
+          type="danger"
+          icon="el-icon-delete"
+          circle
+          size="small"
+          title="移除该条收藏"
+          @click.stop="removeCollection(video.videoId)"
+        />
+      </el-col>
+      <el-col class="pagination">
+        <el-pagination
+          background
+          :small="screenWidth <= 768"
+          layout="prev, pager, next"
+          :page-size="pageSize"
+          :current-page="currentPage"
+          :total="totalSize"
+          @current-change="handleCurrentChange"
+          @prev-click="handleCurrentChange"
+          @next-click="handleCurrentChange"
+        />
       </el-col>
     </el-row>
     <el-row v-else class="not-result">
@@ -53,46 +63,51 @@ export default {
   components: { VideoCard },
   data() {
     return {
-      videoList: [],
-      uid: 11011
+      // 屏幕宽度, 为了控制分页条的大小
+      screenWidth: document.body.clientWidth,
+      currentPage: 1,
+      pageSize: 12,
+      totalSize: 0,
+      dataList: [],
     }
   },
   created() {
     document.title = '我的收藏夹'
-    getUserCollection().then(res => {
-      if (res.code === 0) {
-        this.videoList = res.data.list
-      }
-    })
-
-    // 获取当前用户
-    if (this.uid) {
-      /* getCollectionByUid(this.uid).then(res => {
-        for (const i of res) {
-          // 时间转换
-          i.releasetime = getDate(i.releasetime)
-          // console.log(getDate(i.releasetime));
-        }
-        this.videoList = res
-      })*/
-    }
+    this.getUserCollectionWrapper(this.currentPage)
   },
   methods: {
+    handleCurrentChange(pageNumber) {
+      this.currentPage = pageNumber
+      this.dataList = []
+      this.getUserCollectionWrapper(this.currentPage)
+      // 回到顶部
+      scrollTo(0, 0)
+    },
+    getUserCollectionWrapper(pageNumber) {
+      getUserCollection(pageNumber).then(res => {
+        if (res.code === 0) {
+          const resData = res.data
+          this.dataList = resData.list
+          this.totalSize = resData.totalSize
+        }
+      })
+    },
     // 移除单个收藏
-    removeCollection(video) {
+    removeCollection(videoId) {
       this.$confirm('确认移除吗？', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
+        console.log('从收藏夹中删除 ' + videoId)
         // 确认
         /* removeCollection(this.uid, video.vid).then(res => {
           // console.log(res);
           // 将要删除的当前video对象移除数组
           // 获取下标
-          const index = this.videoList.indexOf(video)
+          const index = this.dataList.indexOf(video)
           if (index > -1) {
-            this.videoList.splice(index, 1)
+            this.dataList.splice(index, 1)
           }
         })*/
 
@@ -114,15 +129,17 @@ export default {
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
+        console.log('清空收藏夹')
+
         const arr = []
-        for (const i of this.videoList) {
+        for (const i of this.dataList) {
           arr.push(i.vid)
         }
         // const vidStr = arr.join(',')
         // console.log(vidStr);
         // 确认
         /* removeCollection(this.uid, vidStr).then(res => {
-          this.videoList = []
+          this.dataList = []
         })*/
 
         this.$message({