|
|
@@ -28,38 +28,42 @@
|
|
|
<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">
|
|
|
+ <div class="tag">
|
|
|
<el-button
|
|
|
- type="danger"
|
|
|
+ type="success"
|
|
|
size="mini"
|
|
|
icon="el-icon-plus"
|
|
|
:disabled="isCollected"
|
|
|
+ class="tag"
|
|
|
@click="collection(video.videoId)"
|
|
|
>
|
|
|
<span>收藏 {{ video.favorite }}</span>
|
|
|
</el-button>
|
|
|
<el-button
|
|
|
- type="danger"
|
|
|
+ type="success"
|
|
|
size="mini"
|
|
|
icon="el-icon-thumb"
|
|
|
:disabled="isCollected"
|
|
|
- @click="collection(video.videoId)"
|
|
|
+ class="tag"
|
|
|
+ @click="collection(video)"
|
|
|
>
|
|
|
<span>喜欢 {{ video.thumbUp }}</span>
|
|
|
</el-button>
|
|
|
<el-button
|
|
|
- type="danger"
|
|
|
+ type="success"
|
|
|
size="mini"
|
|
|
icon="el-icon-share"
|
|
|
:disabled="isCollected"
|
|
|
+ class="tag"
|
|
|
@click="getShareUrl(video.videoId)"
|
|
|
>
|
|
|
<span>分享 {{ video.share }}</span>
|
|
|
</el-button>
|
|
|
<el-button
|
|
|
- type="danger"
|
|
|
+ type="success"
|
|
|
size="mini"
|
|
|
icon="el-icon-download"
|
|
|
+ class="tag"
|
|
|
@click="getDownloadUrl(video.videoId)"
|
|
|
>
|
|
|
<span>下载</span>
|
|
|
@@ -68,14 +72,16 @@
|
|
|
type="danger"
|
|
|
size="mini"
|
|
|
icon="el-icon-delete"
|
|
|
+ class="tag"
|
|
|
@click="deleteVideo(video)"
|
|
|
>
|
|
|
<span>删除</span>
|
|
|
</el-button>
|
|
|
<el-button
|
|
|
- type="danger"
|
|
|
+ type="warning"
|
|
|
size="mini"
|
|
|
icon="el-icon-help"
|
|
|
+ class="tag"
|
|
|
@click="displayErrorReportDialog"
|
|
|
>
|
|
|
<span>报错</span>
|
|
|
@@ -87,7 +93,7 @@
|
|
|
<span class="description" v-html="video.description" />
|
|
|
<el-divider />
|
|
|
<!--视频标签行-->
|
|
|
- <div class="v-tag">
|
|
|
+ <div>
|
|
|
<el-tag
|
|
|
v-for="(tag,index) in video.tags"
|
|
|
:key="index"
|
|
|
@@ -95,7 +101,7 @@
|
|
|
size="medium"
|
|
|
effect="plain"
|
|
|
>
|
|
|
- <router-link target="_blank" :to="`/video/tag/` + tag">
|
|
|
+ <router-link style="text-decoration-line: none" target="_blank" :to="`/video/tag/` + tag">
|
|
|
{{ tag }}
|
|
|
</router-link>
|
|
|
</el-tag>
|
|
|
@@ -162,48 +168,44 @@
|
|
|
<el-dialog
|
|
|
append-to-body
|
|
|
:visible.sync="showPlaylistDialog"
|
|
|
- width="30%"
|
|
|
center
|
|
|
>
|
|
|
<el-card class="box-card">
|
|
|
<div slot="header" class="clearfix">
|
|
|
- <el-button style="float: right; padding: 3px 0" type="text" @click="createAlbum">
|
|
|
- 创建播放列表
|
|
|
- </el-button>
|
|
|
- <el-form v-if="showCreateAlbum" ref="form" :model="albumForm" label-width="80px">
|
|
|
- <el-form-item>
|
|
|
- <el-input v-model="albumForm.albumName" style="padding-right: 1px" placeholder="标题不能超过 50 个字符" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <el-button type="plain" @click="onCreateAlbum">确定</el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
+ <span>添加到收藏夹</span>
|
|
|
+ <el-button style="float: right; padding: 3px 0" type="text" @click="addToPlaylist">确定</el-button>
|
|
|
</div>
|
|
|
<div class="text item">
|
|
|
<el-table
|
|
|
+ ref="multipleTable"
|
|
|
+ :show-header="false"
|
|
|
:data="playlist"
|
|
|
border
|
|
|
style="width: 100%"
|
|
|
+ @selection-change="handleSelectionChange"
|
|
|
>
|
|
|
+ <el-table-column type="selection" />
|
|
|
<el-table-column
|
|
|
prop="albumName"
|
|
|
- label="播放列表"
|
|
|
/>
|
|
|
<el-table-column
|
|
|
prop="total"
|
|
|
- label="数量"
|
|
|
/>
|
|
|
- <el-table-column label="收藏" width="80" align="center">
|
|
|
- <template slot-scope="scope">
|
|
|
- <el-button
|
|
|
- type="danger"
|
|
|
- size="mini"
|
|
|
- icon="el-icon-plus"
|
|
|
- @click="addToPlaylist(scope.row)"
|
|
|
- />
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="total"
|
|
|
+ />
|
|
|
</el-table>
|
|
|
+ <br>
|
|
|
+ <div style="margin-top: 15px;">
|
|
|
+ <el-input
|
|
|
+ v-model="albumForm.albumName"
|
|
|
+ placeholder="请输入标题(最多可输入20个字)"
|
|
|
+ maxlength="20"
|
|
|
+ clearable
|
|
|
+ >
|
|
|
+ <el-button slot="append" icon="el-icon-plus" @click="onCreateAlbum">新建收藏夹</el-button>
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</el-card>
|
|
|
</el-dialog>
|
|
|
@@ -212,7 +214,6 @@
|
|
|
<el-dialog
|
|
|
append-to-body
|
|
|
:visible.sync="showErrorReportDialog"
|
|
|
- width="30%"
|
|
|
center
|
|
|
>
|
|
|
<el-card class="box-card">
|
|
|
@@ -249,12 +250,11 @@ import SideVideoCard from 'components/card/SideVideoCard'
|
|
|
import UserAvatarCard from '@/components/card/UserAvatarCard'
|
|
|
import comment from '@/components/comment'
|
|
|
|
|
|
-import {similarVideo, videoInfo, videoErrorReport, downloadVideo, getShortUrl, videoErrorDelete} from '@/api/video'
|
|
|
+import { similarVideo, videoInfo, videoErrorReport, downloadVideo, getShortUrl, videoErrorDelete } from '@/api/video'
|
|
|
import { collectItem, createAlbum, getUserPlaylist } from '@/api/collect'
|
|
|
import { getUserInfo } from '@/api/user'
|
|
|
import { publishComment, getComment } from '@/api/comment'
|
|
|
import { getAuthedUser } from '@/utils/auth'
|
|
|
-import {deletePaper} from "@/api/exam";
|
|
|
|
|
|
export default {
|
|
|
name: 'VideoPage',
|
|
|
@@ -313,11 +313,6 @@ export default {
|
|
|
isCollected: false,
|
|
|
showPlaylistDialog: false,
|
|
|
playlist: [],
|
|
|
- accessCodeForm: {
|
|
|
- contentId: null,
|
|
|
- contentType: 1002,
|
|
|
- accessCode: null
|
|
|
- },
|
|
|
showErrorReportDialog: false,
|
|
|
errorReportForm: {
|
|
|
videoId: null,
|
|
|
@@ -329,10 +324,10 @@ export default {
|
|
|
route: '/video'
|
|
|
},
|
|
|
autoPlay: false,
|
|
|
- showCreateAlbum: false,
|
|
|
albumForm: {
|
|
|
albumName: null
|
|
|
- }
|
|
|
+ },
|
|
|
+ multipleSelection: []
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
@@ -353,7 +348,6 @@ export default {
|
|
|
}
|
|
|
|
|
|
this.videoId = this.$route.params.id
|
|
|
- this.accessCodeForm.contentId = this.videoId
|
|
|
this.getVideoInfo(this.videoId)
|
|
|
this.getSimilarVideos(this.videoId)
|
|
|
this.getCommentWrapper(this.currentPage)
|
|
|
@@ -365,6 +359,42 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ handleSelectionChange(val) {
|
|
|
+ this.multipleSelection = val
|
|
|
+ },
|
|
|
+ addToPlaylist() {
|
|
|
+ if (this.multipleSelection.length === 0) {
|
|
|
+ this.$message.info('请选择收藏夹')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const jsonData = {}
|
|
|
+ jsonData.albumId = []
|
|
|
+ for (const item of this.multipleSelection) {
|
|
|
+ jsonData.albumId.push(item.albumId)
|
|
|
+ }
|
|
|
+ jsonData.postId = this.videoId
|
|
|
+ jsonData.action = 1
|
|
|
+
|
|
|
+ collectItem(jsonData).then(resp => {
|
|
|
+ if (resp.code === 0) {
|
|
|
+ this.$notify.success({
|
|
|
+ title: '视频已收藏',
|
|
|
+ type: 'success',
|
|
|
+ duration: 3000
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.$notify.warning({
|
|
|
+ title: '视频收藏失败',
|
|
|
+ type: 'warning',
|
|
|
+ duration: 3000
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }).catch(error => {
|
|
|
+ this.$message.error(error)
|
|
|
+ }).finally(() => {
|
|
|
+ this.showPlaylistDialog = false
|
|
|
+ })
|
|
|
+ },
|
|
|
// ****************************************************************************************************************
|
|
|
handleCurrentChange(currentPage) {
|
|
|
this.currentPage = currentPage
|
|
|
@@ -452,7 +482,12 @@ export default {
|
|
|
console.log('刷新相关推荐')
|
|
|
},
|
|
|
// 用户点击收藏
|
|
|
- collection(videoId) {
|
|
|
+ collection(video) {
|
|
|
+ if (video.collected) {
|
|
|
+ this.$message.info('取消收藏')
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
this.showPlaylistDialog = true
|
|
|
const queryInfo = {
|
|
|
pn: 1,
|
|
|
@@ -464,28 +499,6 @@ export default {
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
- addToPlaylist(row) {
|
|
|
- this.showPlaylistDialog = false
|
|
|
- const jsonData = {}
|
|
|
- jsonData.albumId = row.albumId
|
|
|
- jsonData.postId = this.videoId
|
|
|
- jsonData.action = 1
|
|
|
- collectItem(jsonData).then(resp => {
|
|
|
- if (resp.code === 0) {
|
|
|
- this.$notify.success({
|
|
|
- title: '视频已收藏',
|
|
|
- type: 'success',
|
|
|
- duration: 3000
|
|
|
- })
|
|
|
- } else {
|
|
|
- this.$notify.warning({
|
|
|
- title: '视频收藏失败',
|
|
|
- type: 'warning',
|
|
|
- duration: 3000
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
getShareUrl(videoId) {
|
|
|
getShortUrl(videoId).then(resp => {
|
|
|
if (resp.code === 0) {
|
|
|
@@ -548,11 +561,7 @@ export default {
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
- createAlbum() {
|
|
|
- this.showCreateAlbum = true
|
|
|
- },
|
|
|
onCreateAlbum() {
|
|
|
- this.showCreateAlbum = false
|
|
|
createAlbum(this.albumForm).then(resp => {
|
|
|
if (resp.code === 0) {
|
|
|
this.playlist.push(resp.data)
|
|
|
@@ -713,9 +722,44 @@ export default {
|
|
|
padding-left: 0.5%;
|
|
|
padding-right: 0.5%;
|
|
|
}
|
|
|
+ /* 或者使用这种更具体的选择器 */
|
|
|
+ .el-dialog__wrapper .maintenance-dialog {
|
|
|
+ width: 100% !important;
|
|
|
+ margin-top: 5vh !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 表单布局优化 */
|
|
|
+ .maintenance-dialog .el-form-item {
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .maintenance-dialog .el-form-item__label {
|
|
|
+ float: none !important;
|
|
|
+ display: block !important;
|
|
|
+ text-align: left !important;
|
|
|
+ padding: 0 0 8px !important;
|
|
|
+ width: 100% !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .maintenance-dialog .el-form-item__content {
|
|
|
+ margin-left: 0 !important;
|
|
|
+ }
|
|
|
|
|
|
- .msgbox{
|
|
|
- width: 320px !important;
|
|
|
+ /* 确保所有输入控件宽度100% */
|
|
|
+ .maintenance-dialog .el-input,
|
|
|
+ .maintenance-dialog .el-select,
|
|
|
+ .maintenance-dialog .el-date-picker,
|
|
|
+ .maintenance-dialog .el-input-number {
|
|
|
+ width: 100% !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 调整按钮组间距 */
|
|
|
+ .maintenance-dialog .dialog-footer {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .maintenance-dialog .dialog-footer .el-button {
|
|
|
+ margin: 0 5px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -735,10 +779,10 @@ export default {
|
|
|
clear: both;
|
|
|
}
|
|
|
|
|
|
-.v-tag {
|
|
|
- padding-top: 10px;
|
|
|
-}
|
|
|
.tag{
|
|
|
+ padding-top: 1px;
|
|
|
+ padding-bottom: 1px;
|
|
|
+ margin-left: 3px;
|
|
|
margin-right: 3px;
|
|
|
}
|
|
|
</style>
|
