update PlaylistView.vue

src/views/home/PlaylistView.vue

@@ -4,6 +4,13 @@
       <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
         <el-card class="box-card">
           <div slot="header" class="clearfix">
+            <el-row>
+              <router-link style="text-decoration-line: none" target="_blank" :to="`/video/${video.videoId}`">
+                <el-button style="float: right; padding: 3px 0" type="text">
+                  原视频
+                </el-button>
+              </router-link>
+            </el-row>
             <el-row>
               <h3 v-html="video.title" />
             </el-row>
@@ -33,24 +40,6 @@
               >
                 <span>收藏 {{ video.favorite }}</span>
               </el-button>
-              <el-button
-                type="danger"
-                size="mini"
-                icon="el-icon-thumb"
-                :disabled="isCollected"
-                @click="collection(video.videoId)"
-              >
-                <span>喜欢 {{ video.thumbUp }}</span>
-              </el-button>
-              <el-button
-                type="danger"
-                size="mini"
-                icon="el-icon-share"
-                :disabled="isCollected"
-                @click="collection(video.videoId)"
-              >
-                <span>分享 {{ video.share }}</span>
-              </el-button>
               <el-button
                 type="danger"
                 size="mini"
@@ -82,34 +71,9 @@
           </div>
         </el-card>
       </el-row>
-      <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <el-row>
-              <h3>视频评论</h3>
-            </el-row>
-          </div>
-          <div class="text item">
-            <div ref="comment" :style="wrapStyle" class="comment-wrap">
-              <comment
-                v-model="videoComments"
-                :user="currentUser"
-                :props="props"
-                :before-submit="submit"
-                :before-like="like"
-                :before-delete="deleteComment"
-                :upload-img="uploadImg"
-              />
-            </div>
-          </div>
-        </el-card>
-      </el-row>
     </el-col>
     <el-col :md="9">
       <el-row>
-        <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-          <user-avatar-card v-if="user !== null" :user-avatar="user" />
-        </el-row>
         <el-row v-if="showPlaylist" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
           <el-card class="box-card">
             <div slot="header" class="clearfix">
@@ -164,36 +128,6 @@
         </el-row>
       </el-row>
     </el-col>
-
-    <!-- 视频访问码对话框 -->
-    <el-dialog
-      append-to-body
-      :visible.sync="showAccessCodeDialog"
-      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>
-        </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>
-        </div>
-      </el-card>
-    </el-dialog>
-
-    <!-- 视频报错对话框 -->
-    <el-dialog
-      append-to-body
-      :visible.sync="showErrorReportDialog"
-      width="30%"
-      center
-    />
   </el-row>
   <el-row v-else>
     <permission-denied-card :text-object="textObject" />
@@ -202,8 +136,6 @@
 
 <script>
 import PermissionDeniedCard from '@/components/card/PermissionDeniedCard'
-import UserAvatarCard from '@/components/card/UserAvatarCard'
-import comment from '@/components/comment'
 
 import flvjs from 'flv.js'
 import DPlayer from 'dplayer'
@@ -211,11 +143,10 @@ import DPlayer from 'dplayer'
 import { videoUrl, videoInfo, videoErrorDelete } from '@/api/video'
 import { getPlaylistItems } from '@/api/collect'
 import { getUserInfo } from '@/api/user'
-import { getAccessToken } from '@/utils/auth'
 
 export default {
-  name: 'VideoList',
-  components: { UserAvatarCard, PermissionDeniedCard, comment },
+  name: 'PlaylistView',
+  components: { PermissionDeniedCard },
   filters: {
     ellipsis(value) {
       if (!value) return ''
@@ -228,38 +159,9 @@ export default {
   },
   data() {
     return {
-      /** ********************************************************************/
-      wrapStyle: '',
-      videoComments: [],
-      currentUser: {
-        name: '草莓',
-        avatar: '//picx.zhimg.com/v2-a2c89378a6332cbfed3e28b5ab84feb7.jpg'
-      },
-      props: {
-        id: 114511,
-        content: 'this is comment content',
-        imgSrc: '',
-        children: [],
-        likes: 0,
-        liked: false,
-        reply: null,
-        createAt: 'createAt',
-        user: {
-          name: '芒果',
-          avatar: ''
-        }
-      },
-      // **********************************************************************/
       video: null,
       user: null,
       isCollected: false,
-      showAccessCodeDialog: false,
-      accessCodeForm: {
-        contentId: null,
-        contentType: 1002,
-        accessCode: null
-      },
-      showErrorReportDialog: false,
       errorReportForm: {
         videoId: null,
         errorCode: null
@@ -293,10 +195,10 @@ export default {
   },
   created() {
     const albumId = this.$route.params.albumId
-    document.title = '播放列表'
     getPlaylistItems(albumId).then(resp => {
       if (resp.code === 0) {
         const respData = resp.data
+        document.title = respData.albumInfo.albumName
         this.playList.list = respData.pageList.list
 
         const videoId = this.playList.list[0].videoId
@@ -308,6 +210,8 @@ export default {
           this.playList = JSON.parse(value)
           this.calculateCurrent(videoId)
         }
+      } else {
+        document.title = '播放列表'
       }
     })
   },
@@ -329,9 +233,7 @@ 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.getVideoUrl(videoId)
 
           this.userId = resp.data.userId
@@ -359,13 +261,6 @@ export default {
         })
       })
     },
-    // 获取和当前视频类似的其他视频
-    getSimilarVideos(videoId) {
-    },
-    // 换一换
-    refreshSimilar() {
-      console.log('刷新相关推荐')
-    },
     // 用户点击收藏
     collection(videoId) {
     },
@@ -414,21 +309,10 @@ export default {
         })
       })
     },
-    submitAccessCodeWrapper() {
-    },
-    displayErrorReportDialog() {
-    },
-    submitErrorReport() {
-    },
     // ****************************************************************************************************************
     getVideoUrl(videoId) {
       videoUrl(videoId).then(res => {
         if (res.code === 0) {
-          const token = getAccessToken()
-          if (token != null) {
-            var wsUrl = 'wss:' + process.env.VUE_APP_SERVER_URL + '/ws/progress?token=' + token
-          }
-
           const urlType = res.data.type
           if (urlType === 'mp4') {
             const urls = res.data.urls
@@ -534,51 +418,6 @@ export default {
     },
     playItem(item) {
       this.getVideoInfo(item.videoId)
-    },
-    // ****************************************************************************************************************
-    async submit(newComment, parent, add) {
-      const res = await new Promise((resolve) => {
-        setTimeout(() => {
-          resolve({ newComment, parent })
-        }, 300)
-      })
-      add(Object.assign(res.newComment, { _id: new Date().getTime() }))
-      console.log('addComment: ', res)
-    },
-    async like(comment) {
-      const res = await new Promise((resolve) => {
-        setTimeout(() => {
-          resolve(comment)
-        }, 0)
-      })
-
-      console.log('likeComment: ', res)
-    },
-    async uploadImg({ file, callback }) {
-      const res = await new Promise((resolve, reject) => {
-        const reader = new FileReader()
-
-        reader.readAsDataURL(file)
-
-        reader.onload = () => {
-          resolve(reader.result)
-        }
-
-        reader.onerror = () => {
-          reject(reader.error)
-        }
-      })
-
-      callback(res)
-      console.log('uploadImg： ', res)
-    },
-    async deleteComment(comment, parent) {
-      const res = await new Promise((resolve) => {
-        setTimeout(() => {
-          resolve({ comment, parent })
-        }, 300)
-      })
-      console.log('deleteComment: ', res)
     }
   }
 }