Skip to content

P
pica.cloud.web-education-admin
提交 022a8d77 编写于 作者: vino's avatar vino
浏览文件
操作

活动成员管理开发

上级 a99eebf9
隐藏空白字符变更
内嵌 并排
正在显示 包含 615 行增加 和 2380 行删除
src/router/router.js
浏览文件 @ 022a8d77
......@@ -78,7 +78,7 @@ const createGood = r => require.ensure([], () => r(require('../views/goods/creat
const orderManage = r => require.ensure([], () => r(require('../views/goods/order-manage.vue')), 'order-manage')
const orderDetail = r => require.ensure([], () => r(require('../views/goods/order-detail.vue')), 'order-detail')
const plazaList = r => require.ensure([], () => r(require('../views/plaza/plaza-list.vue')), 'plaza-list')
const createPlaza = r => require.ensure([], () => r(require('../views/plaza/create-plaza.vue')), 'create-plaza')
const activityMember = r => require.ensure([], () => r(require('../views/activitymanagement/activity-member.vue')), 'activity-member')
export default [{
......@@ -334,8 +334,8 @@ export default [{
component: plazaList,
},
{
path: '/create-plaza',
component: createPlaza,
path: '/activity-member',
component: activityMember,
},
// {
......
src/utils/activitymanagement/activitymanagementApi.js
浏览文件 @ 022a8d77
......@@ -13,4 +13,36 @@ export const getOnlineCircleList = () => {
method: 'get',
description: '获取所有已上线的圈子列表',
})
};
\ No newline at end of file
};
export const getActivityDocList = (params) => {
return fetch({
headers,
url: getBaseUrl(`circle/sso/activity/doctor/list`),
method: 'get',
params: params,
description: '后台管理--专区活动成员列表与搜索',
})
};
export const removeDoc = (params) => {
return fetch({
headers,
url: getBaseUrl(`circle/sso/activity/doctor/remove`),
method: 'post',
data: params,
description: '后台管理--专区活动成员移除',
})
};
export const importDoc = (params) => {
return fetch({
headers,
url: getBaseUrl(`circle/sso/activity/doctor/import/${params.activityId}/${params.importType}`),
method: 'post',
data: params,
description: '后台管理--专区活动成员导入',
})
};
src/views/activitymanagement/activity-management.vue
浏览文件 @ 022a8d77
......@@ -78,10 +78,10 @@
<span v-if="scope.row.status == 0 || scope.row.status == 50" style="color: #c7c8c9">{{ scope.row.status | rangeStatus }}</span>
</template>
</el-table-column>
<el-table-column prop="numberOfPeople" label="活动成员数" min-width="100" align="center"></el-table-column>
<el-table-column label="操作" min-width="370" align="center">
<template slot-scope="scope">
<div v-if="scope.row.status != 50">
......@@ -90,7 +90,7 @@
<!--<el-button @click="liveManage(scope.row)" type="text" size="small" v-if="scope.row.status != 0">直播管理</el-button>-->
<!--<el-button @click="roleManage(scope.row)" type="text" size="small" v-if="scope.row.status != 0">成员管理</el-button>-->
<el-button @click="editRange(scope.row)" type="text" size="small">编辑</el-button>
<el-button @click="deleteRange(scope.row)" type="text" size="small" v-if="showAllFlag && scope.row.status != 0">活动成员管理</el-button>
<el-button @click="activityManage(scope.row)" type="text" size="small">活动成员管理</el-button>
<!--<el-button @click="setting(scope.row)" type="text" size="small" v-if="scope.row.status != 0 && showNewFlag">应用配置</el-button>-->
<el-button @click="rangeManage(scope.row)" type="text" size="small" v-if="scope.row.status != 0">删除</el-button>
</div>
......@@ -444,6 +444,19 @@ export default {
});
},
activityManage(row){
this.$router.push({
path: '/activity-member',
query: {
id: row.id,
name: row.name,
activeName: 'first',
}
})
},
// 应用配置
setting(row){
this.dialogSettingVisible = true;
......
src/views/activitymanagement/activity-member.vue 0 → 100644
浏览文件 @ 022a8d77
<template>
<div class="organization">
<el-row type="flex" class="row-bg">
<el-col class="add-organization" v-if="showImportFlag">
<!--<el-upload-->
<!--class="bg-uploader"-->
<!--action="#"-->
<!--:show-file-list="false"-->
<!--:before-upload="beforeUploadDoc">-->
<i class="el-icon-document-add"></i>
<i class="text" @click="batchImport()">批量导入</i>
<!--</el-upload>-->
</el-col>
<el-col class="organization-search">
<el-form :inline="true" :model="formOrganization" class="demo-form-inline" >
<el-form-item label="机构:">
<el-input style="width:140px;" size="small" v-model="formOrganization.orgName" placeholder="请输入机构名称"></el-input>
</el-form-item>
<el-form-item label="姓名:">
<el-input style="width:140px;" size="small" v-model="formOrganization.name" placeholder="请输入人员姓名"></el-input>
</el-form-item>
<el-form-item>
<el-button size="small" type="primary" @click="serch()">搜索</el-button>
</el-form-item>
<el-form-item>
<el-button size="small" @click="reset()">取消搜索</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
<el-table class="rim" ref="multipleOrganization" :data="peoplesDtoList" tooltip-effect="dark" style="width: 100%">
<el-table-column prop="name" label="人员" min-width="100" align="center"></el-table-column>
<el-table-column prop="department" label="所属科室" align="center"></el-table-column>
<el-table-column prop="hospital" label="所属医院" align="center"></el-table-column>
<el-table-column prop="provinceName" label="所属省份" align="center"></el-table-column>
<el-table-column prop="cityName" label="所属城市" align="center"></el-table-column>
<el-table-column prop="countyName" label="所属区县" align="center"></el-table-column>
<el-table-column prop="townName" label="所属街道" align="center"></el-table-column>
<el-table-column
fixed="right"
label="操作"
align="center"
width="140">
<template slot-scope="scope">
<el-button @click="detel(scope.row)" type="text" size="small" style="color:red" v-if="scope.row.source != 1">删除</el-button>
</template>
</el-table-column>
<div slot="empty">
<div class="table-empty">
<img src="../../../assets/image/no-content1.png">
<p>没有人员信息</p>
</div>
</div>
</el-table>
<div class="pagination">
<el-pagination background @size-change="handleSizeOrganization" @current-change="handleCurrentOrganization"
:current-page="formOrganization.pageNum" :page-sizes="[10, 30, 50, 100, 200]" :page-size="formOrganization.pageSize"
layout="total, sizes, prev, pager, next, jumper" :total="totalPeople"></el-pagination>
</div>
<el-dialog
title="添加人员"
:visible.sync="dialogOrg"
width="80%"
top="5vh"
:before-close="handleClose">
<add-member
v-if="dialogOrg"
:circleId='circleId'
:roleType='roleType'
@addPeople="addPeople"
@handleClose="handleClose">
</add-member>
</el-dialog>
<!-- 删除 弹窗 -->
<el-dialog
title="确认删除"
:show-close="false"
:visible.sync="deleteVisible"
:close-on-click-modal="false"
width="600px"
center
>
<p style="text-align: center;">{{detelMessage}}</p>
<span slot="footer" class="dialog-footer">
<el-button @click="confirmDelete">删 除</el-button>
<el-button type="primary" @click="hideDeleteFrom">取 消</el-button>
</span>
</el-dialog>
<!--<el-dialog-->
<!--title="导入错误提示"-->
<!--:visible.sync="dialogVisible"-->
<!--width="500px"-->
<!--:close-on-click-modal="false"-->
<!--@close="handleErrorClose"-->
<!--center-->
<!--&gt;-->
<!--<el-table :data="dialogErrorData" align="center">-->
<!--<el-table-column property="rowNumber" label="行数" align="center"></el-table-column>-->
<!--<el-table-column property="wrongData" label="错误提示" align="center"></el-table-column>-->
<!--</el-table>-->
<!--</el-dialog>-->
<el-dialog
:title="dialogTitle"
:visible.sync="dialogVisible"
width="500px"
:close-on-click-modal="false"
@close="handleErrorClose"
center>
<!--<el-table :data="dialogErrorData" align="center">-->
<!--<el-table-column property="rowNumber" label="行数" align="center"></el-table-column>-->
<!--<el-table-column property="wrongData" label="错误提示" align="center"></el-table-column>-->
<!--</el-table>-->
<div v-if="importSuccessFlag" style="text-align: center;">
<div>本次成功导入<span style="color: green;">&nbsp;{{importNum}}条&nbsp;</span>数据</div>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="handleErrorClose" style="margin-top: 20px;">关闭</el-button>
</span>
</div>
<div v-if="!importSuccessFlag" style="text-align: center;">
<div v-if="importNum == 0">数据不符合格式要求，请修正后再次导入</div>
<div v-if="importNum != 0">有<span style="color: red;">&nbsp;{{importNum}}条&nbsp;</span>数据不符合格式要求，请修正后再次导入</div>
<br>
<div>
<span>
<el-button @click="downloadFile" type="text" size="small" style="color: #449284 !important;">下载错误数据></el-button>
<!--<a @click="downloadFile">下载错误数据</a>-->
</span>
</div>
<div style="margin-top: 20px;">
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="handleErrorClose" style="float: left;margin-left: 130px;">取 消</el-button>
<el-upload
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeUploadDoc">
<el-button type="primary" size="small" style="margin-left: -100px;">重新导入</el-button>
</el-upload>
</span>
</div>
</div>
</el-dialog>
<el-dialog
title="批量导入"
:visible.sync="dialogImportVisible"
width="650px"
:close-on-click-modal="false"
@close="handleImportClose"
center>
<div style="float:left;width: 250px;">
<span>1.下载模板，填写信息</span>
<br>
<div>
<el-button type="primary" size="small" style="float:left; margin-top: 30px;" @click="download1">下载模板</el-button>
</div>
</div>
<div style="float:left;margin-left: 40px;width: 1px;height: 100px; background: #c8cbd2;"></div>
<div style="margin-left: 400px;height: 130px;">
<span>2.上传填写好的文件</span>
<br>
<el-upload
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeUploadDoc">
<el-button type="primary" size="small" style="margin-top: 30px;">上传文件</el-button>
</el-upload>
</div>
</el-dialog>
</div>
</template>
<script>
import * as operationData from "@/utils/operation";
import { openLoading, closeLoading } from "@/utils/utils";
import { doUpload, getFilePath } from "@/utils/qiniu-util";
import { mpRelSearch, mprDeleteOrg } from '@/utils/yqrange/memberApi';
import { uploadDoc } from '@/utils/yqrange/yqrangeApi';
import addMember from './addMember.vue'
let vm = null;
export default {
components: {
addMember
},
props: {
circleId: {
type: Number | String,
default: 1
},
roleType: {
type: Number | String,
default: 1
},
},
data() {
return {
props: {
lazy: true,
lazyLoad(node, resolve) {
const { level } = node;
if (node.level == 1) {
let req = {
provinceId: node.data.value
};
vm.GET("basic-data/position/cities", req).then(res => {
let newData = vm.setMoreOption(res.data.cityList, "cities");
resolve(newData);
});
} else if (node.level == 2) {
let req = {
cityId: node.data.value
};
vm.GET("basic-data/position/counties", req).then(res => {
let newData = vm.setMoreOption(res.data.countyList, "counties");
resolve(newData);
});
} else if (node.level == 3) {
let req = {
countyId: node.data.value
};
vm.GET("basic-data/position/towns", req).then(res => {
let newData = vm.setMoreOption(res.data.townList, "towns");
resolve(newData);
});
}
}
},
administrativeValue: "",
optionsRegion: [],
sourceList: [
{
label: '全部',
value: 0
},
{
label: '可访问本圈的地区/机构',
value: 1
},
{
label: '手动添加',
value: 2
},
],
peoplesDtoList: [],
totalPeople: 10,
selectionList:[],
formOrganization: {
name: '',
orgName: '',
source: 0,
pageNum: 1,
pageSize: 10
},
dialogOrg:false,
deleteVisible: false,
detelMessage: '',
dialogVisible: false,
dialogErrorData: [],
showImportFlag: false,
dialogImportVisible: false,
importMsg: "",
importSuccessFlag: false,
importNum: 0,
dialogTitle: "",
errorFileUrl: ""
}
},
created() {
vm = this;
//Idtype:1,内部 2.外部
vm.idType = localStorage.getItem("storageIdType");
this.initRange();
if(vm.idType == 1){
this.showImportFlag = true;
}
else {
setTimeout(() => {
let highMainManager = localStorage.getItem('highMainManager');
let mainManager = localStorage.getItem('mainManager');
let manager = localStorage.getItem('manager');
if(highMainManager == 1 || mainManager == 1 || manager == 1){
this.showImportFlag = true;
}
else {
this.showImportFlag = false;
}
},1000);
}
},
mounted() {
},
methods: {
initRange() {
this.formOrganization.pageNum = 1;
this.formOrganization.name = "";
this.formOrganization.orgName = "";
this.formOrganization.source = 0
this.getList(1)
},
setMoreOption(data, type) {
let option = [];
for (let i = 0; i < data.length; i++) {
let obj = data[i];
if (type == "cities") {
obj.label = data[i].cityName;
obj.value = data[i].cityId;
} else if (type == "counties") {
obj.label = data[i].countyName;
obj.value = data[i].countyId;
} else if (type == "towns") {
obj.label = data[i].townName;
obj.value = data[i].townId;
obj.leaf = true;
}
option.push(obj);
}
return option;
},
serch() {
this.formOrganization.pageNum = 1;
this.getList()
},
getList(first) {
let idType = localStorage.getItem("storageIdType");
let req = {
circleId: this.circleId,
countryFlag: true,
name: this.formOrganization.name.trim(),
orgName: this.formOrganization.orgName.trim(),
pageNo: this.formOrganization.pageNum,
pageSize: this.formOrganization.pageSize,
source: this.formOrganization.source,
};
openLoading(vm);
mpRelSearch(req).then(res => {
if (!first) {
closeLoading(vm);
}
if (res.code == "000000") {
this.peoplesDtoList = res.data.peoplesDtoList;
this.totalPeople = res.data.total;
this.setPleTotal()
} else {
this.$message(res.message);
}
}).catch(err => {
this.$message.error('请求失败');
});
},
//重置机构、人员查询
reset() {
this.initRange()
},
//机构table修改
handleSizeOrganization(val) {
console.log(`每页 ${val} 条`);
this.formOrganization.pageSize = val;
this.getList();
},
handleCurrentOrganization(val) {
//console.log(`当前页: ${val}`);
this.formOrganization.pageNum = val;
this.getList();
},
detel(item) {
this.detelMessage = `删除后 "${item.name}" 将无法访问本圈, 确定删除么?`
this.deleteVisible = true
this.clickItem = item
},
confirmDelete() {
let params = {
circleId: this.circleId,
docIds: [this.clickItem.id]
}
mprDeleteOrg(params).then((res) => {
this.$message({
type: 'success',
message: '删除成功!'
});
this.deleteVisible = false
this.formOrganization.pageNum = 1;
this.getList()
}).catch(() => {
this.$message.error('删除失败，请稍后重试');
})
},
hideDeleteFrom() {
this.deleteVisible = false
this.detelMessage = ''
this.clickItem = null
},
setPleTotal() {
this.$emit('setPleTotal',this.totalPeople)
},
dialogMemberFn() {
this.dialogOrg = true
},
handleClose() {
this.dialogOrg = false
},
addPeople() {
this.dialogOrg = false
this.initRange()
},
// 批量导入
beforeUploadDoc(file) {
// // 人员数已超10000，无法导入机构
// if(vm.totalPeople > 10000){
// this.$message.warning('人员数已超10000，无法导入机构');
// return;
// }
let name = file.name;
let type = name.substring(name.lastIndexOf('.') + 1);
if (type !== 'xls' && type !== 'xlsx') {
vm.$message({
message: '上传文件只能是 xls、xlsx格式!',
type: 'warning'
});
return;
}
openLoading(vm);
let formData = new FormData();
formData.append("circleId", vm.circleId);
formData.append("file", file);
// let files = new window.File();
uploadDoc(formData).then(res => {
closeLoading(vm);
if (res.code == "000000") {
vm.dialogImportVisible = false;
// 导入成功
if(res.data.status){
vm.dialogVisible = true;
vm.dialogTitle = "导入成功";
vm.importSuccessFlag = true;
vm.importNum = res.data.successNum;
vm.initRange();
// vm.searchOrganization();
// vm.$emit('refreshRenYuan');
}
else {
vm.dialogVisible = true;
vm.dialogTitle = "导入失败";
vm.importSuccessFlag = false;
vm.importNum = res.data.failNum;
vm.errorFileUrl = res.data.file;
// this.$message({
// type: 'success',
// message: '导入成功!'
// });
}
}
else {
this.$message({
type: 'error',
message: res.message
});
}
// if (res.code == "000000") {
//
//
// if(res.data.successNum == 0 && res.data.wrongDataList.length > 0){
//
// this.dialogVisible = true;
//
// this.dialogErrorData = res.data.wrongDataList;
// }
// else {
// this.$message({
// type: 'success',
// message: '导入成功!'
// });
// vm.initRange();
// }
//
// }
// else {
// this.$message({
// type: 'error',
// message: res.message
// });
// }
// vm.setDialog(res);
});
// };
// reader.readAsDataURL(file);
},
handleErrorClose() {
this.dialogVisible = false;
},
// 批量导入
batchImport(){
this.dialogImportVisible = true;
},
handleImportClose(){
this.dialogImportVisible = false;
},
// 下载模板
download1(){
const url = "https://files.yunqueyi.com/template/import_people_by_name_mobile.xlsx";
window.location.href = url;
},
// 下载错误数据文件
downloadFile(){
window.location.href = vm.errorFileUrl;
}
}
}
</script>
<style lang="scss" scoped>
.organization {
.add-organization {
margin-left: 20px;
line-height: 20px;
width: 120px;
cursor: pointer;
padding-top: 10px;
i {
font-size: 18px;
margin-right: 2px;
}
}
.organization-search {
flex: 1;
margin-right: 10px;
text-align: right;
}
}
</style>
src/views/plaza/create-plaza.vue 已删除 100644 → 0
浏览文件 @ a99eebf9
<template>
<div class="yqrange-index-wrapper">
<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond" :curmbThird="curmbThird" :jumPathThird="jumPathThird" :jumPathFouth="jumPathFouth"></bread-crumb>
<div class="yqrange-index-content screenSet" id="screenSet">
<el-row class="step-content">
<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>-->
<!--</el-steps>-->
</el-col>
<el-col :span="6" :offset="5">
<el-button size="small" type="primary" @click="complete('formData')">完成</el-button>
</el-col>
</el-row>
<div class="first-step">
<!--<p class="p-title">基础信息</p>-->
<el-form ref="formData"
:model="formData"
:rules="rules"
label-width="150px"
label-suffix="："
class="basic-form">
<el-form-item label="直播标题" prop="name">
<el-col :span="18">
<el-input
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>
</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>
<el-radio label="2">是（任何人可观看）</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="是否收集用户信息" prop="infoCollect" v-if="isCollectShow">
<el-radio-group v-model="formData.infoCollect" size="small">
<el-radio label="0">否</el-radio>
<el-radio label="1">是（收集姓名等信息）</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="直播方式" prop="streamType">
<el-radio-group v-model="formData.streamType" size="small" @change="changeStreamType">
<el-radio label="1" :disabled="styleEditFlag">网页直播</el-radio>
<el-radio label="2" :disabled="styleEditFlag">拉流直播</el-radio>
</el-radio-group>
<el-tooltip class="item" effect="dark" content="网页直播即通过生成的网页地址进行直播，拉流直播是指进入第三方流进行转播" placement="top">
<i class="el-icon-info" style="color: #449284;margin-left: 15px;"></i>
</el-tooltip>
</el-form-item>
<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-col>
<el-col :span="18">
<el-input
size="small"
v-model="formData.pullStreamHttp"
placeholder="请输入拉流地址"
style="width:70%;"
:disabled="styleEditFlag">
<template slot="prepend">H5&nbsp;&nbsp;&nbsp;</template>
</el-input>
</el-col>
</el-form-item>
<el-form-item label="是否签到" class="required-label">
<el-radio-group v-model="formData.isSign" size="small" @change="changeSign">
<el-radio :label="0" :disabled="styleEditFlag">不签到</el-radio>
<el-radio :label="1" :disabled="styleEditFlag">签到</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="签到时间" v-if="signFlag">
<el-col :span="9">
<el-input
type="number"
:min="1"
:max="1000"
size="small"
v-model="formData.signMinute"
placeholder="开播后超过此时长无法签到"
style="width:70%;"
:disabled="styleEditFlag"
@blur="resetSignMinute"
></el-input>
<span>分</span>
<el-tooltip class="item" effect="dark" content="若不设置此时长，则直播全程可签到" placement="top">
<!--<span class="el-icon-info"></span>-->
<i class="el-icon-info" style="color: #449284;"></i>
</el-tooltip>
</el-col>
</el-form-item>
<el-form-item label="直播开始通知">
<el-checkbox size="small" v-model="checked" :disabled="styleEditFlag">App通知</el-checkbox>
</el-form-item>
<el-form-item label="直播中人数显示规则" prop="streamType">
<el-radio-group v-model="formData.countRule" size="small">
<el-radio label="1" :disabled="formData.liveStatus != 1">实时人数</el-radio>
<el-radio label="2" :disabled="formData.liveStatus != 1">累计人数</el-radio>
<el-radio label="3" :disabled="formData.liveStatus != 1">累计人次</el-radio>
</el-radio-group>
</el-form-item>
<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-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-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-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>
</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
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"
/>
<img
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"
>
<i class="el-icon-delete"></i>
</div>
<div class="limit-text">
<p>限制大小: 200kb</p>
<p>尺寸:160*120</p>
<p>支持jpeg, png格式</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="直播背景图">
<el-row>
<el-col :span="24">
<el-button size="small" type="primary" @click="setBackground()" :disabled="formData.liveStatus == 4 || formData.liveStatus == 5">选择背景图</el-button>
</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;"/>
<el-button size="danger" style="margin-left: 20px;" @click="delBackgroundImage(index, item)" :disabled="formData.liveStatus == 4 || formData.liveStatus == 5">删除</el-button>
</div>
</el-col>
</el-row>
</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>
<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-col>-->
<el-col :span="16">
<el-upload action="#"
accept="*/*"
ref="upload"
:limit="1"
:show-file-list="false"
:before-upload="beforeUploadPdf">
<!--<el-col :span="1">-->
<!--</el-col>-->
<el-button type="primary" size="small" style="margin-top: -10px;" >点击上传课件</el-button>
<p style="float: right;">&nbsp;&nbsp;仅支持PDF格式，限制大小：100Mb</p>
<!--<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-col>
<el-col :span="16" v-if="formData.rtcMaterial != null && formData.rtcMaterial.fileName != ''">
<el-progress
:text-inside="true"
:stroke-width="20"
:percentage="uploadProgress1"
status="success"
v-show="uploadProgress1 > 0 && uploadProgress1 < 100">
</el-progress>
<div>
<span>{{fileToName(formData.rtcMaterial.fileName,".pdf", 6)}}({{fileToSize(formData.rtcMaterial.fileSize, 1)}}M)</span>
<el-button v-show="(uploadProgress1 > 0 || formData.rtcMaterial.fileName != '')" @click="delFile" style="margin-left: 100px;" size="small" type="text">{{(uploadProgress1 && uploadProgress1 < 100 && formData.rtcMaterial.fileUrl == '')? '取消上传' : '删除'}}</el-button>
</div>
</el-col>
</el-row>
</el-form-item>
</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"
>
<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"
/>
<div
class="img-delete"
v-show="imgMouseOver3"
@click.stop="deleteImg(3)"
@mouseout.stop="imgMouseOver3=false"
>
<i class="el-icon-delete"></i>
</div>
<div class="limit-text">
<p>限制大小: 500kb</p>
<p>尺寸:750*420</p>
<p>支持jpeg, png格式</p>
</div>
</el-upload>
</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-tooltip class="item" effect="dark" content="此tab会出现在直播详情页上，用于直播内容进行拓展说明" placement="top">
<i class="el-icon-info" style="color: #449284;margin-left: 15px;"></i>
</el-tooltip>
</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="是否显示有奖问答tab" v-if="idType == 1">
<el-radio-group v-model="formData.qa" 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="有奖问答关联考试" v-if="idType == 1 && formData.qa == 1" class="required-label">
<el-col :span="18">
<el-select filterable v-model="formData.qaId" placeholder="请选择有奖问答关联考试" style="width:88%">
<el-option
v-for="item2 in examAwardList"
:key="item2.id"
:label="item2.name"
:value="item2.id">
</el-option>
</el-select>
</el-col>
</el-form-item>
<el-form-item label="直播角色" v-if="formData.streamType == 1">
<div style="color:#666666;font-size:10px;">主播（必填）</div>
<el-row>
<el-col :span="10" style="position: relative;">
<el-form-item label="姓名" prop="lecturesUserName" label-width="80px" style="position: relative;">
<el-input
size="small"
v-model="formData.lecturesUserName"
placeholder="请输入姓名"
style="width:85%;"
:disabled="liveEditFlag"
@input="handleInputSearch(101, formData.lecturesUserName, null)"
@blur="handleSearchListBlur"
></el-input>
</el-form-item>
<search-doctor :searchList="searchList" :searchId="searchId" @handleSearchLiClick="handleSearchLiClick" v-if="nowInput == 101"></search-doctor>
</el-col>
<el-col :span="1">
<img style="vertical-align: middle" src="../../assets/image/lianjie_icon.png" />
</el-col>
<el-col :span="10">
<!--<img src="../../assets/image/lianjie_icon.png" />-->
<el-form-item label="手机号" prop="lecturesPhone" label-width="80px">
<el-input maxlength="11"
size="small"
v-model="formData.lecturesPhone"
placeholder="请输入手机号"
style="width:85%;"
:disabled="liveEditFlag"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-col :span="24">
<div style="color:#666666;font-size:10px;">嘉宾（选填）</div>
</el-col>
<div v-for="(item, index) in formData.guests" :key="index">
<el-row>
<el-col :span="10" style="position: relative;">
<el-form-item label=" 姓名" label-width="80px">
<el-input
size="small"
v-model="item.username"
placeholder="请输入姓名"
style="width:85%;"
:disabled="guestEditFlag"
@input="handleInputSearch(index, item.username, item)"
@blur="handleSearchListBlur"
></el-input>
</el-form-item>
<search-doctor :searchList="searchList" :searchId="searchId" @handleSearchLiClick="handleSearchLiClick" v-if="index==nowInput"></search-doctor>
</el-col>
<el-col :span="1">
<img style="vertical-align: middle" src="../../assets/image/lianjie_icon.png" />
</el-col>
<el-col :span="10">
<el-form-item label="手机号" label-width="80px">
<el-input maxlength="11"
size="small"
v-model="item.phone"
placeholder="请输入手机号"
style="width:85%;"
:disabled="guestEditFlag"
></el-input>
</el-form-item>
</el-col>
<el-col :span="2">
<img
@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"
/>
</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>-->
<!--</el-col>-->
</el-form-item>
</el-form>
</div>
</div>
<el-dialog
class="dialog-title-border-old"
title="图片裁剪"
style="overflow:scroll;"
:visible.sync="showCropper"
:width="currentOption.cropDialogWidth"
center>
<div slot="title" style="text-align: left;">
<span style="font-weight: 700;">图片裁剪</span>
</div>
<div v-if="showCropper" style="margin-bottom: 20px;">
<Cropper
:cropOption="currentOption"
@getCropImg="getCropImg(arguments)"
:originImg="slide2.oriUrl"
/>
</div>
</el-dialog>
<el-dialog
title="请选择直播背景图"
:visible.sync="dialogVisible"
width="1000px"
:close-on-click-modal="false"
@close="handleClose"
center>
<el-form ref="setForm" :model="setForm">
<!--<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-input type="hidden" v-model="backgroundImageUrlTemp"></el-input>
</div>
<!--<div class="radio-background">-->
<!--<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>-->
<!--<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>-->
<!--<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>-->
<!--<img class="background-img" src="https://test1-file.yunqueyi.com/image/png/protal/project/20200720152355168.png" />-->
<!--</div>-->
</el-radio-group>
<el-radio-group v-model="backgroundImageIdTemp" v-if="backgroundImages != null && backgroundImages.length > 5">
<div class="radio-background" v-for="(item, index) in backgroundImages" :key="index" v-if="index > 4" @change="changeImage(item)">
<el-radio :label="item.backgroundImageId"><img class="background-img" :src="item.imageUrl" /></el-radio>
<el-input type="hidden" v-model="backgroundImageUrlTemp"></el-input>
</div>
</el-radio-group>
</el-form>
<div slot="footer" class="dialog-footer" style="text-align: right;">
<el-button type="primary" @click="submitBackground()" right>确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import BreadCrumb from "@/components/yqrange/breadcrumb-range.vue";
import { isEmptyUtils, openLoading, closeLoading } from "../../utils/utils";
import { doUpload, getFilePath, unsubscribe} from "../../utils/qiniu-util";
import { checkMobile } from '../../utils/patients/checkValid';
import { getRtcInfo, getImages, searchDoc, getExamAwardList} from "../../utils/yqrange/yqrangeApi";
import Cropper from '@/components/common/cropper.vue';
import SearchDoctor from "@/components/yqrange/search-doctor";
// import { ossUpload, getFilePathForOSS } from "@/utils/oss/ossUtil";
// import { checkPhone } from "../login.vue";
let vm = null;
export default {
components: {
BreadCrumb,
Cropper,
SearchDoctor
},
data(){
let checkProjectStr = (rule, value, callback) => {
if (value.indexOf("\\") != -1) {
//存在
callback(new Error("请勿输入字符“ \\ ”"));
} else if (value.indexOf(".") != -1) {
callback(new Error("请勿输入字符“ . ”"));
} else {
callback();
}
};
return{
rtcId: '',
circleId: '',
circleName: "",
curmbFirst: '云鹊小圈',
// curmbSecond: '直播管理',
curmbThird: '新建直播',// /live-manage?id=
jumPathThird: '/yq-range',
showIntroImageFlag: false,
introduceIndex: 0,
isDisabledIns: false,//为了防止上传多图时，点太快图片错位
//页面展示位置
isCollectShow: false,
styleEditFlag: false,// 直播方式是否可以编辑
liveEditFlag: false,// 直播方式、主播是否可以编辑
guestEditFlag: false,// 嘉宾是否可以编辑
pullFlag: false, // 是否显示拉流地址
dialogVisible: false,
uploadProgress1: 0,
searchList: [],
guestItem: null,
searchId: 100,
busy: false,
formData: {
circleId: "",// 圈子ID
name: '',// 直播名称
liveStatus: "1", // 直播状态
streamType: "1", // 直播方式
pullStreamRtmp: "", //APP拉流地址
pullStreamHttp: "", //H5拉流地址
scope: "1",// 直播范围 1-非公开 2-公开
infoCollect: "0",// 是否采集用户信息 0-否 1-是
countRule: "1", // 人数显示规则
openTime: '',// 直播开始时间
rtcIntroduces:[],// 直播简介
cover: '', // 直播封面url 直播第一帧图片
preImage: '', // 直播预告图url
textContent: '', // 直播简介文字版
imageContent: '',// 直播简介图片版
// imgUrl2: '',
// imgUrl2More: {},
// imgUrl3: '',
// imgUrl3More: {},
intro:'',
hostName: '',
guestName: '',
hostMobile: '',
guestMobile: '',
lecturesUserName: '',
lecturesPhone: '',
lecturers: [{
username: '',
phone: ''
}],// 主播
guests: [{
phone: '',
username: ''
}], // 嘉宾
rtcMaterial: {
fileName: "",
fileSize: "",
fileUrl: "",
rtcId: "",
},
antiScreenCap: "0",
backgroundImageId: "",
// backgroundImageIdTemp: "0",
// backgroundImages: [],// 直播背景图
tabs: [{
name: "",
contents: []
}],
isSign: 0,
signMinute: "",
isAppPush: 0,
qa:0,
qaId: ""
},
examAwardList: [],
checked: false,
signFlag: false,
tabFlag: "0",
backgroundImageIdTemp: '',
backgroundImageUrlTemp: "",
backgroundImages: [],
backgroundImageUrl: "",
introTextNum: 0,
rtcIntroducesText:[],
rtcIntroducesImages: [],
// imgUrl1: '',
imgUrl1More: {},
guestErrFlag: false,
guestErrText: '嘉宾最多5位！',
isPreview: 0,
imgMouseOver1: false,
uploadImgMessage1: false,//未上传图片，校验提示语
imgMouseOver2: false,
uploadImgMessage2: false,
imgMouseOver3: false,
uploadImgMessage3:false,
submitFlag: false,
showCropper: false,
setForm: {
},
currentOption: {
offset_x: 120,
offset_y: 185,
width: 160,
height: 120,
cvWidth: 1000,
cvHeight: 800,
uploadType: 1,
cropDialogWidth: '900px',
cropBoxResizable: true,
minCropBoxWidth: 100,
minCropBoxHeight: 100,
aspectRatio: 16/9
},
slide2: {
oriUrl: '', // 原图
},
cropperIndex: "",
nowInput: 0,
idType: "",
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
}
},
rules: {
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'
}],
// signMinute: [{
// min: 1,
// max: 1000,
// message: "不能输入0！",
// trigger: "blur"
// }],
scope:[
{required: true}
],
infoCollect: [
{required: true, message: "请选择是否收集用户信息", trigger: "blur"}
],
openTime: [
{required: true, message: "请选择直播开始时间", trigger: "blur"}
],
// // 直播简介
// introduce: [
// {required: true, message: "请选择文字版或图片版", trigger: "blur"}
// ],
lecturesUserName: [
{required: true, message: "请输入姓名", trigger: "blur"},
],
// guestName: [
// {required: true, message: "请输入姓名", trigger: "blur"},
// ],
lecturesPhone: [
{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" }
// ],
}
}
},
props: {
// curmbSecond: {
// type: String
// },
// jumPathFouth: {
// type: String
// }
},
created() {
vm = this;
// 区分内部用户和外部用户
this.idType = localStorage.getItem('storageIdType');
// this.idType = 1; // TODO
this.circleId = this.$route.query.circleId;
this.circleName = this.$route.query.circleName;
this.curmbSecond = "圈子管理-" + this.circleName;
this.jumPathFouth = "/range-manage?id=" + this.circleId + "&name=" + this.circleName + "&activeName=third";
this.formData.circleId = this.circleId;
console.log("create-live: jumPathFouth: " + this.jumPathFouth);
// this.jumPathThird = '/live-manage?id=' + this.circleId;
},
mounted() {
this.rtcId = this.$route.query.rtcId;
// if(rtcId){
// this.curmbThird = "编辑直播";
// }
this.initImages();
if(this.rtcId){
this.curmbThird = "编辑直播";
this.initRtcInfo(this.rtcId);
}
this.getExamAwardList();
},
methods: {
checkPhone(val) {
if(!(/^1[3456789]\d{9}$/.test(val))) {
return false;
} else {
return true;
}
},
// 取得背景
initImages(){
getImages({
}).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);
}
}
this.backgroundImages = images;
// 设置背景图
if(this.backgroundImageUrl != null || this.backgroundImageUrl != ''){
this.setbgImage();
}
}
}).catch((error) => {
this.$message({
message: "请重试",
type: 'error'
});
})
},
// 初始化直播
initRtcInfo(rtcId){
getRtcInfo({
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;
}
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.$message({
message: "请重试",
type: 'error'
});
})
},
getIndexIntroduce(index) {
// if (!this.isDisabledIns) {
// if(this.formData.rtcIntroduces != null && this.formData.rtcIntroduces.length == 1){
// index = 0;
// }
// else if(this.formData.rtcIntroduces != null && this.formData.rtcIntroduces.length > index){
// index = index + 1;
// }
this.introduceIndex = index;
// }else {
// this.$message.warning('正在上传，请稍等')
// }
},
getExamAwardList(){
let req = null;
getExamAwardList(req).then(function (res) {
if(res.code == "000000") {
vm.examAwardList = res.data;
// vm.formData = res.data;
}
}).catch(function (error) {
vm.$message.error(error);
});
},
checkQaId(){
if(vm.formData.qa == 1 && (vm.formData.qaId == null || vm.formData.qaId == "")){
vm.$message.error("请选择有奖问答关联考试！");
return false;
}
else {
return true;
}
},
//上传直播简介
beforeUploadPic1(file) {
vm.cropperIndex = 10;
// this.currentOption.aspectRatio = 0;
// this.currentOption.cropBoxResizable = true;
// this.currentOption.minCropBoxWidth = 750;
// this.currentOption.minCropBoxHeight = 120;
// this.currentOption.width = 750;
let fileLimit = {
width: 750,
height: 3000,
size: 2,
sizeText: "2Mb",
key: "imageContent",
more: "imgUrl1More",
show: "uploadImgMessage1"
};
// this.beforeUploadMore(file, fileLimit);
this.beforeUpload(file, fileLimit);
},
// 上传直播封面
beforeUploadPic2(file) {
vm.cropperIndex = 20;
this.currentOption.aspectRatio = 4/3;
this.currentOption.cropBoxResizable = true;
this.currentOption.minCropBoxWidth = 160;
this.currentOption.minCropBoxHeight = 120;
let fileLimit = {
width: 160,
height: 120,
size: 0.2,
sizeText: "200k",
key: "cover",
more: "imgUrl2More",
show: "uploadImgMessage2"
};
this.beforeUpload(file, fileLimit);
},
// 上传直播预告图
beforeUploadPic3(file) {
this.currentOption.aspectRatio = 25/14;
this.currentOption.cropBoxResizable = true;
this.currentOption.minCropBoxWidth = 750;
this.currentOption.minCropBoxHeight = 420;
vm.cropperIndex = 30;
let fileLimit = {
width: 750,
height: 420,
size: 0.5,
sizeText: "500k",
key: "preImage",
more: "imgUrl3More",
show: "uploadImgMessage3"
};
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,
sizeText: "100Mb",
key: "imageContent",
more: "imgUrl1More",
show: "uploadImgMessage1"
};
this.beforeUploadPdfMore(file, fileLimit);
},
// 上传课件
beforeUploadPdfMore(file, fileLimit){
const isMp4 = file.type === 'application/pdf';
const isSize = file.size / 1024 / 1024 < fileLimit.size;
if (!isMp4) {
this.$refs.upload.clearFiles();
this.$message.error('上传课件只能是PDF格式!');
// vm.isDisabledIns = false;
file = null;
return;
}
if (!isSize) {
// this.$refs.upload.abort();
this.$refs.upload.clearFiles();
this.$message.error('课件大小不符合规范，请根据规范上传课件');
// vm.isDisabledIns = false;
file = null;
return;
}
//
// vm.disabledOpenFlag = true;
//
// vm.fileFlag = false;
// vm.deleteFileFlag = true;
// vm.fileName = file.name;
// if(file.size != null){
// vm.fileSize = vm.videoSize(file.size, 1);
// }
// else {
// vm.fileSize = file.size;
// }
// this.formData.rtcMaterial.fileName = file.name;
// this.formData.rtcMaterial.fileSize = file.size;
// this.formData.rtcMaterial.rtcId = this.rtcId;
this.formData.rtcMaterial = {
fileName: file.name,
fileSize: file.size,
fileUrl: "",
rtcId: this.rtcId,
};
// 初始化
this.uploadProgress1 = Number("0.00");
this.uploadProgress = Number("0.00");
let vm = this;
// vm.$message.success('开始上传')
doUpload(this,file, getFilePath(file,null), 'preview4', 'uploadProgress1', '').then(function (path) {
// if(vm.playbackForm.videos != null && vm.playbackForm.videos[0] != null){
// vm.playbackForm.videos[0].videoUrl = path.fullPath;
// }
vm.formData.rtcMaterial.fileUrl = path.fullPath;
vm.$message.success('上传成功');
});
},
//上传图片
beforeUpload(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("图片必须是jpeg或png格式，同时长宽尺寸和图片大小需符合要求");
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;
if(vm.cropperIndex != 10 && vm.cropperIndex != 40){
vm.slide2.oriUrl = 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("图片尺寸不符合规范，请根据规范上传图片");
// }
// 图片大小不正常，则进行裁剪
// 直播简介，简介要求750*（高度<3000）
if((vm.cropperIndex == 10 || vm.cropperIndex == 40) && (_this.width < fileLimit.width || _this.height > fileLimit.height)) {
vm.$message.error("图片必须是jpeg或png格式，同时长宽尺寸和图片大小需符合要求");
return
}
// else if(vm.cropperIndex == 10 && (_this.width > fileLimit.width || _this.height > fileLimit.height)){
// vm.showCropper = true;
// vm.currentOption.cvWidth = _this.width;
// vm.currentOption.cvHeight = _this.height;
// return;
// }
if(vm.cropperIndex != 10 && vm.cropperIndex != 40 && (_this.width < fileLimit.width || _this.height < fileLimit.height)) {
vm.$message.error("图片必须是jpeg或png格式，同时长宽尺寸和图片大小需符合要求");
return;
}
// 图片大小不正常，则进行裁剪
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;
return;
}
// 图片大小正常，则直接上传
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;
// }
if(vm.cropperIndex == 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] = {
attachmentName: path.name,
attachmentExt: path.ext,
attachmentSize: path.size
};
}
vm.$message.success("上传成功");
});
}
};
};
return isJPG && isLt2M;
},
// 获取裁剪的图片数据
getCropImg(argument) {
this.showCropper = false;
this.cropData = argument[1]
// this.doUploadOSS(argument[2], 1); //封面图片
this.doUploadQiNiu(argument[2], 1);
argument[3] && argument[3].destroy();
},
// getOSSDomain(url) {
// return getOSSImgUrl(url);
// },
// （调用OSS API）开始上传
// doUploadOSS(file, index) {
// let self = this;
// //上传 指定文件名
// ossUpload(self, file, getFilePathForOSS(file), null, null, null).
// then(function(path) {
// console.log(path);
// let list = [{}];
// // list[0].name = file.name;
// // list[0].url = localStorage.getItem("resource_url") + path;
// // getOSSImgUrl(path)
// // if (index === 1) {
// // self.formData.courseIntroImage = path;
// // } else if (index === 2) {
// // self.formData.courseCustomDoctorModels[0].courseDoctorAvatarUrl = path;
// // }
//
// self.formData.cover = path;
// self.formData.imgUrl2More = {
// attachmentName: path.name,
// attachmentExt: path.ext,
// attachmentSize: path.size
// };
//
// self.$message.success("上传成功");
// });
// return false;
// },
// 上传七牛
doUploadQiNiu(file, index){
doUpload(this,file, getFilePath(file,null), 'preview4', 'uploadProgress1', '').then(function (path) {
if(vm.cropperIndex == 10){
vm.rtcIntroducesImages[vm.introduceIndex].content = path.fullPath;
vm.rtcIntroducesImages[vm.introduceIndex].seqNo = vm.introduceIndex+1;
}
else if(vm.cropperIndex == 20){
vm.formData.cover = path.fullPath;
}
else if(vm.cropperIndex == 30){
vm.formData.preImage = path.fullPath;
}
vm.$message.success('上传成功');
});
},
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 isLt2M = file.size / 1024 / 1024 < fileLimit.size
if (!isJPG && !isPNG) {
vm.$message.error('上传直播简介图片只能是 JPEG或者png 格式!')
// vm.isDisabledIns = false;
return;
}
// if (!isLt2M) {
// vm.$message.error('图片大小不符合规范，请根据规范上传图片')
// // 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 != fileLimit.width || _this.height > fileLimit.height) {
// vm.$message.error('图片尺寸不符合规范，请根据规范上传图片');
// vm.isDisabledIns = false;
vm.showCropper = true;
return;
}else {
openLoading(vm);
doUpload(vm,file, getFilePath(file,null), 'preview4', 'progress1', 1).then(function (path) {
closeLoading(vm);
// vm.cleatBroadcast.liveIntroduceModel[vm.introduceIndex].content = path.fullPath;
vm.rtcIntroducesImages[vm.introduceIndex].content = path.fullPath;
vm.rtcIntroducesImages[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;
// },
// 直播方式
changeStreamType(){
if(this.formData.streamType == 2){
this.pullFlag = true;
}
else {
this.pullFlag = false;
}
},
// 直播方式
changeSign(){
if(this.formData.isSign == 1){
this.signFlag = true;
}
else {
this.signFlag = false;
}
},
// 是否公开
changeScope(value){
if(value == 2){
this.isCollectShow = true;
}
else {
this.isCollectShow = false;
}
},
// 校验拉流地址
checkpullStream(){
let flag = true;
if(this.formData.streamType == "2"){
// 公开直播，两个拉流地址都需要
if(this.formData.scope == "2"){
if(this.formData.pullStreamRtmp == "" && this.formData.pullStreamHttp == ""){
this.$message.warning("请输入APP拉流地址和H5拉流地址");
flag = false;
return flag;
}
if(this.formData.pullStreamRtmp == ""){
this.$message.warning("请输入APP拉流地址");
flag = false;
return flag;
}
if(this.formData.pullStreamHttp == ""){
this.$message.warning("请输入H5拉流地址");
flag = false;
return flag;
}
}
else {
if(this.formData.pullStreamRtmp == "" && this.formData.pullStreamHttp == ""){
this.$message.warning("请输入APP拉流地址或H5拉流地址");
flag = false;
}
}
}
return flag;
},
// 校验直播简介文字版或图片版
checkIntroduce(){
// console.log(this.formData.rtcIntroduces[0].content);
// console.log(this.formData.rtcIntroduces[1].content);
let flag = true;
// if(this.formData.textContent == ""
// & this.formData.imageContent == ""){
if(this.formData.rtcIntroduces == null || this.formData.rtcIntroduces.length == 0){
flag = false;
this.$message.error("直播简介中可选择仅文字版，仅图片版或文字版+图片版");
}
return flag;
},
// 增加直播简介
addIntroImage(){
let length = this.rtcIntroducesImages.length;
if(length >= 5){
this.$message.warning("直播简介图片最多支持新增5张图片!");
return;
}
this.showIntroImageFlag = true;
const item = {
seqNo: length + 1,
content: "",
type: 2 // 文字
};
this.rtcIntroducesImages.push(item);
},
// 删除直播简介
delIntroImage(index, item){
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(){
this.formData.backgroundImageId = "";
this.backgroundImageUrl = "";
},
//删除图片
deleteImg(type) {
if (type == 1) {
this.formData.imageContent = "";
this.imgMouseOver1 = false;
}
else if (type == 2) {
this.formData.cover = "";
this.imgMouseOver2 = false;
}
else if (type == 3) {
this.formData.preImage = "";
this.imgMouseOver3 = false;
}
},
// 校验直播封面
checkCover(){
let flag = true;
if(this.formData.cover == ""){
flag = false;
this.$message.error("请上传直播封面！");
}
return flag;
},
// 校验直播预告图
checkPreImage(){
let flag = true;
if(this.formData.preImage == ""){
flag = false;
this.$message.error("请上传直播预告图！");
}
return flag;
},
// 校验嘉宾姓名和手机号
checkGuests(){
let flag = true;
if(this.formData.guests != null & this.formData.guests.length >= 1){
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);
if(this.submitFlag){
this.formData.guests.splice(i, 1);
continue;
}
else {
this.$message.error("请输入嘉宾姓名和手机号");
flag = false;
break;
}
}
if(this.formData.guests[i].username != "" & this.formData.guests[i].phone == ""){
this.$message.error("请输入嘉宾'" + this.formData.guests[i].username + "'的手机号");
flag = false;
break;
}
else if(this.formData.guests[i].username != "" & this.formData.guests[i].phone != ""){
if(!this.checkPhone(this.formData.guests[i].phone)){
this.$message.error("请输入嘉宾'" + this.formData.guests[i].username + "'的正确手机号");
flag = false;
break;
}
// 检查主播和嘉宾手机号是否相同
if(!this.checkUniquePhone(this.formData.lecturesPhone, this.formData.guests[i].phone)){
this.$message.error("请输入不同的手机号");
flag = false;
break;
}
// 检查嘉宾手机号是否相同
if(this.formData.guests.length > 1){
for(let j= i + 1;j<this.formData.guests.length;j++) {
if(!this.checkUniquePhone(this.formData.guests[i].phone, this.formData.guests[j].phone)){
this.$message.error("请输入不同的手机号");
flag = false;
break;
}
}
}
}
else if(this.formData.guests[i].username == "" & this.formData.guests[i].phone != ""){
this.$message.error("请输入手机号为'" + this.formData.guests[i].phone + "'嘉宾的姓名");
flag = false;
break;
}
}
}
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){
flag = false;
}
return flag;
},
// 增加嘉宾
addGuest(index) {
if(this.guestEditFlag){
return;
}
this.submitFlag = false;
if(!this.checkGuests()){
return;
}
if(this.formData.guests != null & this.formData.guests.length >= 100000){
this.$message.error("嘉宾最多100000位！");
}
else {
this.formData.guests.push({username: "", phone: ""});
}
},
// 删除嘉宾
delGuest(index) {
if(this.guestEditFlag){
return;
}
this.formData.guests.splice(index, 1);
},
// 初始化背景图
setbgImage(){
// 背景图
if((this.formData.backgroundImageId != null || this.formData.backgroundImageId != "") && this.backgroundImages.length > 0){
let selectedImages = this.backgroundImages.filter(function (item) {
return item.backgroundImageId == vm.formData.backgroundImageId;
});
if(selectedImages != null && selectedImages.length > 0){
this.backgroundImageUrl = selectedImages[0].imageUrl;
}
}
},
// 封装数据
initFormData(){
this.formData.streamType = String(this.formData.streamType);
this.changeStreamType();
if(this.backgroundImageUrl != null || this.backgroundImageUrl != ''){
this.setbgImage();
}
this.changeSign();
this.checked = this.formData.isAppPush == 1 ? true: false;
if(this.formData.signMinute == 0 || this.formData.signMinute == undefined){
this.formData.signMinute = "";
}
this.formData.scope = String(this.formData.scope);
this.formData.countRule = String(this.formData.countRule);
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;
}
this.formData.infoCollect = String(this.formData.infoCollect);
this.$set(this.formData, 'textContent', "");
if(this.formData.rtcIntroduces != null){
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;
}
else {
// this.$set(this.formData, "rtcIntroducesImages", )
this.rtcIntroducesImages.push(this.formData.rtcIntroduces[i]);
}
// else if(this.formData.rtcIntroduces[i].type == "2"){
// // this.formData.imageContent = this.formData.rtcIntroduces[i].content;
// this.$set(this.formData, 'imageContent', this.formData.rtcIntroduces[i].content);
// }
}
}
// 新增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;
this.$set(this.formData, 'lecturesUserName', this.formData.lecturers[0].username);
this.$set(this.formData, 'lecturesPhone', this.formData.lecturers[0].phone);
}
},
// 封装数据
setFormData(){
if(this.formData.streamType == "1"){
this.formData.pullStreamRtmp = "";
this.formData.pullStreamHttp = "";
}
// 直播简介图片版
if(this.rtcIntroducesImages != null && this.rtcIntroducesImages.length != 0){
let rtcIntroducesImagesArray = this.rtcIntroducesImages.filter(function (item) {
return item.content != "";
});
if(rtcIntroducesImagesArray != null && rtcIntroducesImagesArray.length != 0){
// 直播简介图片版
// this.formData.rtcIntroduces = JSON.parse(JSON.stringify(this.rtcIntroducesImages));
this.formData.rtcIntroduces = JSON.parse(JSON.stringify(rtcIntroducesImagesArray));
}
else {
this.formData.rtcIntroduces = [];
}
}
else {
this.formData.rtcIntroduces = JSON.parse(JSON.stringify(this.rtcIntroducesImages));
}
// 直播简介文字版
if(this.formData.textContent != null && this.formData.textContent != ""){
this.rtcIntroducesText = this.formData.rtcIntroduces.filter(function (item) {
return item.type == "1";
});
if(this.rtcIntroducesText.length == 0){
this.formData.rtcIntroduces.push({type:1,content:this.formData.textContent});
}
}
this.formData.isAppPush = this.checked == true ? 1: 0;
if(this.formData.signMinute == "" || this.formData.signMinute == undefined){
this.formData.signMinute = 0;
}
// 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
// }
// if(this.formData.lecturers != undefined & this.formData.lecturers.length == 0){
//
// this.formData.lecturers.push({username: this.formData.lecturesUserName, phone: this.formData.lecturesPhone});
// }
if(this.formData.lecturesUserName){
this.formData.lecturers = [{username: this.formData.lecturesUserName,phone: this.formData.lecturesPhone}];
}
},
complete(formName) {
console.log(this.formData);
this.$refs[formName].validate((valid) => {
if (valid) {
this.submit();
} else {
console.log('error submit!!');
return false;
}
});
},
//完成
submit() {
this.submitFlag = true;
this.setFormData();
// 校验拉流地址
if(!this.checkpullStream()){
return;
}
// 校验直播简介文字版或图片版
if(!this.checkIntroduce()){
return;
}
// 校验直播封面、预告图
if(!this.checkCover() || !this.checkPreImage()){
return;
}
// 检查TAB
if(!this.checkTab()){
return;
}
// 内部运营人员
if(this.idType == 1){
// 检查有奖问答关联考试
if(!this.checkQaId()){
return;
}
if(this.formData.qa == 0){
this.formData.qaId = null;
}
}
// 校验嘉宾姓名和手机号
if(!this.checkGuests()){
return;
}
if(!this.pullFlag){
this.formData.pullStreamHttp = "";
this.formData.pullStreamRtmp = "";
}
let req = this.formData;
openLoading(this);
this.POST('rtc/liveAdmin', req).then((res) => {
closeLoading(this);
if( res.code == '000000') {
this.$message.success("操作成功");
this.$router.push({
path: '/range-manage',
query: {
id: this.formData.circleId,
name: this.circleName,
activeName: "third"
}
})
}
else {
this.formData.guests = [{
phone: '',
username: ''
}];
this.$message.error("操作失败，请重试");
}
})
},
// 视频Size转换
fileToSize(fileSize, number){
return (fileSize / 1024 / 1024).toFixed(number);
},
fileToName(fileName, fileFormat, number){
if(fileName != null && fileName != ""){
const index = fileName.indexOf(fileFormat);
const str = fileName.slice(0, index);
if(str.length > number){
return str.slice(0,number+1) + "..." + fileFormat;
}
else {
return fileName;
}
}
return fileName;
},
// 设置背景图
setBackground(){
this.dialogVisible = true;
this.backgroundImageIdTemp = String(this.formData.backgroundImageId);
// this.initImages();
},
// 提交设置背景图
submitBackground(){
this.dialogVisible = false;
this.formData.backgroundImageId = this.backgroundImageIdTemp;
this.backgroundImageUrl = this.backgroundImageUrlTemp;
},
handleClose(){
this.dialogVisible = false;
},
changeImage(item){
this.backgroundImageUrlTemp = item.imageUrl;
console.log('选中值',this.backgroundImageIdTemp);
},
delFile(){
if(this.uploadProgress1 > 0 && this.uploadProgress1 < 100){
openLoading(this);
this.$refs.upload.abort();// 取消上传请求(element)
this.$refs.upload.clearFiles();
unsubscribe();// 取消七牛上传请求
// if(vm.videoSize > 500){
// setTimeout(() => {
// closeLoading(this);
// vm.$message.success('取消成功');
// }, 2000);
// }
// else {
// closeLoading(this);
// vm.$message.success('取消成功');
// }
closeLoading(this);
this.$message.success('取消成功');
this.uploadProgress1 = Number("0.00");
// this.uploadProgress = Number("0.00");
}
this.formData.rtcMaterial = {
fileName: "",
fileSize: "",
fileUrl: "",
rtcId: "",
};
},
// 改变TAB
changeTab(){
if(this.tabFlag == 0){
this.formData.tabs[0].name = "";
this.formData.tabs[0].contents = [];
}
},
resetSignMinute(){
if(this.formData.signMinute == 0){
this.formData.signMinute = "";
}
else if(this.formData.signMinute > 1000){
this.formData.signMinute = 1000;
}
},
// 搜索框中输入文字 时 page=1 pageSize=30
handleInputSearch(searchId, name, item) {
this.searchId = searchId;
this.guestItem = item;
this.nowInput = searchId
// debugger;
clearTimeout(this.searchFlagTimer);
let that = this;
that.page = 1;
that.isInputResponse = false;
if(name == ''){
that.searchList = [];
return;
}
that.searchList = [];
let params = {
id: this.circleId,
name: name
};
this.searchFlagTimer = setTimeout(() => {
searchDoc(params).then(res => {
// console.log('>>>>>>*********** search: ', res)
if(res.code == '000000'){
that.isInputResponse = true;
// that.totalPageNum = Math.ceil(res.data.total/that.pageSize); // 总页数
let list = res.data.chooseLiveMemberDtos || [];
if(list.length > 0){
if(that.name == ''){
that.searchList = [];
return;
}
that.searchList = list;
that.hasNoResult = false;
// document.querySelectorAll(".left-box")[0].style.display = 'none';
}else{
that.searchList = [];
that.hasNoResult = true;
}
}else{
that.isInputResponse = false;
that.searchList = [];
that.$message({
message: data.message,
type: 'warning'
});
}
})
}, 300)
},
handleSearchListBlur() {
this.searchList = [];
clearTimeout(this.searchFlagTimer);
// console.log('blur.....')
},
handleSearchLiClick(item) {
console.log(item);
if(this.guestItem == null) {
this.formData.lecturesUserName = item.name;
this.formData.lecturesPhone = item.mobilePhone;
}
else {
this.guestItem.username = item.name;
this.guestItem.phone = item.mobilePhone;
}
},
},
}
</script>
<style lang="scss">
.yqrange-index-wrapper{
.yqrange-index-content{
background: #fff;
padding: 10px;
.step-content{
overflow: hidden;
height: 60px;
padding: 15px 0 50px 0;
border-bottom: 1px solid #efefef;
.is-text {
display: none;
}
.el-steps--simple {
background: #fff;
padding: 10px 8%;
}
.step-num {
display: block;
margin-top: 1.5px;
font-size: 12px;
border: 1px solid #999 !important;
border-radius: 50%;
width: 25px;
height: 18px;
line-height: 15px;
text-align: center;
color: #999;
}
.el-step__title.is-wait {
color: #999;
}
.el-step__title.is-process {
color: #449284;
}
.is-finish {
color: #999 !important;
}
.on-step {
color: #449284;
border: 1px solid #449284 !important;
}
}
.first-step{
margin-top: 20px;
.p-title{
padding-left: 10px;
margin-bottom: 15px;
}
.basic-item-icon {
position: relative;
.require {
position: absolute;
left: 67px;
top: 11px;
color: #f56c6c;
}
.upload-message {
position: absolute;
left: 160px;
top: 105px;
font-size: 12px;
color: #f56c6c;
}
.img-delete {
position: absolute;
left: 0px;
top: 0px;
width: 84px;
height: 100px;
background: #000;
opacity: 0.7;
z-index: 999;
i {
color: #fff;
margin-top: 39px;
margin-left: 0px;
}
}
}
.word-num {
font-size: 12px;
color: #999;
padding-top: 5px;
}
.line {
margin-left: 10px;
width: 20px;
}
.bg-uploader {
height: 100px;
.bg-img {
float: left;
width: 84px;
height: 100px;
}
.limit-text {
float: left;
margin-left: 10px;
margin-top: -10px;
p {
font-size: 12px;
color: #999;
text-align: left;
}
}
}
.el-upload__tip {
position: absolute;
top: -6px;
left: 130px;
}
}
}
}
.required-label .el-form-item__label::before {
content: '*';
color: #F56C6C;
margin-right: 4px;
}
.edit-img {
width: 20px;
vertical-align: middle;
}
.guest-label .el-form-item__label{
width: 57px;
}
.radio-background{
float: left;
width: 160px;
height: 130px;
border: 2px solid #f1f7f6;
margin: 10px;
text-align: center;
}
.background-img{
width: 150px;
height: 100px;
float: left;
}
.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: #449284;
border-color: #449284;
}
.el-checkbox__input.is-checked+.el-checkbox__label {
color: #449284;
}
.main-content{
overflow: hidden;
.left{
float: left;
}
.left-box{
width: 270px;
height: 300px;
.common-diagnose{
width: 100%; height: 300px;
.title{
color: #303133;
font-size: 16px;
line-height: 40px;
margin-top: 10px;
.no-result{
font-size: 14px;
color: #e6a23c;
margin-left: 28px;
}
}
.list{
width: 100%; height: 250px;
overflow: hidden;
overflow-y: scroll;
/*.scroll-bar;*/
padding: 10px;
border: 1px solid #DCDFE6;
li{
height: 35px; line-height: 35px; padding: 0 15px;
background: #fff;
border: 1px solid #dcdfe6;
color: #606266;
cursor: pointer;
font-size: 12px;
&.active{
color: #fff;
background: #409eff;
border-color: #409eff;
}
display: inline-block;
margin: 0 10px 10px 0;
border-radius: 4px;
max-width: 350px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
}
}
.search-list-wrap{
width: 100%; height: 290px; margin-top: 10px;
border: 1px solid #DCDFE6;
overflow: hidden;
overflow-y: scroll;
/*.scroll-bar;*/
.search-list{
border-radius: 4px;
width: 100%;
padding: 10px;
li{
position: relative;
line-height: 30px;
overflow: hidden;
cursor: pointer;
font-size: 12px;
&:hover{
background: #eee;
}
.left{
width: 310px;
float: left;
span{
color: #ff8429;
}
.disease-name{
font-size: 14px;
}
.one-line{
width: 100%; overflow: hidden;
font-size: 12px; color: #aaa;
.alias{
float: left;
}
.sign{
float: left;
margin: 0 5px;
}
.code{
float: left;
}
}
}
.right{
position: absolute;
right: 0;
top: 50%;
margin-top: -13px;
// width: 0px;
// float: left;
display: inline-block;
vertical-align: middle;
i{
font-size: 24px;
color: #449284;
font-weight: 700;
}
}
.code{
line-height: 30px;
}
}
.loading{
color: #ccc;
text-align: center;
margin: 0;
font-size: 12px;
margin-top: 5px;
}
}
}
}
.choosed-list-wrap{
width: 450px;
height: 300px;
margin-left: 30px;
.title{
color: #303133;
font-size: 16px;
line-height: 40px;
margin-top: 10px;
}
.choosed-list{
overflow: hidden;
overflow-y: scroll;
width: 450px;
height: 250px;
padding: 10px;
border: 1px solid #DCDFE6;
/*.scroll-bar;*/
.el-tag {
margin: 0 10px 10px 0;;
.text{
display: inline-block;
max-width: 342px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.el-tag__close{
top: -12px;
}
}
}
}
}
</style>
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或