更新视频播放页面

src/components/VideoPlayer.vue

@@ -61,7 +61,7 @@ export default {
     }*/
   },
   mounted() {
-    //SocketInstance.connect()
+    SocketInstance.connect()
     const videoId = this.videoProp.videoId
     if (this.getUrl) {
       this.getVideoUrl(videoId)
@@ -145,7 +145,6 @@ export default {
 
       player.on('volumechange', () => {
         console.log('声音改变')
-        console.log(player.volume)
       })
     },
     initFlvPlayer(videoId, coverUrl, videoUrl) {

src/views/home/VideoPage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="player">
+  <div v-if="video !== null" class="player">
     <el-row style="padding-top: 12px" :gutter="20">
       <el-col :md="15">
         <el-row>
@@ -41,16 +41,34 @@
       <el-col :md="15">
         <!--视频播放框-->
         <video-player :video-prop="video" />
-        <div class="el-icon-collection">
-          {{ "已收藏" + video.collectCount + "次" }}
+        <!--视频数据行-->
+        <div class="video-data-row">
           <el-button
             type="danger"
             size="mini"
-            icon="el-icon-star-off"
+            icon="el-icon-collection"
             :disabled="isCollection"
             @click="collection(video.videoId)"
           >
-            {{ isCollection ? "您已收藏" : "点击收藏" }}
+            {{ video.collectCount }}
+          </el-button>
+          <el-button
+            type="danger"
+            size="mini"
+            icon="el-icon-thumb"
+            :disabled="isCollection"
+            @click="collection(video.videoId)"
+          >
+            <span>喜欢</span>
+          </el-button>
+          <el-button
+            type="danger"
+            size="mini"
+            icon="el-icon-share"
+            :disabled="isCollection"
+            @click="collection(video.videoId)"
+          >
+            <span>分享</span>
           </el-button>
           <el-button
             type="danger"
@@ -61,9 +79,19 @@
           >
             <span>下载</span>
           </el-button>
+          <el-button
+            type="danger"
+            size="mini"
+            icon="el-icon-help"
+            :disabled="isCollection"
+            @click="collection(video.videoId)"
+          >
+            <span>报错</span>
+          </el-button>
         </div>
+        <!--视频描述行-->
         <span class="description">{{ video.description }}</span>
-        <!--视频标签-->
+        <!--视频标签行-->
         <div class="v-tag">
           <el-tag
             v-for="(tag,index) in video.tagList"
@@ -87,40 +115,31 @@
           />
           <el-button v-else class="button-new-tag" size="mini" @click="showInput">+ 添加标签</el-button>
         </div>
-        <!--评论-->
-        <comment :vid="video.videoId" />
+        <!--视频评论组件-->
+        <comment :videoId="video.videoId" />
       </el-col>
       <!--推荐列-->
       <el-col :md="9">
-        <el-card class="box-card">
+        <el-card v-if="showVideoCollection" class="box-card">
           <div slot="header" class="clearfix">
-            <span>弹幕列表</span><i class="el-icon-more" />
-            <span style="float: right; padding: 3px 0" type="text"><i class="el-icon-arrow-down" /></span>
-            <el-table
-              :data="tableData"
-              size="medium"
-              class="text"
-              style="width: 100%"
-              height="300"
-            >
-              <el-table-column
-                prop="date"
-                label="时间"
-                width="60"
-              />
-              <el-table-column
-                prop="name"
-                label="弹幕内容"
-              />
-              <el-table-column
-                prop="address"
-                label="发送时间"
-                width="120"
-              />
-            </el-table>
-          </div>
-          <div class="bottom clearfix">
-            <el-button type="text" class="button">查看弹幕历史</el-button>
+            <span>播放列表</span><i class="el-icon-film" />
+            <el-row v-for="(item,index) in similarVideos" :key="index" class="item">
+              <el-col>
+                <el-image lazy
+                          fit="cover"
+                          class="coverImg"
+                          :src="item.coverUrl">
+                </el-image>
+              </el-col>
+              <el-col>
+                <el-row>
+                  <span>{{item.title}}</span>
+                </el-row>
+                <el-row>
+                  <span>{{0}} 播放</span>
+                </el-row>
+              </el-col>
+            </el-row>
           </div>
         </el-card>
         <div class="about">
@@ -130,11 +149,11 @@
             size="small"
             icon="el-icon-refresh"
             circle
-            @click="updateVideos"
+            @click="refreshSimilar"
           >换一换</el-button>
         </div>
         <el-row v-for="(item,index) in similarVideos" :key="index" class="item">
-          <video-card :video="video" />
+          <video-card :video="item" />
         </el-row>
       </el-col>
     </el-row>
@@ -163,7 +182,7 @@ export default {
       showVideo: true,
       isCollection: false, // 用户收藏状态
       collectionNum: 0, // 收藏次数
-
+      showVideoCollection: false,
       inputVisible: false,
       inputValue: '',
       tableData: [{
@@ -183,14 +202,11 @@ export default {
   },
   created() {
     const videoId = this.$route.params.id
-    console.log('Video ID -> ' + videoId)
     this.getVideoInfo(videoId)
     this.getSimilarVideos(videoId)
 
-    // 将关键字以逗号分隔为数组保存到标签组
-    // this.tags = this.video.tags.split('，')
     // 相关推荐列表
-    // this.updateVideos()
+    // this.refreshSimilar()
     // 获取当前登录对象
     const user = this.$user
     if (user) {
@@ -206,9 +222,6 @@ export default {
     /* getCollectionNum(this.video.vid).then(res => {
       this.collectionNum = res
     })*/
-    getVideoComment(videoId).then(res => {
-      console.log(res)
-    })
   },
   methods: {
     // 获取视频的详细信息
@@ -260,7 +273,8 @@ export default {
       this.inputValue = ''
     },
     // 换一换
-    updateVideos() {
+    refreshSimilar() {
+      console.log('刷新相关推荐')
     },
     // 跳转到播放页面，携带video数据
     toPlayer(item) {
@@ -398,8 +412,8 @@ export default {
 	.coverImg {
 		margin-top: 10px;
 		margin-bottom: 8px;
-		width: 100%;
-		/*height: 120px;*/
+		width: 40%;
+		height: 30%;
 		border-radius: 3px;
 	}
 
@@ -444,7 +458,7 @@ export default {
 		margin-right: 3px;
 	}
 
-	.el-icon-collection {
+	.video-data-row {
 		padding-top: 10px;
 		font-size: 13px;
 		padding-right: 10px;