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 @@
</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,6 +301,71 @@
</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>
<el-row>
......@@ -558,7 +590,6 @@
guestName: '',
hostMobile: '',
guestMobile: '',
mobile1: '',
lecturesUserName: '',
lecturesPhone: '',
lecturers: [{
......@@ -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" },
// {
......@@ -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(){
......@@ -1390,6 +1469,27 @@
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){
let flag = true;
if(phone1 != "" & phone2 != "" & phone1 == phone2){
......@@ -1453,7 +1553,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,23 +1578,18 @@
// }
}
// 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){
......@@ -1588,6 +1683,12 @@
if(!this.checkCover() || !this.checkPreImage()){
return;
}
// 检查TAB
if(!this.checkTab()){
return;
}
// 校验嘉宾姓名和手机号
if(!this.checkGuests()){
return;
......@@ -1693,6 +1794,13 @@
fileUrl: "",
rtcId: "",
};
},
// 改变TAB
changeTab(){
if(this.tabFlag == 0){
this.formData.tabs[0].name = "";
this.formData.tabs[0].contents = [];
}
}
},
}
......@@ -1837,4 +1945,4 @@
height: 100px;
float: left;
}
</style>
</style>
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或