更新 VideoPage.vue 的视频收藏功能

src/api/collect.js

@@ -23,6 +23,10 @@ export function getUserAlbumSelectList() {
   return get(collectApi.postAlbumApi + '/kv')
 }
 
+export function getUserAlbumList(pn) {
+  return get(collectApi.postAlbumApi + '/user' + '?pn=' + pn)
+}
+
 // 获取合集内容
 export function getAlbumItems(queryInfo) {
   return get(collectApi.postAlbumApi + '/item', queryInfo)

src/views/home/VideoPage.vue

@@ -199,14 +199,14 @@
           </div>
           <div class="text item">
             <el-table
-              ref="multipleTable"
-              :show-header="false"
+              ref="singleTable"
               :data="playlist"
-              border
-              style="width: 100%"
-              @selection-change="handleSelectionChange"
-            >
-              <el-table-column type="selection" />
+              highlight-current-row
+              @current-change="handleCurrentRow"
+              style="width: 100%">
+              <el-table-column
+                type="index">
+              </el-table-column>
               <el-table-column
                 prop="albumName"
               />
@@ -302,7 +302,7 @@ import comment from '@/components/comment'
 
 import { similarVideo, videoInfo, downloadVideo, getShortUrl } from '@/api/video'
 import { videoErrorReport, videoErrorDelete } from '@/api/video_edit'
-import { collectItem, createAlbum, getUserPlaylist } from '@/api/collect'
+import { collectItem, createAlbum, getUserAlbumList } from '@/api/collect'
 import { getUserInfo } from '@/api/user'
 import { publishComment, getComment } from '@/api/comment'
 import { getAuthedUser } from '@/utils/auth'
@@ -379,7 +379,7 @@ export default {
       albumForm: {
         albumName: null
       },
-      multipleSelection: [],
+      currentRow: null,
       showShareVideoDialog: false,
       showEditDialog: false,
       showEdit: true
@@ -414,19 +414,31 @@ export default {
     }
   },
   methods: {
-    handleSelectionChange(val) {
-      this.multipleSelection = val
+    handleCurrentRow(val) {
+      this.currentRow = val
+      this.$message.info('选中 ' + this.currentRow.albumName)
+    },
+    // 用户点击收藏
+    collection(video) {
+      if (video.collected) {
+        this.$message.info('取消收藏')
+        return
+      }
+
+      this.showPlaylistDialog = true
+      getUserAlbumList(1).then(resp => {
+        if (resp.code === 0) {
+          this.playlist = resp.data.list
+        }
+      })
     },
     addToPlaylist() {
-      if (this.multipleSelection.length === 0) {
+      if (this.currentRow === null) {
         this.$message.info('请选择收藏夹')
         return
       }
       const jsonData = {}
-      jsonData.albumId = []
-      for (const item of this.multipleSelection) {
-        jsonData.albumId.push(item.albumId)
-      }
+      jsonData.albumId = this.currentRow.albumId
       jsonData.postId = this.videoId
       jsonData.action = 1
 
@@ -536,24 +548,6 @@ export default {
     refreshSimilar() {
       console.log('刷新相关推荐')
     },
-    // 用户点击收藏
-    collection(video) {
-      if (video.collected) {
-        this.$message.info('取消收藏')
-        return
-      }
-
-      this.showPlaylistDialog = true
-      const queryInfo = {
-        pn: 1,
-        userId: this.currentUser.userId
-      }
-      getUserPlaylist(queryInfo).then(resp => {
-        if (resp.code === 0) {
-          this.playlist = resp.data.list
-        }
-      })
-    },
     likeVideo(video) {
       const videoId = video.videoId
       this.$message.info('喜欢 ' + videoId)