btss/php/view/admin/wechat/material_add.html

{include file="common/header"/}
<link rel="stylesheet" href="/static/admin/css/material/material.css">
<div class="LM-container">
    <div class="LM-main">
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title">
                <li class="layui-this">图文</li>
                <li >图片</li>
                <li>视频</li>
                <li>音频</li>
            </ul>
            <div class="layui-tab-content" style="padding: 15px;">
                <div class="layui-tab-item layui-show">
                    <form action="" class="layui-form" lay-filter="form">
                    <div class="media" style="">
                        <div class="media-left">
                            {if $info}
                            <div class="media-border-title js-action action" onmouseover="show(this)" onmouseout="hide(this)" onclick="edit(this,0)">
                                <div style="position: relative;text-align:center;">
                                    <img class="type-img-0" src="{$info[0]['cover']}" style="max-width:275px;max-height:150px;">
<!--                                    <span class="img-text">封面图片</span>-->
                                    <h5 class="type-title-0" style="position: absolute; bottom: 0; width: 100%; background: #000; opacity:0.5; color: #fff; margin: 0; padding: 5px 0;text-align:left;">{$info[0]['title']}</h5>
                                </div>
                                <div class="actions" style="display: none;"><span class="edit">编辑</span></div>
                                <span class="editting">编辑中</span>
                                <input type="hidden" name="hidden0" id="title0" value="{$info[0]['title']}">
                                <input type="hidden" name="hidden0" id="author0" value="{$info[0]['author']}">
                                <input type="hidden" name="hidden0" id="show_cover0" value="{$info[0]['show_cover']}">
                                <input type="hidden" name="hidden0" id="content_source_url0" value="{$info[0]['content_source_url']}">
                                <input type="hidden" name="hidden0" id="cover0" value="{$info[0]['thumb_media_id']}">
                                <input type="hidden" name="hidden0" id="need_open_comment0" value="{$info[0]['need_open_comment']}">
                                <input type="hidden" name="hidden0" id="only_fans_can_comment0" value="{$info[0]['only_fans_can_comment']}">
                                <input type="hidden" name="hidden0" id="digest0" value="{$info[0]['digest']}">
                                <input type="hidden" name="hidden0" id="content0" value="{$info[0]['content']}">
                            </div>
                            {else /}
                            <div class="media-border-title js-action action" onmouseover="show(this)" onmouseout="hide(this)" onclick="edit(this, 0)">
                                <div style="position: relative;text-align:center;">
                                    <img class="type-img-0" src="" style="max-width:275px;max-height:150px;display:none;">
                                    <span class="img-text">封面图片</span>
                                    <h5 class="type-title-0" style="position: absolute; bottom: 0; width: 100%; background: #000; opacity:0.5; color: #fff; margin: 0; padding: 5px 0;text-align:left;">标题</h5>
                                </div>
                                <div class="actions" style="display: none;"><span class="edit">编辑</span></div>
                                <span class="editting">编辑中</span>
                                <input type="hidden" name="hidden0" id="title0" value="">
                                <input type="hidden" name="hidden0" id="author0" value="">
                                <input type="hidden" name="hidden0" id="show_cover0" value="1">
                                <input type="hidden" name="hidden0" id="content_source_url0" value="">
                                <input type="hidden" name="hidden0" id="cover0" value="">
                                <input type="hidden" name="hidden0" id="need_open_comment0" value="1">
                                <input type="hidden" name="hidden0" id="only_fans_can_comment0" value="0">
                                <input type="hidden" name="hidden0" id="digest0" value="">
                                <input type="hidden" name="hidden0" id="content0" value="">
                            </div>
                            {/if}
                            {if count($info)>1}
                            {volist name="info" id='vo' key='k' offset='1'}
                            <div class="media-body js-action" onmouseover="show(this)" onmouseout="hide(this)"
                                 onclick="edit(this, {$k})"><p class="type-title-1">{$vo.title}</p>
                                <div class="media-body-div"><img class="type-img-1" src="{$vo.cover}"
                                                                 style="max-width:62px;max-height:62px;"></div>
                                <div class="actions" style="display: none;"><span class="edit">编辑</span></div>
                                <span class="editting">编辑中</span>
                                <input type="hidden" name="hidden1" id="title{$k}" value="{$vo.title}">
                                <input type="hidden" name="hidden1"  id="author{$k}" value="{$vo.author}">
                                <input type="hidden" name="hidden1" id="show_cover{$k}" value="{$vo.show_cover}">
                                <input type="hidden"  name="hidden1"  id="content_source_url{$k}" value="{$vo.content_source_url}">
                                <input type="hidden" name="hidden1" id="cover{$k}" value="{$vo.thumb_media_id}">
                                <input type="hidden"  name="hidden1" id="need_open_comment{$k}" value="{$vo.need_open_comment}">
                                <input type="hidden" name="hidden1" id="only_fans_can_comment{$k}" value="{$vo.only_fans_can_comment}">
                                <input type="hidden" name="hidden1" id="digest{$k}" value="{$vo.digest}">
                                <input type="hidden"  name="hidden1" id="content{$k}"  value="{$vo.content}"></div>
                            {/volist}
                            {/if}
                            <div class="media-body">
                                        <span class="media-plus">
                                            <a href="javascript:;"><i class="layui-icon "></i></a>
                                        </span>
                            </div>


                        </div>

                        <div class="media-right" id="dir" dir="0" style="">
                            <div class="layui-form-item">
                                <label class="layui-form-label"><span style="color:red;"> * </span> 标题</label>
                                <div class="layui-input-block">
                                    <input type="text" id="form_title" class="layui-input" onchange="changeElement('title')">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">作者</label>
                                <div class="layui-input-block">
                                    <input type="text" name="author" id="form_author" class="layui-input" onchange="changeElement('author')">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">是否显示封面</label>
                                <div class="layui-input-block">
                                    <input type="radio" lay-filter="radio" lay-skin="primary" name="show_cover" class="show_cover"  value="0" title="不打开">
                                    <input type="radio" lay-filter="radio" lay-skin="primary" name="show_cover" class="show_cover"  value="1" title="打开" checked>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">原文链接</label>
                                <div class="layui-input-block">
                                    <input type="text" name="content_source_url" id="form_content_source_url" class="layui-input" onchange="changeElement('content_source_url')">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label"><span style="color:red;"> * </span>封面</label>
                                <div class="layui-upload-drag" id="coverUpload">
                                    <i class="layui-icon"><img id="coverImage" width="260px" height="126px" alt="" src=""></i>
                                    <input type="hidden" name="cover" id="cover">
                                    <p>点击上传，或将文件拖拽到此处</p>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">打开评论</label>
                                <div class="layui-input-block">
                                    <input type="radio" lay-filter="radio" lay-skin="primary" name="need_open_comment" class="need_open_comment"  value="0" title="不打开">
                                    <input type="radio" lay-filter="radio" lay-skin="primary" name="need_open_comment" class="need_open_comment"  value="1" title="打开" checked>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">仅粉丝评论</label>

                                <div class="layui-input-block">
                                    <input type="radio" lay-filter="radio" lay-skin="primary" name="only_fans_can_comment" class="only_fans_can_comment"  value="0" title="所有人评论" checked>
                                    <input type="radio" lay-filter="radio" lay-skin="primary" name="only_fans_can_comment" class="only_fans_can_comment"  value="1" title="粉丝评论">
                                </div>
                            </div>

                            <div class="layui-form-item layui-form-text">
                                <label class="layui-form-label"><span style="color:red;"> *</span> 摘要</label>
                                <div class="layui-input-block">
                                    <textarea id="form_digest" name="digest" class="layui-textarea" onchange="changeElement('digest')"></textarea>
                                </div>
                            </div>
                            <div class="layui-form-item layui-form-text" style="">
                                <label class="layui-form-label"><span style="color:red;"> *</span> 正文</label>
                                <div class="layui-input-block" style="">
                                    <script id="container" name="content" type="text/plain"></script>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button type="button" class="layui-btn" onclick="save();">立即提交</button>
                                    {if $info}
                                    <button type="button" class="layui-btn layui-btn-danger" onclick="materialDel(this,{$info[0]['material_id']})">删除素材</button>
                                    {/if}
                                </div>
                            </div>


                        </div>
                    </div>
                    </form>
                </div>

                <div class="layui-tab-item">
                    <label class="layui-form-label">上传图片</label>

                    <div class="layui-upload-drag" id="imageUpload">
                        <i class="layui-icon"></i>
                        <p>点击上传，或将文件拖拽到此处</p>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <form action="" class="layui-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label">视频标题</label>
                            <div class="layui-input-block">
                                <input type="text" name="file_name" lay-verify="required" lay-reqtext="视频标题，岂能为空？" placeholder="请输入" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">视频描述</label>
                            <div class="layui-input-block">
                                <input type="text" name="des" lay-verify="required" lay-reqtext="视频描述，岂能为空？" placeholder="请输入" autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <label class="layui-form-label">上传视频</label>

                        <div class="layui-upload-drag" id="videoUpload">

                            <input type="hidden" class="" name="url" value="" lay-verify="required" lay-reqtext="视频，岂能为空？">
                            <i class="layui-icon">
                                <video src="" width="400" height="200"></video></i>
                            <p>点击上传，或将文件拖拽到此处</p>
                        </div>

                        <div class="layui-input-block">
                            <button type="submit" class="layui-btn" lay-submit="" lay-filter="video">立即提交</button>
                        </div>

                    </form>

                </div>
                <div class="layui-tab-item">
                    <label class="layui-form-label">上传音频</label>

                    <div class="layui-upload-drag" id="voiceUpload">
                        <i class="layui-icon"></i>
                        <p>点击上传，或将文件拖拽到此处</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


{include file="common/footer"/}
<script src="/static/plugins/jquery-3.4.1/jquery-3.4.1.min.js"></script>
{$ueditor|raw};

<script>
    var form ='';
    var info = {:json_encode($info)};

    layui.use(['layer','element','form','upload'],function(){
        var element = layui.element,layer= layui.layer, upload = layui.upload,$ = layui.jquery;
        form=layui.form;
        UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
        UE.Editor.prototype.getActionUrl = function (action) {
            if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {
                return '{:url("UeditUploadImage")}';
            } else if (action == 'uploadvideo') {
                return '{:url("UeditUploadVideo")}';
            }else if(action == 'uploadvoice'){
                return '{:url("UeditUploaVoice")}';
            }else if (action == 'listimage') {
                return '{:url("getListImage")}';
            } else {
                return this._bkGetActionUrl.call(this, action);
            }
        };
        UE.getEditor('container').addListener("selectionchange", function () {
            changeElement('content');
        });
        var ue = UE.getEditor('container', {scaleEnabled: false});

        //设定文件大小限制
        upload.render({
            elem: '#coverUpload'
            ,url: "{:url('imageUpload')}"
            ,size: 2048 //限制文件大小，单位 KB
            ,done: function(res){
                if(res.code>0){
                    var dir = $("#dir").attr('dir');
                    console.log(dir);
                    $('#coverUpload').find('img').attr('src',res.data.url);
                    $(".type-img-"+ dir).attr('src',res.data.url).show();

                    $(".type-img-"+ dir).next().hide();
                    $("#cover"+ dir).val(res.data.media_id);
                    layer.msg(res.msg);

                }else{

                    layer.msg(res.msg);
                }
            }
        });

        //设定图片大小限制
        upload.render({
            elem: '#imageUpload'
            ,url: "{:url('imageUpload')}"
            ,size: 2048 //限制文件大小，单位 KB
            ,done: function(res){

            }
        });
        //设定视频大小限制
        upload.render({
            elem: '#videoUpload'
            ,url: "{:url('uploads/videoUploads')}"
            ,accept: 'video' //视频
            ,size: 10240 //限制文件大小，单位 KB
            ,done: function(res){
                if(res.code>0){
                    $('#videoUpload').find('input').val(res.url);
                    $('#videoUpload').find('input').val(res.url);
                    $('#videoUpload').find('video').attr('src',res.url);
                    layer.msg(res.msg);
                }else{
                    layer.msg(res.msg);
                }
                
            }
        });

        //设定音频大小限制
        upload.render({
            elem: '#voiceUpload'
            ,url: "{:url('voiceUpload')}"
            ,accept: 'audio' //音频
            ,size: 2048 //限制文件大小，单位 KB
            ,done: function(res){
                if(res.code>0){

                    layer.msg(res.msg);

                }else{

                    layer.msg(res.msg);
                }
            }
        });

        form.on('submit(video)',function (data) {

            $.post('{:url("videoUpload")}',data.field,function (res) {
                if(res.code>0){
                    layer.msg('上传成功');
                }else {

                    layer.msg('上传失败');
                }
            });
            return false;
        });

        $(".media-plus").click(function () {
            var num = $(this).parents(".media-left").find(
                ".media-body").length;
            if (num > 7) {
                showMessage('error', '最多只可以加入8条图文消息。');
                return false;
            }
            if(info.length>0){
                htmlEdit = '';

            }else{
                htmlEdit = '<span class="del" onclick="removeMedia(this)">删除</span>';

            }
            var html = '';
            html += '<div class="media-body js-action" onmouseover="show(this)" onmouseout="hide(this)" onclick="edit(this, ' + num + ')">';
            html += '<p class="type-title-' + num + '">标题</p><div class="media-body-div"><img class="type-img-' + num + '" src="" style="max-width:62px;max-height:62px;display:none;"><span class="img-text">缩略图</span></div>';
            html += '<div class="actions"><span class="edit">编辑</span>'+htmlEdit+'</div>';
            html += '<span class="editting">编辑中</span>';
            html += '<input type="hidden" name="hidden' + num + '" id="title' + num + '" value="">';
            html += '<input type="hidden" name="hidden' + num + '" id="author' + num + '" value="">';
            html += '<input type="hidden" name="hidden' + num + '" id="show_cover' + num + '" value="1">';
            html += '<input type="hidden" name="hidden' + num + '" id="content_source_url' + num + '" value="">';
            html += '<input type="hidden" name="hidden' + num + '" id="cover' + num + '" value="">';
            html += '<input type="hidden" name="hidden' + num + '" id="need_open_comment' + num + '" value="1">';
            html += '<input type="hidden" name="hidden' + num + '" id="only_fans_can_comment' + num + '" value="0">';
            html += '<input type="hidden" name="hidden' + num + '" id="digest' + num + '" value="">';
            html += '<input type="hidden" name="hidden' + num + '" id="content' + num + '" value="">';
            html += '</div>';
            $(this).parents(".media-left").find(".media-body").eq(num -1).before(html);
        });


        $("#title").change(function () {
            if ($(this).val() == '') {
                $(this).parents(".media").find("h5.type-title").html('标题');
            } else {
                $(this).parents(".media").find("h5.type-title").html($(this).val());
            }
        });


        //单选按钮
        form.on('radio(radio)',function (data) {
            var dir = $("#dir").attr('dir');
            var name = $(this).attr('class');
            console.log(name);
            console.log(name);
            $("#" + name + dir).val($(this).val());
        })
    });


    function changeElement(name) {
        var dir = $("#dir").attr('dir');
        if (name == 'content') {
            var content = UE.getEditor('container').getContent();
            $("#" + name + dir).val(content);
        } else {
            $("#" + name + dir).val($("#form_" + name).val());
        }
        if (name == 'title') {
            if ($("#form_" + name).val() == '') {
                $(".type-title-" + dir).html('标题');
            } else {
                $(".type-title-" + dir).html($("#form_" + name).val());
            }
        }
    }

    //切换编辑
    function edit(event, num) {
        $(".js-action").removeClass('action');
        $(event).addClass('action');
        $("#dir").attr('dir', num);
        var title = $("#title" + num).val();
        var author = $("#author" + num).val();
        var cover = $(".type-img-" + num).attr('src');
        var need_open_comment = $("#need_open_comment" + num).val();
        var only_fans_can_comment = $("#only_fans_can_comment" + num).val();
        var digest = $("#digest" + num).val();
        var content = $("#content" + num).val();
        var content_source_url = $("#content_source_url" + num).val();
        $("#form_title").val(title);
        $("#form_author").val(author);
        $("#imgLogo1").attr('src', '');

        if (cover != "") {
            $("#coverImage").attr('src', cover);
        }else{
            $("#coverImage").attr('src', '');

        }
        obj = {need_open_comment:need_open_comment,only_fans_can_comment:only_fans_can_comment,digest:digest};
        form.val("form", obj);
        UE.getEditor('container').setContent(content);
        $("#form_content_source_url").val(content_source_url);
    }

    function save() {
        var contents = {};
        var num = $(".js-action").length;
        var flag = true;
        for (var i = 0; i < num; i++) {

            $("input[name='hidden" + i + "']").each(function (index) {
                if ($("input[name='hidden" + i + "']").eq(0).val() == "") {
                    showMessage('error', '第' + (i + 1) + '篇文章的标题不能为空');
                    flag = false;
                    return false;
                } else if ($("input[name='hidden" + i + "']").eq(4).val() == "") {
                    showMessage('error', '第' + (i + 1) + '篇文章的封面图片不能为空');
                    flag = false;
                    return false;
                }
                else if ($("input[name='hidden" + i + "']").eq(7).val() == "") {
                    showMessage('error', '第' + (i + 1) + '篇文章的摘要不能为空');
                    flag = false;
                    return false;
                } else if ($("input[name='hidden" + i + "']").eq(8).val() == "") {
                    showMessage('error', '第' + (i + 1) + '篇文章的正文不能为空');
                    flag = false;
                    return false;
                } else {

                }
            });
            var title =  $("input[name='hidden" + i + "']").eq(0).val();
            var author =  $("input[name='hidden" + i + "']").eq(1).val();
            var show_cover =  $("input[name='hidden" + i + "']").eq(2).val();
            var content_source_url =  $("input[name='hidden" + i + "']").eq(3).val();
            var thumb_media_id =  $("input[name='hidden" + i + "']").eq(4).val();
            var need_open_comment =  $("input[name='hidden" + i + "']").eq(5).val();
            var only_fans_can_comment =  $("input[name='hidden" + i + "']").eq(6).val();
            var digest =  $("input[name='hidden" + i + "']").eq(7).val();
            var content =  $("input[name='hidden" + i + "']").eq(8).val();

            contents[i] = {title:title,author:author,show_cover:show_cover,content_source_url:content_source_url
                    ,thumb_media_id:thumb_media_id,need_open_comment:need_open_comment,only_fans_can_comment:only_fans_can_comment,
                    digest:digest,content:content};


        }
        if (flag == false) {

            return false;
        }
        var load;
        if(info.length>0){
            url = "{:url('materialEdit')}";
            mediaId = info[0]['material_id']
        }else{
            url = "{:url('materialAdd')}"
            mediaId = '';
        }
        $.ajax({
            type: "post",
            url: url,
            async: true,
            data: {
                'mediaId':mediaId,"content": contents
            },
            success: function (res) {
                layer.close(load);
                if (res.code > 0) {
                    layer.msg(res.msg, {time: 2000}, function () {
                        // layer.closeAll("iframe");
                        //刷新父页面
                        // parent.location.reload();
                    });
                } else
                {
                    layer.alert(res.msg)
                    return false;
                }
            }, beforeSend: function (res) {
                load = layer.load(1);
                return load;
            }, error: function (res) {
                layer.close(load);
            }
        });
    }


    function showMessage(type, msg, url) {
        layer.alert(msg);
        return false;
    }
    function removeMedia(obj) {
        $(obj).parents(".media-body").remove();
    }

    function show(obj) {
        $(obj).children('.actions').show();
    }

    function hide(obj) {
        $(obj).children('.actions').hide();
    }

    function materialDel(obj,id) {
        layer.confirm('{:lang("Are you sure you want to delete it")}', function(index){
            loading =layer.load(1, {shade: [0.1,'#fff']});
            $.post("{:url('materialDel')}",{id:id},function(res){
                layer.close(loading);
                layer.close(index);
                if(res.code>0){
                    layer.msg(res.msg,{time:1000,icon:1});
                    obj.del();
                }else{
                    layer.msg(res.msg,{time:1000,icon:2});
                }
            });
        });

    }




</script>