Skip to content

P
pica.cloud.web-education-admin
提交 635edea4 编写于 作者: yi.li's avatar yi.li
浏览文件
操作

添加短视频管理

上级 b7c5cd4b
显示空白字符变更
内嵌 并排
正在显示 包含 678 行增加 和 2 行删除
src/components/shortvideo/shortVideoDetail.vue 0 → 100644
浏览文件 @ 635edea4
<template>
<el-dialog
title="查看视频"
:visible="showVideoDetail"
@close="handlerClose"
width="780px"
>
<div class="video-detail-container">
<el-form ref="searchForm" :model="detailObj" label-suffix=":" size="small" label-width="100px">
<el-form-item label="视频描述">
<div>{{videoDesc}}</div>
<video :src="resourceUrl" controls="controls" poster="posterImg" class="video-content"></video>
</el-form-item>
<div style="width: 100%;height: 1px;background-color: #DCDFE6;"></div>
<p class="title">审核结果</p>
<el-form-item label="送审时间">
<div>{{detailObj.startTime}}</div>
</el-form-item>
<el-form-item label="机审完成时间">
<div>{{detailObj.endTime}}</div>
</el-form-item>
<el-form-item label="审核结果">
<div>{{detailObj.status | videoStatusFilter}}</div>
</el-form-item>
<el-form-item label="审核说明">
<div>{{detailObj.intro}}</div>
</el-form-item>
<el-form-item label="图片" class="image-check-video">
<div v-for="(item, index) in detailObj.srcList" style="display: inline-block">
<el-image
style="width: 100px; height: 100px;margin-right: 25px"
:src="item"
:preview-src-list="setSrc(index)">
<div slot="error" class="image-slot err-icon-set">
<i class="el-icon-picture-outline" style="font-size: 40px;margin-top: 25px;"></i>
</div>
</el-image>
<p style="text-align: center;padding-right: 25px;">1分30秒</p>
</div>
</el-form-item>
</el-form>
</div>
</el-dialog>
</template>
<script>
import { getVideoDetail } from '@/utils/shortvideo/videoApi';
export default {
data() {
return {
resourceUrl: '',
videoDesc: '',
detailObj: {
desc: '这是一段完整描述文字这是一段完整描述文字这是一段完整描述文字这是一段完整描述文字这是一段完整描述文字这是一段完整,' +
'这是一段完整描述文字这是一段完整描述文字这是一段完整描述文字这是一段完整描述文字这是一段完整描述文字这是一段完整',
link: '',
posterImg: '',
startTime: '',
endTime: '',
status: 2,
intro: '涉及血腥暴力这是一段完整描述文字这是一段完整描述文字这是一段完整描述文字这是一段完整描述文字这是一段完整描述文字这是一段完整,' +
'这是一段完整描述文字这是一段完整描述文字这是一段完整描述文字这是一段完整描述文字这是一段完整描述文字这是一段完整',
srcList: [
'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
'',
'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
'',
]
},
}
},
props: {
showVideoDetail: {
type: Boolean,
default: false
},
id: {
type: Number | String,
default: 0,
}
},
watch: {
id(val){
console.log('当前查看id',val);
this.init(val)
}
},
computed: {
setSrc(){
return function (index) {
let newArr = [];
let newItem = this.detailObj.srcList[index];
newArr[0] = newItem;
return newArr;
}
},
},
mounted() {},
methods: {
init(id) {
getVideoDetail(id).then((res) => {
if(res.code == "000000") {
const { id, resourceUrl, videoDesc, liteAvCheckInfo } = res.data;
this.resourceUrl = resourceUrl;//视频地址
this.videoDesc = videoDesc;//视频描述
}
}).catch((error) => {
this.$message.error("请重试");
})
},
handlerClose() {
this.$emit('closeCheckDetail')
},
},
}
</script>
<style lang="scss" scoped>
.video-detail-container{
min-height: 500px;
.title{
line-height: 24px;
font-size: 18px;
color: #303133;
margin: 23px 0 15px;
}
.video-content{
max-height: 300px;
width: 100%;
margin-top: 20px;
}
}
</style>
<style lang="scss">
.image-check-video{
.err-icon-set{
width: 100px;
height: 100px;
background: #eee;
text-align: center;
vertical-align: middle;
}
}
</style>
src/router/router.js
浏览文件 @ 635edea4
...@@ -80,6 +80,7 @@ const orderDetail = r => require.ensure([], () => r(require('../views/goods/orde ...@@ -80,6 +80,7 @@ const orderDetail = r => require.ensure([], () => r(require('../views/goods/orde
const plazaList = r => require.ensure([], () => r(require('../views/plaza/plaza-list.vue')), 'plaza-list') const plazaList = r => require.ensure([], () => r(require('../views/plaza/plaza-list.vue')), 'plaza-list')
const activityMember = r => require.ensure([], () => r(require('../views/activitymanagement/activity-member.vue')), 'activity-member') const activityMember = r => require.ensure([], () => r(require('../views/activitymanagement/activity-member.vue')), 'activity-member')
const videoManage = r => require.ensure([], () => r(require('../views/shortvideo/video-manage.vue')), 'video-manage')
export default [{ export default [{
path: '/', path: '/',
...@@ -337,6 +338,10 @@ export default [{ ...@@ -337,6 +338,10 @@ export default [{
path: '/activity-member', path: '/activity-member',
component: activityMember, component: activityMember,
}, },
{
path: 'video-manage',
component: videoManage,
},
// { // {
// path: '/followup', // path: '/followup',
......
src/utils/filter.js
浏览文件 @ 635edea4
...@@ -531,7 +531,7 @@ const vueFilter = { ...@@ -531,7 +531,7 @@ const vueFilter = {
return '未发布' return '未发布'
} }
}, },
liveStatusFilter: (value) => { liveStatusFilter1: (value) => {
if (value == 1) { if (value == 1) {
return '预告' return '预告'
}else if (value == 2) { }else if (value == 2) {
...@@ -596,6 +596,19 @@ const vueFilter = { ...@@ -596,6 +596,19 @@ const vueFilter = {
} }
} }
return text; return text;
},
videoStatusFilter: (value) => {
let obj = {
1: '机审中',
2: '机审通过已发布',
3: '疑似违规',
4: '机审通过待人审',
5: '机审拒绝',
6: '人审通过已发布',
7: '已下线',
8: '已删除',
}
return obj[value];
} }
......
src/utils/shortvideo/videoApi.js 0 → 100644
浏览文件 @ 635edea4
import fetch from '../fetch';
import { getBaseUrl, getSaasDomain, getSaasApiDomain } from '@/utils/index'
let headers = {
'Content-Type': 'application/json;charset=UTF-8',
token: localStorage.getItem('storageToken'),
};
export const getVideoList = (params) => {
return fetch({
headers,
url: getBaseUrl(`circle/liteav/admin/list`),
method: 'post',
data: params,
description: '获取短视频列表',
})
};
export const getSwitch = () => {
return fetch({
headers,
url: getBaseUrl(`circle/liteav/admin/switch`),
method: 'get',
description: '获取视频审核开关',
})
};
export const setSwitch = (btnVal) => {
return fetch({
headers,
url: getBaseUrl(`circle/liteav/admin/switch/set?button=${btnVal}`),
method: 'get',
description: '设置视频审核开关',
})
};
export const getVideoDetail = (id) => {
return fetch({
headers,
url: getBaseUrl(`circle/liteav/admin/detail/${id}`),
method: 'get',
description: '获取短视频详情',
})
};
export const manualCheck = (params) => {
return fetch({
headers,
url: getBaseUrl(`circle/liteav/admin/man/check`),
method: 'post',
data: params,
description: '短视频人工审核',
})
};
src/views/shortvideo/video-manage.vue 0 → 100644
浏览文件 @ 635edea4
<template>
<div class="video-index-wrapper">
<bread-crumb :curmbFirst="curmbFirst"></bread-crumb>
<div class="yqrange-index-content screenSet">
<el-form ref="searchForm" :model="searchForm" label-suffix=":" :inline="true" size="small">
<el-row type="flex" style="margin-top: 10px">
<el-col :span="6">
<el-form-item label="圈子名称">
<el-input v-model="searchForm.circleName" clearable placeholder="请输入圈子名称"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="视频描述">
<el-input v-model="searchForm.desc" clearable placeholder="请输入视频描述"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="发布者">
<el-input v-model="searchForm.publisherName" clearable placeholder="请输入发布者"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="视频状态">
<el-select
v-model="searchForm.status"
placeholder="请选择视频状态"
clearable
style="width: 180px">
<el-option
v-for="item in statusList"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row style="margin-top: 10px;">
<el-col :span="24">
<el-form-item label="快捷查询">
<span class="search-btn" :class="{'active-search' : isActive1}" @click="fastSearch(1)">疑似违规({{breakRuleTotal}})</span>
<span class="search-btn" :class="{'active-search' : isActive2}" @click="fastSearch(2)">机审通过待人审（{{humanCheckTotal}}）</span>
</el-form-item>
<el-form-item label="发布开关">
<el-switch
class="switch-scope"
v-model="publishValue"
active-color="#449284"
inactive-color="#E6A23C"
active-text="机审通过发布"
inactive-text="人审通过发布"
:active-value="1"
:inactive-value="2"
@change="changeSwitch">
</el-switch>
</el-form-item>
<div class="switch-tip">
说明：“机审通过发布”状态时，机审通过即发布成功，公开视频；
<br/>切换为人审通过发布时，需人工审核通过后才可公开。
</div>
</el-col>
<el-col :span="24" style="text-align: right">
<el-button type="primary" size="small" @click="search">搜索</el-button>
<el-button type="default" size="small" @click="resetForm" style="margin-left:0;">重置</el-button>
</el-col>
</el-row>
</el-form>
<el-table :data="tableData" class="item-table" style="width: 100%;margin-top: 10px;">
<el-table-column prop="circleName" label="圈子名称" align="center"></el-table-column>
<el-table-column prop="desc" label="视频描述" align="center" min-width="150" show-overflow-tooltip></el-table-column>
<el-table-column prop="createdTime" label="上传时间" align="center">
<template slot-scope="scope">
<span>{{ scope.row.createdTime | liveDateFilter }}</span>
</template>
</el-table-column>
<el-table-column prop="publisherName" label="发布者" align="center"></el-table-column>
<el-table-column prop="status" label="视频状态" align="center">
<template slot-scope="scope">
<span>{{ scope.row.status | videoStatusFilter }}</span>
</template>
</el-table-column>
<el-table-column prop="modifiedTime" label="更新时间" align="center">
<template slot-scope="scope">
<span>{{ scope.row.modifiedTime | liveDateFilter }}</span>
</template>
</el-table-column>
<el-table-column prop="reviserName" label="最后修改人" align="center"></el-table-column>
<el-table-column label="操作" min-width="200" align="center">
<template slot-scope="scope">
<el-button @click="visitDetail(scope.row)" type="text" size="small">查看</el-button>
<el-button @click="handlerVideo(scope.row,3)" v-if="scope.row.status == 2 || scope.row.status == 6" type="text" size="small">下线</el-button>
<el-button @click="handlerVideo(scope.row,1)" v-if="scope.row.status == 3 || scope.row.status == 4" type="text" size="small">通过</el-button>
<el-button @click="handlerVideo(scope.row,2)" v-if="scope.row.status == 3 || scope.row.status == 4" type="text" size="small">拒绝</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleNumChange"
:current-page="searchForm.pageNo"
:page-sizes="[10, 30, 50, 100, 200]"
:page-size="searchForm.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalRows"
></el-pagination>
</div>
</div>
<short-video-detail
:showVideoDetail="showVideoDetail"
:id="videoId"
@closeCheckDetail="handlerClose">
</short-video-detail>
</div>
</template>
<script>
import { openLoading, closeLoading } from "../../utils/utils";
import BreadCrumb from "@/components/breadcrumb.vue";
import { getVideoList, getSwitch, setSwitch, manualCheck } from '@/utils/shortvideo/videoApi';
import ShortVideoDetail from '@/components/shortvideo/shortVideoDetail';
export default {
components: {
BreadCrumb,
ShortVideoDetail,
},
data(){
return{
curmbFirst: '短视频管理',
activeName: 'first',
showAllFlag: false,
searchForm: {
circleName:"",//圈子名称
desc: '',//视频描述
publisherName: '',//发布人姓名
status: null,// 视频状态 1机审中 2机审通过已发布 3疑似违规 4机审通过待人审 5机审拒绝 6人审通过已发布 7已下线 8已删除
pageNo: 1,
pageSize: 10,
},
publishValue: null,
publishValueCopy: null,
totalRows: 0,
tableData: [],
breakRuleTotal: 0,//疑似违规总数
humanCheckTotal: 0,//机审通过待人审总数
showVideoDetail: false,
statusList: [
{
value: 1,
label: "机审中"
},
{
value: 2,
label: "机审通过已发布"
},
{
value: 3,
label: "疑似违规"
},
{
value: 4,
label: "机审通过待人审"
},
{
value: 5,
label: "机审拒绝"
},
{
value: 6,
label: "人审通过已发布"
},
{
value: 7,
label: "已下线"
},
{
value: 8,
label: "已删除"
},
],
idType: "",
videoId: null,
isActive1: false,
isActive2: false,
}
},
created() {
this.search();
this.getSwitchStatus();
},
methods: {
changeSwitch(val) {
setSwitch(val).then((res) => {
if(res.code == "000000") {
if (res.data == 1) {
this.$message.success('操作成功，已切换为“机审通过发布”')
}else if (res.data == 2) {
this.$message.success('操作成功，已切换为“人审通过发布”')
}
this.publishValueCopy = res.data;
}else {
this.$message.error('状态切换失败')
this.publishValue = this.publishValueCopy;
}
}).catch((error) => {
this.$message.error("请重试");
this.publishValue = this.publishValueCopy;
})
},
search(){
this.searchForm.pageNo = 1;
if (this.isActive1 || this.isActive2) {
this.isActive1 = false;
this.isActive2 = false;
this.searchForm.status = null;
}
this.searchList();
},
getSwitchStatus() {
getSwitch().then((res) => {
if(res.code == "000000") {
// 1机审通过发布 2人审通过发布
this.publishValue = res.data;
this.publishValueCopy = res.data;
}
}).catch((error) => {
this.$message.error("请重试");
})
},
searchList() {
openLoading(this);
let params = this.searchForm;
getVideoList(params).then((res) => {
closeLoading(this);
if(res.code == "000000") {
this.tableData = res.data.liteAvList;
this.totalRows = res.data.total;
this.breakRuleTotal = res.data.breakRuleTotal;
this.humanCheckTotal = res.data.humanCheckTotal;
} else {
this.tableData = [];
}
}).catch((error) => {
this.$message.error("请重试");
})
},
//快捷查询
fastSearch(type) {//type 1疑似违规，2机审通过待人审
if (type == 1) {
if (!this.isActive1) {
this.searchForm.status = 3;
this.searchForm.circleName = "";
this.searchForm.desc = "";
this.searchForm.publisherName = "";
this.searchForm.pageNo = 1;
this.searchList();
this.isActive2 = false;
}else {
this.resetForm();
}
this.isActive1 = !this.isActive1;
}else if (type == 2) {
if (!this.isActive2) {
this.searchForm.status = 4;
this.searchForm.circleName = "";
this.searchForm.desc = "";
this.searchForm.publisherName = "";
this.searchForm.pageNo = 1;
this.searchList();
this.isActive1 = false;
}else {
this.resetForm();
}
this.isActive2 = !this.isActive2;
}
},
resetForm() {
this.searchForm.circleName = "";
this.searchForm.desc = "";
this.searchForm.publisherName = "";
this.searchForm.status = null;
this.search();
},
//查看
visitDetail(row) {
this.showVideoDetail = true;
this.videoId = row.id;
},
handlerClose() {
this.showVideoDetail = false;
},
//人工操作通过，拒绝，下线
handlerVideo(row, type) {//type:1通过，2拒绝，3下线
let typeContent = {
1: '确定审核通过该视频？',
2: '确定审核拒绝该视频？',
3: '确定下线该视频？'
};
let content = typeContent[type];
let setStatus = null;
if(type == 1) {
setStatus = 6;
}else if (type == 2 || type == 3) {
setStatus = 7;
}
let params = {
liteAvId: row.id,
status: setStatus,
};
this.$confirm(`${content}`, '', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
customClass: 'shortvideo-make-box',
}).then(() => {
this.updateVideoStatus(params,type);
// confirm
}).catch(() => {
// cancel
});
},
//更新审核状态
updateVideoStatus(params, type){
openLoading(this);
let successContent = {
1: '审核通过',
2: '审核拒绝',
3: '下线成功'
}
manualCheck(params).then((res) => {
closeLoading(this);
if(res.code == "000000"){
this.$message.success(successContent[type]);
this.searchList();
}else {
this.$message.error('操作失败');
}
}).catch((error) => {
this.$message.error("请重试");
}
)
},
handleSizeChange(val) {
this.searchForm.pageSize = val;
this.searchForm.pageNo = 1;
this.searchList();
},
handleNumChange(val) {
this.searchForm.pageNo = val;
this.searchList();
},
},
}
</script>
<style lang="scss">
.video-index-wrapper{
.yqrange-index-content{
background: #fff;
padding: 10px;
.header-title{
padding: 10px 12px;
font-size: 12px;
color: #449284;
border-bottom: 1px solid #efefef;
}
}
.search-btn{
margin-right: 25px;
color: #449284;
cursor: pointer;
padding: 3px 5px;
&.active-search{
background-color: #449284;
color: #ffffff;
}
}
.el-button--text{
color: #449284;
font-size: 14px;
&::after{
content: '';
position: relative;
height: 14px;
/*border-right: 1px solid #EBEEF5;*/
border-right: 1px solid #aaaaaa;
padding-right: 10px;
}
&:last-of-type{
&::after{
content: '';
position: relative;
width: 1px;
height: 14px;
border-right: none;
}
}
}
.el-form-item .el-form-item__label{
font-size: 14px;
}
}
.el-switch__label.is-active{
color: #449284;
}
/* switch按钮样式 */
.switch-scope{
.el-switch__label {
position: absolute;
display: none;
color: #fff !important;
}
/*打开时文字位置设置*/
.el-switch__label--right {
z-index: 1;
}
/* 调整打开时文字的显示位子 */
.el-switch__label--right span{
/*margin-right: 9px;*/
margin-left: 11px;
}
/*关闭时文字位置设置*/
.el-switch__label--left {
z-index: 1;
}
/* 调整关闭时文字的显示位子 */
.el-switch__label--left span{
margin-left: 22px;
}
/*显示文字*/
.el-switch__label.is-active {
display: block;
}
}
/* 调整按钮的宽度 */
.switch-scope.el-switch .el-switch__core,
.el-switch .el-switch__label {
width: 120px !important;
margin: 0;
}
.switch-tip{
font-size: 12px;
color: #898989;
display: inline-block;
margin-top: 3px;
}
.shortvideo-make-box{
.el-message-box__btns{
margin-top: 30px;
}
}
</style>
src/views/yqrange/live-manage.vue
浏览文件 @ 635edea4
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
<el-table-column prop="name" label="直播名称" min-width="100" align="center"></el-table-column> <el-table-column prop="name" label="直播名称" min-width="100" align="center"></el-table-column>
<el-table-column prop="liveStatus" label="直播状态" min-width="100" align="center"> <el-table-column prop="liveStatus" label="直播状态" min-width="100" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ scope.row.liveStatus | liveStatusFilter }}</span> <span>{{ scope.row.liveStatus | liveStatusFilter1 }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="streamType" label="直播方式" min-width="100" align="center"> <el-table-column prop="streamType" label="直播方式" min-width="100" align="center">
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或