Skip to content

P
pica.cloud.web-education-admin
提交 7b0c59e1 编写于 作者: alex.zhang's avatar alex.zhang
浏览文件
操作

成员权限

上级 57291adc
隐藏空白字符变更
内嵌 并排
正在显示 包含 766 行增加 和 746 行删除
src/views/yqrange/create-live.vue
浏览文件 @ 7b0c59e1
<template>
<div class="yqrange-index-wrapper">
<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond":curmbThird="curmbThird"></bread-crumb>
<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond" :curmbThird="curmbThird"></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>-->
<!--<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">
......@@ -17,21 +17,22 @@
</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
ref="formData"
:model="formData"
:rules="rules"
label-width="150px"
label-suffix="："
class="basic-form"
>
<el-form-item label="直播标题" prop="name">
<el-col :span="13">
<el-input
size="small"
v-model="formData.name"
placeholder="请输入直播标题"
style="width:70%;"
size="small"
v-model="formData.name"
placeholder="请输入直播标题"
style="width:70%;"
></el-input>
<span class="word-num">{{(formData.name).replace(/\s+/g,"").length}}/20</span>
</el-col>
......@@ -52,25 +53,32 @@
<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"
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"
style="width: 100%;"
></el-date-picker>
</el-col>
</el-form-item>
<el-form-item label="直播简介：" class="required-label">
<el-col :span="12">
<div style="color:#666666;font-size:10px;">直播图片可选择仅文字版，仅图片版或文字版+图片版</div>
<el-input type="textarea" v-model="formData.textContent" placeholder="请输入直播简介" maxlength="30" rows="3" 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="12">
<el-form-item label="直播简介：" class="required-label">
<el-col :span="12">
<div style="color:#666666;font-size:10px;">直播图片可选择仅文字版，仅图片版或文字版+图片版</div>
<el-input
type="textarea"
v-model="formData.textContent"
placeholder="请输入直播简介"
maxlength="30"
rows="3"
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="12">
<el-upload
v-model="formData.imageContent"
class="bg-uploader"
......@@ -103,34 +111,30 @@
<p>支持.jpg,.png格式</p>
</div>
</el-upload>
<div style="color:#666666;font-size:12px;">图片版</div>
</el-col>
<div style="color:#666666;font-size:12px;">图片版</div>
</el-col>
</el-form-item>
<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"
/>
<img
v-if="!formData.cover"
class="bg-img"
src="../../assets/image/small.png"
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"
class="img-delete"
v-show="imgMouseOver2"
@click.stop="deleteImg(2)"
@mouseout.stop="imgMouseOver2=false"
>
<i class="el-icon-delete"></i>
</div>
......@@ -146,28 +150,24 @@
<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"
/>
<img
v-if="!formData.preImage"
class="bg-img"
src="../../assets/image/small.png"
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"
class="img-delete"
v-show="imgMouseOver3"
@click.stop="deleteImg(3)"
@mouseout.stop="imgMouseOver3=false"
>
<i class="el-icon-delete"></i>
</div>
......@@ -184,64 +184,66 @@
<div style="color:#666666;font-size:10px;">讲师（必填）</div>
<el-col :span="10">
<el-form-item label="姓名" prop="lecturesUserName" label-width="60px;">
<el-input
size="small"
v-model="formData.lecturesUserName"
placeholder="请输入姓名"
style="width:70%;"
></el-input>
</el-form-item>
</el-col>
<el-col :span="13">
<el-form-item label="手机" prop="lecturesPhone">
<el-input maxlength="11"
size="small"
v-model="formData.lecturesPhone"
placeholder="请输入手机号"
style="width:70%;"
></el-input>
</el-form-item>
</el-col>
<el-col :span="15">
<div style="color:#666666;font-size:10px;">嘉宾（选填）</div>
</el-col>
<div v-for="(item, index) in formData.guests" :key="index">
<el-col :span="10">
<el-form-item label="姓名" label-width="60px;">
<el-input
size="small"
v-model="item.username"
v-model="formData.lecturesUserName"
placeholder="请输入姓名"
style="width:70%;"
></el-input>
</el-form-item>
</el-col>
<el-col :span="13">
<el-form-item label="手机">
<el-input maxlength="11"
<el-form-item label="手机" prop="lecturesPhone">
<el-input
maxlength="11"
size="small"
v-model="item.phone"
v-model="formData.lecturesPhone"
placeholder="请输入手机号"
style="width:70%;"
></el-input>
 <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-form-item>
</el-col>
<el-col :span="15">
<div style="color:#666666;font-size:10px;">嘉宾（选填）</div>
</el-col>
<div v-for="(item, index) in formData.guests" :key="index">
<el-col :span="10">
<el-form-item label="姓名" label-width="60px;">
<el-input
size="small"
v-model="item.username"
placeholder="请输入姓名"
style="width:70%;"
></el-input>
</el-form-item>
</el-col>
<el-col :span="13">
<el-form-item label="手机">
<el-input
maxlength="11"
size="small"
v-model="item.phone"
placeholder="请输入手机号"
style="width:70%;"
></el-input>
<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-form-item>
</el-col>
</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>
......@@ -250,632 +252,669 @@
</div>
</template>
<script>
import BreadCrumb from "@/components/breadcrumb.vue";
import { openLoading, closeLoading } from "../../utils/utils";
import { doUpload, getFilePath } from "../../utils/qiniu-util";
import { checkMobile } from '../../utils/patients/checkValid';
import { getRtcInfo } from "../../utils/yqrange/yqrangeApi";
// import { checkPhone } from "../login.vue";
import BreadCrumb from "@/components/breadcrumb.vue";
import { openLoading, closeLoading } from "../../utils/utils";
import { doUpload, getFilePath } from "../../utils/qiniu-util";
import { checkMobile } from "../../utils/patients/checkValid";
import { getRtcInfo } from "../../utils/yqrange/yqrangeApi";
// import { checkPhone } from "../login.vue";
let vm = null;
export default {
components: {
BreadCrumb
},
data(){
let checkProjectStr = (rule, value, callback) => {
if (value.indexOf("\\") != -1) {
//存在
callback(new Error("请勿输入字符“ \\ ”"));
} else if (value.indexOf(".") != -1) {
callback(new Error("请勿输入字符“ . ”"));
} else {
callback();
}
};
return{
curmbFirst: '云鹊小圈',
curmbSecond: '直播管理',
curmbThird: '新建直播',
//页面展示位置
isCollectShow: false,
formData: {
circleId: "1",// 圈子ID
name: '',// 直播名称
scope: "1",// 直播范围 1-非公开 2-公开
infoCollect: "0",// 是否采集用户信息 0-否 1-是
openTime: '',// 直播开始时间
rtcIntroduces:[{
let vm = null;
export default {
components: {
BreadCrumb
},
data() {
let checkProjectStr = (rule, value, callback) => {
if (value.indexOf("\\") != -1) {
//存在
callback(new Error("请勿输入字符“ \\ ”"));
} else if (value.indexOf(".") != -1) {
callback(new Error("请勿输入字符“ . ”"));
} else {
callback();
}
};
return {
curmbFirst: "云鹊小圈",
curmbSecond: "直播管理",
curmbThird: "新建直播",
//页面展示位置
isCollectShow: false,
formData: {
circleId: "1", // 圈子ID
name: "", // 直播名称
scope: "1", // 直播范围 1-非公开 2-公开
infoCollect: "0", // 是否采集用户信息 0-否 1-是
openTime: "", // 直播开始时间
rtcIntroduces: [
{
seqNo: "",
content: '',
content: "",
type: "1" // 文字
},
{
seqNo: "",
content: '',
type: "2" // 图片
}
],// 直播简介
cover: '', // 直播封面url 直播第一帧图片
preImage: '', // 直播预告图url
textContent: '', // 直播简介文字版
imageContent: '',// 直播简介图片版
// imgUrl2: '',
// imgUrl2More: {},
// imgUrl3: '',
// imgUrl3More: {},
intro:'',
hostName: '',
guestName: '',
hostMobile: '',
guestMobile: '',
mobile1: '',
lecturesUserName: '',
lecturesPhone: '',
lecturers: [{
username: '',
phone: ''
}],// 讲师
guests: [{
phone: '',
username: ''
}] // 嘉宾
},
// imgUrl1: '',
imgUrl1More: {},
guestErrFlag: false,
guestErrText: '嘉宾最多5位！',
isPreview: 0,
imgMouseOver1: false,
uploadImgMessage1: false,//未上传图片，校验提示语
imgMouseOver2: false,
uploadImgMessage2: false,
imgMouseOver3: false,
uploadImgMessage3:false,
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
{
seqNo: "",
content: "",
type: "2" // 图片
}
},
rules: {
name: [
{ required: true, message: "请输入直播标题", trigger: "blur" },
{
min: 2,
max: 24,
message: "输入长度为2-24的内容，可包含中英文、数字及特殊符号",
trigger: "blur"
},
{ validator: checkProjectStr, 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']}
],
// introduce: [
// { required: true, message: "请输入", trigger: "blur" },
// {
// min: 2,
// max: 24,
// message: "输入长度为2-24的内容，可包含中英文、数字及特殊符号",
// trigger: "blur"
// },
// { validator: checkProjectStr, trigger: "blur" }
// ],
], // 直播简介
cover: "", // 直播封面url 直播第一帧图片
preImage: "", // 直播预告图url
textContent: "", // 直播简介文字版
imageContent: "", // 直播简介图片版
// imgUrl2: '',
// imgUrl2More: {},
// imgUrl3: '',
// imgUrl3More: {},
intro: "",
hostName: "",
guestName: "",
hostMobile: "",
guestMobile: "",
mobile1: "",
lecturesUserName: "",
lecturesPhone: "",
lecturers: [
{
username: "",
phone: ""
}
], // 讲师
guests: [
{
phone: "",
username: ""
}
] // 嘉宾
},
// imgUrl1: '',
imgUrl1More: {},
guestErrFlag: false,
guestErrText: "嘉宾最多5位！",
isPreview: 0,
imgMouseOver1: false,
uploadImgMessage1: false, //未上传图片，校验提示语
imgMouseOver2: false,
uploadImgMessage2: false,
imgMouseOver3: false,
uploadImgMessage3: false,
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;
}
}
},
created() {
// 区分内部用户和外部用户
let idType = localStorage.getItem('storageIdType');
// vm = this;
// vm.entryId = vm.getUrlSearch(window.location.href, "entryId");
// vm.peopleLevel = vm.getUrlSearch(window.location.href, "level");
// vm.init();
},
rules: {
name: [
{ required: true, message: "请输入直播标题", trigger: "blur" },
{
min: 2,
max: 24,
message: "输入长度为2-24的内容，可包含中英文、数字及特殊符号",
trigger: "blur"
},
{ validator: checkProjectStr, 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"] }
]
// introduce: [
// { required: true, message: "请输入", trigger: "blur" },
// {
// min: 2,
// max: 24,
// message: "输入长度为2-24的内容，可包含中英文、数字及特殊符号",
// trigger: "blur"
// },
// { validator: checkProjectStr, trigger: "blur" }
// ],
},
circleId: null,
};
},
created() {
// 区分内部用户和外部用户
let idType = localStorage.getItem("storageIdType");
// vm = this;
// vm.entryId = vm.getUrlSearch(window.location.href, "entryId");
// vm.peopleLevel = vm.getUrlSearch(window.location.href, "level");
// vm.init();
this.circleId = this.$route.query.circleId;
},
mounted() {
const rtcId = this.$route.query.rtcId;
// if(rtcId){
// this.curmbThird = "编辑直播";
// }
if (rtcId) {
this.curmbThird = "编辑直播";
this.initRtcInfo(rtcId);
}
},
},
mounted() {
const rtcId = this.$route.query.rtcId;
// if(rtcId){
// this.curmbThird = "编辑直播";
// }
if(rtcId){
this.curmbThird = "编辑直播";
this.initRtcInfo(rtcId);
methods: {
checkPhone(val) {
if (!/^1[3456789]\d{9}$/.test(val)) {
return false;
} else {
return true;
}
},
methods: {
checkPhone(val) {
if(!(/^1[3456789]\d{9}$/.test(val))) {
return false;
} else {
return true;
}
},
// 初始化直播
initRtcInfo(rtcId){
getRtcInfo({
rtcId
}).then((data) => {
if(data.code == "000000") {
// 初始化直播
initRtcInfo(rtcId) {
getRtcInfo({
rtcId
})
.then(data => {
if (data.code == "000000") {
this.formData = data.data;
this.initFormData();
console.log(this.formData);
}
}).catch((error) => {
})
.catch(error => {
this.$message({
message: error,
type: 'error'
type: "error"
});
})
},
//上传直播简介
beforeUploadPic1(file) {
let fileLimit = {
width: 750,
height: "",
size: 0.5,
sizeText: "500K",
key: "imageContent",
more: "imgUrl1More",
show: "uploadImgMessage1"
};
this.beforeUpload(file, fileLimit);
},
// 上传直播封面
beforeUploadPic2(file) {
let fileLimit = {
width: 160,
height: 120,
size: 2,
sizeText: "2Mb",
key: "cover",
more: "imgUrl2More",
show: "uploadImgMessage2"
};
this.beforeUpload(file, fileLimit);
},
// 上传直播预告图
beforeUploadPic3(file) {
let fileLimit = {
width: 750,
height: 420,
size: 2,
sizeText: "2Mb",
key: "preImage",
more: "imgUrl3More",
show: "uploadImgMessage3"
};
this.beforeUpload(file, fileLimit);
},
//上传图片
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("图片格式不符合规范，请根据规范上传图片");
// 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;
});
},
//上传直播简介
beforeUploadPic1(file) {
let fileLimit = {
width: 750,
height: "",
size: 0.5,
sizeText: "500K",
key: "imageContent",
more: "imgUrl1More",
show: "uploadImgMessage1"
};
this.beforeUpload(file, fileLimit);
},
// 上传直播封面
beforeUploadPic2(file) {
let fileLimit = {
width: 160,
height: 120,
size: 2,
sizeText: "2Mb",
key: "cover",
more: "imgUrl2More",
show: "uploadImgMessage2"
};
this.beforeUpload(file, fileLimit);
},
// 上传直播预告图
beforeUploadPic3(file) {
let fileLimit = {
width: 750,
height: 420,
size: 2,
sizeText: "2Mb",
key: "preImage",
more: "imgUrl3More",
show: "uploadImgMessage3"
};
this.beforeUpload(file, fileLimit);
},
//上传图片
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("图片格式不符合规范，请根据规范上传图片");
// 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("上传成功");
});
}
};
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;
},
// 是否公开
changeScope(value){
if(value == 2){
this.isCollectShow = true;
}
else {
this.isCollectShow = false;
}
},
// 校验直播简介文字版或图片版
checkIntroduce(){
// console.log(this.formData.rtcIntroduces[0].content);
console.log(this.formData.rtcIntroduces[1].content);
};
return isJPG && isLt2M;
},
// 是否公开
changeScope(value) {
if (value == 2) {
this.isCollectShow = true;
} else {
this.isCollectShow = false;
}
},
// 校验直播简介文字版或图片版
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 == ""){
flag = false;
this.$message.error("直播简介中可选择仅文字版，仅图片版或文字版+图片版");
}
return flag;
},
//删除图片
deleteImg(type) {
if (type == 1) {
this.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("请上传直播封面！");
}
let flag = true;
if (
(this.formData.textContent == "") &
(this.formData.imageContent == "")
) {
flag = false;
this.$message.error(
"直播简介中可选择仅文字版，仅图片版或文字版+图片版"
);
}
return flag;
},
//删除图片
deleteImg(type) {
if (type == 1) {
this.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;
},
// 校验直播预告图
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.$message.error("请输入嘉宾'" + this.formData.guests[i].username + "'的手机号");
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.$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;
}
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 + "'嘉宾的姓名");
// 检查讲师和嘉宾手机号是否相同
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;
},
checkUniquePhone(phone1, phone2){
let flag = true;
if(phone1 != "" & phone2 != "" & phone1 == phone2){
flag = false;
}
return flag;
},
return flag;
},
// 增加嘉宾
addGuest(index) {
checkUniquePhone(phone1, phone2) {
let flag = true;
if ((phone1 != "") & (phone2 != "") & (phone1 == phone2)) {
flag = false;
}
if(!this.checkGuests()){
return;
}
if(this.formData.guests != null & this.formData.guests.length >= 5){
this.$message.error("嘉宾最多5位！");
// this.guestErrFlag = true;
// setTimeout(function () {
// this.guestErrFlag = false;
// }, 3000)
}
else {
this.formData.guests.push({username: "", phone: ""});
// this.formData.guests.splice(index + 1, 0, "");
}
},
return flag;
},
// 增加嘉宾
addGuest(index) {
if (!this.checkGuests()) {
return;
}
if ((this.formData.guests != null) & (this.formData.guests.length >= 5)) {
this.$message.error("嘉宾最多5位！");
// this.guestErrFlag = true;
// setTimeout(function () {
// this.guestErrFlag = false;
// }, 3000)
} else {
this.formData.guests.push({ username: "", phone: "" });
// this.formData.guests.splice(index + 1, 0, "");
}
},
// 删除嘉宾
delGuest(index) {
this.formData.guests.splice(index, 1);
},
// 封装数据
initFormData(){
this.formData.scope = String(this.formData.scope);
if(this.formData.scope == "2"){
this.isCollectShow = true;
}
this.formData.infoCollect = String(this.formData.infoCollect);
if(this.formData.rtcIntroduces != null){
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;
}
else if(this.formData.rtcIntroduces[i].type == "2"){
this.formData.imageContent = this.formData.rtcIntroduces[i].content;
}
// 删除嘉宾
delGuest(index) {
this.formData.guests.splice(index, 1);
},
// 封装数据
initFormData() {
this.formData.scope = String(this.formData.scope);
if (this.formData.scope == "2") {
this.isCollectShow = true;
}
this.formData.infoCollect = String(this.formData.infoCollect);
if (this.formData.rtcIntroduces != null) {
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;
} else if (this.formData.rtcIntroduces[i].type == "2") {
this.formData.imageContent = this.formData.rtcIntroduces[i].content;
}
}
// 设置讲师
if(this.formData.lecturers != null){
this.formData.lecturesUserName = this.formData.lecturers[0].username;
this.formData.lecturesPhone = this.formData.lecturers[0].phone;
}
},
// 封装数据
setFormData(){
if(!this.formData.circleId){
this.formData.circleId = 1;// 测试用
}
if(this.formData.textContent){
this.formData.rtcIntroduces[0].type = 1;
this.formData.rtcIntroduces[0].content = this.formData.textContent;
}
// 直播简介图片版
if(this.formData.imageContent){
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});
// }
this.formData.lecturers[0].username = this.formData.lecturesUserName;
this.formData.lecturers[0].phone = this.formData.lecturesPhone;
},
}
// 设置讲师
if (this.formData.lecturers != null) {
this.formData.lecturesUserName = this.formData.lecturers[0].username;
this.formData.lecturesPhone = this.formData.lecturers[0].phone;
}
},
// 封装数据
setFormData() {
if (!this.formData.circleId) {
this.formData.circleId = 1; // 测试用
}
if (this.formData.textContent) {
this.formData.rtcIntroduces[0].type = 1;
this.formData.rtcIntroduces[0].content = this.formData.textContent;
}
// 直播简介图片版
if (this.formData.imageContent) {
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});
// }
complete(formName) {
console.log(this.formData);
this.$refs[formName].validate((valid) => {
if (valid) {
this.submit();
} else {
console.log('error submit!!');
return false;
}
});
},
this.formData.lecturers[0].username = this.formData.lecturesUserName;
this.formData.lecturers[0].phone = this.formData.lecturesPhone;
},
//完成
submit() {
this.setFormData();
// 校验直播简介文字版或图片版
if(!this.checkIntroduce()){
return;
}
// 校验直播封面、预告图
if(!this.checkCover() || !this.checkPreImage()){
return;
}
// 校验嘉宾姓名和手机号
if(!this.checkGuests()){
return;
complete(formName) {
console.log(this.formData);
this.$refs[formName].validate(valid => {
if (valid) {
this.submit();
} else {
console.log("error submit!!");
return false;
}
});
},
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: '/live-manage',
})
}
else {
this.$message.error("操作失败，请重试");
}
})
//完成
submit() {
this.setFormData();
// 校验直播简介文字版或图片版
if (!this.checkIntroduce()) {
return;
}
// 校验直播封面、预告图
if (!this.checkCover() || !this.checkPreImage()) {
return;
}
// 校验嘉宾姓名和手机号
if (!this.checkGuests()) {
return;
}
},
},
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: '/live-manage',
path: "/live-manage?id=" + this.circleId
});
} else {
this.$message.error("操作失败，请重试");
}
});
}
}
};
</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%;
.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;
}
.step-num {
display: block;
margin-top: 1.5px;
.upload-message {
position: absolute;
left: 160px;
top: 105px;
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;
color: #f56c6c;
}
.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;
}
.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 {
}
.word-num {
font-size: 12px;
color: #999;
padding-top: 5px;
}
.line {
margin-left: 10px;
width: 20px;
}
.bg-uploader {
.bg-img {
float: left;
width: 84px;
height: 100px;
}
.limit-text {
float: left;
margin-left: 10px;
width: 20px;
}
.bg-uploader {
.bg-img {
float: left;
width: 84px;
height: 100px;
}
.limit-text {
float: left;
margin-left: 10px;
margin-top: -10px;
p {
font-size: 12px;
color: #999;
}
margin-top: -10px;
p {
font-size: 12px;
color: #999;
}
}
.el-upload__tip {
position: absolute;
top: -6px;
left: 130px;
}
}
.el-upload__tip {
position: absolute;
top: -6px;
left: 130px;
}
}
}
.required-label .el-form-item__label::before {
content: '*';
color: #F56C6C;
margin-right: 4px;
}
</style>
}
.required-label .el-form-item__label::before {
content: "*";
color: #f56c6c;
margin-right: 4px;
}
</style>
src/views/yqrange/live-manage.vue
浏览文件 @ 7b0c59e1
......@@ -210,7 +210,7 @@ export default {
//新建直播
createLive() {
this.$router.push({
path: "/create-live"
path: "/create-live?circleId=" + this.circleId,
});
},
//弹出直播链接弹窗
......@@ -304,7 +304,8 @@ export default {
path: "/create-live",
query: {
// rtcId: "16"
rtcId: row.id
rtcId: row.id,
}
});
},
......@@ -323,8 +324,8 @@ export default {
circleId: this.circleId,
name: name,
liveStatus: status,
pageNo: 1,
pageSize: 10
pageNo: this.searchForm.pageNo,
pageSize: this.searchForm.pageSize
};
console.log("alex name = " + name + ", status = " + status);
vm.POST("rtc/liveAdmin/list", req).then(res => {
......@@ -344,6 +345,8 @@ export default {
listData.push(obj);
}
this.tableData = listData;
this.totalRows = res.data.totalRows;
} else {
this.tableData = [];
}
......
src/views/yqrange/role-manage.vue
浏览文件 @ 7b0c59e1
......@@ -65,49 +65,31 @@
<el-table-column label="操作" min-width="300" align="center">
<template slot-scope="scope">
<el-button
v-if="this.idType != 1 && scope.row.level == 0"
v-if="(idType == 1 && scope.row.level == 0) ||
(idType != 1 && scope.row.level == 0 && selfRoleId > scope.row.level)"
@click="promote(scope.row, 1)"
type="text"
size="small"
>升为管理员</el-button>
<el-button
v-if="this.idType != 1 && scope.row.level == 0"
@click="promote(scope.row, 2)"
type="text"
size="small"
>升为主管理员</el-button>
<el-button
v-if="this.idType != 1 && scope.row.level == 1"
@click="promote(scope.row, 2)"
type="text"
size="small"
>升为主管理员</el-button>
<el-button
v-if="this.idType != 1 && scope.row.level == 1"
@click="promote(scope.row, 0)"
type="text"
size="small"
>降为普通成员</el-button>
<el-button
v-if="this.idType != 1 && scope.row.level == 2"
@click="promote(scope.row, 1)"
type="text"
size="small"
>降为管理员</el-button>
<el-button
v-if="this.idType != 1 && scope.row.level == 2"
v-if="(idType == 1 && scope.row.level == 1) ||
(idType != 1 && scope.row.level == 1 && selfRoleId > scope.row.level)"
@click="promote(scope.row, 0)"
type="text"
size="small"
>降为普通成员</el-button>
<el-button
v-if="this.idType != 1 && scope.row.status == 1"
v-if="scope.row.level != 2 &&
(idType == 1 || selfRoleId > scope.row.level) &&
scope.row.status == 1"
@click="addBlackList(scope.row)"
type="text"
size="small"
>加入黑名单</el-button>
<el-button
v-if="this.idType != 1 && scope.row.status == 2"
v-if="scope.row.level != 2 &&
(idType == 1 || selfRoleId > scope.row.level) &&
scope.row.status == 2"
@click="addBlackList(scope.row)"
type="text"
size="small"
......@@ -215,26 +197,27 @@ export default {
name: "第二医院"
}
],
id: null
id: null,
selfRoleId: 0
};
},
created() {
vm = this;
this.id = this.$route.query.id;
// vm.getOrganization();
this.searchList();
this.idType = localStorage.getItem("storageIdType");
console.log("storageIdType = " + localStorage.getItem("storageIdType"));
console.log("storageIdType = " + this.idType);
this.searchList();
},
methods: {
searchList() {
console.log("查询");
let req = {
name: this.searchForm.searchName,
hospitaName: this.searchForm.searchHospital,
hospitalName: this.searchForm.searchHospital,
id: this.id,
pageNo: 1,
pageSize: 10
pageNo: this.searchForm.pageNo,
pageSize: this.searchForm.pageSize
};
vm.POST("circle/circle/members", req)
.then(res => {
......@@ -253,9 +236,9 @@ export default {
let listData = [];
for (let i = 0; i < res.data.memberList.length; i++) {
let roleName = "";
switch (res.data.memberList[i].role_id) {
switch (res.data.memberList[i].roleId) {
case 0:
roleName = "普通成员 1:管理员 2:主管理员 3:审核人员";
roleName = "普通成员";
break;
case 1:
roleName = "管理员";
......@@ -276,13 +259,20 @@ export default {
proTitle: res.data.memberList[i].title,
department: res.data.memberList[i].departmentName,
hospital: res.data.memberList[i].hospitalName,
level: res.data.memberList[i].role_id,
level: res.data.memberList[i].roleId,
doctorId: res.data.memberList[i].id,
status: res.data.memberList[i].status
};
listData.push(obj);
}
this.tableData = listData;
this.selfRoleId = res.data.roleId;
// console.log("searchList() : this.selfRoleId = " + this.selfRoleId +
// ", name = " + tableData[1].name + ", level = " + tableData[1].level +
// ", doctorId = " + tableData[1].doctorId + ", status = " + tableData[1].status);
console.log("searchList() : this.selfRoleId = " + this.selfRoleId)
this.totalRows = res.data.count;
} else {
// vm.$message.info(res.message);
// vm.$message.info("操作失败，请重试");
......@@ -291,20 +281,6 @@ export default {
.catch(function(error) {
vm.$message.error(error);
});
//model data
// let listData = [];
// let obj = {
// role: "大总管",
// name: "小小",
// proTitle: "妇科老大",
// department: "总经办",
// hospital: "青山神经病院",
// level: 3,
// doctorId: 789
// };
// listData.push(obj);
// this.tableData = listData;
},
resetForm() {
console.log("重置");
......@@ -437,9 +413,9 @@ export default {
//加入黑名单
addBlackList(row) {
vm = this;
let option = "加入黑名单"
let option = "加入黑名单";
if (row.status == 2) {
option = "移出黑名单"
option = "移出黑名单";
}
this.$confirm(`确定将“${row.name}”${option}吗`, "", {
confirmButtonText: "确定",
......@@ -453,10 +429,12 @@ export default {
);
let req = {
id: this.id,
doctorId: row.doctorId,
doctorId: row.doctorId
};
vm.GET(
"circle/circle/" + this.id + "/" + row.doctorId + "/freeControl", req)
"circle/circle/" + this.id + "/" + row.doctorId + "/freeControl",
req
)
.then(res => {
if (res.code == "000000") {
vm.$message({
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或