mashangyoujiu/Application/Retail/View/Wxconfig/SourseIndex.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>素材编辑器</title>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/user/css/materialEditor.css" />
    <style>
        .mci_a03_mask{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background:rgba(0,0,0,0.7);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity:0;
        }
        .mcic_inner_mask{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background:rgba(0,0,0,0.7);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity:0;
        }
    </style>
</head>

<body style="background: #f1f1f1;">
<div class="materialBox">
<form id="forms" method="get">
    <div class="material_a">
        <div class="material_a_left">
            <div class="material_a_left_input">

                    <input type="" name="key" id="" value="{$key}" placeholder="标题/作者/摘要" />

            </div>
            <div class="material_a_left_search">
                <img src="__PUBLIC__/user/img/me_search.png" />
            </div>
        </div>
        <div class="material_a_right">
            <div class="mar_synchroniza">微信同步</div>
            <div class="mar_new">新建图文信息</div>
        </div>
    </div>
    <div class="material_b">
        <div class="material_b_inner">
            <div class="mbi_inner <if condition="$type eq 0" >mbi_cheak</if>">全部</div>
            <div type="1" class="mbi_inner <if condition="$type eq 1" >mbi_cheak</if> ">微信</div>
            <div type="2"  class="mbi_inner <if condition="$type eq 2" >mbi_cheak</if>">服务器</div>
        </div>
    </div>
    <input name="type" type="hidden" value="{$type}">
</form>
    <div class="material_c" style="display: none">
        <!--图文模块 start-->
        <empty name="list">
            <div style="display: flex;align-items: center;justify-content: center;padding-top: 100px">
                <img src="__PUBLIC__/user/images/empty.png" alt="">
            </div>

        </empty>
        <volist name="list" id="list">
        <div class="material_c_inner">
            <volist name="list.item" key="k" id="lists">
                <if condition="$list.type eq 1">
                    <if condition="$k eq 1">
                        <div class="mci_a">
                            <div class="mci_a01">
                                <span>{$list.update_time|date="Y-m-d H:i:s",###}</span>
                                <img src="__PUBLIC__/user/img/ms_wechat.png" />
                            </div>
                            <div class="mci_a02">{$lists.title}</div>
                            <div class="mci_a03 mci_a03s" id="mci_a03" style="position: relative;" data-id="{$list.id}" data-url="{$lists.url}">
                                <div class="mci_a03_mask"  style="">预览</div>
                                <img src="/{$lists.thumb_media_src}" />
                            </div>
                        </div>
                        <else />
                        <div class="mcic_inner" data-url="{$lists.url}" data-id="{$lists.id}" style="position: relative">
                            <div class="mcic_inner_mask" >预览</div>
                            <div class="mcic_inner_left">{$lists.title}</div>
                            <div class="mcic_inner_right">
                                <img src="/{$lists.thumb_media_src}" />
                            </div>
                        </div>
                    </if>
                    <else />
                    <if condition="$k eq 1">
                        <div class="mci_a">
                            <div class="mci_a01">
                                <span>{$list.update_time|date="Y-m-d H:i:s",###}</span>
                                <img src="__PUBLIC__/user/images/bendi.png" style="width: 20px;height: 20px" />
                            </div>
                            <div class="mci_a02">{$lists.title}</div>
                            <div class="mci_a03" style="position: relative;" data-id="{$list.id}" data-url="{$lists.url}">
                                <div class="mci_a03_mask"  style="">本地预览，不可群发</div>
                                <img src="/{$lists.thumb_media_src}" />
                            </div>
                        </div>
                        <else />
                        <div class="mcic_inner" data-url="{$lists.url}" data-id="{$lists.id}" style="position: relative">
                            <div class="mcic_inner_mask" >本地预览，不可群发</div>
                            <div class="mcic_inner_left">{$lists.title}</div>
                            <div class="mcic_inner_right">
                                <img src="/{$lists.thumb_media_src}" />
                            </div>
                        </div>
                    </if>
                </if>
            </volist>
            <div class="mci_b">
                <if condition="$list.type eq 1">
                <div class="mci_b_inner sendBth" data-id="{$list.id}">
                    <img src="__PUBLIC__/user/img/ms_send.png" />
                </div>
                    <else />
                    <div class="mci_b_inner ChangeBth" data-id="{$list.id}">
                        <img src="__PUBLIC__/user/images/change.png" />
                    </div>
                </if>
                <div class="mci_b_inner editBtn">
                    <img src="__PUBLIC__/user/img/ms_edit.png" />
                </div>
                <div class="mci_b_inner delBth" data-id="{$list.id}">
                    <img src="__PUBLIC__/user/img/ma_del.png" />
                </div>
            </div>
        </div>
        <!--图文模块 end-->
        </volist>
    </div>
</div>

<!--选择群发的粉丝组-->
<div class="materialAlert_a">
    <div class="materialAlert_a01">
        <select name="user_cate">
            <option value="">请选择粉丝组</option>
            <option value="0">全部粉丝</option>
        </select>
    </div>
</div>

<div class="materialAlert_b">
    <div class="materialAlert_b01">
        <div class="materialAlert_b01_left">
            <img src="__PUBLIC__/user/img/ms_tuwen.png"/>
        </div>
        <div class="materialAlert_b01_right">
            <div class="mbr01" id="create_news">创建微信图文</div>
            <div class="mbr02">微信图文消息会自动同步至微信素材库， 并可以直接群发给粉丝</div>
        </div>
    </div>
    <!--<div class="materialAlert_b01">
        <div class="materialAlert_b01_left">
            <img src="__PUBLIC__/user/img/ms_link.png"/>
        </div>
        <div class="materialAlert_b01_right">
            <div class="mbr01">创建图文链接</div>
            <div class="mbr02">点击图文直接跳转至指定链接，可用于自动回复及认证号菜单 配置，不能同步至微信素材库。</div>
        </div>
    </div>-->
</div>
<div class="materialAlert_c">
    <a href="#" class="webReView" target="_blank">
    <div class="materialAlert_c01">
        <div class="materialAlert_c01_left">
            <img src="__PUBLIC__/user/images/ms_wechat2.png" />
        </div>
        <div class="materialAlert_c01_right">
            <div class="mbr03">网页预览</div>
        </div>
    </div>
    </a>
    <div class="materialAlert_c01" id="preview">
        <div class="materialAlert_c01_left">
            <img src="__PUBLIC__/user/images/ms_mobile.png" />
        </div>
        <div class="materialAlert_c01_right">
            <div class="mbr03">手机预览</div>
        </div>
    </div>
</div>

</body>

<script type="text/javascript" src="__PUBLIC__/user/js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/user/Index/layui/layui.js"></script>
<script type="text/javascript">
    $('body').on('click','#create_news',function () {
         window.location.href="{:U('addWxNews')}"
    })
    $('body').on('click','#preview',function () {
        var sourceid = $(this).attr('sourceid');
        layer.prompt({title: '输入预览人的微信号预览图文素材', formType: 3}, function(pass, index){
            var data = {username:pass,sourceid:sourceid}
            $.ajax({
                url:"{:U('preview')}",
                data:data,
                type:"post",
                success:function (re) {
                    if(re.status){
                        layer.msg(re.msg);
                        layer.close(index);
                    }else{
                        layer.msg(re.msg);
                        layer.close(index);
                    }
                }
            })
        });
    })
    $('.material_a_left_search').click(function () {
        $('#forms').submit();
    });
    $('.mar_synchroniza').click(function () {
        layer.confirm("确认要同步微信公众号中的图文素材吗？",function (index) {
             //执行同步事件
            layer.close(index);
            layer.open({
                type: 3,
                shade: [0.8, '#393D49'],
                icon: 1,
                content: `<span style="color: white;padding-left: 40px;padding-top: 5px;display: block;font-size: 20px;width: 200px">微信同步中</span>`

            });
            $.ajax({
                url:"{:U('onwechatSourse')}",
                success:function (re) {
                    if(re.status){
                        window.location.reload();
                    }
                }
            })
        })
    })
    //全部/微信/服务器切换
    $(".mbi_inner").click(function() {
        var type = $(this).attr('type');
        $('input[name="type"]').val(type);
        $(".mbi_inner").removeClass('mbi_cheak');
        $(this).addClass('mbi_cheak');
        $('#forms').submit();
    })

    layui.use('layer', function() {
        var layer = layui.layer;
        //新建图文消息
        $('.mar_new').click(function(){
            layer.open({
                type: 1,
                title: '新建图文消息',
                area: '600px',
                content: $(".materialAlert_b")
            });
        })

        $('.mci_a03').mouseover(function () {
            $(this).find('.mci_a03_mask').css('opacity',1);
        })
        $('.mci_a03').mouseout(function () {
            $(this).find('.mci_a03_mask').css('opacity',0);
        })
        $('.mcic_inner').mouseover(function () {
            $(this).find('.mcic_inner_mask').css('opacity',1);
        })
        $('.mcic_inner').mouseout(function () {
            $(this).find('.mcic_inner_mask').css('opacity',0);
        })
        $('.mci_a03s').click(function() {
            var url = $(this).attr('data-url');
            $('.webReView').attr('href',url);
            var id = $(this).attr('data-id');
            $('#preview').attr('sourceid',id);
            layer.open({
                type: 1,
                title: '选择预览方式',
                area: '600px',
                content: $(".materialAlert_c"),
                btn: ['取消'],
                btnAlign: 'c'
            });
        })

        $('.mcic_inner').click(function() {
            var url = $(this).attr('data-url');
            $('.webReView').attr('href',url);
            var id = $(this).attr('data-id');
            $('#preview').attr('sourceid',id);
            layer.open({
                type: 1,
                title: '选择预览方式',
                area: '600px',
                content: $(".materialAlert_c"),
                btn: ['取消'],
                btnAlign: 'c'
            });
        })

        //选择分组
        $(".sendBth").click(function() {
            var that = this;
            layer.open({
                type: 1,
                title: '选择群发的粉丝组',
                area: '500px',
                content: $(".materialAlert_a"),
                btn: ['发送', '取消'],
                yes: function(index, layero) {
                    //获取当前选中的组
                    var user_cate = $('select[name="user_cate"]').val();
                    var newsid = $(that).attr('data-id');
                    var data = {user_cate:user_cate,newsid:newsid}
                    $.ajax({
                        url:"{:U('send_news')}",
                        data:data,
                        type:"post",
                        success:function (re) {
                            if(re.status){
                                layer.alert(re.msg);
                            }else{
                                layer.alert(re.msg);
                            }
                        }
                    });

                    $(that).parents(".materialAlert_a").hide();
                    layer.close(index);
                }
            });
        })
        var tipsindex;
        $(".sendBth").hover(function () {
            tipsindex = layer.tips('群发',$(this),{tips:[3, '#000']});
        },function () {
            layer.close(tipsindex);
        })
        $(".ChangeBth").hover(function () {
            tipsindex = layer.tips('转换文章',$(this),{tips:[3, '#000']});
        },function () {
            layer.close(tipsindex);
        })
        $(".delBth").hover(function () {
            tipsindex = layer.tips('删除文章',$(this),{tips:[3, '#000']});
        },function () {
            layer.close(tipsindex);
        })
        $(".editBtn").hover(function () {
            tipsindex = layer.tips('修改文章',$(this),{tips:[3, '#000']});
        },function () {
            layer.close(tipsindex);
        })
        //删除
        $(".delBth").click(function() {
            var that = this;
            var dataid = $(this).attr('data-id');
            var data = {soueceid:dataid};
            layer.open({
                title: '提示',
                content: '删除不可恢复，确认删除吗？',
                btn: ['确认', '取消'],
                yes: function(index, layero) {
                    $.ajax({
                        url:"{:U('delSouece')}",
                        data:data,
                        type:"post",
                        success:function (re) {
                            if(re.status){
                                layer.alert(re.msg);
                            }else{
                                layer.alert(re.msg);
                            }
                            $(that).parents(".material_c_inner").remove();
                            liu();
                            layer.close(index);
                        }
                    })

                }
            });
        })


    });
    $(".ChangeBth").click(function () {
        var id = $(this).attr('data-id');
        layer.confirm("确定无误要转换文章吗？",function () {
            $.ajax({
                url:"{:U('upweixin')}",
                data:{sourceid:id},
                type:"post",
                success:function (re) {
                    if(re.status){
                        layer.alert(re.msg,function () {
                            window.location.reload();
                        });
                    }else{
                        layer.msg(re.msg);
                    }
                }
            })
        })
    })
    window.onload=function () {
        $('.material_c').show();
        liu();
    }
    $(window).on('resize', function() {
        liu();
    })
    function liu() {
        var aw = $('.material_c').width();
        var lie = Math.floor(aw / 280);
        var arr = [];
        for(var i = 0; i < lie * 1; i++) {
            arr.push({
                l: 280 * i + (20 * i),
                t: 20
            });
        }
        var divs = document.querySelectorAll(".material_c_inner");
        for(let j = 0; j < divs.length; j++) {
            var mint = arr[0].t;
            var minindex = 0;
            for(var i = 0; i < arr.length; i++) {
                if(arr[i].t < mint) {
                    mint = arr[i].t;
                    minindex = i;
                }
            }
            $(divs[j]).css({
                top: mint,
                left: arr[minindex].l
            })
            var obj = {
                l: minindex * 300,
                t: arr[minindex].t * 1 + divs[j].offsetHeight * 1 + 20
            }
            arr[minindex] = obj;
        }
    }
</script>

</html>