更新视频收藏页面, 可建立多个视频收藏夹

src/api/collect.js

@@ -29,5 +29,5 @@ export function getFavlist(favlistId, contentType, page) {
 
 // 获取视频收藏夹内容
 export function getVideoFavlist(favlistId, page) {
-  return get(collectApi.favlistApi + '?favlistId=' + favlistId + '&page=' + page)
+  return get(collectApi.videoFavlistApi + '?favlistId=' + favlistId + '&page=' + page)
 }

src/views/my/FavlistVideo.vue

@@ -1,11 +1,30 @@
 <template>
   <div id="collection-list">
+    <el-row>
+      <el-col :md="12">
+        <div class="category-btn">
+          <el-button
+            v-for="(item, index) in videoFavlist"
+            :key="index"
+            type="warning"
+            size="mini"
+            :plain="currentFavlistId !== item.favlistId"
+            @click="chooseVideoFavlist(item)"
+          >{{ item.favlistName }}
+          </el-button>
+        </div>
+      </el-col>
+    </el-row>
+
     <!--搜索结果面包屑-->
     <el-breadcrumb
+      v-if="currentFavlistName !== null"
       class="bread"
       separator-class="el-icon-arrow-right"
     >
-      <el-breadcrumb-item>我的收藏：共 <span class="reslut">{{ totalSize }}</span> 条</el-breadcrumb-item>
+      <el-breadcrumb-item>
+        <span class="reslut">{{ currentFavlistName }}</span> 中共有 <span class="reslut">{{ totalSize }}</span> 条数据
+      </el-breadcrumb-item>
     </el-breadcrumb>
 
     <el-row v-if="totalSize !== 0" class="movie-list">
@@ -56,9 +75,7 @@
 <script>
 import VideoCard from '@/components/card/VideoCard'
 import {
-  deleteFavlist,
-  getFavlist,
-  collectItem, getUserFavlist
+  deleteFavlist, collectItem, getUserFavlist, getVideoFavlist
 } from '@/api/collect'
 
 export default {
@@ -72,14 +89,16 @@ export default {
       pageSize: 12,
       totalSize: 0,
       dataList: [],
-      favlistId: 2,
-      contentType: 1002
+      currentFavlistId: 0,
+      currentFavlistName: null,
+      videoFavlist: []
     }
   },
   created() {
-    this.getFavlistWrapper(this.favlistId, this.contentType, this.currentPage)
     getUserFavlist().then(resp => {
-      console.log(resp.data)
+      if (resp.code === 0) {
+        this.videoFavlist = resp.data
+      }
     })
     document.title = '视频收藏夹'
   },
@@ -87,12 +106,19 @@ export default {
     handleCurrentChange(pageNumber) {
       this.currentPage = pageNumber
       this.dataList = []
-      this.getFavlistWrapper(this.favlistId, this.contentType, this.currentPage)
+      this.getVideoFavlistWrapper(this.currentFavlistId, this.currentPage)
       // 回到顶部
       scrollTo(0, 0)
     },
-    getFavlistWrapper(favlistId, conentType, page) {
-      getFavlist(favlistId, conentType, page).then(resp => {
+    chooseVideoFavlist(item) {
+      this.currentFavlistId = item.favlistId
+      this.currentFavlistName = item.favlistName
+      this.currentPage = 1
+      this.getVideoFavlistWrapper(this.currentFavlistId, this.currentPage)
+    },
+    getVideoFavlistWrapper(favlistId) {
+      this.currentFavlistId = favlistId
+      getVideoFavlist(favlistId, this.currentPage).then(resp => {
         if (resp.code === 0) {
           const respData = resp.data
           this.dataList = respData.list
@@ -135,7 +161,7 @@ export default {
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
-        deleteFavlist(this.favlistId).then(res => {
+        deleteFavlist(this.currentFavlistId).then(res => {
           if (res.code === 0) {
             this.$message({
               type: 'success',
@@ -168,6 +194,13 @@ export default {
   .coverImg {
     height: 120px !important;
   }
+
+  .category-btn {
+    padding-left: 0.5%;
+    padding-right: 0.5%;
+    padding-top: 3%;
+    text-align: center;
+  }
 }
 
 .movie-list {
@@ -220,4 +253,10 @@ export default {
   right: 5px;
   bottom: 2px;
 }
+
+.category-btn {
+  padding-left: 14%;
+  padding-right: 6%;
+  padding-top: 20px;
+}
 </style>