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
......@@ -6,10 +6,10 @@
<el-col :span="12">
<div style="color:#666666;font-size:14px;">{{curmbThird}}</div>
<!--<el-steps :active="active" simple class>-->
<!--<span class="step-num" :class="{ 'on-step': stepData[0] }">1</span>-->
<!--<el-step title="基础信息"></el-step>-->
<!--<span class="step-num" :class="{ 'on-step': stepData[1] }">2</span>-->
<!--<el-step title="选择范围">2</el-step>-->
<!--<span class="step-num" :class="{ 'on-step': stepData[0] }">1</span>-->
<!--<el-step title="基础信息"></el-step>-->
<!--<span class="step-num" :class="{ 'on-step': stepData[1] }">2</span>-->
<!--<el-step title="选择范围">2</el-step>-->
<!--</el-steps>-->
</el-col>
<el-col :span="6" :offset="5">
......@@ -28,11 +28,11 @@
<el-form-item label="直播标题" prop="name">
<el-col :span="18">
<el-input
size="small"
v-model="formData.name"
maxlength="20"
placeholder="请输入直播标题"
style="width:70%;"
size="small"
v-model="formData.name"
maxlength="20"
placeholder="请输入直播标题"
style="width:70%;"
></el-input>
<span class="word-num">{{(formData.name).replace(/\s+/g,"").length}}/20</span>
</el-col>
......@@ -60,14 +60,14 @@
<el-form-item label="拉流地址" v-if="pullFlag" class="required-label">
<el-col :span="18">
<el-input
size="small"
v-model="formData.pullStreamRtmp"
placeholder="请输入拉流地址"
style="width:70%;"
:disabled="styleEditFlag">
<template slot="prepend">APP</template>
</el-input>
<el-input
size="small"
v-model="formData.pullStreamRtmp"
placeholder="请输入拉流地址"
style="width:70%;"
:disabled="styleEditFlag">
<template slot="prepend">APP</template>
</el-input>
</el-col>
<el-col :span="18">
<el-input
......@@ -95,93 +95,93 @@
<el-form-item label="直播开始时间" prop="openTime">
<el-col :span="6">
<el-date-picker
v-model="formData.openTime"
size="small"
type="datetime"
placeholder="请选择直播开始时间"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptions0"
:disabled="formData.liveStatus == 2 || formData.liveStatus == 4"
style="width: 100%;"
></el-date-picker>
<el-date-picker
v-model="formData.openTime"
size="small"
type="datetime"
placeholder="请选择直播开始时间"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptions0"
:disabled="formData.liveStatus == 2 || formData.liveStatus == 4"
style="width: 100%;"
></el-date-picker>
</el-col>
</el-form-item>
<el-form-item label="直播简介" class="required-label">
<el-col :span="16">
<div style="color:#666666;font-size:10px;">直播简介可选择仅文字版，仅图片版或文字版+图片版</div>
<el-input type="textarea" v-model="formData.textContent" placeholder="请输入直播简介" maxlength="300" rows="4" style="width:80%;"></el-input>
<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="16">
<div style="color:#666666;font-size:10px;">直播简介可选择仅文字版，仅图片版或文字版+图片版</div>
<el-input type="textarea" v-model="formData.textContent" placeholder="请输入直播简介" maxlength="300" rows="4" style="width:80%;"></el-input>
<span class="word-num">{{(formData.textContent).replace(/\s+/g,"").length }}/300</span>
<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()">+新增图片（可上传5张）</el-button>
<el-button size="small" type="info" @click="addIntroImage()">+新增图片（可上传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 rtcIntroducesImages" :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">
<img
v-if="item.content"
:src="item.content"
class="bg-img"
@click="getIndexIntroduce(index)"/>
<img
v-if="!item.content"
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="delIntroImage(index, item)">删除</el-button>
<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 rtcIntroducesImages" :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">
<img
v-if="item.content"
:src="item.content"
class="bg-img"
@click="getIndexIntroduce(index)"/>
<img
v-if="!item.content"
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="delIntroImage(index, item)">删除</el-button>
</div>
</el-col>
</div>
</el-col>
</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">
<el-form-item label="直播封面" class="required-label">
<el-upload
v-model="formData.cover"
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeUploadPic2"
v-model="formData.cover"
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeUploadPic2"
>
<img
v-if="formData.cover"
:src="formData.cover"
@mouseover.stop="imgMouseOver2=true"
class="bg-img"
v-if="formData.cover"
:src="formData.cover"
@mouseover.stop="imgMouseOver2=true"
class="bg-img"
/>
<img
v-if="!formData.cover"
class="bg-img"
src="../../assets/image/small.png"
v-if="!formData.cover"
class="bg-img"
src="../../assets/image/small.png"
/>
<div
class="img-delete"
v-show="imgMouseOver2"
@click.stop="deleteImg(2)"
@mouseout.stop="imgMouseOver2=false"
class="img-delete"
v-show="imgMouseOver2"
@click.stop="deleteImg(2)"
@mouseout.stop="imgMouseOver2=false"
>
<i class="el-icon-delete"></i>
</div>
......@@ -203,8 +203,8 @@
</el-col>
<el-col :span="16" v-if="formData.backgroundImageId">
<div style="margin-left:0px;margin-top: 10px;min-width: 380px;display: flex;align-items: center">
<img :src="backgroundImageUrl"
style="float: left;width: 150px;height: 100px;"/>
<img :src="backgroundImageUrl"
style="float: left;width: 150px;height: 100px;"/>
<el-button size="danger" style="margin-left: 20px;" @click="delBackgroundImage(index, item)" :disabled="formData.liveStatus == 4 || formData.liveStatus == 5">删除</el-button>
</div>
......@@ -213,20 +213,20 @@
</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="上传课件">
<el-row>
<!--<el-col :span="24">-->
<!--<el-button size="small" type="primary" @click="addIntroImage()">点击上传课件</el-button>-->
<!--<el-button size="small" type="primary" @click="addIntroImage()">点击上传课件</el-button>-->
<!--</el-col>-->
<el-col :span="16">
<el-upload action="#"
......@@ -263,65 +263,32 @@
</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">
<el-upload
v-model="formData.preImage"
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeUploadPic3"
v-model="formData.preImage"
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeUploadPic3"
>
<img
v-if="formData.preImage"
:src="formData.preImage"
@mouseover.stop="imgMouseOver3=true"
class="bg-img"
v-if="formData.preImage"
:src="formData.preImage"
@mouseover.stop="imgMouseOver3=true"
class="bg-img"
/>
<img
v-if="!formData.preImage"
class="bg-img"
src="../../assets/image/small.png"
v-if="!formData.preImage"
class="bg-img"
src="../../assets/image/small.png"
/>
<div
class="img-delete"
v-show="imgMouseOver3"
@click.stop="deleteImg(3)"
@mouseout.stop="imgMouseOver3=false"
class="img-delete"
v-show="imgMouseOver3"
@click.stop="deleteImg(3)"
@mouseout.stop="imgMouseOver3=false"
>
<i class="el-icon-delete"></i>
</div>
......@@ -334,17 +301,82 @@
</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>
<el-col :span="10">
<el-form-item label="姓名" prop="lecturesUserName" label-width="80px">
<el-input
size="small"
v-model="formData.lecturesUserName"
placeholder="请输入姓名"
style="width:85%;"
:disabled="liveEditFlag"
size="small"
v-model="formData.lecturesUserName"
placeholder="请输入姓名"
style="width:85%;"
:disabled="liveEditFlag"
></el-input>
</el-form-item>
</el-col>
......@@ -372,11 +404,11 @@
<el-col :span="10">
<el-form-item label=" 姓名" label-width="80px">
<el-input
size="small"
v-model="item.username"
placeholder="请输入姓名"
style="width:85%;"
:disabled="guestEditFlag"
size="small"
v-model="item.username"
placeholder="请输入姓名"
style="width:85%;"
:disabled="guestEditFlag"
></el-input>
</el-form-item>
</el-col>
......@@ -396,22 +428,22 @@
</el-col>
<el-col :span="2">
<img
@click="addGuest(index)"
class="edit-img"
src="../../assets/image/plus.png"
v-if="isPreview!=1"
@click="addGuest(index)"
class="edit-img"
src="../../assets/image/plus.png"
v-if="isPreview!=1"
/>
<img
@click="delGuest(index)"
v-if="index >= 1 && isPreview!=1"
class="edit-img"
src="../../assets/image/trash.png"
@click="delGuest(index)"
v-if="index >= 1 && isPreview!=1"
class="edit-img"
src="../../assets/image/trash.png"
/>
</el-col>
</el-row>
</div>
<!--<el-col :span="15">-->
<!--<p class="err-text" v-if="guestErrFlag"><img src="../../assets/image/err-icon.svg" alt="">{{guestErrText}}</p>-->
<!--<p class="err-text" v-if="guestErrFlag"><img src="../../assets/image/err-icon.svg" alt="">{{guestErrText}}</p>-->
<!--</el-col>-->
</el-form-item>
</el-form>
......@@ -449,23 +481,23 @@
<!--<input type="text" id="copyInput" class="hidden-input" />-->
<el-radio-group v-model="backgroundImageIdTemp">
<div class="radio-background" v-for="(item, index) in backgroundImages" :key="index" v-if="index < 5" @change="changeImage(item)">
<el-radio :label="item.backgroundImageId"><img class="background-img" :src="item.imageUrl" /></el-radio>
<el-radio :label="item.backgroundImageId"><img class="background-img" :src="item.imageUrl" /></el-radio>
<el-input type="hidden" v-model="backgroundImageUrlTemp"></el-input>
</div>
<!--<div class="radio-background">-->
<!--<el-radio :label="6"></el-radio>-->
<!--<el-radio :label="6"></el-radio>-->
<!--<img class="background-img" src="https://test1-file.yunqueyi.com/image/png/protal/project/20200720152355168.png" />-->
<!--</div>-->
<!--<div class="radio-background">-->
<!--<el-radio :label="9"></el-radio>-->
<!--<el-radio :label="9"></el-radio>-->
<!--<img class="background-img" src="https://test1-file.yunqueyi.com/image/png/protal/project/20200720152355168.png" />-->
<!--</div>-->
<!--<div class="radio-background">-->
<!--<el-radio :label="12"></el-radio>-->
<!--<el-radio :label="12"></el-radio>-->
<!--<img class="background-img" src="https://test1-file.yunqueyi.com/image/png/protal/project/20200720152355168.png" />-->
<!--</div>-->
<!--<div class="radio-background">-->
<!--<el-radio :label="15"></el-radio>-->
<!--<el-radio :label="15"></el-radio>-->
<!--<img class="background-img" src="https://test1-file.yunqueyi.com/image/png/protal/project/20200720152355168.png" />-->
<!--</div>-->
</el-radio-group>
......@@ -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: [],
......@@ -624,63 +660,74 @@
cropperIndex: "",
pickerOptions0: {
disabledDate: time => {
// 在科学计数法中，为了使公式简便，可以用带“E”的格式表示。例如1.03乘10的8次方，可简写为“1.03e8”的形式
// 一天是24*60*60*1000 = 86400000 = 8.64e7
// console.log('this.maxDate',this.maxDate)
return time.getTime() < Date.now() - 8.64e7
}
},
// 在科学计数法中，为了使公式简便，可以用带“E”的格式表示。例如1.03乘10的8次方，可简写为“1.03e8”的形式
// 一天是24*60*60*1000 = 86400000 = 8.64e7
// console.log('this.maxDate',this.maxDate)
return time.getTime() < Date.now() - 8.64e7
}
},
rules: {
name: [
{ required: true, message: "请输入直播标题", trigger: "blur" },
{
min: 2,
max: 24,
message: "输入长度为2-24的内容，可包含中英文、数字及特殊符号",
trigger: "blur"
},
{ validator: checkProjectStr, trigger: "blur" }
],
name: [
{ required: true, message: "请输入直播标题", trigger: "blur" },
{
min: 2,
max: 24,
message: "输入长度为2-24的内容，可包含中英文、数字及特殊符号",
trigger: "blur"
},
{ validator: checkProjectStr, trigger: "blur" }
],
streamType: [{
required: true, message: "请选择直播方式", trigger: 'blur'
}],
required: true, message: "请选择直播方式", trigger: 'blur'
}],
scope:[
{required: true}
],
{required: true}
],
infoCollect: [
{required: true, message: "请选择是否收集用户信息", trigger: "blur"}
],
{required: true, message: "请选择是否收集用户信息", trigger: "blur"}
],
openTime: [
{required: true, message: "请选择直播开始时间", trigger: "blur"}
],
{required: true, message: "请选择直播开始时间", trigger: "blur"}
],
// // 直播简介
// introduce: [
// {required: true, message: "请选择文字版或图片版", trigger: "blur"}
// ],
lecturesUserName: [
{required: true, message: "请输入姓名", trigger: "blur"},
],
{required: true, message: "请输入姓名", trigger: "blur"},
],
// guestName: [
// {required: true, message: "请输入姓名", trigger: "blur"},
// ],
lecturesPhone: [
{required: true, message: "请输入手机号", trigger: ['change','blur']},
{validator: checkMobile, trigger: ['change','blur']}
],
// introduce: [
// { required: true, message: "请输入", trigger: "blur" },
// {
// min: 2,
// max: 24,
// message: "输入长度为2-24的内容，可包含中英文、数字及特殊符号",
// trigger: "blur"
// },
// { validator: checkProjectStr, trigger: "blur" }
// ],
}
{required: true, message: "请输入手机号", 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: [
// { required: true, message: "请输入", trigger: "blur" },
// {
// min: 2,
// max: 24,
// message: "输入长度为2-24的内容，可包含中英文、数字及特殊符号",
// trigger: "blur"
// },
// { validator: checkProjectStr, trigger: "blur" }
// ],
}
}
},
created() {
......@@ -720,25 +767,25 @@
}).then((res) => {
if(res.code == "000000") {
let images = res.data;
if(images != null){
for(let i = 0; i < images.length; i++){
images[i].backgroundImageId = String(images[i].backgroundImageId);
}
let images = res.data;
if(images != null){
for(let i = 0; i < images.length; i++){
images[i].backgroundImageId = String(images[i].backgroundImageId);
}
this.backgroundImages = images;
// 设置背景图
if(this.backgroundImageUrl != null || this.backgroundImageUrl != ''){
this.setbgImage();
}
}
}).catch((error) => {
this.backgroundImages = images;
// 设置背景图
if(this.backgroundImageUrl != null || this.backgroundImageUrl != ''){
this.setbgImage();
}
}
}).catch((error) => {
this.$message({
message: "请重试",
type: 'error'
});
})
message: "请重试",
type: 'error'
});
})
},
// 初始化直播
initRtcInfo(rtcId){
......@@ -746,43 +793,43 @@
rtcId
}).then((res) => {
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;
}
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: ''}];
}
if(this.formData.guests == null || this.formData.guests.length == 0){
this.formData.guests = [{phone: '',username: ''}];
}
this.formData.circleId = this.circleId;
this.initFormData();
console.log(this.formData);
}
}).catch((error) => {
this.formData.circleId = this.circleId;
this.initFormData();
console.log(this.formData);
}
}).catch((error) => {
this.$message({
message: "请重试",
type: 'error'
});
})
message: "请重试",
type: 'error'
});
})
},
getIndexIntroduce(index) {
// if (!this.isDisabledIns) {
......@@ -792,7 +839,7 @@
// else if(this.formData.rtcIntroduces != null && this.formData.rtcIntroduces.length > index){
// index = index + 1;
// }
this.introduceIndex = index;
this.introduceIndex = index;
// }else {
// this.$message.warning('正在上传，请稍等')
// }
......@@ -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;
vm.slide2.oriUrl = 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] = {
......@@ -1198,12 +1255,12 @@
// },
// 直播方式
changeStreamType(){
if(this.formData.streamType == 2){
this.pullFlag = true;
}
else {
this.pullFlag = false;
}
if(this.formData.streamType == 2){
this.pullFlag = true;
}
else {
this.pullFlag = false;
}
},
......@@ -1281,7 +1338,7 @@
content: "",
type: 2 // 文字
};
this.rtcIntroducesImages.push(item);
this.rtcIntroducesImages.push(item);
},
// 删除直播简介
......@@ -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(){
......@@ -1338,10 +1417,10 @@
for(let i=0;i<this.formData.guests.length;i++) {
if(this.formData.guests[i].username == "" & this.formData.guests[i].phone == ""){
// this.formData.guests.splice(i, 1);
// this.formData.guests.splice(i, 1);
if(this.submitFlag){
this.formData.guests.splice(i, 1);
continue;
this.formData.guests.splice(i, 1);
continue;
}
else {
this.$message.error("请输入嘉宾姓名和手机号");
......@@ -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){
......@@ -1399,7 +1499,7 @@
return flag;
},
// 增加嘉宾
addGuest(index) {
addGuest(index) {
if(this.guestEditFlag){
return;
......@@ -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;
......@@ -1464,9 +1564,9 @@
this.rtcIntroducesImages = [];
for(let i=0;i<this.formData.rtcIntroduces.length;i++) {
if(this.formData.rtcIntroduces[i].type == "1"){
// this.formData.textContent = this.formData.rtcIntroduces[i].content;
this.$set(this.formData, 'textContent', this.formData.rtcIntroduces[i].content);
// break;
// this.formData.textContent = this.formData.rtcIntroduces[i].content;
this.$set(this.formData, 'textContent', this.formData.rtcIntroduces[i].content);
// break;
}
else {
// this.$set(this.formData, "rtcIntroducesImages", )
......@@ -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){
......@@ -1542,7 +1637,7 @@
}
}
// this.formData.rtcIntroduces[0].content = this.formData.textContent;
// this.formData.rtcIntroduces[0].content = this.formData.textContent;
// 直播简介图片版
// this.formData.rtcIntroduces[1].type = 2;
// this.formData.rtcIntroduces[1].content = this.formData.imageContent;
......@@ -1566,9 +1661,9 @@
this.submit();
} else {
console.log('error submit!!');
return false;
}
});
return false;
}
});
},
//完成
......@@ -1588,6 +1683,12 @@
if(!this.checkCover() || !this.checkPreImage()){
return;
}
// 检查TAB
if(!this.checkTab()){
return;
}
// 校验嘉宾姓名和手机号
if(!this.checkGuests()){
return;
......@@ -1602,23 +1703,23 @@
openLoading(this);
this.POST('rtc/liveAdmin', req).then((res) => {
closeLoading(this);
if( res.code == '000000') {
this.$message.success("操作成功");
this.$router.push({
path: '/live-manage',
query: {
id: this.formData.circleId
}
})
}
else {
this.formData.guests = [{
phone: '',
username: ''
}];
this.$message.error("操作失败，请重试");
}
})
if( res.code == '000000') {
this.$message.success("操作成功");
this.$router.push({
path: '/live-manage',
query: {
id: this.formData.circleId
}
})
}
else {
this.formData.guests = [{
phone: '',
username: ''
}];
this.$message.error("操作失败，请重试");
}
})
},
......@@ -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 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或