|
@@ -7,16 +7,16 @@
|
|
|
<h1 class="video-title" v-html="video.title" />
|
|
<h1 class="video-title" v-html="video.title" />
|
|
|
<div class="video-meta">
|
|
<div class="video-meta">
|
|
|
<div class="meta-left">
|
|
<div class="meta-left">
|
|
|
- <span class="meta-item"><i class="el-icon-video-play"></i> {{ video.view }} 次播放</span>
|
|
|
|
|
- <span class="meta-item"><i class="el-icon-s-comment"></i> {{ video.comment }} 评论</span>
|
|
|
|
|
- <span class="meta-item"><i class="el-icon-watch"></i> {{ video.pubDate }}</span>
|
|
|
|
|
|
|
+ <span class="meta-item"><i class="el-icon-video-play" /> {{ video.view }} 次播放</span>
|
|
|
|
|
+ <span class="meta-item"><i class="el-icon-s-comment" /> {{ video.comment }} 评论</span>
|
|
|
|
|
+ <span class="meta-item"><i class="el-icon-watch" /> {{ video.pubDate }}</span>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="meta-right">
|
|
<div class="meta-right">
|
|
|
<el-tag v-if="videoId && videoId.includes('BV')" size="mini" type="info" effect="plain">
|
|
<el-tag v-if="videoId && videoId.includes('BV')" size="mini" type="info" effect="plain">
|
|
|
<a target="_blank" :href="'https://bilibili.com/' + videoId" class="bili-link">B站源</a>
|
|
<a target="_blank" :href="'https://bilibili.com/' + videoId" class="bili-link">B站源</a>
|
|
|
</el-tag>
|
|
</el-tag>
|
|
|
<el-tag type="danger" size="small" effect="dark" class="live-tag">
|
|
<el-tag type="danger" size="small" effect="dark" class="live-tag">
|
|
|
- <i class="el-icon-view"></i> {{ realtimeViewCount }} 人正在看
|
|
|
|
|
|
|
+ <i class="el-icon-view" /> {{ realtimeViewCount }} 人正在看
|
|
|
</el-tag>
|
|
</el-tag>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -24,32 +24,30 @@
|
|
|
|
|
|
|
|
<div class="video-content">
|
|
<div class="video-content">
|
|
|
<video-player-card
|
|
<video-player-card
|
|
|
- v-if="video"
|
|
|
|
|
- :video-id="videoId"
|
|
|
|
|
- :video-data="video"
|
|
|
|
|
- :user-token="userToken"
|
|
|
|
|
- :send-event="sendEvent"
|
|
|
|
|
- @update-view-count="val => realtimeViewCount = val"
|
|
|
|
|
|
|
+ v-if="video"
|
|
|
|
|
+ :video-id="videoId"
|
|
|
|
|
+ :video-data="video"
|
|
|
|
|
+ :user-token="userToken"
|
|
|
|
|
+ :send-event="sendEvent"
|
|
|
|
|
+ @update-view-count="val => realtimeViewCount = val"
|
|
|
/>
|
|
/>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<video-ops-card
|
|
<video-ops-card
|
|
|
- v-if="video"
|
|
|
|
|
- :video="video"
|
|
|
|
|
- :show-edit="showEdit"
|
|
|
|
|
- @like="likeVideo"
|
|
|
|
|
- @dislike="dislikeVideoWrapper"
|
|
|
|
|
- @collect="collection"
|
|
|
|
|
- @share="displayShareVideoDialog"
|
|
|
|
|
- @download="getDownloadUrl"
|
|
|
|
|
- @report="displayErrorReportDialog"
|
|
|
|
|
- @edit="displayEditDialog"
|
|
|
|
|
- @delete="deleteVideo"
|
|
|
|
|
|
|
+ v-if="video"
|
|
|
|
|
+ :video="video"
|
|
|
|
|
+ :show-edit="showEdit"
|
|
|
|
|
+ @like="likeVideo"
|
|
|
|
|
+ @dislike="dislikeVideoWrapper"
|
|
|
|
|
+ @collect="collection"
|
|
|
|
|
+ @share="displayShareVideoDialog"
|
|
|
|
|
+ @download="getDownloadUrl"
|
|
|
|
|
+ @report="displayErrorReportDialog"
|
|
|
/>
|
|
/>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<el-card class="info-card shadow-box">
|
|
<el-card class="info-card shadow-box">
|
|
|
- <div class="video-description" v-html="video.description"></div>
|
|
|
|
|
|
|
+ <div class="video-description" v-html="video.description" />
|
|
|
<div class="video-tags">
|
|
<div class="video-tags">
|
|
|
<el-tag v-for="(tag,index) in video.tags" :key="index" class="video-tag-item" size="small" effect="light" round>
|
|
<el-tag v-for="(tag,index) in video.tags" :key="index" class="video-tag-item" size="small" effect="light" round>
|
|
|
<router-link :to="'/video/tag/' + tag"># {{ tag }}</router-link>
|
|
<router-link :to="'/video/tag/' + tag"># {{ tag }}</router-link>
|
|
@@ -116,14 +114,12 @@
|
|
|
<el-dialog append-to-body :visible.sync="showShareVideoDialog" title="分享视频" width="500px">
|
|
<el-dialog append-to-body :visible.sync="showShareVideoDialog" title="分享视频" width="500px">
|
|
|
<div class="share-preview">
|
|
<div class="share-preview">
|
|
|
<el-image lazy fit="cover" class="share-cover" :src="video.coverUrl" />
|
|
<el-image lazy fit="cover" class="share-cover" :src="video.coverUrl" />
|
|
|
- <h4 v-html="video.title"></h4>
|
|
|
|
|
|
|
+ <h4 v-html="video.title" />
|
|
|
</div>
|
|
</div>
|
|
|
<span slot="footer">
|
|
<span slot="footer">
|
|
|
<el-button type="primary" icon="el-icon-document-copy" @click="submitShareVideo">复制分享链接</el-button>
|
|
<el-button type="primary" icon="el-icon-document-copy" @click="submitShareVideo">复制分享链接</el-button>
|
|
|
</span>
|
|
</span>
|
|
|
</el-dialog>
|
|
</el-dialog>
|
|
|
-
|
|
|
|
|
- <edit-video-card :video="video" :create-dialog="showEditDialog" @closeDialog="closeHandle" />
|
|
|
|
|
</el-row>
|
|
</el-row>
|
|
|
</el-row>
|
|
</el-row>
|
|
|
<el-row v-else class="denied-container">
|
|
<el-row v-else class="denied-container">
|
|
@@ -132,25 +128,22 @@
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
-import { similarVideo, videoInfo, downloadVideo, getShortUrl } from '@/api/video'
|
|
|
|
|
-import { videoErrorReport, videoErrorDelete } from '@/api/video_edit'
|
|
|
|
|
|
|
+import { similarVideo, videoInfo, downloadVideo, getShortUrl, videoErrorReport } from '@/api/video'
|
|
|
import { collectItem, createAlbum, getUserAlbumList } from '@/api/collect'
|
|
import { collectItem, createAlbum, getUserAlbumList } from '@/api/collect'
|
|
|
import { getUserInfo } from '@/api/user'
|
|
import { getUserInfo } from '@/api/user'
|
|
|
import { getAccessToken, getAuthedUser } from '@/utils/auth'
|
|
import { getAccessToken, getAuthedUser } from '@/utils/auth'
|
|
|
import { dislikeVideo } from '@/api/content'
|
|
import { dislikeVideo } from '@/api/content'
|
|
|
|
|
|
|
|
-// 组件导入
|
|
|
|
|
import PermissionDeniedCard from '@/components/card/PermissionDeniedCard'
|
|
import PermissionDeniedCard from '@/components/card/PermissionDeniedCard'
|
|
|
import VideoPlayerCard from 'components/card/VideoPlayerCard'
|
|
import VideoPlayerCard from 'components/card/VideoPlayerCard'
|
|
|
import SideVideoCard from 'components/card/SideVideoCard'
|
|
import SideVideoCard from 'components/card/SideVideoCard'
|
|
|
import UserAvatarCard from '@/components/card/UserAvatarCard'
|
|
import UserAvatarCard from '@/components/card/UserAvatarCard'
|
|
|
-import EditVideoCard from '@/components/card/EditVideoCard'
|
|
|
|
|
import UserCommentCard from '@/components/card/UserCommentCard'
|
|
import UserCommentCard from '@/components/card/UserCommentCard'
|
|
|
import VideoOpsCard from 'components/card/VideoOpsCard'
|
|
import VideoOpsCard from 'components/card/VideoOpsCard'
|
|
|
|
|
|
|
|
export default {
|
|
export default {
|
|
|
name: 'VideoPage',
|
|
name: 'VideoPage',
|
|
|
- components: { EditVideoCard, SideVideoCard, UserAvatarCard, PermissionDeniedCard, VideoPlayerCard, UserCommentCard, VideoOpsCard },
|
|
|
|
|
|
|
+ components: { SideVideoCard, UserAvatarCard, PermissionDeniedCard, VideoPlayerCard, UserCommentCard, VideoOpsCard },
|
|
|
data() {
|
|
data() {
|
|
|
return {
|
|
return {
|
|
|
screenWidth: document.body.clientWidth,
|
|
screenWidth: document.body.clientWidth,
|
|
@@ -170,7 +163,6 @@ export default {
|
|
|
albumForm: { albumName: null },
|
|
albumForm: { albumName: null },
|
|
|
currentRow: null,
|
|
currentRow: null,
|
|
|
showShareVideoDialog: false,
|
|
showShareVideoDialog: false,
|
|
|
- showEditDialog: false,
|
|
|
|
|
showEdit: true,
|
|
showEdit: true,
|
|
|
userToken: null,
|
|
userToken: null,
|
|
|
sendEvent: true,
|
|
sendEvent: true,
|
|
@@ -236,13 +228,6 @@ export default {
|
|
|
createAlbum(this.albumForm).then(resp => { if (resp.code === 0) this.playlist.push(resp.data) })
|
|
createAlbum(this.albumForm).then(resp => { if (resp.code === 0) this.playlist.push(resp.data) })
|
|
|
this.albumForm.albumName = null
|
|
this.albumForm.albumName = null
|
|
|
},
|
|
},
|
|
|
- deleteVideo(video) {
|
|
|
|
|
- this.$confirm('确定要删除 ' + video.title + '?', '提示', { type: 'warning' }).then(() => {
|
|
|
|
|
- videoErrorDelete({ videoId: video.videoId, errorCode: 4 }).then(resp => {
|
|
|
|
|
- if (resp.code === 0) this.$notify.warning({ title: '提示', message: '视频错误已提交' })
|
|
|
|
|
- })
|
|
|
|
|
- })
|
|
|
|
|
- },
|
|
|
|
|
displayErrorReportDialog() { this.errorReportForm.videoId = this.video.videoId; this.showErrorReportDialog = true },
|
|
displayErrorReportDialog() { this.errorReportForm.videoId = this.video.videoId; this.showErrorReportDialog = true },
|
|
|
submitErrorReport() {
|
|
submitErrorReport() {
|
|
|
videoErrorReport(this.errorReportForm).then(resp => {
|
|
videoErrorReport(this.errorReportForm).then(resp => {
|
|
@@ -251,14 +236,12 @@ export default {
|
|
|
})
|
|
})
|
|
|
},
|
|
},
|
|
|
displayShareVideoDialog() { this.showShareVideoDialog = true },
|
|
displayShareVideoDialog() { this.showShareVideoDialog = true },
|
|
|
- displayEditDialog() { this.showEditDialog = true },
|
|
|
|
|
- closeHandle() { this.showEditDialog = false },
|
|
|
|
|
submitShareVideo() {
|
|
submitShareVideo() {
|
|
|
getShortUrl(this.video.videoId).then(resp => {
|
|
getShortUrl(this.video.videoId).then(resp => {
|
|
|
if (resp.code === 0) {
|
|
if (resp.code === 0) {
|
|
|
const content = window.location.origin + resp.data
|
|
const content = window.location.origin + resp.data
|
|
|
- const input = document.createElement('input'); input.value = content; document.body.appendChild(input);
|
|
|
|
|
- input.select(); document.execCommand('Copy'); document.body.removeChild(input);
|
|
|
|
|
|
|
+ const input = document.createElement('input'); input.value = content; document.body.appendChild(input)
|
|
|
|
|
+ input.select(); document.execCommand('Copy'); document.body.removeChild(input)
|
|
|
this.$message.info('已成功复制到剪贴板')
|
|
this.$message.info('已成功复制到剪贴板')
|
|
|
}
|
|
}
|
|
|
this.showShareVideoDialog = false
|
|
this.showShareVideoDialog = false
|