tnbapp/src/views/home/VideoPage.vue

<template>
  <el-row class="movie-list">
    <el-col :md="18">
      <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 v-text="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>
              <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;'" />
              <span><i class="el-icon-s-comment">{{ video.commentCount }}</i></span>
              <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;'" />
              <span><i class="el-icon-watch">{{ video.pubDate }}</i></span>
            </el-row>
          </div>
          <div class="text item">
            <video-player :video-prop="video"/>
          </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">
            <div class="video-data-row">
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-collection"
                :disabled="isCollection"
                @click="collection(video.videoId)"
              >
                {{ 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"
                size="mini"
                icon="el-icon-download"
                @click="getDownloadUrl(video.videoId)"
              >
                <span>下载</span>
              </el-button>
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-help"
                @click="displayErrorReportDialog"
              >
                <span>报错</span>
              </el-button>
            </div>
          </div>
          <div class="text item">
            <!--视频描述行-->
            <span class="description">{{ video.description }}</span>
            <el-divider/>
            <!--视频标签行-->
            <div class="v-tag">
              <el-tag
                v-for="(tag,index) in video.tags"
                :key="index"
                class="tag"
                size="medium"
                effect="plain"
              >
                <router-link target="_blank" :to="`/video/tag/` + tag">
                  {{ tag }}
                </router-link>
              </el-tag>
            </div>
          </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">
            <comment :videoId="video.videoId" />
          </div>
        </el-card>
      </el-row>
    </el-col>
    <el-col :md="6">
      <el-row>
        <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
          <user-avatar-card :userAvatar="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">
              <el-row>
                <h3>播放列表</h3>
              </el-row>
            </div>
            <div class="text item">
              <span>视频播放列表</span>
            </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">
              <el-row v-for="(item,index) in similarVideos" :key="index" class="item">
                <video-card :video="item" />
              </el-row>
            </div>
          </el-card>
        </el-row>
      </el-row>
    </el-col>

    <!-- 视频报错对话框 -->
    <el-dialog
      append-to-body
      :visible.sync="showErrorReportDialog"
      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="submitErrorReport">提交错误</el-button>
        </div>
        <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-option label="视频无封面" value="1" />
                <el-option label="视频无声音" value="2" />
                <el-option label="视频无画面" value="3" />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </el-dialog>
  </el-row>
</template>

<script>
import VideoPlayer from 'components/VideoPlayer'
import Comment from 'components/comment/Comment'
import VideoCard from 'components/card/VideoCard'
import UserAvatarCard from '@/components/card/UserAvatarCard'

import {similarVideo, videoInfo, videoErrorReport, downloadVideo} from '@/api/video'
import { collectVideo } from "@/api/collect";
import {getUserInfo} from "@/api/user";

export default {
  name: 'VideoPage',
  components: { Comment, VideoCard, VideoPlayer, UserAvatarCard },
  data() {
    return {
      video: null,
      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,
      showErrorReportDialog: false,
      errorReportForm: {
        videoId: null,
        error: null
      }
    }
  },
  watch: {
    // 当video改变时修改标签组
    /* video(newVal) {
      // 将关键字以逗号分隔为数组保存到标签组
      this.tags = newVal.keyword.split('，')
    }*/
  },
  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

            getUserInfo(this.userId).then(res => {
              if (res.code === 0) {
                this.user = res.data
              }
            })
          } else {
            console.error(res.msg)
          }
        })
        .catch(error => {
          console.error(error.message)
        })
    },
    // 获取和当前视频类似的其他视频
    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)
        })
    },
    // 换一换
    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: '已收藏',
            duration: 2000
          })
        } else {
          this.$notify({
            title: '提示',
            message: res.msg,
            type: 'warning',
            duration: 3000
          })
        }
      })
    },
    getDownloadUrl(videoId) {
      let filename
      downloadVideo(videoId).then(res => {
        if (res.code === 0) {
          const downloadUrl = res.data
          fetch(downloadUrl.url, {
            headers: {
              Authorization: 'Bearer ' + downloadUrl.token
            },
            method: 'GET',
            credentials: 'include',
          }).then(res => {
            /*
            遍历 formdata
            for (const key of res.headers.keys()) {
              console.log(key + ' : ' + res.headers.get(key))
            }*/
            const header = res.headers.get('Content-Disposition');
            const parts = header.split(';');
            filename = parts[1].split('=')[1];
            return res.blob()
          }).then(data => {
              const blobUrl = window.URL.createObjectURL(data);
              const a = document.createElement('a');
              a.download = filename;
              a.href = blobUrl;
              a.click();
          }).catch(e => {
            this.$notify({
              title: '提示',
              message: '视频下载失败',
              type: 'warning',
              duration: 3000
            })
          })
        } else {
          this.$notify({
            title: '提示',
            message: res.msg,
            type: 'warning',
            duration: 3000
          })
        }
      }).catch(error => {
        this.$notify({
          title: '提示',
          message: error.message,
          type: 'error',
          duration: 3000
        })
      })
    },
    displayErrorReportDialog() {
      this.errorReportForm.videoId = this.video.videoId
      this.showErrorReportDialog = true
    },
    submitErrorReport() {
      this.showErrorReportDialog = false
      videoErrorReport(this.errorReportForm).then(res => {
        if (res.code === 0) {
        }
      }).catch(error => {
        this.$notify({
          title: '提示',
          message: error.message,
          type: 'warning',
          duration: 3000
        })
      })
    },
    displayUpdateDialog() {
      this.showUpdateDialog = true
    },
    updateVideoInfo(videoId) {
      console.log('更新视频信息')
      this.showUpdateDialog = false
    },
  }
}
</script>

<style scoped>
/*处于手机屏幕时*/
@media screen and (max-width: 768px) {
  .movie-list {
    padding-top: 8px;
    padding-left: 0.5%;
    padding-right: 0.5%;
  }
}

.movie-list {
  padding-top: 15px;
  padding-left: 6%;
  padding-right: 6%;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.v-tag {
  padding-top: 10px;
}
.tag{
  margin-right: 3px;
}
</style>