<template>
|
<div>
|
<Card>
|
<Form
|
ref="searchForm"
|
@keydown.enter.native="handleSearch"
|
:model="searchForm"
|
inline
|
:label-width="70"
|
class="search-form"
|
>
|
<Form-item label="标题" prop="title">
|
<Input
|
type="text"
|
v-model="searchForm.title"
|
clearable
|
@on-clear="handleSearch"
|
@on-change="handleSearch"
|
style="width: 160px"
|
/>
|
</Form-item>
|
<Form-item label="标签" prop="tagList">
|
<Select
|
v-model="searchForm.tagList"
|
clearable
|
filterable
|
multiple
|
@on-clear="handleSearch"
|
@on-change="handleSearch"
|
style="width: 160px"
|
>
|
<Option v-for="tag in tagList" :key="tag.id" :value="tag.id">{{tag.tagName}}</Option>
|
</Select>
|
</Form-item>
|
<Form-item label="视频状态" prop="status">
|
<Select
|
v-model="searchForm.status"
|
clearable
|
@on-clear="handleSearch"
|
@on-change="handleSearch"
|
style="width: 160px"
|
>
|
<Option value="99">待审核</Option>
|
<Option value="1">已发布</Option>
|
<Option value="0">已下架</Option>
|
<Option value="-1">审核未通过</Option>
|
</Select>
|
</Form-item>
|
<Button
|
@click="handleSearch"
|
type="primary"
|
icon="ios-search"
|
class="search-btn"
|
>搜索</Button
|
>
|
</Form>
|
|
<Modal
|
v-model="playVideoShow"
|
:title="playVideoTitle"
|
width="800"
|
:mask-closable="false"
|
>
|
<div class="video-warp">
|
<video :src="playVideoUrl" autoplay controls style="width: 768px;height: 432px"/>
|
</div>
|
<div slot="footer">
|
<Button type="text" @click="playVideoClose">关闭</Button>
|
</div>
|
</Modal>
|
|
<Modal
|
v-model="auditingShow"
|
title="视频审核"
|
width="1200"
|
:loading="auditingLoading"
|
:mask-closable="false"
|
>
|
<Form
|
ref="auditingForm"
|
:model="auditingForm"
|
:label-width="70"
|
:rules="auditingRule"
|
>
|
<Form-item label="标题：">
|
<div>{{detail.title}}</div>
|
</Form-item>
|
<Form-item label="标签：">
|
<div style="display: flex;flex-wrap: wrap">
|
<div v-for="(tag, index) in detail.tagList" :key="'tag' + index" style="margin-right: 5px">
|
<Tag color="red">{{tag.tagName}}</Tag>
|
</div>
|
</div>
|
</Form-item>
|
<Form-item v-if="detail.videoContentType === 'video'" label="视频时长：" :label-width="72">
|
<div>{{formatSeconds(detail.videoDuration)}}</div>
|
</Form-item>
|
<Form-item v-if="detail.videoContentType === 'img'" label="图片张数：" :label-width="72">
|
<div>{{detail.imgs.length}}</div>
|
</Form-item>
|
<Form-item v-if="detail.videoContentType === 'video'" class="video-warp" :label-width="0">
|
<Row>
|
<Col span="11">
|
<video :src="detail.videoUrl" autoplay controls style="width: 500px;height: 300px"/>
|
</Col>
|
<Col span="13" style="max-height: 300px;overflow-y: scroll">
|
<Row v-for="goods in detail.goodsList" :key="goods.goodsId" style="width: 100%">
|
<Row style="width:100%;align-items: center">
|
<Col span="6">
|
<img :src="goods.thumbnail" style="width: 100px;height: 100px"/>
|
</Col>
|
<Col span="10">
|
<p>商品名称: {{ goods.goodsName }}</p>
|
</Col>
|
<Col span="4">
|
<p>商品单价: ￥{{ goods.price }}</p>
|
</Col>
|
<Col span="4">
|
<p>商品数量: {{ goods.goodsNum }}</p>
|
</Col>
|
</Row>
|
</Row>
|
</Col>
|
</Row>
|
|
</Form-item>
|
<Form-item v-if="detail.videoContentType === 'img'" :label-width="0">
|
<div style="display: flex;flex-direction: row;flex-wrap: wrap">
|
<div v-for="img in detail.imgs" :key="img" class="img-warp">
|
<img :src="img" class="image">
|
</div>
|
</div>
|
|
</Form-item>
|
<Form-item label="审核结果：" :label-width="100" prop="result">
|
<RadioGroup v-model="auditingForm.result">
|
<Radio :label="1">通过</Radio>
|
<Radio :label="0">不通过</Radio>
|
</RadioGroup>
|
</Form-item>
|
<Form-item v-show="auditingForm.result === 0" label="不通过原因：" :label-width="100" prop="reason">
|
<Input
|
type="textarea"
|
v-model="auditingForm.reason"
|
clearable
|
style="width: 100%"
|
/>
|
</Form-item>
|
</Form>
|
<div slot="footer">
|
<Button type="text" @click="closeAuditing">关闭</Button>
|
<Button type="primary" @click="submitAuditing">确认</Button>
|
</div>
|
</Modal>
|
|
<Modal
|
v-model="videoDownShow"
|
title="视频下架"
|
width="800"
|
:mask-closable="false"
|
>
|
<Form :model="videoDownForm" :rules="videoDownRule" ref="videoDownForm">
|
<FormItem label="下架原因：" :labelWidth="100" prop="reason">
|
<editor ref="editor" @input="getReason" />
|
</FormItem>
|
</Form>
|
<div slot="footer">
|
<Button type="text" @click="closeVideoDown">关闭</Button>
|
<Button type="primary" @click="videoDown">确认</Button>
|
</div>
|
</Modal>
|
|
<Table
|
:loading="loading"
|
border
|
:columns="columns"
|
:data="data"
|
ref="table"
|
sortable="custom"
|
@on-sort-change="changeSort"
|
@on-selection-change="showSelect"
|
>
|
<template slot-scope="{ row, index }" slot="tagList">
|
<div v-for="(tag, index) in row.tagList" :key="'tag' + index" style="margin-top: 5px">
|
<Tag color="red">{{tag.tagName}}</Tag>
|
</div>
|
</template>
|
<template slot-scope="{ row, index }" slot="videoFileKey">
|
<div class="play-text" @click="playVideo(row.videoFileKey, row.title)">点击播放</div>
|
</template>
|
<template slot-scope="{ row, index }" slot="videoDuration">
|
<div>{{formatSeconds(row.videoDuration)}}</div>
|
</template>
|
<template slot-scope="{ row, index }" slot="recommend">
|
<i-switch v-model="row.recommend" :before-change="() => handleBeforeChange(row)" true-color="#13ce66"/>
|
</template>
|
<template slot-scope="{ row, index }" slot="status">
|
{{transStatus(row.status)}}
|
</template>
|
<template slot-scope="{ row, index }" slot="action">
|
<Button type="primary" size="small" style="margin-right: 5px" v-if="row.status === '99'" @click="openAuditing(row)">审核</Button>
|
<Button type="error" size="small" style="margin-right: 5px" v-if="row.status === '1'" @click="openVideoDown(row)">下架</Button>
|
<Button type="success" size="small" style="margin-right: 5px" v-else-if="row.status === '0'" @click="videoUp(row)">上架</Button>
|
</template>
|
</Table>
|
|
<Row type="flex" justify="end" class="mt_10">
|
<Page
|
:current="searchForm.pageNumber"
|
:total="total"
|
:page-size="searchForm.pageSize"
|
@on-change="changePage"
|
@on-page-size-change="changePageSize"
|
:page-size-opts="[10, 20, 50]"
|
size="small"
|
show-total
|
show-elevator
|
show-sizer
|
></Page>
|
</Row>
|
</Card>
|
</div>
|
</template>
|
|
<script>
|
import {getVideos, recommendSet, getVideoById, auditingVideo, up, down} from "@/api/video";
|
import {getVideoTagList} from "@/api/videoTag";
|
import {getFilePreview} from "@/api/file";
|
import Editor from '@/components/editor/index.vue'
|
import GoodsExpandRow from '@/views/video/GoodsExpandRow'
|
export default {
|
name: "VideoList",
|
components: {Editor,GoodsExpandRow},
|
data() {
|
return {
|
videoDownForm: {
|
id: '',
|
reason: ''
|
},
|
videoDownRule: {
|
reason: [
|
{
|
require: true,
|
message: '请输入下架原因',
|
trigger: 'blur',
|
validator: (rule, value, callback) => {
|
if (value === null || value === '') {
|
callback(new Error('请输入下架原因'));
|
} else {
|
callback();
|
}
|
}
|
}
|
]
|
},
|
videoDownShow: false, // 视频下架
|
videoDownMsg: '', // 下架提示信息
|
auditingForm: { // 审核表单
|
id: null,
|
result: null,
|
reason: ''
|
},
|
auditingRule: {
|
result: [
|
{
|
required: true,
|
message: '请选择视频审核结果',
|
trigger: 'change',
|
validator: (rule, value, callback) => {
|
if (value === null || value === undefined) {
|
callback(new Error('请选择视频审核结果'));
|
} else {
|
callback();
|
}
|
}
|
}
|
],
|
},
|
detail: {}, // 视频详情信息
|
auditingShow: false, // 审核弹窗
|
auditingLoading: false, // 审核弹窗
|
playVideoShow: false, // 视频播放弹窗
|
playVideoTitle: '', // 视频播放标题
|
playVideoUrl: '', // 当前正在播放的视频地址
|
modelShow: false, // 弹窗显隐
|
modelTitle: '', // 弹窗title
|
loading: false, // 表单加载状态
|
searchForm: {
|
// 搜索框初始化对象
|
pageNumber: 1, // 当前页数
|
pageSize: 10, // 页面大小
|
title: '', // 标题
|
tagList: [], // 标签
|
status: '99'
|
},
|
tagList: [], // 标签列表
|
columns: [
|
{
|
type: 'selection',
|
width: 60,
|
align: 'center'
|
},
|
{
|
width: 60,
|
type: 'expand',
|
render: (h, params) => {
|
return h(GoodsExpandRow, {
|
props: {
|
goodsList: params.row.goodsList
|
}
|
})
|
}
|
},
|
{
|
title: "标题",
|
key: "title",
|
minWidth: 240,
|
tooltip: true,
|
},
|
{
|
title: "作者",
|
key: "authorName",
|
width: 130,
|
tooltip: true,
|
},
|
{
|
title: "视频标签",
|
key: "tagList",
|
width: 180,
|
slot: "tagList",
|
},
|
{
|
title: "视频内容",
|
key: "videoFileKey",
|
width: 170,
|
slot: "videoFileKey"
|
},
|
{
|
title: "时长",
|
key: "videoDuration",
|
width: 80,
|
align: 'center',
|
slot: "videoDuration",
|
},
|
{
|
title: "播放量",
|
key: "playNum",
|
width: 80,
|
align: 'center'
|
},
|
{
|
title: "收藏数",
|
key: "collectNum",
|
width: 80,
|
align: 'center'
|
},
|
{
|
title: "评论数",
|
key: "commentNum",
|
width: 80,
|
align: 'center'
|
},
|
{
|
title: "首页推荐",
|
key: "recommend",
|
slot: "recommend",
|
width: 100,
|
align: 'center'
|
},
|
{
|
title: "权重",
|
key: "weight",
|
width: 170,
|
},
|
{
|
title: "状态",
|
key: "status",
|
slot: "status",
|
width: 120,
|
align: 'center'
|
},
|
{
|
title: "操作",
|
key: "action",
|
slot: "action",
|
align: "center",
|
width: 200,
|
},
|
],
|
data: [], // 表单数据
|
total: 0, // 表单数据总数
|
selectCount: 0, // 已选数量
|
selectList: [], // 已选数据列表
|
}
|
},
|
created() {
|
this.getDataList();
|
this.getTags('')
|
},
|
methods: {
|
// 秒转x分x秒
|
formatSeconds(seconds) {
|
if (isNaN(seconds) || seconds < 0) return '0秒';
|
|
const mins = Math.floor(seconds / 60);
|
const secs = seconds % 60;
|
|
if (mins === 0) return `${secs}秒`;
|
if (secs === 0) return `${mins}分`;
|
|
return `${mins}分${secs}秒`;
|
},
|
// 获取标签列表
|
getTags(tagName) {
|
let params = {
|
'tagName': tagName
|
}
|
getVideoTagList(params).then(res => {
|
this.tagList = res.data
|
})
|
},
|
// 获取富文本编辑器的内容
|
getReason(content) {
|
this.videoDownForm.reason = content
|
},
|
// 视频上架
|
videoUp(row) {
|
this.$Modal.confirm({
|
title: "操作确认",
|
content: "您确认要上架视频【 " + row.title + "】吗?",
|
loading: true,
|
onOk: () => {
|
up(row.id).then(res => {
|
this.$Modal.remove();
|
if (res.code == 200) {
|
this.$Message.success("视频上架成功");
|
this.getDataList();
|
}
|
});
|
}
|
});
|
},
|
// 视频下架
|
videoDown() {
|
this.$refs.videoDownForm.validate((valid) => {
|
if (valid) {
|
down(this.videoDownForm).then(res => {
|
this.$Message.success("下架成功")
|
this.closeVideoDown()
|
this.getDataList()
|
})
|
}
|
})
|
},
|
// 关闭视频下架
|
closeVideoDown() {
|
this.videoDownShow = false
|
this.videoDownForm = {
|
id: '',
|
reason: ''
|
}
|
this.$refs.editor.setContent('')
|
},
|
// 视频下架
|
openVideoDown(row) {
|
this.videoDownForm.id = row.id
|
this.videoDownShow = true
|
},
|
// 提交审核结果
|
submitAuditing() {
|
console.log(this.auditingForm, "sb")
|
this.$refs.auditingForm.validate((valid) => {
|
if (valid) {
|
auditingVideo(this.auditingForm).then(res => {
|
this.$Message.success("审核完成")
|
this.closeAuditing()
|
this.getDataList()
|
})
|
}
|
})
|
},
|
// 审核结果变化
|
resultChange(selected) {
|
this.auditingForm.result = selected === '通过' ? 1 : 0
|
console.log(this.auditingForm.result)
|
},
|
closeAuditing() {
|
this.auditingForm = {
|
id: null,
|
result: null,
|
reason: ''
|
}
|
this.detail = {}
|
this.auditingShow = false
|
},
|
// 打开审核弹窗
|
openAuditing(row) {
|
this.auditingShow = true
|
this.auditingLoading = true
|
this.auditingForm.id = row.id
|
getVideoById(row.id).then(res => {
|
this.detail = res.data
|
this.auditingLoading = false
|
})
|
},
|
// 翻译状态
|
transStatus(status) {
|
switch (status) {
|
case '99':
|
return '待审核'
|
case '1':
|
return '已发布'
|
case '0':
|
return '已下架'
|
case '-1':
|
return '审核未通过'
|
default:
|
return '未知'
|
}
|
},
|
// 开启或关闭推荐的方法
|
handleBeforeChange(row) {
|
let content = ""
|
if (row.recommend) {
|
content = '确认要关闭首页推荐吗？'
|
} else {
|
content = '确认要开启首页推荐吗？'
|
}
|
return new Promise((resolve) => {
|
this.$Modal.confirm({
|
title: '操作提醒',
|
content: content,
|
onOk: () => {
|
recommendSet({id: row.id, recommend: !row.recommend}).then(res => {
|
this.$Message.success(res.msg);
|
resolve();
|
})
|
}
|
});
|
});
|
},
|
// 关闭视频播放
|
playVideoClose() {
|
this.playVideoTitle = '';
|
this.playVideoUrl = '';
|
this.playVideoShow = false
|
},
|
// 点击播放视频
|
playVideo(fileKey, title) {
|
this.playVideoTitle = title;
|
|
getFilePreview(fileKey).then(res => {
|
this.playVideoUrl = res.data
|
this.playVideoShow = true
|
})
|
},
|
// 搜索
|
handleSearch() {
|
this.searchForm.pageNumber = 1;
|
this.searchForm.pageSize = 10;
|
this.getDataList();
|
},
|
// 获取列表数据
|
getDataList() {
|
this.loading = true;
|
getVideos(this.searchForm).then((res) => {
|
console.log(res)
|
this.loading = false;
|
if (res.code == 200) {
|
this.data = res.data;
|
this.total = res.total;
|
}
|
});
|
this.total = this.data.length;
|
this.loading = false;
|
},
|
showSelect(e) {
|
this.selectList = e.map(d => d.id);
|
this.selectCount = e.length;
|
},
|
// 排序
|
changeSort(e) {
|
this.searchForm.sort = e.key;
|
this.searchForm.order = e.order;
|
if (e.order == "normal") {
|
this.searchForm.order = "";
|
}
|
this.getDataList();
|
},
|
// 分页 改变页码
|
changePage(v) {
|
this.searchForm.pageNumber = v;
|
this.getDataList();
|
},
|
// 分页 改变页数
|
changePageSize(v) {
|
this.searchForm.pageNumber = 1;
|
this.searchForm.pageSize = v;
|
this.getDataList();
|
},
|
}
|
}
|
</script>
|
|
<style scoped>
|
.play-text {
|
width: 100%;
|
text-align: center;
|
color: #2d8cf0;
|
}
|
.play-text:hover {
|
cursor: pointer;
|
}
|
.video-warp {
|
width: 100%;
|
height: 350px;
|
}
|
.data-item {
|
display: flex;
|
align-items: center;
|
}
|
.img-warp {
|
padding: 10px;
|
}
|
.image {
|
width: 150px;
|
height: 200px;
|
}
|
</style>
|
