furao
/
test


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314
							<!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('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: 4px 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">当前版块</li>
            <li class="nav-li">全部图片</li>
        </ul>
    </nav>


    <div class="tool">
        <div style="float: left">
            <input type="text" class="search-input" placeholder="请输入图片名称" id="title">
            <button type="button" class="btn" onclick="utils.search()">搜索</button>
        </div>
        <div style="float: left;margin-left: 50px;">
            <button type="button" class="btn" name=file_upload>本地上传</button>
            <input type="file" value="" style="display: none" name="uploadFile">
        </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">
                    <button type="button" class="btn btn-success" onclick="utils.prev(this,'now')">prev</button>
                    <button type="button" class="btn btn-info" onclick="utils.next(this,'now')">next</button>
                    当前页: <span class="pageNo">1</span>
                </div>
            </li>
            <li class="section-li">
                <div class="img-list" id="all">

                </div>

                <div class="page">
                    <button type="button" class="btn btn-success" onclick="utils.prev(this,'all')">prev</button>
                    <button type="button" class="btn btn-info" onclick="utils.next(this,'all')">next</button>
                    当前页: <span class="pageNo">1</span>
                </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>
    $(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 () {
        // var _this = this;
        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();
        formData.append('file', $(this)[0].files[0]);
        var ln;
        $.ajax({
            url: '/admin/image/upload?siteId='+siteId,
            type: 'POST',
            cache: false,
            data: formData,
            processData: false,
            contentType: false,
            beforeSend: function () {
                ln = layer.load();
            },
            complete: function () {
                layer.close(ln);
            },
            success: function (result) {

                utils.getData(1, 'now');
                utils.getData(1, 'all');
            },
            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;
                    if ($(this).index() === 0) {

                        $(".pageNo").eq(0).text(1);
                        type = 'now';
                    } else {
                        type = 'all';
                        $(".pageNo").eq(1).text(1);
                    }
                    utils.getData(1, type,$("#title").val())
                }
            });

        },
        prev: function (_this, type) {
            var obj = $(_this).parent().find(".pageNo");
            var page = parseInt(obj.text());
            if (page > 1) {
                obj.text(page - 1);
                utils.getData(page - 1, type);
            }
        },
        next: function (_this, type) {
            var obj = $(_this).parent().find(".pageNo");
            var page = parseInt(obj.text());
            obj.text(page + 1);
            utils.getData(page + 1, type)
        },
        getData: function (page, type,title) {
            if(!title){
                title='';
            }
            var url = '/admin/image/index?page=' + page+'&title='+title;
            if (type === 'now') {
                url += '&siteId={{$siteId}}'
            }
            var config = {
                url: url,
                success: function (result) {

                    var len = result.rows.length;
                    var content;
                    if (len > 0) {
                        content = '';
                        for (var i = 0; i < len; i++) {
                            if (i % 6 === 0) {
                                content += '<ul class="image-ul">';
                            }
                            content += '<li class="image-li"><div class="imageDiv">' +
                                ' <div style="height:100px"><img src="' + result.rows[i]['url'] + '" alt=""></div>' +
                                '<div>'+tips.subStr(result.rows[i]['title'])+'</div></div>'+
                                '</li>';

                            if (i % 6 === 5 || i === (len - 1)) {
                                content += '</ul>';
                            }
                        }

                    } else {
                        content = '<div style="padding:10px;">无数据</div>';
                    }
                    $("#" + type).html(content);
                }
            };
            tips.ajax(config)
        }
    };
    $(document).on('click','.imageDiv',function () {
        if ($(this).hasClass('imageActive')){
            $(this).removeClass('imageActive')
        } else {
            $(".imageDiv").removeClass('imageActive');
            $(this).addClass('imageActive');
        }
    });
    $(function () {
        utils.getData(1, 'now');
        utils.getData(1, 'all');
    })
</script>
</body>
</html>