ThinkAdmin/application/wechat/view/news/push.html

<form data-auto='true' action='{:request()->url()}' style="position:relative">

    <div class="col-xs-2 news-container">
        <h5 class="text-center" style="margin:10px 0">微信图文</h5>
        <div class="news-box">
            {foreach $vo.articles as $key=>$value}
            <div class="news-item transition" data-id="{$value.id}">
                <div class="news-image" style='background-image:url({$value.local_url})'></div>
                <span class="news-title">{$value.title}</span>
            </div>
            <hr/>
            {/foreach}
        </div>
    </div>

    <div class="col-xs-2 list-container">
        <h5 class="text-center" style="margin:10px 0">指定粉丝标签推送 <a data-check-all> 全选 </a></h5>
        <div class="list-item">

            {foreach $fans_tags as $tag}
            <label class='control-label layui-form-label' style='text-align:left!important'>
                <input name="fans_tags[]" value='{$tag.id}' type="checkbox"/> {$tag.name} ({$tag.count})
            </label>
            {/foreach}

            {literal}
            <script id="push" type="text/template">
                {{if data}}
                {{each data as value key}}
                {{if key <= 200}}
                <label>{{value}}</label>
                {{/if}}
                {{/each}}
                {{if (data.length > 200)}}
                <label>...</label>
                {{/if}}
                {{else}}
                <h5></h5>
                {{/if}}
            </script>
            {/literal}
        </div>
        <div id='push-tags' class="list-item"></div>
    </div>
    <div style="clear:both;max-height:60px"></div>

    <div class="bottom-btn text-center">
        <button class="layui-btn">立即推送图文</button>
        <button type='button' data-close='' data-confirm='确定要取消推送图文吗？' class="layui-btn layui-btn-danger">取消推送图文
        </button>
    </div>

</form>

<script>
    require(['jquery', 'template'], function () {
        var $allbtn = $('[data-check-all]').on('click', function () {
            var check_status = check_checked();
            $('input[name*=fans_tags]').map(function () {
                this.checked = !check_status;
            });
            check_checked(), postpush();
        });

        /*重置和全选的效果处理*/
        function check_checked() {
            var allcheck = true;
            $('input[name*=fans_tags]').map(function () {
                (!this.checked) && (allcheck = false);
            });
            return ((allcheck) ? $allbtn.html('重置') : $allbtn.html('全选')), allcheck;
        }

        /*点击每一个选项都触发事件*/
        $('input[name*=fans_tags]').on('click', function () {
            check_checked();
            postpush();
        });

        /*数据异步获取并显示出来*/
        function postpush() {
            var inp = $('input[name*=fans_tags]');
            var group = [];
            for (var i = 0; i < inp.length; i++) {
                if (inp[i].checked === true) {
                    group.push(inp[i].value);
                }
            }
            $.post("{:url('wechat/news/push')}?action=getuser", {group: group.join(',')}, function (ret) {
                var html = template('push', ret);
                document.getElementById('push-tags').innerHTML = html;
            });
        }
    });
</script>

<style>
    body {
        min-width: 500px
    }

    #push-tags {
        max-height: 300px;
        overflow: auto
    }

    .bottom-btn {
        bottom: 0;
        width: 100%;
        padding: 10px;
        display: block;
        background: #F7F7F7;
        position: absolute;
    }

    .news-container {
        width: 200px;
        padding-right: 8px
    }

    .list-container {
        width: 578px;
        padding-left: 0;
        padding-right: 8px;
    }

    .list-container h5 a {
        float: right;
        font-size: 12px;
    }

    .list-container .list-item {
        padding: 8px;
        overflow: auto;
        max-height: 300px;
        border: 1px solid #eee;
    }

    .list-container .list-item:after {
        content: '';
        clear: both;
        width: 100%;
        display: block;
    }

    .list-container .list-item label {
        width: 25%;
        float: left;
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis
    }

    .news-container .news-box {
        padding: 8px;
        border: 1px solid #eee;
    }

    .news-container .news-box hr {
        margin: 4px
    }

    .news-container .news-box .news-item {
        cursor: pointer;
        overflow: hidden;
        position: relative;
        border-radius: 2px;
        border: 1px solid #cecece;
    }

    .news-container .news-box .news-image {
        height: 90px;
        background-size: 100%;
        background-position: center center;
    }

    .news-container .news-box .news-title {
        position: absolute;
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        padding: 2px;
        margin: 0;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: right;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden
    }
</style>