<!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')}}" 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;
padding: 0 0 15px 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;
}
</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>
<div class="tool">
<div style="float: left">
<input type="text" class="search-input" placeholder="请输入页面名称" id="title">
<select name="social_ids" class="search-input" id="tpl_id">
<option value="0">请选择模版</option>
@foreach($templateList as $key=>$value)
<option value="{{$key}}">{{$value}}</option>
@endforeach
</select>
<button type="button" class="btn" onclick="utils.search()" style="background: #009688;">搜索</button>
<button type="button" class="btn " onclick="utils.save()"
style="background: #009688;">确定
</button>
</div>
<div style="clear: both"></div>
</div>
<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>
</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/resources/{{$siteId}}/{{$type}}',
pageParams: function (data) {
return {
page: data.pageIndex + 1,
pageSize: data.pageSize,
title: $("#title").val(),
tplId: $("#tpl_id").val(),
ref:list
};
},
success: function (result) {
var len = result.rows.length;
if (len > 0) {
var content = '<ul class="image-ul">';
$(result.rows).each(function (key, value) {
var image = value.thumb;
if (!image) {
image = 'https://admin.yinqingli.com/storage/202112/jpeg/5AaE6rbXyYBGitlad6l3vrSn3JYSePNeyxu8CV1p.jpeg';
}
content +=
'<li class="image-li">' +
'<div class="imageDiv">' +
'<div class="title" data-id="' + value.id + '">' + value.title + '</div>' +
'<img src="' + image + '" alt="' + value.title + '" data-id="' + value.id + '">' +
'<div class="summary">' + tips.subStr(value.summary, 20) + '</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');
});
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 () {
$(".imageActive").each(function (key, value) {
var id = $(value).find('.title').attr('data-id');
var title = $(value).find('.title').text();
var thumb = $(value).find('img').attr('src');
var summary = $(value).find('.summary').text();
var str =
'<div class="js-item img-item resource-list {{$type}}" style="cursor:pointer;">' +
'<div class="box">' +
'<a class="thumb">' +
'<img class="image-result" src="' + thumb + '" alt="' + title + '" data-id="' + id + '">' +
'</a>' +
'<div class="title cutstr resource-sub-title">' + title + '</div>' +
'<div class="summary resource-summary">' + summary + '</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);
var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
parent.layer.close(index);
});
}
};
$(document).on('click', '.imageDiv', function () {
$(this).addClass('imageActive');
});
$(document).on('click', '.imageActive', function () {
$(this).removeClass('imageActive');
});
$(function () {
getPage('page');
getPage('page1');
})
</script>
</body>
</html>