780 lines
24 KiB
Vue
Raw Normal View History

2025-01-26 21:07:26 +08:00
<template>
<div class="app-container">
<div class="mb10">
<el-input
v-model="queryParams.title"
class="w260 mb10"
clearable
placeholder="请输入直播标题名称"
/>
<el-input
v-model="queryParams.advisorName"
class="w260 mb10"
clearable
placeholder="投顾主播名称"
/>
<!-- <el-select class="mb10" clearable v-model="queryParams.comId" filterable placeholder="分公司">
<el-option v-for="item in playTypeList" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select> -->
<el-select
v-model="queryParams.deptId"
class="mb10"
clearable
filterable
placeholder="营业部"
>
<el-option
v-for="item in deptList"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
<el-select
v-model="queryParams.playType"
class="mb10"
clearable
filterable
placeholder="播放类型"
>
<el-option
v-for="item in playTypeList"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<el-select
v-model="queryParams.liveStatus"
class="mb10"
clearable
filterable
placeholder="直播状态"
>
<el-option
v-for="item in liveStatusList"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<el-select
v-model="queryParams.isColumn"
class="mb10"
clearable
filterable
placeholder="是否为专栏直播"
>
<el-option label="是" :value="1" />
<el-option label="否" :value="2" />
</el-select>
<!-- <el-select class="mb10" clearable v-model="queryParams.status" :disabled="user.roles[0] == '运营'" filterable placeholder="产品状态">
<el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select> -->
<el-date-picker
v-model="dateVale"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
<el-button type="primary" @click="searchList()">查询</el-button>
</div>
<div class="mb10">
<el-table v-loading="loading" :data="data" border style="width: 100%">
<el-table-column label="序号" type="index" fixed width="180">
</el-table-column>
<el-table-column prop="startTime" label="直播开始时间" width="180">
<template slot-scope="scope">
{{ scope.row.startTime ? scope.row.startTime : "--" }}
</template>
</el-table-column>
<el-table-column prop="title" label="视频名称" width="180">
<template slot-scope="scope">
<el-button
type="text"
style="white-space: normal;"
@click="toDetail(scope.row)"
>{{ scope.row.title }}</el-button
>
</template>
</el-table-column>
<el-table-column prop="imgUrl" label="封面" width="100">
<template #default="scope">
<el-popover placement="right" :width="400" trigger="hover">
<img :src="scope.row.imgUrl" width="375" height="300" />
<template #reference>
<img
:src="scope.row.imgUrl"
style="max-height: 60px; max-width: 60px"
/>
</template>
</el-popover>
</template>
</el-table-column>
<el-table-column prop="name" label="直播状态" width="180">
<template slot-scope="scope">
{{ scope.row.playType === 1 ? scope.row.liveStatusLabel : "--" }}
</template>
</el-table-column>
<el-table-column
v-if="!settingToC"
prop="name"
label="标签"
width="180"
>
<template slot-scope="scope">
<span v-for="item in scope.row.tagVOList" :key="item.id">{{
item.name + " "
}}</span>
</template>
</el-table-column>
<el-table-column prop="name" label="投顾主播名称" width="180">
<template slot-scope="scope">
{{ scope.row.advisorBasic ? scope.row.advisorBasic.name : "" }}
</template>
</el-table-column>
<!-- <el-table-column prop="name" label="所属分公司" width="180">
<template slot-scope="scope">
{{ scope.row.createUserCmpName }}
</template>
</el-table-column> -->
<el-table-column prop="name" label="所属营业部" width="180">
<template slot-scope="scope">
{{ scope.row.advisorBasic ? scope.row.advisorBasic.deptName : "" }}
</template>
</el-table-column>
<el-table-column prop="name" label="播放类型" width="180">
<template slot-scope="scope">
{{ scope.row.playType === 1 ? "直播" : "录播" }}
</template>
</el-table-column>
<el-table-column
v-if="!settingToC"
prop="name"
label="是否为专栏直播"
width="180"
>
<template slot-scope="scope">
{{ scope.row.columnId ? "是" : "否" }}
</template>
</el-table-column>
<el-table-column
v-if="!settingToC"
prop="name"
label="专栏名称"
width="180"
>
<template slot-scope="scope">
{{ scope.row.columnName }}
</template>
</el-table-column>
<el-table-column prop="name" label="风险等级" width="180">
<template slot-scope="scope">
{{ riskLevelList[scope.row.riskLevel] }}
</template>
</el-table-column>
<el-table-column prop="endTime" label="直播结束时间" width="180">
<template slot-scope="scope">
{{ scope.row.endTime ? scope.row.endTime : "--" }}
</template>
</el-table-column>
<el-table-column prop="createTime" label="创建时间" width="180">
</el-table-column>
<el-table-column prop="auditTime" label="审核时间" width="180">
</el-table-column>
<!-- <el-table-column prop="name" label="购物车产品数量" width="180" v-if="user.roles[0] !== '运营'">
<template slot-scope="scope">
<el-button type="text" @click="toProductList(scope.row)"> {{ scope.row.cartVOList.length ?
scope.row.cartVOList.length : 0 }}</el-button>
</template>
</el-table-column> -->
<el-table-column prop="name" label="观看限制" width="180">
<template slot-scope="scope">
{{ limitTypeList[scope.row.limitType] }}
</template>
</el-table-column>
<el-table-column prop="name" label="产品状态" width="180">
<template slot-scope="scope">
{{ statusListLabel[scope.row.status] }}
</template>
</el-table-column>
<el-table-column prop="reason" label="备注" width="180">
</el-table-column>
<el-table-column prop="weight" label="是否推荐" width="180">
<template slot-scope="scope">
{{ scope.row.weight ? "是" : "否" }}
</template>
</el-table-column>
<el-table-column
prop="name"
align="center"
label="操作"
width="400"
fixed="right"
>
<template slot-scope="scope">
<el-button
v-if="[3, 5, 6].includes(scope.row.status)"
type="text"
@click="toCreate(scope.row.id, 2)"
>查看</el-button
>
<el-button
v-if="[3, 5].includes(scope.row.status)"
type="text"
@click="openProduct(scope.row)"
>{{ scope.row.playType === 1 ? "单场分析" : "数据" }}</el-button
>
<el-button
v-if="
[3, 5].includes(scope.row.status) && scope.row.playType === 1
"
type="text"
@click="toDateDetail(scope.row)"
>数据大屏</el-button
>
<!-- <el-button v-if="[5].includes(scope.row.status)" type="text" @click="listing(scope.row)">重新上架</el-button> -->
<!-- <el-button v-if="[3].includes(scope.row.status) && !scope.row.weight && user.roles[0] !== '运营'" @click="openRecommend(scope.row,1)"
type="text">推荐</el-button>
<el-button v-if="[3].includes(scope.row.status) && scope.row.weight && user.roles[0] !== '运营'" @click="openRecommend(scope.row,2)"
type="text">取消推荐</el-button> -->
<el-button
v-if="[3].includes(scope.row.status)"
type="text"
@click="downloadByBlob(scope.row)"
>下载海报</el-button
>
<el-button
v-if="[3].includes(scope.row.status)"
class="tag"
type="text"
@click="copyUrl($event, scope.row)"
>{{
scope.row.playType === 1 ? "复制直播链接" : "复制视频链接"
}}</el-button
>
<!-- <el-button v-if="[3].includes(scope.row.status) " @click="listing(scope.row)" type="text">下架</el-button> -->
<!-- <el-button v-if="[2].includes(scope.row.status)" @click="toCreate(scope.row.id, 3)"
type="text">审核</el-button> -->
</template>
</el-table-column>
</el-table>
</div>
<!--分页组件-->
<el-pagination
:total="total"
:current-page="queryParams.current"
:page-size="queryParams.size"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
<el-dialog
title="带货产品清单"
:visible.sync="dialogTableVisible"
:modal-append-to-body="false"
>
<el-table :data="gridData">
<el-table-column type="index" label="序号"></el-table-column>
<el-table-column
property="productName"
label="产品名称"
></el-table-column>
<el-table-column property="productType" label="产品类型">
<template slot-scope="scope">
{{ productTypeList[scope.row.productType] }}
</template>
</el-table-column>
<el-table-column label="投顾名称">
<template slot-scope="scope">
{{ scope.row.advisorBasic ? scope.row.advisorBasic.name : "" }}
</template>
</el-table-column>
<el-table-column
property="count"
label="本场直播点击数"
></el-table-column>
<el-table-column
property="subCount"
label="本场直播订阅数"
></el-table-column>
</el-table>
</el-dialog>
<el-dialog
title="推流"
:visible.sync="dialogInputVisible"
:modal-append-to-body="false"
>
<el-form ref="form" :model="dialogForm" label-width="80px">
<el-form-item label="推流地址">
{{ dialogForm.pushUrl }}
<el-button
type="text"
class="tag"
style="margin-left:10px;"
@click="copyUrlTwo($event, dialogForm.pushUrl, 1)"
>复制服务器地址</el-button
>
<el-button
type="text"
class="tag"
style="margin-left:10px;"
@click="copyUrlTwo($event, dialogForm.pushUrl, 2)"
>复制推流码</el-button
>
</el-form-item>
<el-form-item label="播流地址">
{{ dialogForm.playUrl }}
</el-form-item>
</el-form>
</el-dialog>
<el-dialog
title="推荐"
:visible.sync="dialogTableRecommend"
:modal-append-to-body="false"
>
<el-form
ref="recommendForm"
:model="recommendForm"
:rules="rules"
label-width="100px"
class="demo-ruleForm"
>
<el-form-item label="视频名称">
<el-input v-model="recommendForm.title" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="推荐权重" prop="name">
<el-input-number
v-model="recommendForm.weight"
:step="1"
:precision="0"
:min="0"
:max="100"
label="权重值"
></el-input-number>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submit('recommendForm')"
> </el-button
>
<el-button @click="dialogTableRecommend = false"> </el-button>
</el-form-item>
</el-form>
</el-dialog>
<el-dialog
v-if="showQrCode"
:visible.sync="showQrCode"
append-to-body
width="400px"
title="生成二维码"
>
<QrCode ref="QrCode" />
</el-dialog>
</div>
</template>
<script>
import {
getInfoList,
tagList,
livePlayInfo,
updateStatus,
recommendSave,
infoGet,
urlResize
} from "@/api/videoLive";
import { getDepts } from "@/api/channel";
import QrCode from "@/components/QrCode";
import { mapGetters, mapState } from "vuex";
import dayjs from "dayjs";
import { handleClipboard } from "./config";
import { cryptoDecode } from "@/utils/crypto.js";
export default {
components: {
QrCode
},
data() {
return {
queryParams: {
current: 1,
size: 10,
userType: 2,
deptId: null
},
showQrCode: false,
total: 1,
loading: false,
playTypeList: [{ value: 1, label: "直播" }, { value: 2, label: "录播" }],
liveStatusList: [
{ value: 1, label: "直播中" },
{ value: 2, label: "未开始" },
{ value: 3, label: "暂停中" },
{ value: 4, label: "已结束" }
],
statusList: [
// { value: 1, label: '待提交' },
{ value: 2, label: "待审核" },
{ value: 3, label: "已上架" },
{ value: 4, label: "已驳回" },
{ value: 5, label: "已下架" }
],
statusListLabel: ["", "待提交", "待审核", "已上架", "已驳回", "已下架"],
liveLabel: ["", "直播中", "未开始", "暂停中", "已结束"],
limitTypeList: {
1: "不限制",
2: "手机号",
3: "邀请码",
4: "微信授权",
5: "产品专属直播"
},
riskLevelList: {
1: "低风险",
2: "中低风险",
3: "中风险",
4: "中高风险",
5: "高风险"
},
tagIdList: [],
data: [],
gridData: [],
dialogTableVisible: false,
dialogInputVisible: false,
dialogTableRecommend: false,
optionsTag: [],
loadingTag: false,
dialogForm: {
pushUrl: "",
playUrl: ""
},
recommendForm: {
title: "",
weight: "",
option: 1,
id: null
},
productTypeList: {
1: "观点包",
3: "视频",
111: "自定义"
},
copyText: "",
rules: {
weight: [
{ required: true, message: "请输入标题", trigger: "blur" },
{ min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" }
]
},
deptList: [],
dateVale: ""
};
},
computed: {
...mapGetters(["user"]),
...mapState({
settingToC: state => state.settings.settingToC
})
},
mounted() {
this.queryList();
this.getColumnList();
},
methods: {
cryptoDecode,
getColumnList() {
getDepts().then(res => {
if (res.code === 0) {
this.deptList = res.data;
}
});
},
queryList() {
this.loading = true;
if (this.dateVale) {
this.queryParams.liveTimeStart = dayjs(this.dateVale[0]).format(
"YYYY-MM-DD 00:00:00"
);
this.queryParams.liveTimeEnd = dayjs(this.dateVale[1]).format(
"YYYY-MM-DD 23:59:59"
);
} else {
this.queryParams.liveTimeStart = "";
this.queryParams.liveTimeEnd = "";
}
this.queryParams.userType = 2;
this.queryParams.status = 3;
getInfoList(this.queryParams).then(data => {
this.data = data.data.list;
this.total = data.data.total;
this.loading = false;
});
},
searchList() {
this.queryParams.size = 10;
this.queryParams.current = 1;
this.queryParams.userType = 2;
this.queryList();
},
handleSizeChange(val) {
this.$set(this.queryParams, "size", val);
this.$set(this.queryParams, "current", 1);
this.queryList();
},
handleCurrentChange(val) {
this.$set(this.queryParams, "current", val || 1);
this.queryList();
},
openProduct(val) {
// this.$router.push(`/liveBroadcast/marketing?id=${val.id}&type=2`)
2025-01-31 22:10:53 +08:00
window.open(
`${location.origin + location.pathname}#/liveBroadcast/marketing?id=${
val.id
}&type=2`
);
2025-01-26 21:07:26 +08:00
},
toCreate(id, type) {
// type = 2 查看
if (id && type) {
this.$router.push(
`/liveBroadcast/liveBroadcastCreate?id=${id}&type=${type}&userType=2`
);
} else {
this.$router.push("/liveBroadcast/liveBroadcastCreate?userType=2");
}
},
remoteMethodTag(query) {
this.loadingTag = true;
const queryParams = {
name: query,
current: 1,
size: 10,
type: 3,
status: 1
};
tagList(queryParams).then(data => {
this.optionsTag = data.data.list;
this.loadingTag = false;
});
},
openPlayInfo(item) {
livePlayInfo({ id: item.id }).then(res => {
if (res.code === 0) {
this.dialogForm.pushUrl = res.data.pushUrl;
this.dialogForm.playUrl = res.data.playUrl;
this.dialogInputVisible = true;
}
});
},
listing(item) {
this.$confirm(
`您确定提交${[5].includes(item.status) ? "重新上架" : "下架"}?`,
{
confirmButtonText: "提交",
cancelButtonText: "取消",
type: "warning"
}
)
.then(() => {
// 申请上架
if ([5].includes(item.status)) {
updateStatus({ id: item.id, status: 3 }).then(res => {
if (res.code === 0) {
this.$message({
type: "success",
message: "重新上架成功!"
});
this.searchList();
}
});
} else {
// 撤回
updateStatus({ id: item.id, status: 5 }).then(res => {
if (res.code === 0) {
this.$message({
type: "success",
message: "下架成功!"
});
this.searchList();
}
});
}
})
.catch(() => {});
},
toProductList(item) {
infoGet({ id: item.id }).then(res => {
if (res.code === 0) {
this.gridData = res.data.cartVOList;
this.dialogTableVisible = true;
} else {
this.$message.error("获取带货产品失败!");
}
});
},
// 下载海报
downloadByBlob(val) {
this.showQrCode = true;
// const url = `${window.location.origin}/syzbh5/videoPlay?id=${this.cryptoDecode(val.id)}&saleUserId=${this.user.user.id}`
const url = `${window.location.origin}/syzbh5/videoPlay?id=${
val.id
}&saleUserId=${this.user.user.id}`;
this.$nextTick(() => {
this.$refs.QrCode.createCode(url);
});
},
download(href, name) {
const eleLink = document.createElement("a");
eleLink.download = name;
eleLink.href = href;
eleLink.click();
eleLink.remove();
},
async copyUrl(event, item) {
const currentTarget = event.currentTarget;
// let res = await livePlayInfo({ id: item.id })
// if (res.code === 0) {
// handleClipboard(res.data.playUrl, event, currentTarget)
// }
// const url = `${window.location.origin}/syzbh5/videoPlay?id=${this.cryptoDecode(item.id)}&saleUserId=${this.user.user.id}`
const ret = await urlResize({
url: `/videoPlay?id=${item.id}&saleUserId=${this.user.user.id}`
});
if (ret.code === 0) {
handleClipboard(ret.data, event, currentTarget);
}
},
copyUrlTwo(event, url, type) {
const currentTarget = event.currentTarget;
const splitUrl = JSON.parse(JSON.stringify(url));
var regex = /^(.*)\/(\d+)\?/;
var match = splitUrl.match(regex);
// type 1 服务器地址 2 推流码
if (type === 1 && match[1]) {
handleClipboard(match[1], event, currentTarget);
} else {
handleClipboard(
this.extractAfterSlashNumber(url),
event,
currentTarget
);
}
},
extractAfterSlashNumber(rtmpUrl) {
// 使用正则表达式匹配最后一个/开始到URL末尾的所有内容
var regex = /(\/[\d]+\?.*)$/;
var match = rtmpUrl.match(regex);
if (match && match.length > 1) {
// 返回匹配到的部分(即/数字?及之后的所有内容)
return match[1];
} else {
// 如果没有匹配到,返回空字符串或错误信息
return ""; // 或者 'Error: No match found';
}
},
openRecommend(item, type) {
if (type === 1) {
this.dialogTableRecommend = true;
this.recommendForm.option = type;
this.recommendForm.title = item.title;
this.recommendForm.weight = item.weight;
this.recommendForm.id = item.id;
} else {
this.$confirm(`您确定取消推荐?`, {
confirmButtonText: "提交",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
// 申请上架
recommendSave({ id: item.id, option: 2 }).then(res => {
if (res.code === 0) {
this.$message({
type: "success",
message: "取消推荐成功!"
});
this.searchList();
}
});
})
.catch(() => {});
}
},
submit(formName) {
if (!this.recommendForm.weight)
return this.$message.error("推荐权重不能为0!");
this.$refs[formName].validate(valid => {
if (valid) {
recommendSave(this.recommendForm).then(res => {
if (res.code === 0) {
this.$message({
type: "success",
message: "操作成功!"
});
this.dialogTableRecommend = false;
this.searchList();
}
});
}
});
},
toDetail(val) {
this.$router.push(`/liveBroadcast/liveDetail?id=${val.id}&type=3`);
},
toDateDetail(val) {
2025-01-31 22:10:53 +08:00
window.open(
`${location.origin + location.pathname}#/largeScreen/index?videoId=${
val.id
}&type=2`
);
2025-01-26 21:07:26 +08:00
// this.$router.push(
// `/largeScreen/index?videoId=${val.id}&type=1`
// );
}
}
};
</script>
<style scoped lang="scss">
.mb10 {
margin-bottom: 10px;
}
.flex-box {
display: inline-flex;
flex-direction: row;
&_item {
display: inline-flex;
flex-direction: column;
margin-right: 10px;
cursor: pointer;
background-color: rgb(255, 255, 255);
align-self: center;
div {
padding: 5px 0;
display: inline-flex;
align-self: center;
}
}
}
.charts-box {
padding: 20px;
width: 60%;
}
.w260 {
width: 260px;
}
</style>