DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>会员管理title>
<link href="layui/css/layui.css" rel="stylesheet">
<script src="layui/layui.js">script>
head>
<body>
<div class="layui-container">
<form class="layui-form" id="addMember" lay-filter="addMember" action="" style="display: none; padding-right:20px;">
<div class="layui-form-item">
<label class="layui-form-label">姓名label>
<div class="layui-input-block">
<input type="text" name="name" 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="text" name="phone" 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="text" name="regDate" class="layui-input" id="mydate_add">
div>
div>
<div class="layui-form-item">
<label class="layui-form-label">会员类型label>
<div class="layui-input-block">
<input type="radio" name="type" value="vip" title="VIP" checked>
<input type="radio" name="type" value="normal" title="普通">
div>
div>
form>
<form class="layui-form" id="detailMember" lay-filter="detailMember" action="" style="display: none; padding-right:20px;">
<div class="layui-form-item">
<label class="layui-form-label">姓名label>
<div class="layui-input-block">
<input type="text" name="name" class="layui-input" disabled>
div>
div>
<div class="layui-form-item">
<label class="layui-form-label">电话label>
<div class="layui-input-block">
<input type="text" name="phone" class="layui-input" disabled>
div>
div>
<div class="layui-form-item">
<label class="layui-form-label">注册日期label>
<div class="layui-input-block">
<input type="text" name="regDate" class="layui-input" id="mydate_detail" disabled>
div>
div>
<div class="layui-form-item">
<label class="layui-form-label">会员类型label>
<div class="layui-input-block">
<input type="radio" name="type" value="vip" title="VIP" checked disabled>
<input type="radio" name="type" value="normal" title="普通" disabled>
div>
div>
form>
<form class="layui-form" id="editMember" lay-filter="editMember" action="" style="display: none; padding-right:20px;">
<div class="layui-form-item">
<label class="layui-form-label">姓名label>
<div class="layui-input-block">
<input type="text" name="name" 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="text" name="phone" 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="text" name="regDate" class="layui-input" id="mydate_edit">
div>
div>
<div class="layui-form-item">
<label class="layui-form-label">会员类型label>
<div class="layui-input-block">
<input type="radio" name="type" value="vip" title="VIP" checked>
<input type="radio" name="type" value="normal" title="普通">
div>
div>
form>
<div class="layui-row layui-col-space16">
<div class="layui-col-md12">
<button class="layui-btn layui-btn-info" style="margin-top: 20px;" id="btnAdd">
<i class="layui-icon layui-icon-addition">i>
添加新会员
button>
<table lay-filter="member_list" class="layui-table" id="mytable">table>
div>
div>
div>
<script>
layui.use(["table","form","layer","laydate"],function(){
var $ = layui.$;
var table = layui.table;
var form = layui.form;
var layer = layui.layer;
var laydate = layui.laydate;
laydate.render({
elem:"#mydate_add",
value:new Date(),
type:"date",
format:"yyyy-MM-dd"
});
laydate.render({
elem:"#mydate_detail",
value:new Date(),
type:"date",
format:"yyyy-MM-dd"
});
laydate.render({
elem:"#mydate_edit",
value:new Date(),
type:"date",
format:"yyyy-MM-dd"
});
var inst = table.render({
elem:"#mytable",
url:'Member?method=findByPage',
cols:[[
{field: 'id', title: 'ID', sort: true},
{field: 'name', title: '姓名'},
{field: 'phone', title: '电话'},
{field: 'type', title: '会员类型'},
{field: 'regDate', title: '注册时间'},
{field: 'right', title: '操作',toolbar:"#template",align:"center",width:180}
]],
page:{
layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
limit:3,
limits:[3,6]
},
request:{
pageName:'currentPage',
limitName: 'pageSize'
},
});
function refreshTb() {
table.reload("mytable", {
cols: [[
{ field: 'id', title: 'ID', sort: true },
{ field: 'name', title: '姓名' },
{ field: 'phone', title: '电话' },
{ field: 'type', title: '会员类型' },
{ field: 'regDate', title: '注册时间' },
{ field: 'right', title: '操作', toolbar: "#template", align: "center", width: 180 }
]],
page: {
layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
limit: 3,
limits: [3, 6]
}
})
}
$("#btnAdd").click(function(){
$("#addMember")[0].reset();
form.render();
layer.open({
type: 1,
title: ['添加新会员','font-size:18px;font-weight:bold;'],
area:["700px","300px"],
content:$("#addMember"),
btn:["确定","取消"],
closeBtn:0,
scrollbar: true,
btnAlign:"c",
success:function (layero,index){
layero.addClass('layui-form');
layero.find('.layui-layer-btn0').attr({
'lay-filter':"addbtn",
'lay-submit':''
});
},
yes:function(index){
form.on("submit(addbtn)",function (){
var data=form.val("addMember");
$.post("Member?method=add",data,function (obj){
if (obj.code>0){
layer.msg(obj.msg,{icon:1});
}else{
layer.msg(obj.msg,{icon:2});
}
layer.close(index);
refreshTb();
},"json");
})
},
cancle:function(){
layer.close();
}
});
});
table.on('tool(member_list)', function (obj) {
var data = obj.data;
var layEvent = obj.event;
if (layEvent === 'details') {
form.val("detailMember",data);
layer.open({
type: 1,
title: ['会员详情','font-size:18px;font-weight:bold;'],
area:["700px","300px"],
content:$("#detailMember"),
btn:["取消"],
closeBtn:0,
btnAlign:"c",
cancle:function(){
layer.close();
}
});
} else if (layEvent === 'del') {
layer.confirm('确定要删除吗', function (index) {
$.get("Member?method=delete&id="+data.id,function (obj){
if (obj.code>0){
layer.msg(obj.msg,{icon:1});
}else{
layer.msg(obj.msg,{icon:2});
}
refreshTb();
},"json")
});
} else if (layEvent === 'edit') {
form.val("editMember",data);
layer.open({
type: 1,
title: ['修改会员信息', 'font-size:18px;font-weight:bold;'],
area: ["700px", "300px"],
content: $("#editMember"),
btn: ["确定", "取消"],
closeBtn: 0,
scrollbar: true,
btnAlign: "c",
success:function (layero,index){
layero.addClass('layui-form');
layero.find('.layui-layer-btn0').attr({
'lay-filter':"editbtn",
'lay-submit':''
});
},
yes: function (index) {
form.on("submit(editbtn)",function (){
let update= form.val("editMember");
update.id=data.id;
console.log(update);
$.post("Member?method=update",update,function (obj){
if (obj.code>0){
layer.msg(obj.msg,{icon:1});
}else{
layer.msg(obj.msg,{icon:2});
}
layer.close(index);
refreshTb();
},"json")
});
},
cancle: function () {
layer.close();
}
});
}
});
})
script>
<script type="text/html" id="template">
<button class="layui-btn layui-btn-xs" lay-event="edit">编辑</button>
<button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button>
<button class="layui-btn layui-btn-primary layui-btn-xs" lay-event="details">详情>></button>
script>
body>
html>
