update PlaylistView.vue

src/views/home/PlaylistView.vue

@@ -91,7 +91,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>
@@ -144,13 +144,28 @@
                 height="480"
                 style="width: 100%"
               >
+                <el-table-column
+                  type="index"
+                />
+                <el-table-column
+                  prop="coverUrl"
+                >
+                  <template slot-scope="scope">
+                    <el-image
+                      lazy
+                      fit="cover"
+                      class="coverImg"
+                      :src="scope.row.coverUrl"
+                    />
+                  </template>
+                </el-table-column>
                 <el-table-column
                   prop="title"
                 >
                   <template slot-scope="scope">
-                    <router-link :to="`/vidlist/${scope.row.videoId}`">
-                      <span>{{ scope.row.title | ellipsis }}</span>
-                    </router-link>
+                    <el-button type="text" @click="playItem(scope.row)">
+                      {{ scope.row.title | ellipsis }}
+                    </el-button>
                   </template>
                 </el-table-column>
                 <el-table-column
@@ -212,10 +227,9 @@ import SocketInstance from '@/utils/ws/socket-instance'
 import flvjs from 'flv.js'
 import DPlayer from 'dplayer'
 
-import { videoUrl, similarVideo, videoInfo, videoErrorReport, downloadVideo, cacheBiliVideo } from '@/api/video'
-import { collectItem, getPlaylistItems } from '@/api/collect'
+import { videoUrl, videoInfo } from '@/api/video'
+import { getPlaylistItems } from '@/api/collect'
 import { getUserInfo } from '@/api/user'
-import { submitAccessCode } from '@/api/content'
 import { getAccessToken } from '@/utils/auth'
 
 export default {
@@ -278,13 +292,7 @@ export default {
       autoPlay: false,
       playList: {
         current: 0,
-        list: [
-          'eyNXaDnmN3',
-          'WkYNYzDePp',
-          'a8Vx9EGDbA',
-          'a8V3D88NJK',
-          '4m7qMXapp1'
-        ]
+        list: []
       },
       // **********************************************************************/
       flvjs,
@@ -308,23 +316,19 @@ export default {
     getPlaylistItems(albumId).then(resp => {
       if (resp.code === 0) {
         const respData = resp.data
-        console.log(respData.list)
-        this.playList.list = respData.list
-      }
-    })
+        this.playList.list = respData.pageList.list
 
-    const videoId = '2eJOwNyNMg'
-    this.accessCodeForm.contentId = videoId
-    this.getVideoInfo(videoId)
+        const videoId = this.playList.list[0].videoId
+        this.getVideoInfo(videoId)
 
-    const key = 'myplaylist-' + videoId
-    const value = localStorage.getItem(key)
-    if (value != null) {
-      this.playList = JSON.parse(value)
-      this.calculateCurrent(videoId)
-    } else {
-      this.getSimilarVideos(videoId)
-    }
+        const key = 'myplaylist-' + videoId
+        const value = localStorage.getItem(key)
+        if (value != null) {
+          this.playList = JSON.parse(value)
+          this.calculateCurrent(videoId)
+        }
+      }
+    })
   },
   mounted() {
     window.addEventListener('beforeunload', this.handleBeforeUnload)
@@ -376,24 +380,6 @@ export default {
     },
     // 获取和当前视频类似的其他视频
     getSimilarVideos(videoId) {
-      similarVideo(videoId).then(resp => {
-        if (resp.code === 0) {
-          this.playList.list = resp.data
-          this.calculateCurrent(videoId)
-        } else {
-          this.$notify.error({
-            message: '推荐视频数据获取失败',
-            type: 'warning',
-            duration: 3000
-          })
-        }
-      }).catch(error => {
-        this.$notify.error({
-          message: error.message,
-          type: 'warning',
-          duration: 3000
-        })
-      })
     },
     // 换一换
     refreshSimilar() {
@@ -401,19 +387,6 @@ export default {
     },
     // 用户点击收藏
     collection(videoId) {
-      const jsonData = {}
-      jsonData.contentType = 1002
-      jsonData.contentId = videoId
-      jsonData.collected = true
-      collectItem(jsonData).then(resp => {
-        if (resp.code !== 0) {
-          this.$notify.success({
-            title: '视频收藏失败',
-            type: 'warning',
-            duration: 3000
-          })
-        }
-      })
     },
     getDownloadUrl(videoId) {
     },
@@ -422,8 +395,6 @@ export default {
     submitAccessCodeWrapper() {
     },
     displayErrorReportDialog() {
-      this.errorReportForm.videoId = this.video.videoId
-      this.showErrorReportDialog = true
     },
     submitErrorReport() {
     },
@@ -508,7 +479,8 @@ export default {
         jsonData.videoId = videoId
         jsonData.currentTime = player.video.currentTime
         SocketInstance.send(jsonData)
-        this.getNextPath(videoId)
+        // this.getNextPath(videoId)
+        this.$message.info('当前视频播放完成')
       })
 
       player.on('volumechange', () => {
@@ -547,6 +519,9 @@ export default {
         }
       }
     },
+    playItem(item) {
+      this.getVideoInfo(item.videoId)
+    },
     // ****************************************************************************************************************
     async submit(newComment, parent, add) {
       const res = await new Promise((resolve) => {
@@ -591,7 +566,7 @@ export default {
         }, 300)
       })
       console.log('deleteComment: ', res)
-    }
+    },
   }
 }
 </script>
@@ -628,4 +603,10 @@ export default {
 .tag{
   margin-right: 3px;
 }
+
+.coverImg {
+  width: 100%;
+  height: 90px;
+  display: block;
+}
 </style>