216 lines
12 KiB
HTML
216 lines
12 KiB
HTML
{include file="/common/header"}
|
|
<style type="text/css">
|
|
.layui-form-label { width: 100px; text-align: center; }
|
|
</style>
|
|
<div class="container">
|
|
<div class="user">
|
|
<div class="layui-tab layui-tab-brief" lay-filter="menu">
|
|
<ul class="layui-tab-title">
|
|
<li class="layui-this">图片管理</li>
|
|
<li>修改资料</li>
|
|
</ul>
|
|
<div class="layui-tab-content">
|
|
<div class="layui-tab-item layui-show fadeInDown animated">
|
|
<div class="list-per">
|
|
<form class="layui-form" action="" method="post">
|
|
<div class="layui-inline">
|
|
<div class="layui-input-inline">
|
|
<select name="sort" lay-verify="required" lay-filter="sort">
|
|
<option value="1">最新的</option>
|
|
<option value="2">最旧的</option>
|
|
<option value="3">最大的</option>
|
|
<option value="4">最小的</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="layui-inline">
|
|
<div class="layui-input-inline">
|
|
<input type="text" name="date" class="layui-input" id="date" placeholder=" - ">
|
|
</div>
|
|
</div>
|
|
<div class="layui-inline">
|
|
<div class="layui-input-inline">
|
|
<input type="text" name="search_val" value="" placeholder="请输入文件名" class="layui-input">
|
|
</div>
|
|
<button class="layui-btn search_btn layui-btn-small layui-btn-primary" lay-submit lay-filter="search_btn">查询</button>
|
|
</div>
|
|
<div class="layui-inline pull-right layui-btn-group">
|
|
<button type="button" class="layui-btn batchDel layui-btn-small checkBoxAll" onclick="checkBoxAll()">全选</button>
|
|
<button type="button" class="layui-btn layui-btn-danger batchDel layui-btn-small" onclick="picBatchDel()">批量删除</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="row list">
|
|
|
|
</div>
|
|
</div>
|
|
<div class="layui-tab-item fadeInDown animated">
|
|
<div class="row">
|
|
<div class="col-md-6 col-1g-6">
|
|
<form class="form-horizontal layui-form" role="form">
|
|
<div class="form-group">
|
|
<label for="email" class="col-sm-2 control-label">Email</label>
|
|
<div class="col-sm-10">
|
|
<input type="text" class="form-control" id="email" placeholder="请输入Email" value="{$user.email}" disabled>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="username" class="col-sm-2 control-label">昵称</label>
|
|
<div class="col-sm-10">
|
|
<input type="text" class="form-control" id="username" name="username" placeholder="请输入昵称" value="{$user.username}">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="password" class="col-sm-2 control-label">密码</label>
|
|
<div class="col-sm-10">
|
|
<input type="password" class="form-control" id="password" name="password" placeholder="不修改请留空">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="passwords" class="col-sm-2 control-label">确认</label>
|
|
<div class="col-sm-10">
|
|
<input type="password" class="form-control" id="passwords" name="passwords" placeholder="请输入确认密码">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="col-sm-offset-2 col-sm-10">
|
|
<button type="submit" class="btn btn-default" id="edit" lay-submit lay-filter="edit">修改</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{js href="//cdn.bootcss.com/clipboard.js/1.7.1/clipboard.min.js"}
|
|
<script type="text/javascript">
|
|
layui.use(['flow', 'layer', 'laydate', 'form'], function() {
|
|
var flow = layui.flow, layer = layui.layer, laydate = layui.laydate, form = layui.form;
|
|
var rows = {$conf.img_rows}; // 每页显示数量
|
|
laydate.render({
|
|
elem: '#date',
|
|
range: true
|
|
});
|
|
|
|
getImgList([], $('[name=search_val]').val());
|
|
|
|
function getImgList(so, sort) {
|
|
flow.load({
|
|
elem: '.list',
|
|
isAuto: {$conf.flow_load_mode ? 'true' : 'false'},
|
|
isLazyimg: true,
|
|
done: function(page, next) {
|
|
var lis = [];
|
|
$.ajax({
|
|
url: 'user/getImgList',
|
|
type: 'POST',
|
|
timeout: 8000,
|
|
data: {'page': page, 'limit': rows, 'so': so, 'sort': sort},
|
|
dataType: 'JSON',
|
|
success: function(res) {
|
|
if(res.code) {
|
|
var data = res.data;
|
|
var append = '';
|
|
layui.each(data, function(k, v) {
|
|
append += "<div class=\"picture pic-"+ v.id +" col-md-3 col-sm-3 col-1g-3\"><i title=\"选中\" data-id="+ v.id + " class=\"pic-del fa fa-circle-thin\"></i>";
|
|
append += " <div class=\"img\">";
|
|
append += " <img lay-src=\""+ v.url +"\">";
|
|
append += " <div class=\"img-per\">";
|
|
append += " <div class=\"input-group\">";
|
|
append += " <input class=\"form-control input-sm\" id=\"copy-"+ v.id +"\" value=\""+ v.url +"\">";
|
|
append += " <div class=\"input-group-btn\">";
|
|
append += " <button class=\"btn btn-default btn-sm copy\" data-clipboard-action=\"copy\" data-clipboard-target=\"#copy-"+ v.id +"\" title=\"复制\"><i class=\"fa fa-copy\"></i></button>";
|
|
append += " <button class=\"btn btn-default btn-sm\" onclick=\"picDel(" + v.id + ")\" title=\"删除\"><i class=\"fa fa-trash-o\"></i></button>";
|
|
append += " <a href=\""+ v.url +"\" target=\"_blank\" title=\"新窗口打开\" class=\"btn btn-default btn-sm\"><i class=\"fa fa-rocket\"></i></a>";
|
|
append += " </div>";
|
|
append += " </div>";
|
|
append += " </div>";
|
|
append += " </div>";
|
|
append += "</div>";
|
|
});
|
|
lis.push(append)
|
|
next(lis.join(''), rows == (data ? data.length : '没有更多啦'));
|
|
/*layer.msg('加载中', {
|
|
icon: 16,
|
|
shade: 0.1,
|
|
time: 2000
|
|
}, function() {
|
|
// 大图预览
|
|
layer.photos({
|
|
photos: '.img',
|
|
anim: 0
|
|
});
|
|
});*/
|
|
layer.photos({
|
|
photos: '.img',
|
|
anim: 0
|
|
});
|
|
|
|
$('.pic-del').click(function() {
|
|
var t = $(this);
|
|
// 判断是否选中
|
|
if(t.hasClass('fa-check-circle-o')) {
|
|
t.removeClass('fa-check-circle-o');
|
|
t.addClass('fa-circle-thin');
|
|
} else {
|
|
t.removeClass('fa-circle-thin');
|
|
t.addClass('fa-check-circle-o');
|
|
}
|
|
});
|
|
}
|
|
},
|
|
error: function(err) {
|
|
layer.msg(err);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
form.on('submit(search_btn)', function(data) {
|
|
//layer.load(2);
|
|
$('.list').html('');
|
|
getImgList(data.field);
|
|
//layer.closeAll('loading');
|
|
return false;
|
|
});
|
|
form.on('select(sort)', function(data) {
|
|
var sort = '';
|
|
switch (parseInt(data.value)) {
|
|
case 1: sort = 'upload_time desc'; break;
|
|
case 2: sort = 'upload_time asc'; break;
|
|
case 3: sort = 'size desc'; break;
|
|
case 4: sort = 'size asc'; break;
|
|
default: sort = 'upload_time desc';
|
|
}
|
|
$('.list').html('');
|
|
return getImgList([], sort);
|
|
});
|
|
//监听提交
|
|
form.on('submit(edit)', function(data) {
|
|
btnLoad('#edit');
|
|
//layer.msg(JSON.stringify(data.field));
|
|
$.post('/user/edit', data.field, function(res) {
|
|
closeBtnLoad('#edit', '修改');
|
|
return layer.msg(res.msg, {icon: res.code ? 1 : 2});
|
|
});
|
|
return false;
|
|
});
|
|
});
|
|
var clipboard = new Clipboard('.copy');
|
|
clipboard.on('success', function(e) {
|
|
/*console.info('Action:', e.action);
|
|
console.info('Text:', e.text);
|
|
console.info('Trigger:', e.trigger);*/
|
|
layer.msg("复制成功", {icon: 1});
|
|
e.clearSelection();
|
|
});
|
|
|
|
clipboard.on('error', function(e) {
|
|
console.error('Action:', e.action);
|
|
console.error('Trigger:', e.trigger);
|
|
});
|
|
</script>
|
|
{include file="/common/footer"} |