鼠笼管理系统
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

449 lines
22 KiB

7 months ago
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="/layui/css/layui.css" media="all">
<!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
</head>
<style>
html,body{
height:99.8%;
}
.layui-form-item {
margin-bottom: 0px;
}
.layui-btn-container .layui-btn {
margin-right: 10px;
margin-bottom: 0px;
}
.layui-input, .layui-textarea {
display: block;
height: 30px;
padding-left: 10px;
}
input:before {
content: attr(placeholder); //强制给placeholder属性
color: #aaa; //修改一下placeholder颜色
}
.layui-form-select{
width: 150px;
margin-right: 10px;
font-size: 14px;
}
复制代码
</style>
<body>
<div class="layui-col-xs9 layui-col-md1" style="height: 100%">
<div class="layui-panel" style="height: 100%">
<ul class="layui-menu" id="left">
<li lay-options="{id: 1}" class="layui-menu-item-checked">
<div class="layui-menu-body-title">课程设置</div>
</li>
<li lay-options="{id: 3}"><div class="layui-menu-body-title">课程订单</div></li>
</ul>
</div>
</div>
<div class="layui-col-xs9 layui-col-md11 show1 othertables" style="height: 100%">
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
<ul class="layui-tab-title">
<li class="layui-this">课程列表</li>
<li>添加课程</li>
</ul>
<div class="layui-tab-content" style="height: 100px;">
<div class="layui-tab-item layui-show"><table class="layui-hide" id="classlist" lay-filter="classlist" style="padding:25px;"></table></div>
<div class="layui-tab-item">
<blockquote class="layui-elem-quote layui-text">
课程添加温馨提示2小点: 1. <font style="color:#01aaed;">首次添加课程需要添加先添加课程分类?</font>2. <font style="color:#01aaed;">带有红色”*“的为必填项;</font>
</blockquote>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>课程添加</legend>
</fieldset>
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">课程标题</label>
<div class="layui-input-block">
<input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">课程板块</label>
<div class="layui-input-block">
<select name="class" lay-filter="college">
<option value="">请选择课程板块</option>
<?foreach($class as $key => $val){?>
<option value="<?=$val['id']?>"><?=$val['title']?></option>
<?}?>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">课程讲师</label>
<div class="layui-input-block">
<select name="teacher" lay-filter="teacher">
<option value="">请先选择教学板块</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">课程价格</label>
<div class="layui-input-block">
<input type="number" name="money" lay-verify="required" lay-reqtext="用户名是必填项,岂能为空?" placeholder="请输入" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">优惠价格</label>
<div class="layui-input-block">
<input type="number" name="discount_money" lay-verify="required" lay-reqtext="用户名是必填项,岂能为空?" placeholder="请输入" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">展示顺序</label>
<div class="layui-input-block">
<input type="number" name="username" lay-verify="required" lay-reqtext="用户名是必填项,岂能为空?" placeholder="请输入" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">课程图片</label>
<div class="layui-input-block">
<button type="button" class="layui-btn" id="test1">上传图片</button>
<div class="layui-upload-list">
<img class="layui-upload-img" id="demo1" width="200px">
<p id="demoText"></p>
</div>
<div style="width: 95px;">
<div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
<div class="layui-progress-bar" lay-percent=""></div>
</div>
</div>
</div>
</div>
<input type="hidden" name="img" id="img">
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">详情介绍</label>
<div class="layui-input-block">
<textarea placeholder="请输入内容" name="content" class="layui-textarea"></textarea>
</div>
</div>
<!--<div class="layui-form-item layui-form-text">
<label class="layui-form-label">编辑器</label>
<div class="layui-input-block">
<textarea class="layui-textarea layui-hide" name="content" lay-verify="content" id="LAY_demo_editor"></textarea>
</div>
</div>-->
<div class="layui-form-item">
<div class="layui-input-block">
<button type="submit" class="layui-btn" lay-submit="" lay-filter="demoteacher">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="layui-col-xs9 layui-col-md11 show3 othertables" style="height: 100%;display: none">
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
<ul class="layui-tab-title">
<li class="layui-this">课程订单</li>
<li>课程预约</li>
</ul>
<div class="layui-tab-content" style="height: 100px;">
<div class="layui-tab-item layui-show"><table class="layui-hide" id="classorder" style="padding:25px;"></table></div>
<div class="layui-tab-item"><table class="layui-hide" id="registerlist" style="padding:25px;"></table></div>
</div>
</div>
</div>
<!--<script type="text/html" id="toolbarDemocl">-->
<!-- <div class="layui-btn-container">-->
<!-- <input type="text" id="title" style="width:200px;float:left;height:30px;margin-right: 10px;font-size: 14px;" placeholder="请输入课程名称" class="layui-input">-->
<!-- <input type="text" id="title" style="width:200px;float:left;height:30px;margin-right: 10px;font-size: 14px;" placeholder="请输入讲师姓名" class="layui-input">-->
<!-- <div class="layui-input-inline">-->
<!-- <select name="quiz1">-->
<!-- <option value="">请选择课程类型</option>-->
<!-- <option value="浙江" >电商运营</option>-->
<!-- <option value="你的工号">设计研学</option>-->
<!-- <option value="你最喜欢的老师">播音主持</option>-->
<!-- </select>-->
<!-- </div>-->
<!-- <button class="layui-btn layui-btn-sm" lay-event="isAll">搜索</button>-->
<!-- </div>-->
<!--</script>-->
<script src="/layui/layui.js" charset="utf-8"></script>
<!-- 注意:如果你直接复制所有代码到本地,上述 JS 路径需要改成你本地的 -->
<script type="text/html" id="tool">
<!-- 这里的 checked 的状态只是演示 -->
{{# if(d.hot==1){ }}
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="qstatus">取消热门</a>
{{# } }}
{{# if(d.hot==0){ }}
<a class="layui-btn layui-btn-default layui-btn-xs" lay-event="sstatus">设置热门</a>
{{# } }}
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
layui.use(['form','table','dropdown','laydate','element','upload'], function(){
var table = layui.table
,dropdown = layui.dropdown
,laydate = layui.laydate
,upload = layui.upload
,element = layui.element
,form = layui.form,
$ = layui.jquery;
form.render();
table.render({
elem: '#classlist'
,url: '/admin_class/classlist'
,cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
,toolbar: '#toolbarDemocl'
,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义,去除该参数即可
title: '提示'
,layEvent: 'LAYTABLE_TIPS'
,icon: 'layui-icon-tips'
}]
,page:true
,cols: [[
{field:'id', width:120, title: '序号', sort: true}
,{field:'title', width:200, title: '课程名称'}
,{field:'tname', width:120, title: '课程讲师', sort: true}
,{field:'cname', width:120, title: '课程类型'}
,{field:'money', width:120,title: '课程原价'} //minWidth:局部定义当前单元格的最小宽度,layui 2.2.1 新增
,{field:'discount_money',width:120, title: '优惠价格', sort: true}
,{field:'real_money', width:120,title: '课程价格', sort: true}
,{field:'hot', width:120,title: '热门课程'}
,{field:'order', width:137, title: '显示顺序', sort: true}
,{templet: '#tool', title: '操作', sort: true}
]]
});
table.on('tool(classlist)', function(obj){
console.log(obj)
var data = obj.data;
if(obj.event === 'del'){
layer.confirm('确定要删除数据嘛', function(index){
$.post('/admin_index/delete',{tablename:'curriculum',id:data.id},function(obj){
if(obj.status != 1){
return layer.msg(obj.msg);
}else{
//示范一个公告层
layer.open({
type: 1
,title: false //不显示标题栏
,closeBtn: false
,area: '300px;'
,shade: 0.8
,id: 'LAY_layuipro' //设定一个id,防止重复弹出
,btn: '返回列表'
,btnAlign: 'c'
,moveType: 1 //拖拽模式,0或者1
,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: bold;font-size: 20px;text-align: center;">删除成功</div>'
,yes: function(){
history.go(0)
}
});
}
});
});
}
if(obj.event === 'qstatus'){
layer.confirm('确定取消此课程为热门课程吗?', function(index){
$.post('/admin_class/hot',{hot:'0',id:data.id},function(obj){
if(obj.status != 1){
return layer.msg(obj.msg);
}else{
//示范一个公告层
layer.open({
type: 1
,title: false //不显示标题栏
,closeBtn: false
,area: '300px;'
,shade: 0.8
,id: 'LAY_layuipro' //设定一个id,防止重复弹出
,btn: '返回列表'
,btnAlign: 'c'
,moveType: 1 //拖拽模式,0或者1
,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: bold;font-size: 20px;text-align: center;">设置成功</div>'
,yes: function(){
history.go(0)
}
});
}
});
});
}
if(obj.event === 'sstatus'){
layer.confirm('确定设置此课程位热门课程吗?', function(index){
$.post('/admin_class/hot',{hot:'1',id:data.id},function(obj){
if(obj.status != 1){
return layer.msg(obj.msg);
}else{
//示范一个公告层
layer.open({
type: 1
,title: false //不显示标题栏
,closeBtn: false
,area: '300px;'
,shade: 0.8
,id: 'LAY_layuipro' //设定一个id,防止重复弹出
,btn: '返回列表'
,btnAlign: 'c'
,moveType: 1 //拖拽模式,0或者1
,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: bold;font-size: 20px;text-align: center;">设置成功</div>'
,yes: function(){
history.go(0)
}
});
}
});
});
}
});
table.render({
elem: '#registerlist'
,url: '/admin_class/registerlist'
,toolbar: '#toolbarDemo'
,cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义,去除该参数即可
title: '提示'
,layEvent: 'LAYTABLE_TIPS'
,icon: 'layui-icon-tips'
}]
,page:true
,cols: [[
{field:'id',title: '序号', sort: true}
,{field:'name',title: '姓名'}
,{field:'cname', title: '课程名称'}
,{field:'phone', title: '联系方式'}
,{field:'created', title: '预约时间', sort: true}
]]
});
table.render({
elem: '#classorder'
,url: '/admin_class/orderlist'
,toolbar: '#toolbarDemo'
,cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义,去除该参数即可
title: '提示'
,layEvent: 'LAYTABLE_TIPS'
,icon: 'layui-icon-tips'
}]
,page:true
,cols: [[
{field:'id', width:80, title: '序号', sort: true}
,{field:'cname',title: '课程名称'}
,{field:'tname', title: '课程讲师'}
,{field:'username', title: '下单学员'}
,{field:'money', title: '课程金额', } //minWidth:局部定义当前单元格的最小宽度,layui 2.2.1 新增
,{field:'youhuimaoney', title: '优惠价格'}
,{field:'realmoney', title: '实付价格'}
,{field:'orderno', title: '单号'}
,{field:'status', title: '订单状态'}
,{field:'updated', width:137, title: '支付时间', sort: true}
,{field:'created', title: '下单时间', sort: true}
,{field:'wealth', title: '操作'}
]]
});
form.on('select(college)', function (data) {
var message=$("select[name=class").val();
$.post('/admin_class/teacher',{class:message},function(obj){
var html1="<option >请选择课程老师</option>";
if(obj.status != 1){
return layer.msg(obj.msg);
}else{
$.each(obj.data,function(i,e){
console.log(e)
html1+="<option value='"+e.id+"'>"+e.name+"</option>";
})
$("select[name=teacher]").empty();
$("select[name=teacher]").append(html1)
form.render('select');
}
});
})
//菜单点击事件
dropdown.on('click(left)', function(options){
var thisElem = $(this);
console.log(thisElem, options);
$('.othertables').hide();
$('.show'+options.id).show();
});
//监听提交
form.on('submit(demoteacher)', function(data){
var datas = data.field
datas.type=1
$.post('/admin_class/classsave',datas,function(obj){
if(obj.status != 1){
return layer.msg(obj.msg);
}else{
//示范一个公告层
layer.open({
type: 1
,title: false //不显示标题栏
,closeBtn: false
,area: '300px;'
,shade: 0.8
,id: 'LAY_layuipro' //设定一个id,防止重复弹出
,btn: '返回列表'
,btnAlign: 'c'
,moveType: 1 //拖拽模式,0或者1
,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: bold;font-size: 20px;text-align: center;">添加成功</div>'
,yes: function(){
history.go(0)
}
});
}
});
return false;
});
//常规使用 - 普通图片上传
var uploadInst = upload.render({
elem: '#test1'
,url: '/admin_index/upload' //此处用的是第三方的 http 请求演示,实际使用时改成您自己的上传接口即可。
,before: function(obj){
//预读本地文件示例,不支持ie8
obj.preview(function(index, file, result){
$('#demo1').attr('src', result); //图片链接(base64)
});
element.progress('demo', '0%'); //进度条复位
layer.msg('上传中', {icon: 16, time: 0});
}
,done: function(res){
//如果上传失败
if(res.status != 1){
return layer.msg('上传失败');
}
$('#img').val(res.data); //置空上传失败的状态
//上传成功的一些操作
//……
$('#demoText').html(''); //置空上传失败的状态
}
,error: function(){
//演示失败状态,并实现重传
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function(){
uploadInst.upload();
});
}
//进度条
,progress: function(n, elem, e){
element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
if(n == 100){
layer.msg('上传完毕', {icon: 1});
}
}
});
});
</script>
</body>
</html>