|
|
@@ -1,261 +1,180 @@
|
|
|
<template>
|
|
|
- <div v-if="video !== null" class="player">
|
|
|
- <el-row style="padding-top: 12px" :gutter="20">
|
|
|
- <el-col :md="15">
|
|
|
- <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="' '" />
|
|
|
- <span><i class="el-icon-s-comment">{{ video.commentCount }}</i></span>
|
|
|
- <span v-html="' '" />
|
|
|
- <span><i class="el-icon-watch">{{ video.pubDate }}</i></span>
|
|
|
- </el-row>
|
|
|
- </el-col>
|
|
|
- <el-col :md="9">
|
|
|
- <el-row>
|
|
|
- <el-col :md="3">
|
|
|
- <router-link target="_blank" :to="`/user/` + video.user.userId">
|
|
|
- <el-avatar>
|
|
|
- <el-image :src="video.user.avatarUrl" />
|
|
|
- </el-avatar>
|
|
|
- </router-link>
|
|
|
- </el-col>
|
|
|
- <el-col :md="6">
|
|
|
- <router-link target="_blank" :to="`/user/` + video.user.userId"><span>{{ video.user.screenName }}</span></router-link>
|
|
|
- <router-link target="_blank" :to="`/message/` + video.user.userId"><span class="el-icon-message">发消息</span></router-link>
|
|
|
- <span v-html="' '" />
|
|
|
- <el-button small outlined color="primary">
|
|
|
- <span>已关注</span>
|
|
|
- <!-- <span v-if="!isFollowed">关注</span>-->
|
|
|
- <span v-html="' '" />
|
|
|
- <span>2000</span>
|
|
|
- </el-button>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row style="padding-top: 12px" :gutter="20"><!--gutter为栅格的间隔-->
|
|
|
- <!--播放列-->
|
|
|
- <el-col :md="15">
|
|
|
- <!--视频播放框-->
|
|
|
- <video-player :video-prop="video" />
|
|
|
- <!--视频数据行-->
|
|
|
- <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"
|
|
|
- :disabled="isCollection"
|
|
|
- @click="collection(video.videoId)"
|
|
|
- >
|
|
|
- <span>下载</span>
|
|
|
- </el-button>
|
|
|
- <el-button
|
|
|
- type="danger"
|
|
|
- size="mini"
|
|
|
- icon="el-icon-help"
|
|
|
- @click="displayErrorDialog(video.videoId)"
|
|
|
- >
|
|
|
- <span>报错</span>
|
|
|
- </el-button>
|
|
|
- <el-button
|
|
|
- type="danger"
|
|
|
- size="mini"
|
|
|
- icon="el-icon-edit"
|
|
|
- @click="displayUpdateDialog(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"
|
|
|
- :key="index"
|
|
|
- class="tag"
|
|
|
- size="medium"
|
|
|
- effect="plain"
|
|
|
- >
|
|
|
- <router-link target="_blank" :to="`/video/tag/` + tag">
|
|
|
- {{ tag }}
|
|
|
- </router-link>
|
|
|
- </el-tag>
|
|
|
- <el-input
|
|
|
- v-if="inputVisible"
|
|
|
- ref="saveTagInput"
|
|
|
- v-model="inputValue"
|
|
|
- class="input-new-tag"
|
|
|
- size="mini"
|
|
|
- @keyup.enter.native="handleInputConfirm"
|
|
|
- @blur="handleInputConfirm"
|
|
|
- />
|
|
|
- <el-button v-else class="button-new-tag" size="mini" @click="showInput">+ 添加标签</el-button>
|
|
|
- </div>
|
|
|
- <!--视频评论组件-->
|
|
|
- <comment :videoId="video.videoId" />
|
|
|
- </el-col>
|
|
|
- <!--推荐列-->
|
|
|
- <el-col :md="9">
|
|
|
- <el-card v-if="showVideoCollection" class="box-card">
|
|
|
+ <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">
|
|
|
- <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>
|
|
|
+ <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="' '" />
|
|
|
+ <span><i class="el-icon-s-comment">{{ video.commentCount }}</i></span>
|
|
|
+ <span v-html="' '" />
|
|
|
+ <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>
|
|
|
- <div class="about">
|
|
|
- <div>相关推荐</div>
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- size="small"
|
|
|
- icon="el-icon-refresh"
|
|
|
- circle
|
|
|
- @click="refreshSimilar"
|
|
|
- >换一换</el-button>
|
|
|
- </div>
|
|
|
- <el-row v-for="(item,index) in similarVideos" :key="index" class="item">
|
|
|
- <video-card :video="item" />
|
|
|
+ </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"
|
|
|
+ :disabled="isCollection"
|
|
|
+ @click="collection(video.videoId)"
|
|
|
+ >
|
|
|
+ <span>下载</span>
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ type="danger"
|
|
|
+ size="mini"
|
|
|
+ icon="el-icon-help"
|
|
|
+ @click="displayErrorDialog(video.videoId)"
|
|
|
+ >
|
|
|
+ <span>报错</span>
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ type="danger"
|
|
|
+ size="mini"
|
|
|
+ icon="el-icon-edit"
|
|
|
+ @click="displayUpdateDialog(video.videoId)"
|
|
|
+ >
|
|
|
+ <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.tagList"
|
|
|
+ :key="index"
|
|
|
+ class="tag"
|
|
|
+ size="medium"
|
|
|
+ effect="plain"
|
|
|
+ >
|
|
|
+ <router-link target="_blank" :to="`/video/tag/` + tag">
|
|
|
+ {{ tag }}
|
|
|
+ </router-link>
|
|
|
+ </el-tag>
|
|
|
+ <el-input
|
|
|
+ v-if="inputVisible"
|
|
|
+ ref="saveTagInput"
|
|
|
+ v-model="inputValue"
|
|
|
+ class="input-new-tag"
|
|
|
+ size="mini"
|
|
|
+ @keyup.enter.native="handleInputConfirm"
|
|
|
+ @blur="handleInputConfirm"
|
|
|
+ />
|
|
|
+ <el-button v-else class="button-new-tag" size="mini" @click="showInput">+ 添加标签</el-button>
|
|
|
+ </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-col>
|
|
|
- </el-row>
|
|
|
-
|
|
|
- <!-- 视频信息报错对话框 -->
|
|
|
- <el-dialog
|
|
|
- title="视频错误信息"
|
|
|
- append-to-body
|
|
|
- :visible.sync="showSubmitErrorDialog"
|
|
|
- width="30%"
|
|
|
- center
|
|
|
- >
|
|
|
- <el-input
|
|
|
- v-model="videoUpdate.title"
|
|
|
- placeholder="标题"
|
|
|
- style="width: 70%; padding-right: 2px"
|
|
|
- clearable
|
|
|
- />
|
|
|
- <br>
|
|
|
- <el-input
|
|
|
- v-model="videoUpdate.pubDate"
|
|
|
- placeholder="发布时间"
|
|
|
- style="width: 45%; padding-right: 2px"
|
|
|
- />
|
|
|
- <br>
|
|
|
- <el-input
|
|
|
- v-model="videoUpdate.tag"
|
|
|
- placeholder="标签"
|
|
|
- style="width: 45%; padding-right: 2px"
|
|
|
- />
|
|
|
- <br>
|
|
|
- <span slot="footer" class="dialog-footer">
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- @click.native="submitErrorInfo"
|
|
|
- >提交</el-button>
|
|
|
- </span>
|
|
|
- </el-dialog>
|
|
|
-
|
|
|
- <!-- 视频信息编辑对话框 -->
|
|
|
- <el-dialog
|
|
|
- title="更新视频信息"
|
|
|
- append-to-body
|
|
|
- :visible.sync="showUpdateDialog"
|
|
|
- width="30%"
|
|
|
- center
|
|
|
- >
|
|
|
- <el-input
|
|
|
- v-model="videoUpdate.title"
|
|
|
- placeholder="标题"
|
|
|
- style="width: 70%; padding-right: 2px"
|
|
|
- clearable
|
|
|
- />
|
|
|
- <br>
|
|
|
- <el-input
|
|
|
- v-model="videoUpdate.pubDate"
|
|
|
- placeholder="发布时间"
|
|
|
- style="width: 45%; padding-right: 2px"
|
|
|
- />
|
|
|
- <br>
|
|
|
- <el-input
|
|
|
- v-model="videoUpdate.tag"
|
|
|
- placeholder="标签"
|
|
|
- style="width: 45%; padding-right: 2px"
|
|
|
- />
|
|
|
- <br>
|
|
|
- <el-input
|
|
|
- v-model="videoUpdate.tag"
|
|
|
- placeholder="分区"
|
|
|
- style="width: 45%; padding-right: 2px"
|
|
|
- />
|
|
|
- <br>
|
|
|
- <span slot="footer" class="dialog-footer">
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- @click.native="updateVideoInfo"
|
|
|
- >更新</el-button>
|
|
|
- </span>
|
|
|
- </el-dialog>
|
|
|
- </div>
|
|
|
+ <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">
|
|
|
+ <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-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, getVideoComment } from '@/api/video'
|
|
|
import { collectVideo } from "@/api/collect";
|
|
|
+import {getUserInfo} from "@/api/user";
|
|
|
|
|
|
export default {
|
|
|
name: 'VideoPage',
|
|
|
- components: { Comment, VideoCard, VideoPlayer },
|
|
|
+ components: { Comment, VideoCard, VideoPlayer, UserAvatarCard },
|
|
|
data() {
|
|
|
return {
|
|
|
video: null,
|
|
|
+ user: null,
|
|
|
similarVideos: [],
|
|
|
// 标签的样式数组
|
|
|
types: ['', 'success', 'info', 'danger', 'warning'],
|
|
|
@@ -319,6 +238,12 @@ export default {
|
|
|
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)
|
|
|
}
|
|
|
@@ -447,11 +372,19 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-.text {
|
|
|
- font-size: 14px;
|
|
|
+/*处于手机屏幕时*/
|
|
|
+@media screen and (max-width: 768px) {
|
|
|
+ .movie-list {
|
|
|
+ padding-top: 8px;
|
|
|
+ padding-left: 0.5%;
|
|
|
+ padding-right: 0.5%;
|
|
|
+ }
|
|
|
}
|
|
|
-.item {
|
|
|
- margin-bottom: 18px;
|
|
|
+
|
|
|
+.movie-list {
|
|
|
+ padding-top: 15px;
|
|
|
+ padding-left: 6%;
|
|
|
+ padding-right: 6%;
|
|
|
}
|
|
|
|
|
|
.clearfix:before,
|
|
|
@@ -459,128 +392,8 @@ export default {
|
|
|
display: table;
|
|
|
content: "";
|
|
|
}
|
|
|
-.clearfix:after {
|
|
|
- clear: both
|
|
|
-}
|
|
|
|
|
|
-.box-card {
|
|
|
- width: 480px;
|
|
|
+.clearfix:after {
|
|
|
+ clear: both;
|
|
|
}
|
|
|
- .player {
|
|
|
- padding-top: 20px;
|
|
|
- padding-left: 6%;
|
|
|
- padding-right: 6%;
|
|
|
- }
|
|
|
-
|
|
|
- .about {
|
|
|
- font-size: 18px;
|
|
|
- margin-top: 10px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- }
|
|
|
- .content {
|
|
|
- padding-bottom: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .item {
|
|
|
- cursor: pointer;
|
|
|
- margin-bottom: 10px;
|
|
|
- border-bottom: 1px solid rgba(34, 36, 38, .15);
|
|
|
- box-shadow: 0 1px 2px 0 rgba(34, 36, 38, .15);
|
|
|
- }
|
|
|
- .item:hover {
|
|
|
- background-color: rgb(236, 245, 255);
|
|
|
- color: rgb(102, 177, 255);
|
|
|
- }
|
|
|
-
|
|
|
- .img-col {
|
|
|
- padding-right: 10px;
|
|
|
- }
|
|
|
- .coverImg {
|
|
|
- margin-top: 10px;
|
|
|
- margin-bottom: 8px;
|
|
|
- width: 40%;
|
|
|
- height: 30%;
|
|
|
- border-radius: 3px;
|
|
|
- }
|
|
|
-
|
|
|
- .detail {
|
|
|
- margin-top: 8%;
|
|
|
- }
|
|
|
-
|
|
|
- .vname {
|
|
|
- font-weight: 600;
|
|
|
- font-size: 15px;
|
|
|
-
|
|
|
- height: 40px;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-line-clamp: 2; /*行数*/
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- }
|
|
|
-
|
|
|
- .visited {
|
|
|
- font-size: 13px;
|
|
|
- padding-top: 6px;
|
|
|
- }
|
|
|
-
|
|
|
- .video-name {
|
|
|
- font-size: 20px;
|
|
|
- padding-top: 20px;
|
|
|
- display: block;
|
|
|
- }
|
|
|
-
|
|
|
- .description {
|
|
|
- display: block;
|
|
|
- padding-top: 10px;
|
|
|
- font-size: 13px;
|
|
|
- color: rgb(127, 102, 102);
|
|
|
- }
|
|
|
-
|
|
|
- .v-tag {
|
|
|
- padding-top: 10px;
|
|
|
- }
|
|
|
- .tag{
|
|
|
- margin-right: 3px;
|
|
|
- }
|
|
|
-
|
|
|
- .video-data-row {
|
|
|
- padding-top: 10px;
|
|
|
- font-size: 13px;
|
|
|
- padding-right: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .bread {
|
|
|
- font-size: 15px;
|
|
|
- }
|
|
|
-
|
|
|
- /*处于手机屏幕时*/
|
|
|
- @media screen and (max-width: 768px){
|
|
|
- .player {
|
|
|
- padding-left: 1%;
|
|
|
- padding-right: 1%;
|
|
|
- }
|
|
|
-
|
|
|
- .vname {
|
|
|
- font-size: 13px;
|
|
|
- }
|
|
|
-
|
|
|
- .visited {
|
|
|
- font-size: 11px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .button-new-tag {
|
|
|
- height: 28px;
|
|
|
- line-height: 28px;
|
|
|
- color: #66b1ff;
|
|
|
- padding-top: 0;
|
|
|
- padding-bottom: 0;
|
|
|
- }
|
|
|
- .input-new-tag {
|
|
|
- width: 90px;
|
|
|
- vertical-align: bottom;
|
|
|
- }
|
|
|
-
|
|
|
</style>
|
