Skip to content

P
pica.cloud.web-education-admin
提交 28f22214 编写于 作者: bo.dang's avatar bo.dang
浏览文件
操作

圈子二期直播管理修改

上级 266cab21
隐藏空白字符变更
内嵌 并排
正在显示 包含 388 行增加 和 59 行删除
src/views/yqrange/create-live.vue
浏览文件 @ 28f22214
......@@ -37,6 +37,22 @@
<span class="word-num">{{(formData.name).replace(/\s+/g,"").length}}/20</span>
</el-col>
</el-form-item>
<el-form-item label="直播方式">
<el-radio-group v-model="formData.streamType" size="small" @change="changeStyle">
<el-radio label="1" :disabled="styleEditFlag">网页直播</el-radio>
<el-radio label="2" :disabled="styleEditFlag">拉流直播</el-radio>
</el-radio-group>
<el-input
size="small"
v-model="formData.name"
maxlength="20"
placeholder="请填写拉流地址"
style="width:70%;"
:disabled="styleEditFlag"
></el-input>
</el-form-item>
<el-form-item label="是否公开" prop="scope">
<el-radio-group v-model="formData.scope" size="small" @change="changeScope">
<el-radio label="1">否（仅限圈内人观看）</el-radio>
......@@ -71,42 +87,94 @@
<span class="word-num">{{(formData.textContent).replace(/\s+/g,"").length}}/300</span>
<div style="color:#666666;font-size:12px;">文字版</div>
</el-col>
<el-col :span="12" class="basic-item-icon" style="margin-top:35px;">
<el-upload
v-model="formData.imageContent"
<!--<el-col :span="12" class="basic-item-icon" style="margin-top:35px;">-->
<!--<el-upload-->
<!--v-model="formData.imageContent"-->
<!--class="bg-uploader"-->
<!--action="#"-->
<!--:show-file-list="false"-->
<!--:before-upload="beforeUploadPic1"-->
<!--&gt;-->
<!--<img-->
<!--v-if="formData.imageContent"-->
<!--:src="formData.imageContent"-->
<!--@mouseover.stop="imgMouseOver1=true"-->
<!--class="bg-img"-->
<!--/>-->
<!--<img-->
<!--v-if="!formData.imageContent"-->
<!--class="bg-img"-->
<!--src="../../assets/image/small.png"-->
<!--/>-->
<!--<div-->
<!--class="img-delete"-->
<!--v-show="imgMouseOver1"-->
<!--@click.stop="deleteImg(1)"-->
<!--@mouseout.stop="imgMouseOver1=false"-->
<!--&gt;-->
<!--<i class="el-icon-delete"></i>-->
<!--</div>-->
<!--<div class="limit-text">-->
<!--<p>限制大小: 2mb</p>-->
<!--<p>尺寸：750*（不限高度）</p>-->
<!--<p>支持jpeg, png格式</p>-->
<!--</div>-->
<!--</el-upload>-->
<!--<div style="color:#666666;font-size:12px;">图片版</div>-->
<!--</el-col>-->
</el-form-item>
<div class="basic-item-icon">
<el-form-item label="图片">
<el-row>
<el-col :span="24">
<el-button size="small" type="info" @click="addIntroImage()">+新增图片</el-button>
</el-col>
<el-col :span="16">
<div v-for="(item, index) in formData.rtcIntroduces.filter(obj=> obj.type === 2)" :key="index" style="margin-left:0px;min-width: 380px;display: flex;align-items: center">
<el-upload
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeUploadPic1"
>
:disabled="isDisabledIns">
<img
v-if="formData.imageContent"
:src="formData.imageContent"
@mouseover.stop="imgMouseOver1=true"
v-if="item.content"
:src="item.content"
class="bg-img"
/>
@click="getIndexIntroduce(index)"/>
<img
v-if="!formData.imageContent"
v-if="!item.content"
class="bg-img"
src="../../assets/image/small.png"
/>
<div
class="img-delete"
v-show="imgMouseOver1"
@click.stop="deleteImg(1)"
@mouseout.stop="imgMouseOver1=false"
>
<i class="el-icon-delete"></i>
</div>
<div class="limit-text">
<p>限制大小: 2mb</p>
<p>尺寸：750*（不限高度）</p>
@click="getIndexIntroduce(index)"/>
</el-upload>
<div class="limit-text" style="font-size: 12px;color: #999;margin-left: 10px;margin-top: -10px;">
<p>限制大小: 100kb</p>
<p>尺寸:750*（不限高度）</p>
<p>支持jpeg, png格式</p>
</div>
</el-upload>
<div style="color:#666666;font-size:12px;">图片版</div>
</el-col>
</el-form-item>
<!--<img-->
<!--@click="addIntroImage(index)"-->
<!--class="edit-img"-->
<!--src="../../assets/image/plus.png"-->
<!--v-if="isPreview!=1"-->
<!--/>-->
<!--<img-->
<!--@click="delIntroImage(index)"-->
<!--v-if="index >= 1 && isPreview!=1"-->
<!--class="edit-img"-->
<!--src="../../assets/image/trash.png"-->
<!--/>-->
<el-button size="danger" @click="delIntroImage(index, item)">删除</el-button>
</div>
</el-col>
</el-row>
</el-form-item>
<p class="upload-message" v-if="uploadImgMessage2">请选择直播封面</p>
</div>
<div class="basic-item-icon">
<el-form-item label="直播封面" class="required-label">
<el-upload
......@@ -191,6 +259,7 @@
v-model="formData.lecturesUserName"
placeholder="请输入姓名"
style="width:85%;"
:disabled="liveEditFlag"
></el-input>
</el-form-item>
</el-col>
......@@ -205,6 +274,7 @@
v-model="formData.lecturesPhone"
placeholder="请输入手机号"
style="width:85%;"
:disabled="liveEditFlag"
></el-input>
</el-form-item>
</el-col>
......@@ -221,6 +291,7 @@
v-model="item.username"
placeholder="请输入姓名"
style="width:85%;"
:disabled="guestEditFlag"
></el-input>
</el-form-item>
</el-col>
......@@ -234,6 +305,7 @@
v-model="item.phone"
placeholder="请输入手机号"
style="width:85%;"
:disabled="guestEditFlag"
></el-input>
</el-form-item>
</el-col>
......@@ -264,7 +336,7 @@
</template>
<script>
import BreadCrumb from "@/components/breadcrumb.vue";
import { openLoading, closeLoading } from "../../utils/utils";
import { isEmptyUtils, openLoading, closeLoading } from "../../utils/utils";
import { doUpload, getFilePath } from "../../utils/qiniu-util";
import { checkMobile } from '../../utils/patients/checkValid';
import { getRtcInfo } from "../../utils/yqrange/yqrangeApi";
......@@ -292,25 +364,22 @@
curmbSecond: '直播管理',
curmbThird: '新建直播',// /live-manage?id=
jumPathThird: '',
showIntroImageFlag: false,
introduceIndex: 0,
isDisabledIns: false,//为了防止上传多图时，点太快图片错位
//页面展示位置
isCollectShow: false,
styleEditFlag: false,// 直播方式是否可以编辑
liveEditFlag: false,// 直播方式、讲师是否可以编辑
guestEditFlag: false,// 嘉宾是否可以编辑
formData: {
circleId: "",// 圈子ID
name: '',// 直播名称
style: "1", // 直播方式
scope: "1",// 直播范围 1-非公开 2-公开
infoCollect: "0",// 是否采集用户信息 0-否 1-是
openTime: '',// 直播开始时间
rtcIntroduces:[{
seqNo: "",
content: '',
type: "1" // 文字
},
{
seqNo: "",
content: '',
type: "2" // 图片
}
],// 直播简介
rtcIntroduces:[],// 直播简介
cover: '', // 直播封面url 直播第一帧图片
preImage: '', // 直播预告图url
textContent: '', // 直播简介文字版
......@@ -405,21 +474,13 @@
}
},
created() {
// 区分内部用户和外部用户
let idType = localStorage.getItem('storageIdType');
this.circleId = this.$route.query.circleId;
this.formData.circleId = this.circleId;
this.jumPathThird = '/live-manage?id=' + this.circleId;
// if(circleId){
// this.curmbThird = "新建直播";
// }
// vm = this;
// vm.entryId = vm.getUrlSearch(window.location.href, "entryId");
// vm.peopleLevel = vm.getUrlSearch(window.location.href, "level");
// vm.init();
},
mounted() {
const rtcId = this.$route.query.rtcId;
......@@ -448,6 +509,27 @@
if(res.code == "000000") {
this.formData = res.data;
if(this.formData != null){
// 讲师、嘉宾是否可以编辑
// //直播状态 1-未开始 2-直播中 3-暂停中 4-已结束 5-回放中目前只能用到1，2，4
// 预告状态时，所以都可以修改
if(this.formData.liveStatus == "1"){
this.styleEditFlag = false;
this.liveEditFlag = false;// 可以编辑
this.guestEditFlag = false;
}
// 直播中状态时，直播方式、讲师不可修改，其他都可修改
else if(this.formData.liveStatus == "2"){
this.styleEditFlag = true;
this.liveEditFlag = true;// 不可以编辑
this.guestEditFlag = false;
}
// 直播结束状态时，直播方式、讲师、嘉宾不可修改，其他都可修改
else if(this.formData.liveStatus == "4"){
this.styleEditFlag = true;
this.liveEditFlag = true;
this.guestEditFlag = true;
}
if(this.formData.guests == null || this.formData.guests.length == 0){
this.formData.guests = [{phone: '',username: ''}];
}
......@@ -463,18 +545,28 @@
});
})
},
getIndexIntroduce(index) {
if (!this.isDisabledIns) {
if(this.formData.rtcIntroduces != null && this.formData.rtcIntroduces.length > index){
index = index + 1;
}
this.introduceIndex = index;
}else {
this.$message.warning('正在上传，请稍等')
}
},
//上传直播简介
beforeUploadPic1(file) {
let fileLimit = {
width: 750,
height: "",
size: 2,
sizeText: "2Mb",
size: 0.1,
sizeText: "100k",
key: "imageContent",
more: "imgUrl1More",
show: "uploadImgMessage1"
};
this.beforeUpload(file, fileLimit);
this.beforeUploadMore(file, fileLimit);
},
// 上传直播封面
beforeUploadPic2(file) {
......@@ -555,6 +647,115 @@
};
return isJPG && isLt2M;
},
beforeUploadMore(file, fileLimit) {
let vm = this;
console.log('简介配置图上传前',file)
if (isEmptyUtils(file)) {
return;
}
vm.isDisabledIns = true;
vm.$message.info('开始上传');
const isJPG = file.type === 'image/jpeg'
const isPNG = file.type === 'image/png'
const isLt100kb = file.size / 1024 < 100
if (!isJPG && !isPNG) {
vm.$message.error('上传直播简介图片只能是 JPEG或者png 格式!')
vm.isDisabledIns = false;
return;
}
if (!isLt100kb) {
vm.$message.error('上传图片大小不能超过 100kb')
vm.isDisabledIns = false;
return;
}
var _img = new FileReader()
_img.readAsDataURL(file)
_img.onload = function(theFile) {
let image = new Image();
image.src = theFile.target.result;
image.onload = function() {
let _this = this;
if (_this.width !== 750) {
vm.$message.info('图片尺寸不一致，无法提交!');
vm.isDisabledIns = false;
return;
}else {
doUpload(vm,file, getFilePath(file,null), 'preview4', 'progress1', 1).then(function (path) {
// vm.cleatBroadcast.liveIntroduceModel[vm.introduceIndex].content = path.fullPath;
vm.formData.rtcIntroduces[vm.introduceIndex].content = path.fullPath;
vm.formData.rtcIntroduces[vm.introduceIndex].seqNo = vm.introduceIndex+1;
vm.$message.success('上传成功');
vm.isDisabledIns = false;
});
}
// vm.cleatBroadcast.liveIntroduceModel[vm.introduceIndex].content1 = _this.width + '*' + _this.height;
}
}
return false;
},
//上传图片
// beforeUploadMore(file, fileLimit) {
// let vm = this;
// const isJPG = file.type === "image/jpeg";
// const isPNG = file.type === "image/png";
// const isLt2M = file.size / 1024 / 1024 < fileLimit.size;
// if (!isJPG && !isPNG) {
// vm.$message.error("图片格式不符合规范，请根据规范上传图片");
// return;
// }
// if (!isLt2M) {
// vm.$message.error("图片大小不符合规范，请根据规范上传图片 ");
// return;
// }
// let _img = new FileReader();
// _img.readAsDataURL(file);
// _img.onload = function(theFile) {
// let image = new Image();
// image.src = theFile.target.result;
// image.onload = function() {
// let _this = this;
//
// if(fileLimit.key == "imageContent" & _this.width != fileLimit.width){
// vm.$message.error("图片尺寸不符合规范，请根据规范上传图片");
// }
// else if (fileLimit.key != "imageContent" & (_this.width != fileLimit.width || _this.height != fileLimit.height)) {
// vm.$message.error("图片尺寸不符合规范，请根据规范上传图片");
// } else {
// openLoading(vm);
// doUpload(vm, file, getFilePath(file, null), "preview4", "progress1", 1).then(function(path) {
// closeLoading(vm);
// console.log('上传成功后路径',path);
// if (fileLimit.show == "uploadImgMessage1") {
// vm.uploadImgMessage1 = false;
// } else if (fileLimit.show == "uploadImgMessage2") {
// vm.uploadImgMessage2 = false;
// }
// else if (fileLimit.show == "uploadImgMessage3") {
// vm.uploadImgMessage3 = false;
// }
// vm.formData[fileLimit.key] = path.fullPath;
// vm.formData[fileLimit.more] = {
// attachmentName: path.name,
// attachmentExt: path.ext,
// attachmentSize: path.size
// };
// vm.$message.success("上传成功");
// });
// }
// };
// };
// return isJPG && isLt2M;
// },
// 直播方式
changeStyle(){
},
// 是否公开
changeScope(value){
if(value == 2){
......@@ -577,6 +778,30 @@
}
return flag;
},
// 增加直播简介
addIntroImage(){
let length = this.formData.rtcIntroduces.length;
if(length > 5){
this.$message.warning("直播简介图片最多支持新增5张图片!");
return;
}
this.showIntroImageFlag = true;
const item = {
seqNo: length + 1,
content: '',
type: 2 // 文字
};
this.formData.rtcIntroduces.push(item);
},
// 删除直播简介
delIntroImage(index, item){
this.formData.rtcIntroduces.splice(index, 1);
},
//删除图片
deleteImg(type) {
if (type == 1) {
......@@ -735,11 +960,11 @@
// 封装数据
setFormData(){
// 直播简介文字版
this.formData.rtcIntroduces[0].type = 1;
this.formData.rtcIntroduces[0].content = this.formData.textContent;
// 直播简介图片版
this.formData.rtcIntroduces[1].type = 2;
this.formData.rtcIntroduces[1].content = this.formData.imageContent;
// this.formData.rtcIntroduces[0].type = 1;
// this.formData.rtcIntroduces[0].content = this.formData.textContent;
// // 直播简介图片版
// this.formData.rtcIntroduces[1].type = 2;
// this.formData.rtcIntroduces[1].content = this.formData.imageContent;
// 设置讲师
// if(this.formData.lecturers == undefined){
// this.formData.lecturers
......
src/views/yqrange/live-manage.vue
浏览文件 @ 28f22214
......@@ -62,15 +62,14 @@
@click="liveLink(scope.row)"
type="text"
size="small"
v-if="!(scope.row.liveStatus==4 && scope.row.liveScope==1)"
>直播链接</el-button>
v-if="!(scope.row.liveStatus==4 && scope.row.liveScope==1)">直播链接</el-button>
<el-button
@click="countLive(scope.row)"
type="text"
size="small"
v-if="scope.row.liveStatus==4"
>数据统计</el-button>
v-if="scope.row.liveStatus==4">数据统计</el-button>
<el-button @click="editLive(scope.row)" type="text" size="small">编辑</el-button>
<el-button @click="setPlayback(scope.row)" type="text" size="small" v-if="playbackSetFlag == 1">设置回放</el-button>
<!-- <el-button @click="deleteLive(scope.row)" type="text" size="small">删除</el-button> -->
</template>
</el-table-column>
......@@ -137,6 +136,51 @@
</el-col>
</div>
</el-dialog>
<el-dialog
title="设置回放"
:visible.sync="dialogLivePlaybackVisible"
width="500px"
:close-on-click-modal="false"
@close="handleLivePlaybackClose"
center>
<!--<input type="text" id="copyInput" class="hidden-input" />-->
<div class="live_url_style">
<el-radio-group size="small" style="line-height: 30px;" v-model="canPlayback" @change="changePlayback">
<el-radio label="1">使用直播原视频播放</el-radio>
<el-radio label="2">上传回放视频（下载原视频编辑后上传）</el-radio>
</el-radio-group>
</div>
<div style="float:left;margin-left:30px;">
<span>①下载原视频</span>
<el-button @click="download('model')" type="text" size="small">下载</el-button>
</div>
<div style="float:left;margin-left:30px;">
<span>②上传回放视频</span>
<el-upload
v-if="isMgUrl"
v-model="playbackUrl"
class="bg-uploader"
action="#"
accept="*/*"
:limit="1"
:before-upload="beforeVideoUpload">
<!--<video class="video-mg-url" controls preload :src="cleatBroadcast.liveInfo.mgUrl"></video>-->
<!-- <img v-if="!cleatBroadcast.liveInfo.mgUrl" class="video-bg-img" src="../../../static/img/small.png"> -->
</el-upload>
<el-button @click="upload" type="text" size="small">上传（仅支持mp4）</el-button>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="openPlay" right>开启回放</el-button>
</div>
</el-dialog>
</div>
</div>
</template>
......@@ -153,6 +197,9 @@ export default {
curmbSecond: "直播管理",
dialogStatisticsVisible: false,
dialogLivelinkVisible: false,
dialogLivePlaybackVisible: false,
playbackSetFlag: 1,
canPlayback: 1,
searchForm: {
liveName: "",
liveStatus: "",
......@@ -276,7 +323,64 @@ export default {
this.dialogLivelinkVisible = false;
},
//回放
reviewLive(row) {},
setPlayback(row) {
this.dialogLivePlaybackVisible = true;
},
//关闭设置回放弹窗
handleLivePlaybackClose() {
this.dialogLivePlaybackVisible = false;
},
// 设置回放方式
changePlayback(){
if(this.canPlayback == 2){
}
},
// 下载
download(type){
let downloadUrl = "";
if (type == "model") {
// downloadUrl = getExeclUrl(
// "%E6%95%99%E5%9F%B9%E9%A1%B9%E7%9B%AE%E8%A7%92%E8%89%B2%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx"
// );
downloadUrl = "http://1302268825.vod2.myqcloud.com/22ae71e7vodcq1302268825/317cf9115285890804733258933/f0.mp4";
} else if (type == "fail") {
downloadUrl = vm.failExcelUrl;
}
console.log("下载", type, downloadUrl);
setTimeout(() => {
window.open(downloadUrl);
}, 500);
},
// 上传
upload(){
},
// 上传视频
beforeVideoUpload(){
vm.$message.success('开始上传')
doUpload(vm,file, getFilePath(file,null), 'preview4', 'uploadProgress1', '').then(function (path) {
vm.cleatBroadcast.liveInfo.mgUrl = path.fullPath;
vm.$message.success('上传成功')
});
},
// 开启回放
openPlay(){
},
//数据统计
countLive(row) {
this.dialogStatisticsVisible = true;
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或