<!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="__PUBLIC__/layui/css/layui.css" media="all">
<link rel="stylesheet" href="__PUBLIC__/font-awesome/css/font-awesome.min.css" media="all" />
<link rel="stylesheet" href="__CSS__/admin.css" media="all">
<style type="text/css">
/* tooltip */
#tooltip{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:2px;
display:none;
color:#fff;
}
</style>
</head>
<body style="padding:10px;">
<div class="tplay-body-div">
<div class="layui-tab">
<ul class="layui-tab-title">
<li class="layui-this">用户管理</li>
</ul>
</div>
<form class="layui-form serch" action="{:url('admin/users/index')}" method="post">
<div class="layui-form-item" style="float: left;">
<div class="layui-input-inline">
<input type="text" name="nickname" lay-verify="title" autocomplete="off" placeholder="请输入昵称" class="layui-input layui-btn-sm">
</div>
<div class="layui-input-inline">
<input type="text" name="phone" lay-verify="title" autocomplete="off" placeholder="请输入手机号" class="layui-input layui-btn-sm">
</div>
<button class="layui-btn layui-btn-danger layui-btn-sm" lay-submit="" lay-filter="serch">立即提交</button>
</div>
</form>
<form class="layui-form">
<table class="layui-table" lay-size="sm">
<colgroup>
<col width="50">
<col width="80">
<col width="100">
<col width="150">
<col width="150">
<col width="200">
<col width="200">
<col width="200">
<col width="100">
</colgroup>
<thead>
<tr>
//layui复选框
<th class="layui-form">
<input type="checkbox" lay-skin="primary" lay-filter="allChoose" data-id="0">
</th>
<th>ID</th>
<th>头像</th>
<th>角色</th>
<th>用户分类</th>
<th>用户名</th>
<th>昵称</th>
<th>创建时间</th>
<th>最后登录时间</th>
<th>最后登录IP</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{volist name="users" id="vo"}
<tr>
//layui复选框
<td class="layui-form">
<input type="checkbox" lay-skin="primary" class="itemSelect" name="check[]" data-id="{$vo.id}">
</td>
<td>{$vo.id}</td>
<td><a href="{$vo.thumb}" class="tooltip"><img src="{$vo.thumb}" width="20" height="20"></a></td>
<td>{$vo.role}</td>
<td>{$vo.user_cate}</td>
<td>{$vo.phone}</td>
<td>{$vo.nickname}</td>
<td>{$vo.create_time}</td>
//格式化时间戳
<td>{$vo.login_time|date='Y-m-d H:i:s',###}</td>
<td>{$vo.login_ip}</td>
<td class="operation-menu">
<div class="layui-btn-group">
<a href="{:url('users/publish',['id'=>$vo.id])}" class="layui-btn layui-btn-xs a_menu layui-btn-primary" id="{$vo.id}" style="margin-right: 0;font-size:12px;"><i class="layui-icon"></i></a>
{eq name="$vo.is_del" value="2"}<a class="layui-btn layui-btn-xs layui-btn-primary" id="{$vo.id}" style="margin-right: 0;font-size:12px;"><i class="layui-icon">已删除</i></a>{else /}<a class="layui-btn layui-btn-xs layui-btn-primary delete" id="{$vo.id}" style="margin-right: 0;font-size:12px;"><i class="layui-icon"></i></a>{/eq}
</div>
</td>
</tr>
{/volist}
</tbody>
</table>
</form>
<div style="padding:0 20px;">
{$users->render()}
</div>
// layui 下拉框 form必有
<form class="layui-form" id="admin">
// 下拉框大小依外面的div 而定
<div style="max-width: 200px;">
<select lay-filter="demo" lay-verify="" class="cate">
<option value="">设置用户分类</option>
{volist name="cates" id='vo'}
<option value="{$vo.id}">{$vo.name}</option>
{/volist}
</select>
</div>
</form>
{include file="public/foot"}
<script type="text/javascript">
$('.delete').click(function(){
var id = $(this).attr('id');
layer.confirm('确定要删除?', function(index) {
$.ajax({
url:"{:url('admin/users/delete')}",
data:{id:id},
success:function(res) {
layer.msg(res.msg);
if(res.code == 1) {
setTimeout(function(){
location.href = res.url;
},1500)
}
}
})
})
})
</script>
<script>
//layui实现全选
layui.use('form', function () {
const form = layui.form;
/*此处对应页面属性lay-filter="allChoose" allChoose可更改为任意名*/
form.on('checkbox(allChoose)', function (data) {
/*此处为匹配页面属性class="itemSelect" 可任意更换*/
$("input[class='itemSelect']").each(function () {
this.checked = data.elem.checked;
});
form.render('checkbox');
});
});
</script>
<script>
// select下拉框改变事件
layui.use(['layer', 'jquery', 'form'], function () {
var layer = layui.layer,
$ = layui.jquery,
form = layui.form;
form.on('select(demo)', function(data){
console.log(data);
//分类id
var id = data.value;
// 用户id
var arr = new Array();
$("input:checked").each(function(){
arr.push($(this).attr("data-id"));
});
if (arr == '' || arr == 0) {
layer.msg("请选择用户");
}
console.log("用户id:"+arr);
console.log("分类id:"+id);
if (id != 0 && arr != '') {
$.ajax({
url:"{:url('admin/users/setcates')}",
data:{id:id,arr:arr},
success:function(res) {
console.log(res);
layer.msg(res.msg);
// if(res.code == 1) {
// setTimeout(function(){
// location.href = res.url;
// },1500)
// }
}
})
}
});
});
</script>
</div>
</body>
</html>
