更新视频播放页面 VideoPage.vue

1.更新 dialog 在移动端下的显示
2.修改收藏夹 dialog 的显示和操作逻辑

src/views/home/VideoPage.vue

@@ -28,38 +28,42 @@
         <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
           <el-card class="box-card">
             <div slot="header" class="clearfix">
-              <div class="video-data-row">
+              <div class="tag">
                 <el-button
-                  type="danger"
+                  type="success"
                   size="mini"
                   icon="el-icon-plus"
                   :disabled="isCollected"
+                  class="tag"
                   @click="collection(video.videoId)"
                 >
                   <span>收藏 {{ video.favorite }}</span>
                 </el-button>
                 <el-button
-                  type="danger"
+                  type="success"
                   size="mini"
                   icon="el-icon-thumb"
                   :disabled="isCollected"
-                  @click="collection(video.videoId)"
+                  class="tag"
+                  @click="collection(video)"
                 >
                   <span>喜欢 {{ video.thumbUp }}</span>
                 </el-button>
                 <el-button
-                  type="danger"
+                  type="success"
                   size="mini"
                   icon="el-icon-share"
                   :disabled="isCollected"
+                  class="tag"
                   @click="getShareUrl(video.videoId)"
                 >
                   <span>分享 {{ video.share }}</span>
                 </el-button>
                 <el-button
-                  type="danger"
+                  type="success"
                   size="mini"
                   icon="el-icon-download"
+                  class="tag"
                   @click="getDownloadUrl(video.videoId)"
                 >
                   <span>下载</span>
@@ -68,14 +72,16 @@
                   type="danger"
                   size="mini"
                   icon="el-icon-delete"
+                  class="tag"
                   @click="deleteVideo(video)"
                 >
                   <span>删除</span>
                 </el-button>
                 <el-button
-                  type="danger"
+                  type="warning"
                   size="mini"
                   icon="el-icon-help"
+                  class="tag"
                   @click="displayErrorReportDialog"
                 >
                   <span>报错</span>
@@ -87,7 +93,7 @@
               <span class="description" v-html="video.description" />
               <el-divider />
               <!--视频标签行-->
-              <div class="v-tag">
+              <div>
                 <el-tag
                   v-for="(tag,index) in video.tags"
                   :key="index"
@@ -95,7 +101,7 @@
                   size="medium"
                   effect="plain"
                 >
-                  <router-link target="_blank" :to="`/video/tag/` + tag">
+                  <router-link style="text-decoration-line: none" target="_blank" :to="`/video/tag/` + tag">
                     {{ tag }}
                   </router-link>
                 </el-tag>
@@ -162,48 +168,44 @@
       <el-dialog
         append-to-body
         :visible.sync="showPlaylistDialog"
-        width="30%"
         center
       >
         <el-card class="box-card">
           <div slot="header" class="clearfix">
-            <el-button style="float: right; padding: 3px 0" type="text" @click="createAlbum">
-              创建播放列表
-            </el-button>
-            <el-form v-if="showCreateAlbum" ref="form" :model="albumForm" label-width="80px">
-              <el-form-item>
-                <el-input v-model="albumForm.albumName" style="padding-right: 1px" placeholder="标题不能超过 50 个字符" />
-              </el-form-item>
-              <el-form-item>
-                <el-button type="plain" @click="onCreateAlbum">确定</el-button>
-              </el-form-item>
-            </el-form>
+            <span>添加到收藏夹</span>
+            <el-button style="float: right; padding: 3px 0" type="text" @click="addToPlaylist">确定</el-button>
           </div>
           <div class="text item">
             <el-table
+              ref="multipleTable"
+              :show-header="false"
               :data="playlist"
               border
               style="width: 100%"
+              @selection-change="handleSelectionChange"
             >
+              <el-table-column type="selection" />
               <el-table-column
                 prop="albumName"
-                label="播放列表"
               />
               <el-table-column
                 prop="total"
-                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-column
+                prop="total"
+              />
             </el-table>
+            <br>
+            <div style="margin-top: 15px;">
+              <el-input
+                v-model="albumForm.albumName"
+                placeholder="请输入标题(最多可输入20个字)"
+                maxlength="20"
+                clearable
+              >
+                <el-button slot="append" icon="el-icon-plus" @click="onCreateAlbum">新建收藏夹</el-button>
+              </el-input>
+            </div>
           </div>
         </el-card>
       </el-dialog>
@@ -212,7 +214,6 @@
       <el-dialog
         append-to-body
         :visible.sync="showErrorReportDialog"
-        width="30%"
         center
       >
         <el-card class="box-card">
@@ -249,12 +250,11 @@ import SideVideoCard from 'components/card/SideVideoCard'
 import UserAvatarCard from '@/components/card/UserAvatarCard'
 import comment from '@/components/comment'
 
-import {similarVideo, videoInfo, videoErrorReport, downloadVideo, getShortUrl, videoErrorDelete} from '@/api/video'
+import { similarVideo, videoInfo, videoErrorReport, downloadVideo, getShortUrl, videoErrorDelete } from '@/api/video'
 import { collectItem, createAlbum, getUserPlaylist } from '@/api/collect'
 import { getUserInfo } from '@/api/user'
 import { publishComment, getComment } from '@/api/comment'
 import { getAuthedUser } from '@/utils/auth'
-import {deletePaper} from "@/api/exam";
 
 export default {
   name: 'VideoPage',
@@ -313,11 +313,6 @@ export default {
       isCollected: false,
       showPlaylistDialog: false,
       playlist: [],
-      accessCodeForm: {
-        contentId: null,
-        contentType: 1002,
-        accessCode: null
-      },
       showErrorReportDialog: false,
       errorReportForm: {
         videoId: null,
@@ -329,10 +324,10 @@ export default {
         route: '/video'
       },
       autoPlay: false,
-      showCreateAlbum: false,
       albumForm: {
         albumName: null
-      }
+      },
+      multipleSelection: []
     }
   },
   watch: {
@@ -353,7 +348,6 @@ export default {
     }
 
     this.videoId = this.$route.params.id
-    this.accessCodeForm.contentId = this.videoId
     this.getVideoInfo(this.videoId)
     this.getSimilarVideos(this.videoId)
     this.getCommentWrapper(this.currentPage)
@@ -365,6 +359,42 @@ export default {
     }
   },
   methods: {
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    },
+    addToPlaylist() {
+      if (this.multipleSelection.length === 0) {
+        this.$message.info('请选择收藏夹')
+        return
+      }
+      const jsonData = {}
+      jsonData.albumId = []
+      for (const item of this.multipleSelection) {
+        jsonData.albumId.push(item.albumId)
+      }
+      jsonData.postId = this.videoId
+      jsonData.action = 1
+
+      collectItem(jsonData).then(resp => {
+        if (resp.code === 0) {
+          this.$notify.success({
+            title: '视频已收藏',
+            type: 'success',
+            duration: 3000
+          })
+        } else {
+          this.$notify.warning({
+            title: '视频收藏失败',
+            type: 'warning',
+            duration: 3000
+          })
+        }
+      }).catch(error => {
+        this.$message.error(error)
+      }).finally(() => {
+        this.showPlaylistDialog = false
+      })
+    },
     // ****************************************************************************************************************
     handleCurrentChange(currentPage) {
       this.currentPage = currentPage
@@ -452,7 +482,12 @@ export default {
       console.log('刷新相关推荐')
     },
     // 用户点击收藏
-    collection(videoId) {
+    collection(video) {
+      if (video.collected) {
+        this.$message.info('取消收藏')
+        return
+      }
+
       this.showPlaylistDialog = true
       const queryInfo = {
         pn: 1,
@@ -464,28 +499,6 @@ export default {
         }
       })
     },
-    addToPlaylist(row) {
-      this.showPlaylistDialog = false
-      const jsonData = {}
-      jsonData.albumId = row.albumId
-      jsonData.postId = this.videoId
-      jsonData.action = 1
-      collectItem(jsonData).then(resp => {
-        if (resp.code === 0) {
-          this.$notify.success({
-            title: '视频已收藏',
-            type: 'success',
-            duration: 3000
-          })
-        } else {
-          this.$notify.warning({
-            title: '视频收藏失败',
-            type: 'warning',
-            duration: 3000
-          })
-        }
-      })
-    },
     getShareUrl(videoId) {
       getShortUrl(videoId).then(resp => {
         if (resp.code === 0) {
@@ -548,11 +561,7 @@ export default {
         })
       })
     },
-    createAlbum() {
-      this.showCreateAlbum = true
-    },
     onCreateAlbum() {
-      this.showCreateAlbum = false
       createAlbum(this.albumForm).then(resp => {
         if (resp.code === 0) {
           this.playlist.push(resp.data)
@@ -713,9 +722,44 @@ export default {
     padding-left: 0.5%;
     padding-right: 0.5%;
   }
+  /* 或者使用这种更具体的选择器 */
+  .el-dialog__wrapper .maintenance-dialog {
+    width: 100% !important;
+    margin-top: 5vh !important;
+  }
+
+  /* 表单布局优化 */
+  .maintenance-dialog .el-form-item {
+    margin-bottom: 15px;
+  }
+
+  .maintenance-dialog .el-form-item__label {
+    float: none !important;
+    display: block !important;
+    text-align: left !important;
+    padding: 0 0 8px !important;
+    width: 100% !important;
+  }
+
+  .maintenance-dialog .el-form-item__content {
+    margin-left: 0 !important;
+  }
 
-  .msgbox{
-    width: 320px !important;
+  /* 确保所有输入控件宽度100% */
+  .maintenance-dialog .el-input,
+  .maintenance-dialog .el-select,
+  .maintenance-dialog .el-date-picker,
+  .maintenance-dialog .el-input-number {
+    width: 100% !important;
+  }
+
+  /* 调整按钮组间距 */
+  .maintenance-dialog .dialog-footer {
+    text-align: center;
+  }
+
+  .maintenance-dialog .dialog-footer .el-button {
+    margin: 0 5px;
   }
 }
 
@@ -735,10 +779,10 @@ export default {
   clear: both;
 }
 
-.v-tag {
-  padding-top: 10px;
-}
 .tag{
+  padding-top: 1px;
+  padding-bottom: 1px;
+  margin-left: 3px;
   margin-right: 3px;
 }
 </style>