yunzer/app/admin/view/yunzeradmin/banner.php

{include file="public/header" /}

<!-- 页面样式 -->
<style>
.layui-table-cell { height: 40px; line-height: 40px; }
.layui-table-cell img { height: 36px; width: auto; max-width: 80px; }
.banner-preview-img { max-width: 80px; cursor: pointer; }
.banner-form { padding: 20px; }
.banner-upload-preview { max-width: 100%; margin-top: 10px; }
</style>

<!-- 主体内容 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">
            <span class="layui-icon layui-icon-picture"></span> Banner管理
            <button class="layui-btn layui-btn-sm layui-btn-normal" style="float:right;" id="addBanner">
                <i class="layui-icon">&#xe654;</i> 添加Banner
            </button>
        </div>
        <div class="layui-card-body">
            <table id="bannerTable" lay-filter="bannerTable"></table>
        </div>
    </div>
</div>

<!-- Banner表单 -->
<div id="bannerForm" style="display: none;">
    <form class="layui-form banner-form">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-block">
                <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">图片</label>
            <div class="layui-input-block">
                <div class="layui-upload-drag" id="uploadImage">
                    <i class="layui-icon layui-icon-upload"></i>
                    <p>点击上传或拖拽图片至此处</p>
                    <div id="uploadPreview" style="display: none;">
                        <img src="" alt="Banner图片" class="banner-upload-preview">
                    </div>
                </div>
                <input type="hidden" name="image" id="imageInput">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">链接</label>
            <div class="layui-input-block">
                <input type="text" name="url" placeholder="请输入链接地址" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-block">
                <input type="number" name="sort" value="0" class="layui-input" placeholder="数字越大越靠前">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="radio" name="status" value="1" title="启用" checked>
                <input type="radio" name="status" value="0" title="禁用">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="saveBanner">保存</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<script>
layui.use(['table', 'form', 'upload', 'layer'], function(){
    var table = layui.table,
        form = layui.form,
        upload = layui.upload,
        layer = layui.layer;

    // 表格列配置
    var tableColumns = [[
        {field: 'id', title: 'ID', width: 80, align: 'center', fixed: 'left'},
        {field: 'title', title: '标题', align: 'center'},
        {field: 'image', title: '图片', width: 280, align: 'center', templet: function(d){
            return '<img src="'+ d.image +'" class="banner-preview-img" onclick="previewImage(\''+ d.image +'\')">';
        }},
        {field: 'url', title: '链接', align: 'center', width: 300},
        {field: 'sort', title: '排序', align: 'center', width: 100, sort: true},
        {field: 'create_time', title: '创建时间', align: 'center', width: 180, sort: true},
        {field: 'update_time', title: '更新时间', align: 'center', width: 180, sort: true},
        {title: '操作', align: 'center', width: 120, fixed: 'right', templet: function(d){
            return '<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>' +
                   '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>';
        }}
    ]];

    // 初始化表格
    table.render({
        elem: '#bannerTable',
        url: '/admin/yunzeradmin/bannerlist',
        method: 'get',
        page: true,
        cols: tableColumns,
        limit: 10,
        limits: [10, 20, 30, 50],
        text: { none: '暂无相关数据' }
    });

    // 上传组件配置
    var uploadConfig = {
        elem: '#uploadImage',
        url: '/admin/upload/image',
        accept: 'images',
        acceptMime: 'image/*',
        done: function(res){
            if(res.code === 0){
                $('#uploadPreview').show().find('img').attr('src', res.data.url);
                $('#imageInput').val(res.data.url);
                layer.msg('上传成功');
            }else{
                layer.msg('上传失败');
            }
        }
    };

    // 初始化上传组件
    upload.render(uploadConfig);

    // 监听表格工具条事件
    table.on('tool(bannerTable)', function(obj){
        var data = obj.data;
        if(obj.event === 'edit'){
            showBannerForm(data);
        } else if(obj.event === 'del'){
            layer.confirm('确定删除此Banner？', function(index){
                deleteBanner(data.id, obj);
                layer.close(index);
            });
        }
    });

    // 添加Banner按钮点击事件
    $('#addBanner').on('click', function(){
        showBannerForm();
    });

    // 监听表单提交
    form.on('submit(saveBanner)', function(data){
        var url = data.field.id ? '/admin/yunzeradmin/banneredit' : '/admin/yunzeradmin/banneradd';
        $.post(url, data.field, function(res){
            if(res.code === 0){
                layer.closeAll('page');
                table.reload('bannerTable');
                layer.msg('保存成功');
            }else{
                layer.msg(res.msg);
            }
        });
        return false;
    });

    // 显示Banner表单
    function showBannerForm(data) {
        layer.open({
            type: 1,
            title: data ? '编辑Banner' : '添加Banner',
            content: $('#bannerForm'),
            area: ['500px', '600px'],
            success: function(layero){
                form.render();
                if(data){
                    form.val('bannerForm', data);
                    if(data.image){
                        $('#uploadPreview').show().find('img').attr('src', data.image);
                        $('#imageInput').val(data.image);
                    }
                }
            }
        });
    }

    // 删除Banner
    function deleteBanner(id, obj) {
        $.post('/admin/yunzeradmin/bannerdel', {id: id}, function(res){
            if(res.code === 0){
                obj.del();
                layer.msg('删除成功');
            }else{
                layer.msg(res.msg);
            }
        });
    }
});

// 预览图片
function previewImage(url) {
    layer.photos({
        photos: {
            "data": [{
                "src": url
            }]
        }
    });
}
</script>