Skip to content

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

新增跑马灯和TAB

上级 854438cf
显示空白字符变更
内嵌 并排
正在显示 包含 431 行增加 和 323 行删除
src/views/yqrange/create-live.vue
浏览文件 @ 1835316a
...@@ -154,7 +154,7 @@ ...@@ -154,7 +154,7 @@
</el-row> </el-row>
</el-form-item> </el-form-item>
<p class="upload-message" v-if="uploadImgMessage2">请选择直播封面</p> <!--<p class="upload-message" v-if="uploadImgMessage2">请选择直播封面</p>-->
</div> </div>
<div class="basic-item-icon"> <div class="basic-item-icon">
...@@ -213,13 +213,13 @@ ...@@ -213,13 +213,13 @@
</el-form-item> </el-form-item>
</div> </div>
<!--<el-form-item label="是否开启防录屏跑马灯">--> <el-form-item label="是否开启防录屏跑马灯">
<!--<el-radio-group v-model="formData.antiScreenCap" size="small">--> <el-radio-group v-model="formData.antiScreenCap" size="small">
<!--<el-radio label="0">否</el-radio>--> <el-radio label="0">否</el-radio>
<!--<el-radio label="1">是</el-radio>--> <el-radio label="1">是</el-radio>
<!--</el-radio-group>--> </el-radio-group>
<!--</el-form-item>--> </el-form-item>
<div class="basic-item-icon"> <div class="basic-item-icon">
<el-form-item label="上传课件"> <el-form-item label="上传课件">
...@@ -263,39 +263,6 @@ ...@@ -263,39 +263,6 @@
</el-col> </el-col>
</el-row> </el-row>
</el-form-item> </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>
<div class="basic-item-icon"> <div class="basic-item-icon">
<el-form-item label="直播预告图" class="required-label"> <el-form-item label="直播预告图" class="required-label">
...@@ -334,6 +301,71 @@ ...@@ -334,6 +301,71 @@
</el-form-item> </el-form-item>
<p class="upload-message" v-if="uploadImgMessage3">请选择直播预告图</p> <p class="upload-message" v-if="uploadImgMessage3">请选择直播预告图</p>
</div> </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"> <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-row>
...@@ -558,7 +590,6 @@ ...@@ -558,7 +590,6 @@
guestName: '', guestName: '',
hostMobile: '', hostMobile: '',
guestMobile: '', guestMobile: '',
mobile1: '',
lecturesUserName: '', lecturesUserName: '',
lecturesPhone: '', lecturesPhone: '',
lecturers: [{ lecturers: [{
...@@ -580,7 +611,12 @@ ...@@ -580,7 +611,12 @@
backgroundImageId: "", backgroundImageId: "",
// backgroundImageIdTemp: "0", // backgroundImageIdTemp: "0",
// backgroundImages: [],// 直播背景图 // backgroundImages: [],// 直播背景图
tabs: [{
name: "",
contents: []
}]
}, },
tabFlag: "0",
backgroundImageIdTemp: '', backgroundImageIdTemp: '',
backgroundImageUrlTemp: "", backgroundImageUrlTemp: "",
backgroundImages: [], backgroundImages: [],
...@@ -669,6 +705,17 @@ ...@@ -669,6 +705,17 @@
{validator: checkMobile, trigger: ['change','blur']} {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: [ // introduce: [
// { required: true, message: "请输入", trigger: "blur" }, // { required: true, message: "请输入", trigger: "blur" },
// { // {
...@@ -854,6 +901,23 @@ ...@@ -854,6 +901,23 @@
this.beforeUpload(file, fileLimit); 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) { beforeUploadPdf(file) {
let fileLimit = { let fileLimit = {
size: 100, size: 100,
...@@ -920,19 +984,6 @@ ...@@ -920,19 +984,6 @@
// vm.playbackForm.videos[0].videoUrl = path.fullPath; // vm.playbackForm.videos[0].videoUrl = path.fullPath;
// } // }
vm.formData.rtcMaterial.fileUrl = 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('上传成功'); vm.$message.success('上传成功');
}); });
...@@ -957,7 +1008,9 @@ ...@@ -957,7 +1008,9 @@
_img.onload = function(theFile) { _img.onload = function(theFile) {
let image = new Image(); let image = new Image();
image.src = theFile.target.result; image.src = theFile.target.result;
if(vm.cropperIndex != 10 && vm.cropperIndex != 40){
vm.slide2.oriUrl = theFile.target.result; vm.slide2.oriUrl = theFile.target.result;
}
image.onload = function() { image.onload = function() {
let _this = this; let _this = this;
...@@ -970,7 +1023,7 @@ ...@@ -970,7 +1023,7 @@
// 图片大小不正常，则进行裁剪 // 图片大小不正常，则进行裁剪
// 直播简介，简介要求750*（高度<3000） // 直播简介，简介要求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("图片尺寸不符合规范，请根据规范上传图片"); vm.$message.error("图片尺寸不符合规范，请根据规范上传图片");
return return
} }
...@@ -980,12 +1033,12 @@ ...@@ -980,12 +1033,12 @@
// vm.currentOption.cvHeight = _this.height; // vm.currentOption.cvHeight = _this.height;
// return; // 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("图片尺寸不符合规范，请根据规范上传图片"); vm.$message.error("图片尺寸不符合规范，请根据规范上传图片");
return; 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.showCropper = true;
vm.currentOption.cvWidth = _this.width; vm.currentOption.cvWidth = _this.width;
vm.currentOption.cvHeight = _this.height; vm.currentOption.cvHeight = _this.height;
...@@ -1010,6 +1063,10 @@ ...@@ -1010,6 +1063,10 @@
vm.rtcIntroducesImages[vm.introduceIndex].content = path.fullPath; vm.rtcIntroducesImages[vm.introduceIndex].content = path.fullPath;
vm.rtcIntroducesImages[vm.introduceIndex].seqNo = vm.introduceIndex+1; 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 { else {
vm.formData[fileLimit.key] = path.fullPath; vm.formData[fileLimit.key] = path.fullPath;
vm.formData[fileLimit.more] = { vm.formData[fileLimit.more] = {
...@@ -1289,6 +1346,28 @@ ...@@ -1289,6 +1346,28 @@
this.rtcIntroducesImages.splice(index, 1); 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(){ delBackgroundImage(){
...@@ -1390,6 +1469,27 @@ ...@@ -1390,6 +1469,27 @@
return flag; return flag;
}, },
checkTab(){
let flag = true;
if(this.tabFlag == "1"){
if(this.formData.tabs[0].name == ""){
flag = false;
this.$message.error("请填写TAB名称！");
}
else if(this.formData.tabs[0].contents.length == 0){
flag = false;
this.$message.error("请上传TAB图片！");
}
}
return flag;
},
checkUniquePhone(phone1, phone2){ checkUniquePhone(phone1, phone2){
let flag = true; let flag = true;
if(phone1 != "" & phone2 != "" & phone1 == phone2){ if(phone1 != "" & phone2 != "" & phone1 == phone2){
...@@ -1453,7 +1553,7 @@ ...@@ -1453,7 +1553,7 @@
this.formData.scope = String(this.formData.scope); this.formData.scope = String(this.formData.scope);
this.formData.countRule = String(this.formData.countRule); 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); this.backgroundImageIdTemp = String(this.formData.backgroundImageId == null ? "0":this.formData.backgroundImageId);
if(this.formData.scope == "2"){ if(this.formData.scope == "2"){
this.isCollectShow = true; this.isCollectShow = true;
...@@ -1478,23 +1578,18 @@ ...@@ -1478,23 +1578,18 @@
// } // }
} }
// this.rtcIntroducesImages = this.formData.rtcIntroduces.filter(function (item) {
// return item.type == "2";
// });
} }
// (formData.textContent).replace(/\s+/g,"").length // 新增TAB页
if(this.formData.tabs != null && this.formData.tabs.length == 0){
// if(this.formData.textContent == ""){ this.formData.tabs = [{
// this.introTextNum = 0; name: "",
// } contents: []
// else { }];
// this.introTextNum this.tabFlag = "0";
// } }
else {
this.tabFlag = "1";
}
// 设置讲师 // 设置讲师
if(this.formData.lecturers.length > 0){ if(this.formData.lecturers.length > 0){
...@@ -1588,6 +1683,12 @@ ...@@ -1588,6 +1683,12 @@
if(!this.checkCover() || !this.checkPreImage()){ if(!this.checkCover() || !this.checkPreImage()){
return; return;
} }
// 检查TAB
if(!this.checkTab()){
return;
}
// 校验嘉宾姓名和手机号 // 校验嘉宾姓名和手机号
if(!this.checkGuests()){ if(!this.checkGuests()){
return; return;
...@@ -1693,6 +1794,13 @@ ...@@ -1693,6 +1794,13 @@
fileUrl: "", fileUrl: "",
rtcId: "", rtcId: "",
}; };
},
// 改变TAB
changeTab(){
if(this.tabFlag == 0){
this.formData.tabs[0].name = "";
this.formData.tabs[0].contents = [];
}
} }
}, },
} }
...@@ -1837,4 +1945,4 @@ ...@@ -1837,4 +1945,4 @@
height: 100px; height: 100px;
float: left; float: left;
} }
</style> </style>
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或