<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="{{asset('js/plugins/mricode-pagination-master/mricode.pagination.css?v=1')}}" rel="stylesheet"/>
<link href="{{asset('css/bootstrap.min14ed.css?v=3.3.6')}}" rel="stylesheet">
<style>
.my-ul {
list-style-type: none;
padding: 0;
margin: 10px 0 5px 10px;
}
.my-ul li {
float: left;
}
.my-ul::after {
content: '';
display: block;
clear: both;
}
.nav-li {
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
}
.active {
background-color: #404650;
color: white;
}
.tool {
background-color: #F0F0F0;
padding: 10px;
}
.search-input {
width: 200px;
padding: 5px;
border: 1px solid #999c9e;
}
.btn {
padding: 5px 10px;
border-radius: 5px;
background-color: #0d8ddb;
border: none;
color: white;
cursor: pointer;
}
.section-ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.section-li {
display: none;
}
.sectionActive {
display: block;
}
.image-ul {
list-style-type: none;
margin: 0;
}
.image-ul::after {
content: '';
display: block;
clear: both;
}
.image-li {
cursor: pointer;
float: left;
width: 16.6%;
padding: 5px 5px;
}
.imageDiv {
border: 2px solid #F0F0F0;
border-radius: 5px;
}
.image-li img {
width: 100%;
max-height: 100%;
}
.page {
margin-left: 10px;
}
.imageActive {
border-color: green !important;
}
button {
cursor: pointer;
}
.image-div {
justify-content: center;
align-items: center;
flex-direction: column;
overflow: hidden;
margin: auto;
}
.image-font {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 10px;
}
</style>
</head>
<body>
<main>
<nav>
<ul class="my-ul">
<li class="nav-li active" data-type="now">当前版块</li>
<li class="nav-li" data-type="all">全部图片</li>
</ul>
</nav>
<input type="hidden" id="pageId" value="1">
<div class="tool">
<div style="float: left">
<input type="text" class="search-input" placeholder="请输入图片名称" id="title">
<button type="button" class="btn" onclick="utils.search()" style="background: #009688;">搜索</button>
</div>
<div style="float: left;margin-top: 2px;margin-left: 5px">
<button type="button" class="btn" name="file_upload" style="background: #009688;">本地上传</button>
（alt多选）
<input type="file" value="" style="display: none" name="uploadFile" multiple>
</div>
<button type="button" class="btn" onclick="utils.save('{{$type}}')"
style="background: #009688;">确定
</button>
<div style="clear: both"></div>
</div>
<input type="hidden" id="type-index" value="{{$type}}">
<section>
<ul class="section-ul">
<li class="section-li sectionActive">
<div class="img-list" id="now">
</div>
<div class="page">
<div id="page" class="m-pagination"></div>
</div>
</li>
<li class="section-li">
<div class="img-list" id="all">
</div>
<div class="page">
<div id="page1" class="m-pagination"></div>
</div>
</li>
</ul>
<input type="hidden" id="type" value="{{$type}}">
</section>
</main>
<script src="{{asset('js/jquery.min.js?v=2.1.4')}}"></script>
<script src="{{asset('js/bootstrap.min.js?v=3.3.6')}}"></script>
<script src="{{asset('js/plugins/layer-v3.1.1/layer/layer.js')}}"></script>
<script src="{{asset('js/tools/tips.js')}}"></script>
<script src="{{asset('js/plugins/mricode-pagination-master/mricode.pagination.js')}}"></script>
<script>
function getPage(object) {
var list = 'all';
if (object === 'page') {
list = 'now';
}
$("#" + object).pagination({
showInfo: true,
showJump: true,
pageSize: 12,
pageElementSort: ['$page', '$size', '$jump', '$info'],
remote: {
url: '/admin/stencil/images/{{$siteId}}/{{$type}}',
pageParams: function (data) {
return {
page: data.pageIndex + 1,
pageSize: data.pageSize,
title: $("#title").val()
};
},
success: function (result) {
var len = result.rows.length;
if (len > 0) {
var content = '<ul class="image-ul">';
$(result.rows).each(function (key, value) {
content +=
'<li class="image-li">' +
'<div class="imageDiv">' +
'<div style="height: 150px;display: flex;justify-content: center;align-items: center;flex-direction: column;overflow: hidden;">' +
'<img src="' + value.src + '" alt="' + value.name + '" data-id="' + value.id + '">' +
'</div>' +
'<div style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding: 10px;">' + value.name + '</div>' +
'</div>' +
'</li>';
});
content += '</ul>';
} else {
content = '<div style="padding:10px;">无数据</div>';
}
$("#" + list).html(content);
}
}
});
}
$(document).on('click', '.my-ul li', function () {
$(this).addClass('active').siblings().removeClass('active');
$(".section-li").eq($(this).index()).addClass('sectionActive').siblings().removeClass('sectionActive');
});
$(document).on('click', '[name=file_upload]', function () {
$(this).next().trigger('click');
});
$(document).on('change', '[name=uploadFile]', function () {
if (!$(this)[0].files[0]) {
return;
}
var siteId = 0;
$(".nav-li").each(function () {
if ($(this).hasClass('active')) {
if ($(this).index() === 0) {
siteId = "{{$siteId}}";
}
}
});
var formData = new FormData();
if ($(this)[0].files.length > 10) {
layer.alert("最多只能选择10张图片哦", {icon: 5});
return;
}
var maxSize = 3072;//文件上传大小限制
for (var i = 0; i < $(this)[0].files.length; i++) {
var size = $(this)[0].files[i].size;
var fileSize = (size / 1024).toFixed(2);
if (fileSize > maxSize) {
layer.alert("上传文件不许超过3MB", {icon: 5});
return;
}
formData.append('files[]', $(this)[0].files[i]);
}
formData.append('siteId', '{{$siteId}}');
var ln;
$.ajax({
url: '/admin/stencil/uploadImages/{{$siteId}}',
type: 'POST',
cache: false,
data: formData,
processData: false,
contentType: false,
beforeSend: function () {
ln = layer.load();
},
complete: function () {
layer.close(ln);
},
success: function () {
$("#page").pagination('remote');
$("#page1").pagination('remote');
},
error: function (XMLHttpRequest) {
if (XMLHttpRequest.status === 500) {
layer.alert("异步请求失败", {icon: 5});
return;
}
layer.alert(JSON.parse(XMLHttpRequest.responseText).message, {icon: 0});
}
});
});
var utils = {
search: function () {
$(".nav-li").each(function () {
if ($(this).hasClass('active')) {
var type = $(this).attr('data-type');
if (type === 'now') {
$("#page").pagination('remote');
} else {
$("#page1").pagination('remote');
}
}
});
},
save: function (type) {
var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
if (type === 'advertise') {
parent.$('#images').empty();
$(".imageActive").each(function () {
var img = $(this).find('img').attr('src');
var name = $(this).find('div').text();
var str =
'<div class="col-sm-2 control-label">' +
'</div>' +
'<li class="image-li">' +
'<div class="imageDiv">' +
'<div class="image-div">' +
'<img src="' + img + '" alt="' + img + '">' +
'</div>' +
'<div class="image-font" >' + name + '</div>' +
'<a href="javascript:;" class="js-del-item">' +
'<i class="fa fa-remove"></i>移除' +
'</a>' +
'</div>' +
'</li>';
parent.$('#images').append(str);
});
}else if (type === 'alone') {
parent.$('#images').empty();
$(".imageActive").each(function () {
var img = $(this).find('img').attr('src');
var name = $(this).find('div').text();
var str =
'<li class="image-li">' +
'<div class="imageDiv">' +
'<div class="image-div">' +
'<img src="' + img + '" alt="' + img + '">' +
'</div>' +
'<div class="image-font" >' + name + '</div>' +
'<a href="javascript:;" class="js-del-item-alone">' +
'<i class="fa fa-remove"></i>移除' +
'</a>' +
'</div>' +
'</li>';
parent.$('#images').append(str);
});
}else {
$(".imageActive").each(function () {
var img = $(this).find('img').attr('src');
var alt = $(this).find('img').attr('alt');
var id = $(this).find('img').attr('data-id');
var str =
'<div class="js-item img-item images-list {{$type}}" style="cursor:pointer">' +
'<div class="box">' +
'<a class="thumb">' +
'<img class="image-result" src="' + img + '" alt="' + alt + '">' +
'</a>' +
'<div class="title cutstr">' + img + '</div>' +
'<div class="summary" data-id="' + id + '">alt<input type="text" class="form-control image-alt" value="' + alt + '"></div>' +
'<div class="operate">' +
'<a href="javascript:;" class="js-del-item">' +
'<i class="fa fa-remove"></i>移除' +
'</a>' +
'</div>' +
'</div>' +
'</div>';
parent.$('#{{$type}}').append(str);
});
}
parent.layer.close(index);
}
};
var typeIndex = $('#type-index').val();
if (typeIndex === 'advertise' || typeIndex === 'alone') {
$(document).on('click', '.imageDiv', function () {
if ($(this).hasClass('imageActive')){
$(this).removeClass('imageActive')
} else {
$(".imageDiv").removeClass('imageActive');
$(this).addClass('imageActive');
}
});
} else {
$(document).on('click', '.imageDiv', function () {
$(this).addClass('imageActive');
});
$(document).on('click', '.imageActive', function () {
$(this).removeClass('imageActive');
});
}
$(function () {
getPage('page');
getPage('page1');
})
</script>
</body>
</html>