|
|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <el-row v-if="video !== null" class="movie-list">
|
|
|
+ <el-row v-if="!permissionDenied" class="movie-list">
|
|
|
<el-col :md="15">
|
|
|
<el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
|
|
|
<el-card class="box-card">
|
|
|
@@ -172,6 +172,28 @@
|
|
|
</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
|
|
|
@@ -200,9 +222,13 @@
|
|
|
</el-card>
|
|
|
</el-dialog>
|
|
|
</el-row>
|
|
|
+ <el-row v-else>
|
|
|
+ <permission-denied-card :text-object="textObject" />
|
|
|
+ </el-row>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import PermissionDeniedCard from '@/components/card/PermissionDeniedCard'
|
|
|
import VideoPlayer from 'components/VideoPlayer'
|
|
|
import Comment from 'components/comment/Comment'
|
|
|
import VideoCard from 'components/card/VideoCard'
|
|
|
@@ -211,10 +237,11 @@ import UserAvatarCard from '@/components/card/UserAvatarCard'
|
|
|
import { similarVideo, videoInfo, videoErrorReport, downloadVideo, cacheBiliVideo } from '@/api/video'
|
|
|
import { collectItem } from '@/api/collect'
|
|
|
import { getUserInfo } from '@/api/user'
|
|
|
+import { submitAccessCode } from '@/api/content'
|
|
|
|
|
|
export default {
|
|
|
name: 'VideoPage',
|
|
|
- components: { Comment, VideoCard, VideoPlayer, UserAvatarCard },
|
|
|
+ components: { Comment, VideoCard, VideoPlayer, UserAvatarCard, PermissionDeniedCard },
|
|
|
data() {
|
|
|
return {
|
|
|
video: null,
|
|
|
@@ -226,11 +253,22 @@ export default {
|
|
|
user: null,
|
|
|
similarVideos: [],
|
|
|
isCollected: false,
|
|
|
+ showAccessCodeDialog: false,
|
|
|
+ accessCodeForm: {
|
|
|
+ contentId: null,
|
|
|
+ contentType: 1002,
|
|
|
+ accessCode: null
|
|
|
+ },
|
|
|
showErrorReportDialog: false,
|
|
|
errorReportForm: {
|
|
|
videoId: null,
|
|
|
errorCode: null
|
|
|
},
|
|
|
+ permissionDenied: false,
|
|
|
+ textObject: {
|
|
|
+ content: '视频',
|
|
|
+ route: '/video'
|
|
|
+ },
|
|
|
showPlaylist: false,
|
|
|
autoPlay: false
|
|
|
}
|
|
|
@@ -243,22 +281,24 @@ export default {
|
|
|
},
|
|
|
created() {
|
|
|
const videoId = this.$route.params.id
|
|
|
+ this.accessCodeForm.contentId = videoId
|
|
|
this.getVideoInfo(videoId)
|
|
|
this.getSimilarVideos(videoId)
|
|
|
},
|
|
|
methods: {
|
|
|
// 获取视频的详细信息
|
|
|
getVideoInfo(videoId) {
|
|
|
- videoInfo(videoId).then(res => {
|
|
|
- if (res.code === 0) {
|
|
|
- this.videoProp = res.data
|
|
|
+ videoInfo(videoId).then(resp => {
|
|
|
+ if (resp.code === 0) {
|
|
|
+ // this.showAccessCodeDialog = true
|
|
|
+ this.videoProp = resp.data
|
|
|
|
|
|
- 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
|
|
|
+ this.video = resp.data
|
|
|
+ document.title = resp.data.title
|
|
|
+ this.userId = resp.data.userId
|
|
|
+ getUserInfo(this.userId).then(resp => {
|
|
|
+ if (resp.code === 0) {
|
|
|
+ this.user = resp.data
|
|
|
} else {
|
|
|
this.$notify.error({
|
|
|
message: '用户数据获取失败',
|
|
|
@@ -267,13 +307,10 @@ export default {
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
- } else {
|
|
|
- this.$notify.error({
|
|
|
- message: '视频数据获取失败',
|
|
|
- type: 'warning',
|
|
|
- duration: 3000
|
|
|
- })
|
|
|
+ } else if (resp.code === 2) {
|
|
|
this.$router.push('/404')
|
|
|
+ } else {
|
|
|
+ this.permissionDenied = true
|
|
|
}
|
|
|
}).catch(error => {
|
|
|
this.$notify.error({
|
|
|
@@ -285,9 +322,9 @@ export default {
|
|
|
},
|
|
|
// 获取和当前视频类似的其他视频
|
|
|
getSimilarVideos(videoId) {
|
|
|
- similarVideo(videoId).then(res => {
|
|
|
- if (res.code === 0) {
|
|
|
- this.similarVideos = res.data
|
|
|
+ similarVideo(videoId).then(resp => {
|
|
|
+ if (resp.code === 0) {
|
|
|
+ this.similarVideos = resp.data
|
|
|
} else {
|
|
|
this.$notify.error({
|
|
|
message: '推荐视频数据获取失败',
|
|
|
@@ -313,8 +350,8 @@ export default {
|
|
|
jsonData.contentType = 1002
|
|
|
jsonData.contentId = videoId
|
|
|
jsonData.collected = true
|
|
|
- collectItem(jsonData).then(res => {
|
|
|
- if (res.code !== 0) {
|
|
|
+ collectItem(jsonData).then(resp => {
|
|
|
+ if (resp.code !== 0) {
|
|
|
this.$notify.success({
|
|
|
title: '视频收藏失败',
|
|
|
type: 'warning',
|
|
|
@@ -325,9 +362,9 @@ export default {
|
|
|
},
|
|
|
getDownloadUrl(videoId) {
|
|
|
// let filename
|
|
|
- downloadVideo(videoId).then(res => {
|
|
|
- if (res.code === 0) {
|
|
|
- const downloadUrl = res.data.url
|
|
|
+ downloadVideo(videoId).then(resp => {
|
|
|
+ if (resp.code === 0) {
|
|
|
+ const downloadUrl = resp.data.url
|
|
|
window.open(downloadUrl, '_blank')
|
|
|
/* fetch(downloadUrl.url, {
|
|
|
headers: {
|
|
|
@@ -335,17 +372,17 @@ export default {
|
|
|
},
|
|
|
method: 'GET',
|
|
|
credentials: 'include'
|
|
|
- }).then(res => {
|
|
|
+ }).then(resp => {
|
|
|
/!*
|
|
|
遍历 formdata
|
|
|
- for (const key of res.headers.keys()) {
|
|
|
- console.log(key + ' : ' + res.headers.get(key))
|
|
|
+ for (const key of resp.headers.keys()) {
|
|
|
+ console.log(key + ' : ' + resp.headers.get(key))
|
|
|
}*!/
|
|
|
- const header = res.headers.get('Content-Disposition')
|
|
|
+ const header = resp.headers.get('Content-Disposition')
|
|
|
const parts = header.split(';')
|
|
|
const encodeFilename = parts[1].split('=')[1]
|
|
|
filename = decodeURI(encodeFilename)
|
|
|
- return res.blob()
|
|
|
+ return resp.blob()
|
|
|
}).then(data => {
|
|
|
const blobUrl = window.URL.createObjectURL(data)
|
|
|
const a = document.createElement('a')
|
|
|
@@ -363,7 +400,7 @@ export default {
|
|
|
} else {
|
|
|
this.$notify({
|
|
|
title: '提示',
|
|
|
- message: res.msg,
|
|
|
+ message: resp.msg,
|
|
|
type: 'warning',
|
|
|
duration: 3000
|
|
|
})
|
|
|
@@ -378,9 +415,9 @@ export default {
|
|
|
})
|
|
|
},
|
|
|
cacheBiliVideo(bvId) {
|
|
|
- cacheBiliVideo(bvId).then(res => {
|
|
|
- if (res.code === 0) {
|
|
|
- const resData = res.data
|
|
|
+ cacheBiliVideo(bvId).then(resp => {
|
|
|
+ if (resp.code === 0) {
|
|
|
+ const resData = resp.data
|
|
|
this.$notify({
|
|
|
title: '提示',
|
|
|
message: resData.msg,
|
|
|
@@ -390,14 +427,34 @@ export default {
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
+ submitAccessCodeWrapper() {
|
|
|
+ submitAccessCode(this.accessCodeForm).then(resp => {
|
|
|
+ if (resp.code === 0) {
|
|
|
+ this.video = resp.data
|
|
|
+ } else {
|
|
|
+ this.$notify({
|
|
|
+ message: resp.msg,
|
|
|
+ type: 'warning',
|
|
|
+ duration: 3000
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }).catch(error => {
|
|
|
+ this.$notify({
|
|
|
+ title: '提示',
|
|
|
+ message: error.message,
|
|
|
+ type: 'warning',
|
|
|
+ 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) {
|
|
|
+ videoErrorReport(this.errorReportForm).then(resp => {
|
|
|
+ if (resp.code === 0) {
|
|
|
this.$notify({
|
|
|
title: '提示',
|
|
|
message: '视频错误已提交',
|
