VideoPage.vue 新增添加到播放列表 dialog

src/views/home/VideoPage.vue

@@ -32,11 +32,11 @@
                 <el-button
                   type="danger"
                   size="mini"
-                  icon="el-icon-collection"
+                  icon="el-icon-plus"
                   :disabled="isCollected"
                   @click="collection(video.videoId)"
                 >
-                  <span>收藏 {{ video.favorite }}</span>
+                  <span>添加到 {{ video.favorite }}</span>
                 </el-button>
                 <el-button
                   type="danger"
@@ -150,24 +150,44 @@
         </el-row>
       </el-col>
 
-      <!-- 视频访问码对话框 -->
+      <!-- 添加到播放列表对话框 -->
       <el-dialog
         append-to-body
-        :visible.sync="showAccessCodeDialog"
+        :visible.sync="showPlaylistDialog"
         width="30%"
         center
       >
         <el-card class="box-card">
           <div slot="header" class="clearfix">
-            <span>输入视频访问码</span>
-            <el-button style="float: right; padding: 3px 0" type="text" @click="submitAccessCodeWrapper">提交</el-button>
+            <el-button style="float: right; padding: 3px 0" type="text" @click="submitAccessCodeWrapper">
+              创建播放列表
+            </el-button>
           </div>
           <div class="text item">
-            <el-form ref="form" :model="accessCodeForm" label-width="80px">
-              <el-form-item label="访问码">
-                <el-input v-model="accessCodeForm.accessCode" style="width: 70%; padding-right: 2px" />
-              </el-form-item>
-            </el-form>
+            <el-table
+              :data="playlist"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                prop="favlistName"
+                label="收藏夹"
+              />
+              <el-table-column
+                prop="favlistName"
+                label="数量"
+              />
+              <el-table-column label="添加" width="80" align="center">
+                <template slot-scope="scope">
+                  <el-button
+                    type="danger"
+                    size="mini"
+                    icon="el-icon-plus"
+                    @click="addToPlaylist(scope.row)"
+                  />
+                </template>
+              </el-table-column>
+            </el-table>
           </div>
         </el-card>
       </el-dialog>
@@ -212,7 +232,7 @@ import UserAvatarCard from '@/components/card/UserAvatarCard'
 import comment from '@/components/comment'
 
 import { similarVideo, videoInfo, videoErrorReport, downloadVideo, getShortUrl } from '@/api/video'
-import { collectItem } from '@/api/collect'
+import { getUserFavlist} from '@/api/collect'
 import { getUserInfo } from '@/api/user'
 import { submitAccessCode } from '@/api/content'
 import { publishComment, getComment } from '@/api/comment'
@@ -273,7 +293,8 @@ export default {
       user: null,
       similarVideos: [],
       isCollected: false,
-      showAccessCodeDialog: false,
+      showPlaylistDialog: false,
+      playlist: [],
       accessCodeForm: {
         contentId: null,
         contentType: 1002,
@@ -357,7 +378,6 @@ export default {
     getVideoInfo(videoId) {
       videoInfo(videoId).then(resp => {
         if (resp.code === 0) {
-          // this.showAccessCodeDialog = true
           this.video = resp.data
           document.title = resp.data.title
           this.userId = resp.data.userId
@@ -411,7 +431,22 @@ export default {
     },
     // 用户点击收藏
     collection(videoId) {
-      const jsonData = {}
+      this.showPlaylistDialog = true
+      getUserFavlist().then(resp => {
+        if (resp.code === 0) {
+          this.playlist = resp.data
+          console.log(this.playlist)
+        }
+      })
+    },
+    addToPlaylist(row) {
+      console.log('add to playlist')
+      this.$notify.success({
+        title: '视频已添加到播放列表',
+        type: 'success',
+        duration: 3000
+      })
+      /*const jsonData = {}
       jsonData.contentType = 1002
       jsonData.contentId = videoId
       jsonData.collected = true
@@ -429,7 +464,7 @@ export default {
             duration: 3000
           })
         }
-      })
+      })*/
     },
     getShareUrl(videoId) {
       getShortUrl(videoId).then(resp => {
@@ -494,24 +529,7 @@ export default {
       })
     },
     submitAccessCodeWrapper() {
-      submitAccessCode(this.accessCodeForm).then(resp => {
-        if (resp.code === 0) {
-          this.video = resp.data
-        } else {
-          this.$notify({
-            message: resp.msg,
-            type: 'warning',
-            duration: 3000
-          })
-        }
-      }).catch(error => {
-        this.$notify({
-          title: '提示',
-          message: error.message,
-          type: 'warning',
-          duration: 3000
-        })
-      })
+      this.$message.info('创建播放列表')
     },
     displayErrorReportDialog() {
       this.errorReportForm.videoId = this.video.videoId