提交 0a193d4f 编写于 作者: bo.dang's avatar bo.dang

Merge branch 'dev-circle-live-20200805' into 'release'

小生态互动直播四期,Code Review: bo.dang



See merge request !205
......@@ -154,7 +154,7 @@
</el-row>
</el-form-item>
<p class="upload-message" v-if="uploadImgMessage2">请选择直播封面</p>
<!--<p class="upload-message" v-if="uploadImgMessage2">请选择直播封面</p>-->
</div>
<div class="basic-item-icon">
......@@ -213,13 +213,13 @@
</el-form-item>
</div>
<!--<el-form-item label="是否开启防录屏跑马灯">-->
<!--<el-radio-group v-model="formData.antiScreenCap" size="small">-->
<!--<el-radio label="0">否</el-radio>-->
<!--<el-radio label="1">是</el-radio>-->
<!--</el-radio-group>-->
<el-form-item label="是否开启防录屏跑马灯">
<el-radio-group v-model="formData.antiScreenCap" size="small">
<el-radio label="0"></el-radio>
<el-radio label="1"></el-radio>
</el-radio-group>
<!--</el-form-item>-->
</el-form-item>
<div class="basic-item-icon">
<el-form-item label="上传课件">
......@@ -263,39 +263,6 @@
</el-col>
</el-row>
</el-form-item>
<!--<el-form-item label="上传课件" class="required-label">-->
<!--<el-upload-->
<!--v-model="formData.materialUrl"-->
<!--class="bg-uploader"-->
<!--action="#"-->
<!--:show-file-list="false"-->
<!--:before-upload="beforeUploadPic2"-->
<!--&gt;-->
<!--<img-->
<!--v-if="formData.materialUrl"-->
<!--:src="getOSSDomain(formData.materialUrl)"-->
<!--@mouseover.stop="imgMouseOver2=true"-->
<!--class="bg-img"-->
<!--/>-->
<!--<img-->
<!--v-if="!formData.materialUrl"-->
<!--class="bg-img"-->
<!--src="../../assets/image/small.png"-->
<!--/>-->
<!--<div-->
<!--class="img-delete"-->
<!--v-show="imgMouseOver2"-->
<!--@click.stop="deleteImg(2)"-->
<!--@mouseout.stop="imgMouseOver2=false"-->
<!--&gt;-->
<!--<i class="el-icon-delete"></i>-->
<!--</div>-->
<!--<div class="limit-text">-->
<!--<p>仅支持PDF格式,限制大小: 30Mb</p>-->
<!--</div>-->
<!--</el-upload>-->
<!--</el-form-item>-->
<!--<p class="upload-message" v-if="uploadImgMessage2">请选择直播封面</p>-->
</div>
<div class="basic-item-icon">
<el-form-item label="直播预告图" class="required-label">
......@@ -334,8 +301,73 @@
</el-form-item>
<p class="upload-message" v-if="uploadImgMessage3">请选择直播预告图</p>
</div>
<el-form-item label="是否新增一个tab">
<el-radio-group v-model="tabFlag" size="small" @change="changeTab">
<el-radio label="0"></el-radio>
<el-radio label="1"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="TAB名称" v-if="tabFlag == 1" class="required-label">
<el-col :span="7">
<el-input
size="small"
v-model="formData.tabs[0].name"
maxlength="5"
placeholder="请输入TAB名称"
style="width:70%;"
></el-input>
<span class="word-num">{{(formData.tabs[0].name).replace(/\s+/g,"").length}}/5</span>
</el-col>
</el-form-item>
<div class="basic-item-icon" v-if="tabFlag == 1">
<el-form-item label="图片" class="required-label">
<el-row>
<el-col :span="24">
<el-button size="small" type="info" @click="addTabContent()">+新增图片(可上传5张)</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">-->
<div v-for="(item, index) in formData.tabs[0].contents" :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="beforeUploadPic4">
<img
v-if="item"
:src="item"
class="bg-img"
@click="getIndexIntroduce(index)"/>
<img
v-if="!item"
class="bg-img"
src="../../assets/image/small.png"
@click="getIndexIntroduce(index)"/>
</el-upload>
<div class="limit-text" style="font-size: 12px;color: #999;margin-left: 10px;margin-top: -10px;">
<p>限制大小: 2Mb</p>
<p>尺寸:750*(高度<3000)</p>
<p>支持jpeg, png格式</p>
</div>
<el-button size="danger" @click="delTabContent(index, item)">删除</el-button>
</div>
</el-col>
</el-row>
</el-form-item>
<!--<p class="upload-message" v-if="uploadImgMessage2">请选择直播封面</p>-->
</div>
<el-form-item label="直播角色" v-if="formData.streamType == 1">
<div style="color:#666666;font-size:10px;">讲师(必填)</div>
<div style="color:#666666;font-size:10px;">主播(必填)</div>
<el-row>
<el-col :span="10">
<el-form-item label="姓名" prop="lecturesUserName" label-width="80px">
......@@ -528,7 +560,7 @@
//页面展示位置
isCollectShow: false,
styleEditFlag: false,// 直播方式是否可以编辑
liveEditFlag: false,// 直播方式、讲师是否可以编辑
liveEditFlag: false,// 直播方式、主播是否可以编辑
guestEditFlag: false,// 嘉宾是否可以编辑
pullFlag: false, // 是否显示拉流地址
dialogVisible: false,
......@@ -558,13 +590,12 @@
guestName: '',
hostMobile: '',
guestMobile: '',
mobile1: '',
lecturesUserName: '',
lecturesPhone: '',
lecturers: [{
username: '',
phone: ''
}],// 讲师
}],// 主播
guests: [{
phone: '',
username: ''
......@@ -580,7 +611,12 @@
backgroundImageId: "",
// backgroundImageIdTemp: "0",
// backgroundImages: [],// 直播背景图
tabs: [{
name: "",
contents: []
}]
},
tabFlag: "0",
backgroundImageIdTemp: '',
backgroundImageUrlTemp: "",
backgroundImages: [],
......@@ -669,6 +705,17 @@
{validator: checkMobile, trigger: ['change','blur']}
],
// tabName: [
// { required: true, message: "请输入TAB名称", trigger: "blur" },
// {
// min: 2,
// max: 5,
// message: "输入长度为2-5的内容,可包含中英文、数字及特殊符号",
// trigger: "blur"
// },
// { validator: checkProjectStr, trigger: "blur" }
// ],
// introduce: [
// { required: true, message: "请输入", trigger: "blur" },
// {
......@@ -748,7 +795,7 @@
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"){
......@@ -756,13 +803,13 @@
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;
......@@ -854,6 +901,23 @@
this.beforeUpload(file, fileLimit);
},
// 上传TAB图片
beforeUploadPic4(file) {
vm.cropperIndex = 40;
let fileLimit = {
width: 750,
height: 3000,
size: 2,
sizeText: "2Mb",
key: "imageContent",
more: "imgUrl1More",
show: "uploadImgMessage1"
};
// this.beforeUploadMore(file, fileLimit);
this.beforeUpload(file, fileLimit);
},
beforeUploadPdf(file) {
let fileLimit = {
size: 100,
......@@ -920,19 +984,6 @@
// vm.playbackForm.videos[0].videoUrl = path.fullPath;
// }
vm.formData.rtcMaterial.fileUrl = path.fullPath;
// vm.playbackForm.videos[0].videoSize =
// vm.playbackForm.videos[0].seqNo = 0;
// vm.playbackForm.videos[0].videoName = vm.fileName;
// vm.playbackForm.videos[0].videoSize = file.size();
// vm.playbackForm.videos[0].videoSource = 2;
// vm.playbackForm.videos[0].videoType = 1;
// vm.playbackForm.videos[0].videoUrl = path.fullPath;
// vm.fileFlag = false;
//
// vm.deleteFileFlag = true;
//
// vm.uploadProgress1 = Number("0.00");
// vm.uploadProgress = Number("0.00");
vm.$message.success('上传成功');
});
......@@ -957,7 +1008,9 @@
_img.onload = function(theFile) {
let image = new Image();
image.src = theFile.target.result;
if(vm.cropperIndex != 10 && vm.cropperIndex != 40){
vm.slide2.oriUrl = theFile.target.result;
}
image.onload = function() {
let _this = this;
......@@ -970,7 +1023,7 @@
// 图片大小不正常,则进行裁剪
// 直播简介,简介要求750*(高度<3000)
if(vm.cropperIndex == 10 && (_this.width < fileLimit.width || _this.height > fileLimit.height)) {
if((vm.cropperIndex == 10 || vm.cropperIndex == 40) && (_this.width < fileLimit.width || _this.height > fileLimit.height)) {
vm.$message.error("图片尺寸不符合规范,请根据规范上传图片");
return
}
......@@ -980,12 +1033,12 @@
// vm.currentOption.cvHeight = _this.height;
// return;
// }
if(vm.cropperIndex != 10 && (_this.width < fileLimit.width || _this.height < fileLimit.height)) {
if(vm.cropperIndex != 10 && vm.cropperIndex != 40 && (_this.width < fileLimit.width || _this.height < fileLimit.height)) {
vm.$message.error("图片尺寸不符合规范,请根据规范上传图片");
return;
}
// 图片大小不正常,则进行裁剪
else if(vm.cropperIndex != 10 && (_this.width > fileLimit.width || _this.height > fileLimit.height)) {
else if(vm.cropperIndex != 10 && vm.cropperIndex != 40 && (_this.width > fileLimit.width || _this.height > fileLimit.height)) {
vm.showCropper = true;
vm.currentOption.cvWidth = _this.width;
vm.currentOption.cvHeight = _this.height;
......@@ -1010,6 +1063,10 @@
vm.rtcIntroducesImages[vm.introduceIndex].content = path.fullPath;
vm.rtcIntroducesImages[vm.introduceIndex].seqNo = vm.introduceIndex+1;
}
else if(vm.cropperIndex == 40){
// vm.formData.tabs[0].contents[vm.introduceIndex] = path.fullPath;
vm.$set(vm.formData.tabs[0].contents, vm.introduceIndex, path.fullPath);
}
else {
vm.formData[fileLimit.key] = path.fullPath;
vm.formData[fileLimit.more] = {
......@@ -1289,6 +1346,28 @@
this.rtcIntroducesImages.splice(index, 1);
},
// 增加Tab图片
addTabContent(){
let length = this.formData.tabs[0].contents.length;
if(length >= 5){
this.$message.warning("TAB图片最多支持新增5张图片!");
return;
}
// const item = {
// seqNo: length + 1,
// content: "",
// type: 2 // 文字
// };
this.formData.tabs[0].contents.push("");
},
// 删除直播简介
delTabContent(index, item){
this.formData.tabs[0].contents.splice(index, 1);
},
// 删除背景图
delBackgroundImage(){
......@@ -1361,7 +1440,7 @@
flag = false;
break;
}
// 检查讲师和嘉宾手机号是否相同
// 检查主播和嘉宾手机号是否相同
if(!this.checkUniquePhone(this.formData.lecturesPhone, this.formData.guests[i].phone)){
this.$message.error("请输入不同的手机号");
flag = false;
......@@ -1390,6 +1469,39 @@
return flag;
},
checkTab(){
let flag = true;
if(this.tabFlag == "1"){
if(this.formData.tabs[0].name == ""){
flag = false;
this.$message.error("请填写TAB名称!");
}
if(this.formData.tabs[0].contents.length == 0){
flag = false;
this.$message.error("请上传TAB图片!");
}
else {
this.formData.tabs[0].contents = this.formData.tabs[0].contents.filter(function (item) {
return item != "";
});
if(this.formData.tabs[0].contents.length == 0){
flag = false;
this.$message.error("请上传TAB图片!");
}
}
}
return flag;
},
checkUniquePhone(phone1, phone2){
let flag = true;
if(phone1 != "" & phone2 != "" & phone1 == phone2){
......@@ -1453,7 +1565,7 @@
this.formData.scope = String(this.formData.scope);
this.formData.countRule = String(this.formData.countRule);
// this.formData.antiScreenCap = String(this.formData.antiScreenCap);
this.formData.antiScreenCap = String(this.formData.antiScreenCap);
this.backgroundImageIdTemp = String(this.formData.backgroundImageId == null ? "0":this.formData.backgroundImageId);
if(this.formData.scope == "2"){
this.isCollectShow = true;
......@@ -1478,25 +1590,20 @@
// }
}
// this.rtcIntroducesImages = this.formData.rtcIntroduces.filter(function (item) {
// return item.type == "2";
// });
}
// (formData.textContent).replace(/\s+/g,"").length
// if(this.formData.textContent == ""){
// this.introTextNum = 0;
// }
// else {
// this.introTextNum
// }
// 新增TAB页
if(this.formData.tabs != null && this.formData.tabs.length == 0){
this.formData.tabs = [{
name: "",
contents: []
}];
this.tabFlag = "0";
}
else {
this.tabFlag = "1";
}
// 设置讲师
// 设置主播
if(this.formData.lecturers.length > 0){
// this.formData.lecturesUserName = this.formData.lecturers[0].username;
// this.formData.lecturesPhone = this.formData.lecturers[0].phone;
......@@ -1521,7 +1628,8 @@
});
if(rtcIntroducesImagesArray != null && rtcIntroducesImagesArray.length != 0){
// 直播简介图片版
this.formData.rtcIntroduces = JSON.parse(JSON.stringify(this.rtcIntroducesImages));
// this.formData.rtcIntroduces = JSON.parse(JSON.stringify(this.rtcIntroducesImages));
this.formData.rtcIntroduces = JSON.parse(JSON.stringify(rtcIntroducesImagesArray));
}
else {
this.formData.rtcIntroduces = [];
......@@ -1546,7 +1654,7 @@
// 直播简介图片版
// this.formData.rtcIntroduces[1].type = 2;
// this.formData.rtcIntroduces[1].content = this.formData.imageContent;
// 设置讲师
// 设置主播
// if(this.formData.lecturers == undefined){
// this.formData.lecturers
// }
......@@ -1588,6 +1696,12 @@
if(!this.checkCover() || !this.checkPreImage()){
return;
}
// 检查TAB
if(!this.checkTab()){
return;
}
// 校验嘉宾姓名和手机号
if(!this.checkGuests()){
return;
......@@ -1693,6 +1807,13 @@
fileUrl: "",
rtcId: "",
};
},
// 改变TAB
changeTab(){
if(this.tabFlag == 0){
this.formData.tabs[0].name = "";
this.formData.tabs[0].contents = [];
}
}
},
}
......@@ -1837,4 +1958,4 @@
height: 100px;
float: left;
}
</style>
</style>
......@@ -130,7 +130,7 @@
<input type="text" id="copyInput" class="hidden-input" />
<div class="live_url_style" v-if="streamType == 1 && (this.liveStatus==1 || this.liveStatus==2)">
<div class="href_style">讲师链接 {{lecturerUrl}}</div>
<div class="href_style">主播链接 {{lecturerUrl}}</div>
<el-col class="href_outer_border">
<el-link type="primary" @click="copyTxt(1)" size="small" class="href_button_style">复制</el-link>
<el-link type="primary">|</el-link>
......@@ -1040,8 +1040,31 @@ export default {
} else {
txt.value = this.audienceUrl;
}
// if (navigator.userAgent.match(/(iPhone|iPod|iPad|Mac);?/i)) {
if (navigator.userAgent.indexOf("Safari") > -1 && navigator.userAgent.indexOf("Chrome") < 1) {
var el = document.createElement('input');
el.value = txt.value;//要复制的内容
el.style.opacity = '0';
document.body.appendChild(el);
var editable = el.contentEditable;
var readOnly = el.readOnly;
el.contentEditable = true;
el.readOnly = false;
const range = document.createRange();
range.selectNodeContents(el);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
el.setSelectionRange(0, 999999);
el.contentEditable = editable;
el.readOnly = readOnly;
var ret = document.execCommand('copy');
el.blur();
}
else {
txt.select(); //选择对象
document.execCommand("copy");
}
vm.$message({
type: "success",
......
......@@ -75,7 +75,7 @@
size="small"
>降为普通成员</el-button>
<el-button
v-if="scope.row.level != 2 &&
v-if="scope.row.level != 2 && scope.row.level != 4 &&
(idType == 1 || selfRoleId > scope.row.level) &&
scope.row.status == 1"
@click="addBlackList(scope.row)"
......@@ -83,7 +83,7 @@
size="small"
>加入黑名单</el-button>
<el-button
v-if="scope.row.level != 2 &&
v-if="scope.row.level != 2 && scope.row.level != 4 &&
(idType == 1 || selfRoleId > scope.row.level) &&
scope.row.status == 2"
@click="addBlackList(scope.row)"
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册