ThinkAdmin/app/data/view/config/slider.html

{extend name="../../admin/view/main"}

{block name="content"}
<div class="think-box-shadow">
    <form onsubmit="return false;" id="SliderForm" class='layui-form' autocomplete="off" style="width:750px">
        <div class="text-center font-s14 font-w7">{$title|default='图片数据管理'}<span class="color-desc font-s12">（建议尺寸：690px  250px）</span></div>
        <div class="hr-line-dashed"></div>
        <div class="padding-bottom-15" data-slider-box>
            <div class="layui-form-item text-center">
                <a data-item-add class="layui-btn layui-btn-primary">添加图片</a>
            </div>
        </div>
        <div class="hr-line-dashed"></div>
        <div class="layui-form-item text-center">
            <button class="layui-btn" data-submit>保存数据</button>
        </div>
    </form>
</div>

<div data-item-tpl class="layui-hide">
    <div class="layui-form-item padding-left-40 margin-left-40" data-slider-item>
        <div class="layui-input-inline nowrap" style="width:120px">
            <input data-upload-image name="img[]" type="hidden">
        </div>
        <label class="layui-input-inline nowrap relative margin-bottom-5" style="width:300px">
            <b class="notselect color-green">图片名称 </b>
            <input class="layui-input inline-block" style="width:240px" name="name[]" value="#" required placeholder="请输入图片名称">
            <a data-item-up class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-up margin-0"></i></a>
            <a data-item-dn class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-down margin-0"></i></a>
            <a data-item-rm class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-close margin-0"></i></a>
        </label>
        <label class="layui-input-inline nowrap relative margin-bottom-5" style="width:300px">
            <b class="notselect color-green">跳转规则 </b>
            <input class="layui-input inline-block" style="width:240px" name="rule[]" value="#" required placeholder="请输入跳转规则">
            <a data-prefix="NEWS" data-item-page="{:url('data/news_item/select')}" class="layui-btn layui-btn-primary">选择文章</a>
            <a data-prefix="GOODS" data-item-page="{:url('data/shop_goods/select')}" class="layui-btn layui-btn-primary">选择商品</a>
            <span class="help-block block notselect">若要跳转页面，请选择对应的数据或填写跳转的 URL 地址，不跳转请填写“#”号占位。</span>
        </label>
    </div>
</div>

<label class="layui-hide">
    <textarea id="DefaultData">{$data|default=[]|json_encode}</textarea>
</label>

<style>
    [data-item-page] {
        margin-top: -3px;
        margin-left: 5px;
    }

    [data-item-dn], [data-item-up], [data-item-rm] {
        margin-top: -4px;
        margin-left: 5px;
    }
</style>

<script>
    (function (data) {
        /*! 默认数据渲染 */
        if (data.length < 1) addItem();
        else data.forEach(function (item) {
            addItem(item)
        });
        /*! 初始化上传插件 */
        (function initUpload() {
            $('[data-slider-box] input[data-upload-image]').map(function () {
                if (!$(this).attr('inited')) $(this).attr('inited', true).uploadOneImage();
            });
            setTimeout(initUpload, 100);
        })();
        /*! 数据选项操作 */
        $('[data-slider-box]').on('click', '[data-item-page]', function ($that) {
            $that = $(this), top.setCheckValue = function (value) {
                $that.prevAll('input').val(($that.data('prefix') + '#{v}').replace('{v}', value));
            };
            $.form.iframe($(this).data('item-page'), $that.data('title') || $that.text(), ['930px', '600px']);
        }).on('click', '[data-item-add]', function () {
            addItem();
        }).on('click', '[data-item-rm]', function () {
            $(this).parents('[data-slider-item]').remove();
        }).on('click', '[data-item-up]', function () {
            var item = $(this).parents('[data-slider-item]');
            var prev = item.prev('[data-slider-item]');
            if (item.index() > 0) item.insertBefore(prev);
        }).on('click', '[data-item-dn]', function () {
            var item = $(this).parents('[data-slider-item]');
            var next = item.next('[data-slider-item]');
            if (next) item.insertAfter(next);
        });
        /*! 表单提交处理 */
        $('form#SliderForm').vali(function (ret) {
            var idx, data = [];
            for (idx in ret.img) {
                if (!ret.img[idx]) return $.msg.tips('请上传展示图片哦！');
                data.push({img: ret.img[idx], rule: ret.rule[idx], name: ret.name[idx]});
            }
            $.form.load('{$request->url()}', {data: JSON.stringify(data)}, 'post');
        });
    })(JSON.parse($('#DefaultData').val() || '[]') || []);

    /*! 添加数据选项 */
    function addItem(data) {
        this.$html = $($('[data-item-tpl]').html());
        if (data) for (this.index in data) this.$html.find('[name^="' + this.index + '"]').val(data[this.index]);
        $('[data-item-add]').parent().before(this.$html), setTimeout(function () {
            $.form.reInit();
        }, 100);
    }

</script>

{/block}