难点：
1、layui开始时间选择（不能小于当前时间天时分秒）
2、layui select的选择 （固定数据）
3、获取班级列表（判断班级人数给提示、班级列表模板）
4、富文本的简介，包含上传图片
5、计算时长
6、选择时长后，选中班级要变时长，选班级再选时长要变时长。
弹出层内容
<!-- 创建直播 -->
<div class="addlivebox" style="display: none;">
<form class="layui-form" action="">
<div class="formflex">
<div class="layui-form-item">
<label class="layui-form-label">标题</label>
<div class="layui-input-block">
<input type="text" name="title" required lay-verify="required"
placeholder="请输入直播标题" autocomplete="off"
class="layui-input" style="width:250px">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">开始时间</label>
<div class="layui-input-block">
<input type="text" id="startTime" value="" readonly="true"
class="layui-input" placeholder="请选择开始时间"
onclick="layui.laydate(
{elem: this, istime: true, format: 'YYYY-MM-DD hh:mm',min:
laydate.now()})"
style="width: 250px;">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">直播时长</label>
<div class="layui-input-block">
<select id="time" name="time">
<option value="">请选择直播时长</option>
<option value="30">0.5小时</option>
<option value="60">1小时</option>
<option value="90">1.5小时</option>
<option value="120">2小时</option>
<option value="150">2.5小时</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">选择班级</label>
<div class="layui-input-block" id="view"></div>
</div>
</div>
<div class="formflex">
<div class="layui-form-item">
<label class="layui-form-label">简要介绍</label>
<div class="layui-input-block">
<iframe src="/shared/index/editor?type=40" width="410px"
frameborder="0" id="editoriframe"></iframe>
</div>
</div>
</div>
</form>
<div class="addliveinfo">
<div class="colorred">预计消费直播时长<span data-role="alltime">0</span>小时</div>
<div>时长消费 = 学生人数 * 单次上课时长</div>
<div class="color098AFF">您的剩余直播时长 <?php echo $livetotaltime; ?> 小时</div>
<div>若余长不足，请先充值购买直播时长。购买方式：在微课之家网站www.wkzj.com个人中心-
我的账户中购买</div>
</div>
</div>
班级列表模板
<script id="demo" type="text/html">
{{# layui.each(d, function(index, item){ }}
<div class="selectclass">
{{# if(item.CLASSLOGO == ''){ }}
<img src="/static/shared/images/yk.png" />
{{# }else{ }}
<img src="{{ item.CLASSLOGO }}" />
{{# } }}
<div class="name">{{ item.CLASSNAME }}</div>
<div class="classcheckbox" data-clsid="{{ item.CLSID }}"
data-num="{{ item.STUDENTNUM }}">
<input type="checkbox" name="classlist">
</div>
</div>
{{# }); }}
{{# if(d.length === 0){ }}
暂无班级
{{# } }}
</script>
layui.use(['element', 'layer', 'form','laydate','laytpl'], function() {
var form = layui.form();
var laydate = layui.laydate;
var laytpl = layui.laytpl;
//模板
function renderDate(selector, data) {
var htmls = $("#demo").html();
laytpl(htmls).render(data, function(html) {
$(selector).html(html);
});
};
})
renderDate("#view", classinfo); //调用方法
classinfo 的数据格式是
layui开始时间选择
layui.laydate({elem: this, istime: true, format: ‘YYYY-MM-DD hh:mm’,min: laydate.now()})
老版本写在行内
CheckBox获取选中的值
$(document).on('click','.classcheckbox input',function(){
_nums = $(this).parent().attr('data-num');
var clsidarr = []; //班级id的数组
var numarr = [];
_newnums = 0; // 直播时长为0 赋值
$("[name=classlist]:checkbox").each(function(i){
if(_nums == '0'){ //判断当前班级没有学生时
layer.alert('当前班级没有学生，请先添加学生');
$(this).prop("checked",false);
return;
}else{
if ($(this).prop("checked") == true){
clsidarr.push($(this).parent().attr('data-clsid')); //获取值
numarr.push($(this).parent().attr('data-num')); //获取值
_newnums = eval(numarr.join("+")); //获取班级人数总和
}
}
})
var _time = $('select[name="time"]').val();
var alltime = (_newnums * _time) / 60;
if($('input[name="switch"]').prop("checked") == true){
msgtime = (_newnums * 3)/60;
$('[data-role="alltime"]').html(alltime + msgtime);
}else{
$('[data-role="alltime"]').html(alltime);
}
console.log(clsidarr);
clsidarrnew = clsidarr;
});
富文本
用iframe表示
<iframe src="/shared/index/editor?type=40" width="410px" frameborder="0" id="editoriframe"></iframe>
这个页面里方法都封装了。直接调用就可以了 。
获取iframe里的方法
$("#editoriframe")[0].contentWindow.方法名();
editor = $("#editoriframe")[0].contentWindow.getContent();//获取编辑器内容
fileidArr = $("#editoriframe")[0].contentWindow.getFileidArr();//获取上传图片id
base64Content = $("#editoriframe")[0].contentWindow.getBase64Content();//获取base64
newgetFileidArr = JSON.parse( fileidArr );
其中getContent()、getFileidArr()、getBase64Content()是方法名
完整的js代码
//班级列表模板
<script id="demo" type="text/html">
{{# layui.each(d, function(index, item){ }}
<div class="selectclass">
{{# if(item.CLASSLOGO == ''){ }}
<img src="/static/shared/images/yk.png" />
{{# }else{ }}
<img src="{{ item.CLASSLOGO }}" />
{{# } }}
<div class="name">{{ item.CLASSNAME }}</div>
<div class="classcheckbox" data-clsid="{{ item.CLSID }}"
data-num="{{ item.STUDENTNUM }}">
<input type="checkbox" name="classlist">
</div>
</div>
{{# }); }}
{{# if(d.length === 0){ }}
暂无班级
{{# } }}
</script>
var listhtml = '';
var _nums = '';
var _newnums = 0;
var clsidarrnew = [];
var needNotice = '0';
var classinfo = <?php echo $classinfo; ?>;//班级列表数据
console.log(classinfo);
//班级列表模板渲染
function renderDate(selector, data) {
var htmls = $("#demo").html();
laytpl(htmls).render(data, function(html) {
$(selector).html(html);
});
};
//选择select时改变时长
form.on('select', function(data){
if($('input[name="switch"]').prop("checked") == true){
msgtime = (_newnums * 3)/60;
$('[data-role="alltime"]').html(((data.value * _newnums)/60) + msgtime);
}else{
$('[data-role="alltime"]').html((data.value * _newnums)/60);
}
});
form.on('switch', function(data){
var alltimes = $('[data-role="alltime"]').html();
var msgtime = (_newnums * 3)/60;
if(data.elem.checked){
layer.msg('短信提醒：按每学生一条短信扣时长3分钟计费');
needNotice = '1';
var newtime = Number(alltimes) + msgtime;
$('[data-role="alltime"]').html(newtime);
}else{
needNotice = '0';
var newtime = Number(alltimes) - msgtime;
$('[data-role="alltime"]').html(newtime);
}
});
//点击班级列表时操作
$(document).on('click','.classcheckbox input',function(){
//获取当前班级人数
_nums = $(this).parent().attr('data-num');
//班级id数组
var clsidarr = [];
//选中班级人数总和数组
var numarr = [];
//班级人数总和赋值
_newnums = 0;
//循环checkbox选中的id和num
$("[name=classlist]:checkbox").each(function(i){
//判断人数为0时的提示
if(_nums == '0'){
layer.alert('当前班级没有学生，请先添加学生');
$(this).prop("checked",false);
return;
}else{
if ($(this).prop("checked") == true){
clsidarr.push($(this).parent().attr('data-clsid')); //获取值
numarr.push($(this).parent().attr('data-num')); //获取值
//计算数组内数字的总和
_newnums = eval(numarr.join("+"));
}
}
})
//计算总时长，并赋值
var _time = $('select[name="time"]').val();
var alltime = (_newnums * _time) / 60;
$('[data-role="alltime"]').html(alltime);
console.log(clsidarr);
clsidarrnew = clsidarr;
});
//index加载中遮罩层
var indexs;
//定义全局变量
var editor,fileidArr,newgetFileidArr,base64Content;
//点击创建直播按钮的操作
$('[data-role="addlive"]').click(function() {
//调用班级列表模板
renderDate("#view", classinfo);
//弹出层
layer.open({
type: 1,
title: '创建直播',
btn:['创建直播'],
yes: function(index, layero){
indexs = layer.load(2,{shade: [0.3,'#fff']});//遮罩
//判断为空时的状态
if($('input[name="title"]').val() == ''){
layer.alert('请输入直播标题');
layer.close(indexs);
return;
}
if($('#startTime').val() == ''){
layer.alert('请选择直播开始时间');
layer.close(indexs);
return;
}
if($('select[name="time"]').val() == ''){
layer.alert('请选择直播时长');
layer.close(indexs);
return;
}
if(clsidarrnew.length == 0){
layer.alert('请选择班级');
layer.close(indexs);
return;
}
//获取总时长
var _ti = $('[data-role="alltime"]').html();
//获取编辑器内容
editor = $("#editoriframe")[0].contentWindow.getContent();
//获取编辑器中上传的图片id 为数组
fileidArr = $("#editoriframe")[0].contentWindow.getFileidArr();
//获取 base64的数据
base64Content = $("#editoriframe")[0].contentWindow.getBase64Content();
newgetFileidArr = JSON.parse( fileidArr );
//点提交按钮时调用的方法
createlive(clsidarrnew);
},
shade: 0.5,
area: ['1000px', '560px'],
scrollbar: false,
content:$('.addlivebox')
});
});
//提交直播
function createlive(clsidarr){
//能获取到值
console.log(editor);
console.log(newgetFileidArr);
console.log(base64Content);
var data = {
'title': $('input[name="title"]').val(),
'description': editor,
'descfileid': newgetFileidArr,
'clsid': clsidarr,
'starttime': $('#startTime').val(),
'duration': $('select[name="time"]').val(),
'isbase64': false,
‘needNotice‘’:needNotice
}
$.post('/shared/classlivestream/create',data,function (res) {
if(res.success){
layer.alert(res.message, function(){
window.location.reload();
});
}else{
layer.close(indexs);
layer.alert(res.message, function(){
$('input[name="title"]').val('');
$('#startTime').val('');
$('select[name="time"]').val(0);
$('[data-role="alltime"]').html('0');
form.render("select");
});
}
});
}
121
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
