修复资源分类pages
This commit is contained in:
parent
c39d6cda3e
commit
8e96995e1c
@ -9,13 +9,25 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="layui-form-item">
|
<div class="layui-form-item">
|
||||||
<label class="layui-form-label">图标</label>
|
<label class="layui-form-label">图标</label>
|
||||||
<div class="layui-input-block">
|
<div class="layui-input-block" style="position:relative;">
|
||||||
<select name="icon_class" lay-verify="required" lay-search="">
|
<input type="text" readonly class="layui-input" name="icon_class" id="icon_class_input"
|
||||||
<option value="">请输入layui图标</option>
|
value="{$lists['icon_class']|default=''}" placeholder="请选择图标" autocomplete="off"
|
||||||
{foreach($iconfont as $icon_v)}
|
style="background:#fff;cursor:pointer;">
|
||||||
<option value="{$icon_v['icon_css']}" {if($icon_v['icon_css'] == $lists['icon_class'])}selected{/if}>{$icon_v['icon_css']} {$icon_v['icon_name']}</option>
|
<div class="icon-dropdown" id="iconDropdown"
|
||||||
{/foreach}
|
style="display:none;position:absolute;z-index:9999;width:400px;max-height:320px;overflow:auto;background:#fff;border:1px solid #eee;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,0.08);padding:12px;">
|
||||||
</select>
|
<input type="text" class="layui-input" id="iconSearchInput" placeholder="搜索图标名称或class"
|
||||||
|
style="margin-bottom:10px;">
|
||||||
|
<div class="icon-card-list">
|
||||||
|
{foreach $iconfont as $icon_v}
|
||||||
|
<div class="icon-card{if($icon_v['icon_css'] == $lists['icon_class'])} selected{/if}"
|
||||||
|
data-icon="{$icon_v['icon_css']}" data-name="{$icon_v['icon_name']}"
|
||||||
|
data-css="{$icon_v['icon_css']}">
|
||||||
|
<i class="layui-icon {$icon_v['icon_css']}" style="font-size:24px;"></i>
|
||||||
|
<div class="icon-name">{$icon_v['icon_name']}</div>
|
||||||
|
</div>
|
||||||
|
{/foreach}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="layui-form-item">
|
<div class="layui-form-item">
|
||||||
@ -37,22 +49,100 @@
|
|||||||
<button type="button" class="layui-btn" onclick="save()">保存</button>
|
<button type="button" class="layui-btn" onclick="save()">保存</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script type="text/javascript">
|
<script>
|
||||||
layui.use(['layer','form'],function(){
|
layui.use(['jquery'], function () {
|
||||||
form = layui.form;
|
var $ = layui.jquery;
|
||||||
layer = layui.layer;
|
var $input = $('#icon_class_input');
|
||||||
$ = layui.jquery;
|
var $dropdown = $('#iconDropdown');
|
||||||
});
|
var $search = $('#iconSearchInput');
|
||||||
|
var $cards = $dropdown.find('.icon-card');
|
||||||
function save(){
|
// 显示下拉
|
||||||
$.post('{$config["admin_route"]}yunzer/menuedit',$('form').serialize(),function(res){
|
$input.on('focus click', function (e) {
|
||||||
if(res.code>0){
|
var offset = $input.offset();
|
||||||
layer.msg(res.msg,{'icon':2});
|
$dropdown.css({
|
||||||
}else{
|
left: '-15px',
|
||||||
layer.msg(res.msg,{'icon':1});
|
top: '40px',
|
||||||
setTimeout(function(){parent.window.location.reload();},1000);
|
display: 'block'
|
||||||
|
});
|
||||||
|
$search.val('').trigger('input');
|
||||||
|
});
|
||||||
|
// 选中卡片
|
||||||
|
$dropdown.on('click', '.icon-card', function () {
|
||||||
|
$cards.removeClass('selected');
|
||||||
|
$(this).addClass('selected');
|
||||||
|
$input.val($(this).data('icon'));
|
||||||
|
$dropdown.hide();
|
||||||
|
});
|
||||||
|
// 搜索
|
||||||
|
$search.on('input', function () {
|
||||||
|
var val = $(this).val().toLowerCase();
|
||||||
|
$cards.each(function () {
|
||||||
|
var name = $(this).data('name').toLowerCase();
|
||||||
|
var css = $(this).data('css').toLowerCase();
|
||||||
|
if (name.indexOf(val) !== -1 || css.indexOf(val) !== -1) {
|
||||||
|
$(this).show();
|
||||||
|
} else {
|
||||||
|
$(this).hide();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
// 点击外部关闭
|
||||||
|
$(document).on('mousedown', function (e) {
|
||||||
|
if (!$(e.target).closest('.icon-dropdown').length && !$(e.target).is($input)) {
|
||||||
|
$dropdown.hide();
|
||||||
}
|
}
|
||||||
},'json');
|
});
|
||||||
}
|
// 回显
|
||||||
|
var selected = $input.val();
|
||||||
|
if (selected) {
|
||||||
|
$cards.each(function () {
|
||||||
|
if ($(this).data('icon') == selected) {
|
||||||
|
$(this).addClass('selected');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
<style>
|
||||||
|
.icon-card-list {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-card {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 52px;
|
||||||
|
height: 52px;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: border 0.2s, box-shadow 0.2s;
|
||||||
|
background: #fafbfc;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #666;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-card.selected {
|
||||||
|
border: 2px solid #409eff;
|
||||||
|
box-shadow: 0 2px 8px rgba(64, 158, 255, 0.10);
|
||||||
|
color: #409eff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-card .icon-name {
|
||||||
|
margin-top: 4px;
|
||||||
|
font-size: 9px;
|
||||||
|
text-align: center;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-dropdown {
|
||||||
|
min-width: 320px;
|
||||||
|
max-width: 600px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
{include file="public/tail" /}
|
{include file="public/tail" /}
|
||||||
@ -94,6 +94,7 @@ class ResourcesController extends BaseController
|
|||||||
// 将数据传递给视图
|
// 将数据传递给视图
|
||||||
View::assign('category', $category);
|
View::assign('category', $category);
|
||||||
View::assign('data', $resources);
|
View::assign('data', $resources);
|
||||||
|
View::assign('page', $resources->render()); // 新增这一行
|
||||||
|
|
||||||
return View::fetch('list');
|
return View::fetch('list');
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user