更新 VideoPage.vue 页面

src/views/home/VideoPage.vue

@@ -5,7 +5,7 @@
         <el-card class="box-card">
           <div slot="header" class="clearfix">
             <el-row>
-              <h3 v-text="video.title" />
+              <h3 v-html="video.title" />
             </el-row>
             <el-row style="color: #999;font-size: 16px;padding-top: 0px;">
               <span><i class="el-icon-video-play">{{ video.viewCount }}</i></span>
@@ -28,28 +28,28 @@
                 type="danger"
                 size="mini"
                 icon="el-icon-collection"
-                :disabled="isCollection"
+                :disabled="isCollected"
                 @click="collection(video.videoId)"
               >
-                {{ video.collectCount }}
+                <span>收藏 {{ video.collectCount }}</span>
               </el-button>
               <el-button
                 type="danger"
                 size="mini"
                 icon="el-icon-thumb"
-                :disabled="isCollection"
+                :disabled="isCollected"
                 @click="collection(video.videoId)"
               >
-                <span>喜欢</span>
+                <span>喜欢 {{ video.collectCount }}</span>
               </el-button>
               <el-button
                 type="danger"
                 size="mini"
                 icon="el-icon-share"
-                :disabled="isCollection"
+                :disabled="isCollected"
                 @click="collection(video.videoId)"
               >
-                <span>分享</span>
+                <span>分享 {{ video.collectCount }}</span>
               </el-button>
               <el-button
                 type="danger"
@@ -71,7 +71,7 @@
           </div>
           <div class="text item">
             <!--视频描述行-->
-            <span class="description">{{ video.description }}</span>
+            <span class="description" v-html="video.description"/>
             <el-divider/>
             <!--视频标签行-->
             <div class="v-tag">
@@ -114,9 +114,30 @@
               <el-row>
                 <h3>播放列表</h3>
               </el-row>
+              <el-row>
+                <span>自动播放 <el-switch v-model="autoPlay"/></span>
+              </el-row>
             </div>
             <div class="text item">
-              <span>视频播放列表</span>
+              <el-table
+                :data="similarVideos"
+                style="width: 100%"
+              >
+                <el-table-column
+                  prop="title">
+                  <template slot-scope="scope">
+                    <router-link target="_blank" :to="`/video/${scope.row.videoId}`">
+                      <span>{{scope.row.videoId}}</span>
+                    </router-link>
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  prop="coverUrl">
+                  <template slot-scope="scope">
+                    <span>10:00</span>
+                  </template>
+                </el-table-column>
+              </el-table>
             </div>
           </el-card>
         </el-row>
@@ -126,6 +147,9 @@
               <el-row>
                 <h3>推荐视频</h3>
               </el-row>
+              <el-row>
+                <span>自动播放 <el-switch v-model="autoPlay"/></span>
+              </el-row>
             </div>
             <div class="text item">
               <el-row v-for="(item,index) in similarVideos" :key="index" class="item">
@@ -152,10 +176,11 @@
         <div class="text item">
           <el-form ref="form" :model="errorReportForm" label-width="80px">
             <el-form-item label="错误类型">
-              <el-select v-model="errorReportForm.error" placeholder="选择视频错误类型">
+              <el-select v-model="errorReportForm.errorCode" placeholder="选择视频错误类型">
                 <el-option label="视频无封面" value="1" />
                 <el-option label="视频无声音" value="2" />
                 <el-option label="视频无画面" value="3" />
+                <el-option label="视频无资源" value="4" />
               </el-select>
             </el-form-item>
           </el-form>
@@ -181,169 +206,103 @@ export default {
   data() {
     return {
       video: null,
+      videoProp: {
+        info: null,
+        autoPlay: false,
+        playlist: []
+      },
       user: null,
       similarVideos: [],
-      // 标签的样式数组
-      types: ['', 'success', 'info', 'danger', 'warning'],
-      // 标签
-      tags: [],
-      // 相关推荐videos
-      videos: [],
-      showVideo: true,
-      isCollection: false, // 用户收藏状态
-      collectionNum: 0, // 收藏次数
-      showVideoCollection: false,
-      inputVisible: false,
-      inputValue: '',
-      tableData: [{
-        date: '00:09',
-        name: '王小虎1',
-        address: '05-02 22:10'
-      }],
-      showUpdateDialog: false,
-      videoUpdate: {
-      },
-      showPlaylist: false,
+      isCollected: false,
       showErrorReportDialog: false,
       errorReportForm: {
         videoId: null,
-        error: null
-      }
+        errorCode: null
+      },
+      showPlaylist: false,
+      autoPlay: false,
     }
   },
   watch: {
-    // 当video改变时修改标签组
-    /* video(newVal) {
-      // 将关键字以逗号分隔为数组保存到标签组
-      this.tags = newVal.keyword.split('，')
-    }*/
+    // 地址栏 url 发生变化时重新加载本页面
+    $route(){
+      this.$router.go()
+    }
   },
   created() {
     const videoId = this.$route.params.id
     this.getVideoInfo(videoId)
     this.getSimilarVideos(videoId)
-
-    // 相关推荐列表
-    // this.refreshSimilar()
-    // 获取当前登录对象
-    const user = this.$user
-    if (user) {
-      this.isCollection = true
-      /* isCollection(user.uid, this.video.vid).then(res => {
-        if (res) {
-          this.isCollection = true
-        }
-      })*/
-    }
-
-    // 获取当前视频收藏次数
-    /* getCollectionNum(this.video.vid).then(res => {
-      this.collectionNum = res
-    })*/
   },
   methods: {
     // 获取视频的详细信息
     getVideoInfo(videoId) {
-      videoInfo(videoId)
-        .then(res => {
-          if (res.code === 0) {
-            this.video = res.data
-            document.title = res.data.title
-            this.userId = res.data.userId
+      videoInfo(videoId).then(res => {
+        if (res.code === 0) {
+          this.videoProp = res.data
 
-            getUserInfo(this.userId).then(res => {
-              if (res.code === 0) {
-                this.user = res.data
-              }
-            })
-          } else {
-            console.error(res.msg)
-          }
-        })
-        .catch(error => {
-          console.error(error.message)
+          this.video = res.data
+          document.title = res.data.title
+          this.userId = res.data.userId
+          getUserInfo(this.userId).then(res => {
+            if (res.code === 0) {
+              this.user = res.data
+            } else {
+              this.$notify.error({
+                message: '用户数据获取失败',
+                type: 'warning',
+                duration: 3000
+              })
+            }
+          })
+        } else {
+          this.$notify.error({
+            message: '视频数据获取失败',
+            type: 'warning',
+            duration: 3000
+          })
+        }
+      }).catch(error => {
+        this.$notify.error({
+          message: error.message,
+          type: 'warning',
+          duration: 3000
         })
+      })
     },
     // 获取和当前视频类似的其他视频
     getSimilarVideos(videoId) {
-      similarVideo(videoId)
-        .then(res => {
-          if (res.code === 0) {
-            this.similarVideos = res.data
-          } else {
-            console.error(res.msg)
-          }
-        })
-        .catch(error => {
-          console.error(error.message)
+      similarVideo(videoId).then(res => {
+        if (res.code === 0) {
+          this.similarVideos = res.data
+        } else {
+          this.$notify.error({
+            message: '推荐视频数据获取失败',
+            type: 'warning',
+            duration: 3000
+          })
+        }
+      }).catch(error => {
+        this.$notify.error({
+          message: error.message,
+          type: 'warning',
+          duration: 3000
         })
+      })
     },
     // 换一换
     refreshSimilar() {
       console.log('刷新相关推荐')
     },
-    // 跳转到播放页面，携带video数据
-    toPlayer(item) {
-      this.showVideo = false
-      // 异步更新dom,重新渲染pvideo
-      this.$nextTick(() => {
-        this.showVideo = true
-      })
-
-      // 回到顶部
-      scrollTo(0, 0)
-
-      this.video = item
-      // 添加播放次数
-      // addVisited(item.vid)
-
-      // 根据此视频判断当前用户是否收藏
-      const user = this.$user
-      if (user) {
-        /* isCollection(user.uid, item.vid).then(res => {
-          if (res) {
-            this.isCollection = true
-          } else {
-            this.isCollection = false
-          }
-        })*/
-      }
-
-      // 获取当前视频收藏次数
-      /* getCollectionNum(this.video.vid).then(res => {
-        this.collectionNum = res
-      })*/
-
-      // 添加播放历史记录
-      if (user) {
-        /* addHistory(user.uid, this.video.vid).then(res => {
-          // console.log(res);
-        })*/
-      }
-    },
-    /*	// 用户点击收藏
-			collection() {
-				// 获取user
-				let user = this.$user
-				if (!user) {
-					this.$toast.show("用户未登录",2000)
-				}
-			}, */
     // 用户点击收藏
     collection(videoId) {
       collectVideo({videoId: videoId}).then(res => {
         if (res.code === 0) {
           this.$notify.success({
-            title: '已收藏',
+            title: '视频已收藏',
             duration: 2000
           })
         } else {
-          this.$notify({
-            title: '提示',
-            message: res.msg,
-            type: 'warning',
-            duration: 3000
-          })
         }
       })
     },
@@ -407,6 +366,12 @@ export default {
       this.showErrorReportDialog = false
       videoErrorReport(this.errorReportForm).then(res => {
         if (res.code === 0) {
+          this.$notify({
+            title: '提示',
+            message: '视频错误已提交',
+            type: 'warning',
+            duration: 3000
+          })
         }
       }).catch(error => {
         this.$notify({
@@ -417,13 +382,6 @@ export default {
         })
       })
     },
-    displayUpdateDialog() {
-      this.showUpdateDialog = true
-    },
-    updateVideoInfo(videoId) {
-      console.log('更新视频信息')
-      this.showUpdateDialog = false
-    },
   }
 }
 </script>
@@ -439,9 +397,9 @@ export default {
 }
 
 .movie-list {
-  padding-top: 15px;
-  padding-left: 6%;
-  padding-right: 6%;
+  padding-top: 10px;
+  padding-left: 1%;
+  padding-right: 1%;
 }
 
 .clearfix:before,