furao
/
test


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416
							<!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>