furao
/
test


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288
							<!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')}}" 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;
            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: 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;
        }
    </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>

    <div class="tool">
        <div style="float: left">
            <input type="text" class="search-input" placeholder="请输入页面名称" id="title">
            <select name="social_ids" class="search-input" id="tpl_id">
                <option value="0">请选择模版</option>
                @foreach($templateList as $key=>$value)
                    <option value="{{$key}}">{{$value}}</option>
                @endforeach
            </select>
            <button type="button" class="btn" onclick="utils.search()" style="background: #009688;">搜索</button>
            <button type="button" class="btn " onclick="utils.save()"
                    style="background: #009688;">确定
            </button>
        </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">
                    <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>
    </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/resources/{{$siteId}}/{{$type}}',
                pageParams: function (data) {
                    return {
                        page: data.pageIndex + 1,
                        pageSize: data.pageSize,
                        title: $("#title").val(),
                        tplId: $("#tpl_id").val(),
                        ref:list
                    };
                },
                success: function (result) {
                    var len = result.rows.length;
                    if (len > 0) {
                        var content = '<ul class="image-ul">';
                        $(result.rows).each(function (key, value) {

                            var image = value.thumb;
                            if (!image) {
                                image = 'https://admin.yinqingli.com/storage/202112/jpeg/5AaE6rbXyYBGitlad6l3vrSn3JYSePNeyxu8CV1p.jpeg';
                            }
                            content +=
                                '<li class="image-li">' +
                                '<div class="imageDiv">' +
                                '<div class="title" data-id="' + value.id + '">' + value.title + '</div>' +
                                '<img src="' + image + '" alt="' + value.title + '" data-id="' + value.id + '">' +
                                '<div class="summary">' + tips.subStr(value.summary, 20) + '</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');
    });
    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 () {
            $(".imageActive").each(function (key, value) {
                var id = $(value).find('.title').attr('data-id');
                var title = $(value).find('.title').text();
                var thumb = $(value).find('img').attr('src');
                var summary = $(value).find('.summary').text();

                var str =
                    '<div class="js-item img-item resource-list {{$type}}" style="cursor:pointer;">' +
                    '<div class="box">' +
                    '<a class="thumb">' +
                    '<img class="image-result" src="' + thumb + '" alt="' + title + '" data-id="' + id + '">' +
                    '</a>' +
                    '<div class="title cutstr resource-sub-title">' + title + '</div>' +
                    '<div class="summary resource-summary">' + summary + '</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);
                var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                parent.layer.close(index);

            });
        }
    };

    $(document).on('click', '.imageDiv', function () {
        $(this).addClass('imageActive');
    });

    $(document).on('click', '.imageActive', function () {
        $(this).removeClass('imageActive');
    });

    $(function () {
        getPage('page');
        getPage('page1');
    })
</script>
</body>
</html>