publish.html 30.9 KB

Raw Blame History Permalink

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Yoho!Buy运营平台</title>
    <script src="/pfcms/js/include.js"></script>
    <script src="/pfcms/js/ajaxfileupload.js"></script>
    <script src="/pfcms/js/jquery.imageUpload.js"></script>
    <script charset="utf-8" src="/pfcms/ueditor/ueditor.config.js"></script>
    <script charset="utf-8" src="/pfcms/ueditor/ueditor.all.min.js"></script>
    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
    <script type="text/javascript" charset="utf-8" src="/pfcms/ueditor/lang/zh-cn/zh-cn.js"></script>
    <style>
        .btn-long {
            width: 120px;
            height: 37px;
            line-height: 37px;
            font-size: 15px;
            color: white;
            border-radius: 5px;
            display: inline-block;
            cursor: pointer;
            text-align: center;
        }
        .btn-long:hover {
            opacity: 0.9;
        }

        .tag{
            display: block;
            float: left;
            padding: 2px 5px;
            background: #1caf9a;
            margin-right: 5px;
            margin-bottom: 5px;
            margin-top: 5px;
            -moz-border-radius: 2px;
            -webkit-border-radius: 2px;
            border-radius: 2px;
            font-size: 13px;
        }
        .goodTag{
            display: block;
            float: right;
            font-size: 18px;
        }

    </style>


</head>
<body class="easyui-layout "  fit="true">
<div  region="north" style="height: 100px;">
    <script>
        document.write(addHead('种草社区管理', '种草内容发布'));
    </script>

</div>
<div region="center" id="labelGroupList" style="margin-left: 20px;width: 100%">
    <div id="tt" class="easyui-layout"  style="overflow-y: scroll;overflow-x: auto;">
        <form name="publishArticleForm" id="publishArticleForm" method="post"   >
            <input id="sort" name="sort" value="2" hidden>
            <div style="margin-top: 20px;margin-left: 30px">
                <table border="0" style="width:95%;margin-top:5px;line-height:30px;" id="tab">


                    <tr style="height: 60px">
                        <td style="width:100%; word-wrap:break-word;" >
                            <span style="color:red">*</span><label style="font-size: 14px;">标题</label> <br>

                            <div style="width:600px; word-wrap:break-word;float: left;position: relative" >
                                <input id="title" name="title" style="width:600px "  class="easyui-textbox" />
                            </div>

                            <!--<div style="clear: both;"> <span id="content-count">0</span>/500</div>-->
                        </td>
                    </tr>

                    <tr style="height: 60px">
                        <td style="width:100%; word-wrap:break-word;" >
                            <label style="font-size: 14px;">副标题</label> <br>

                            <div style="width:600px; word-wrap:break-word;float: left;position: relative" >
                                <input id="subtitle" name="subtitle" style="width:600px "  class="easyui-textbox" />
                            </div>

                            <!--<div style="clear: both;"> <span id="content-count">0</span>/500</div>-->
                        </td>
                    </tr>

                    <tr style="height: 60px">
                        <td style="width:100%;">
                            <label style="font-size: 14px;">版权声明</label> <br>
                            <input id="copyright" name="copyright" class="easyui-combobox" style="width:600px; "/><br>
                        </td>
                    </tr>

                    <tr style="height: 60px">
                        <td style="width:100% ">
                            <div  style="float: left;width:700px;"    >
                                <span style="color:red">*</span><label style="font-size: 14px;">选择用户</label>  <br>
                                <input id="articleUid" name="authorUid" style="width:600px "  class="easyui-textbox" />
                                <a  id="userBotton" class="btn btn-small"   style="font-size: 18px; " >确认</a>
                                <br>
                                <span style="color:red"> 必填项，选择某个用户身份后，才能发布</span>
                            </div>
                            <div id="userInfo"  style="float: left;margin-left: 30px;">
                            </div>
                        </td>
                    </tr>

                    <tr style="height: 60px">
                        <td style="width:100% ">
                            <label style="font-size: 14px;">正文内容</label> <br>
                            <div  style="float: left;width:700px;"    >
                                <script id="content" name="content" type="text/plain" style="width:1024px;height:500px;"></script>
                            </div>
                        </td>
                    </tr>
                            <tr style="height: 60px">
                            <td>
                            <span style="color:red">*</span><label>封面</label> <br>
                                <input id="coverImage" name="articleImages" hidden>
                            <div id="imageUpload">
                                </div>
                                    <div>
                                <span style=" margin-left: 10px; color: red">1. 请上传 3:4/4:3/1:1 的图片，优质清晰的封面有利于推荐</span></br>
                            <span style=" margin-left: 10px; color: red">2. 请上传500K以内的图片，请勿上传像素过高的图片</span>
                            </div>
                            </td>
                            </tr>


                            <tr style="height: 60px">
                                <td>  <input type="checkbox"  id = "appurl" value="1"/>链接
                                    <div class="form-group">
                                        <div class="col-sm-6">
                                            <input type="text" name="actionUrl" id="actionUrl" style="width:600px "  placeholder="APP内容链接"
                                                   readonly="true">
                                            <button type="button" class="btn btn-info" id="addAppUrl">添加链接</button>
                                            <button type="button" class="btn btn-default" id="clearAppUrl">清除链接</button>
                                            <p style="color:#999">注：链接中不能有英文单引号 </p>

                                        </div>

                                    </div>
                                </td>
                            </tr>


                    <tr style="height: 60px">
                        <td style="width:100%;">
                            <label style="font-size: 14px;">选择标签</label> <br>
                            <input id="labelId" name="labelId" class="easyui-combobox" style="width:600px; "/><br>
                            <span style="color:red">至多添加5个标签，非必填项</span><label></label>

                            <input id="labelIds" name="labelIds" hidden="hidden"/>
                            <div id="labelList">

                            </div>
                        </td>
                    </tr>

                    <tr style="height: 60px">
                        <td style="width:100%;">
                            <label style="font-size: 14px;">选择话题</label> <br>
                            <input id="topicGroupId" name="topicGroupId" class="easyui-combobox" style="width:300px; "/>
                            <input id="topicId" name="topicId" class="easyui-combobox" style="width:300px; "/><br>
                            <span style="color:red">至多添加1个话题，非必填项</span><label></label>

                            <input id="topicIds" name="topicIds" hidden="hidden"/>
                            <div id="topicList">

                            </div>
                        </td>
                    </tr>

                    <tr>
                        <td  valign="bottom">
                            <input  id="draftBotton" class="btn btn-primary"   style="font-size: 16px; height: 36px;" value="保存到草稿箱"/>
                            <input  id="timerBotton" class="btn btn-primary"   style="font-size: 16px; height: 36px;" value="定时发布"/>
                            <input  id="subBotton" class="btn btn-primary"   style="font-size: 16px; margin-left: 30px; height: 36px;" value="立即发布"/>
                            <span style="color:red">*运营平台发布的内容，均免审核，直接发布。</span><label></label><br>
                        </td>
                    </tr>
                </table>
            </div>
        </form>

    </div>

</div>


</body>
<script>
    var checkedItems = [];
    var checkedItemsObj = {};
    var searchType = 1;
    var checkType = 1;
    $(function () {


        UE.delEditor("content");
        var ue = UE.getEditor('content', {
            autoHeightEnabled: true,
            autoFloatEnabled: true,
            initialFrameWidth: 600,
            initialFrameHeight: 200,
            initialFrameWidth : "90%",
            initialFrameHeight : 350,
            toolbars: [[
                  'source', '|', 'undo', 'redo', '|',
                    'bold', 'italic', 'underline','strikethrough','horizontal','|','paragraph',     'rowspacingtop',
                'rowspacingbottom', '|',
                'insertorderedlist', 'insertunorderedlist', 'blockquote','|',
                  'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
                'imagenone', 'imageleft', 'imageright', 'imagecenter', '|', 'simpleupload', 'insertimage', 'help','fullscreen'
            ]],
            elementPathEnabled : false,
            maximumWords:100000,
        });
        UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
        UE.Editor.prototype.getActionUrl = function(action) {
            if (action == 'uploadimage' || action == 'uploadfile') {
                return serverContextPath + "/fileupload/uploadFile4Editor.do?bucket=grassImg";
            } else {
                return this._bkGetActionUrl.call(this, action);
            }
        };
        $("#addImage").linkbutton({
            iconCls : "icon-search",
            onClick : function() {

            }
        });

        $("#copyright").combobox({
            valueField : "value",
            textField : "text",
            editable : false,
            required:false,
            prompt: "选择版权形式",
            data:[{text:"原创",value:"1"},{text:"第三方授权",value:"2"},{text: "未授权", value: "3"},
                {text: "其他", value: "4"}]
        });


        $("#userBotton").linkbutton({
            iconCls : "icon-search",
            onClick : function() {
                //发送请求
                $.ajax({
                    type: "POST",
                    url: serverContextPath + "/grassArticle/getUserInfo",     //提交到后端的url
                    dataType: 'json',
                    data:{
                        uid : $("#articleUid").textbox("getValue")
                    },
                    success: function (result) {
                        if(result.code == 200) {
                            if(result.data !=null && result.data !=''){
                                var headIco = result.data.headIco.substring(0, result.data.headIco.indexOf("?"));
                                var html = '';
                                html += "<span style='font-size: 18px;'>&nbsp&nbsp<img src='"+headIco+"' width='60px;' height='60px;'></span>&nbsp&nbsp&nbsp&nbsp";
                                html += "<span style='font-size: 15px;'>&nbsp&nbsp<label>"+result.data.nickName+"</label></span>";
                                $("#userInfo").html(html);
                            }else{
                                var html = '<span style="color:red;font-size: 15px;">获取用户信息失败，请检查uid输入是否正确</span>';
                                $("#userInfo").html(html);
                            }
                        }
                        else {
                            var html = '<span style="color:red;font-size: 15px;">获取用户信息失败，请稍后重试</span>';
                            $("#userInfo").html(html);
                        }

                    }
                });
            }
        });

        $("#timerBotton").linkbutton({
            iconCls : "icon-search",
            onClick : function() {
                getTimeDialog();
            }
        });

        $(document).on("click", "#addAppUrl", function () {
            getAppUrlDialog();
        });
        $(document).on("click", "#clearAppUrl", function () {
            $("#actionUrl").val("");
        });

        $("#articleUid").textbox({
            required: true,
            missingMessage: "发布用户不能为空",
            prompt: "请输入发布用户",
            onChange: function () {
            }
        });

        $("#title").textbox({
            required: true,
            missingMessage: "请输入80字以内的标题",
            prompt: "请输入80字以内的标题",
            onChange: function () {
            }
        });

        $("#subtitle").textbox({
            required: false,
            missingMessage: "请输入120字以内的副标题",
            prompt: "请输入120字以内的副标题",
            onChange: function (data) {
            }
        });

        $("#labelId").combobox({
            prompt: "请选择标签",
            required: false,
            selectOnNavigation : true,
            valueField: 'id',
            textField: 'labelName',
            multiple:true,
            url : serverContextPath + "/grassLabelManage/getAllGrassLabelInfo",
            loadFilter: function (data) {
                return defaultLoadFilter(data);
            },
            onChange:function (data) {
                var arr = $(this).combobox("getValues");
                var textarr = $(this).combobox("getData");
                if(arr.length > 5 ){
                    $(this).combobox("unselect",arr[arr.length-1]);
                    // $.messager.alert("提示","标签最多只能选择5个", "info");
                    arr = $(this).combobox("getValues");
                }
                var labelList='';
                debugger
                for (var i=0; i<arr.length;i++){
                    var text = '';
                    for (var j=0; j< textarr.length;j++){
                        if(arr[i] == textarr[j].id){
                            text=textarr[j].labelName;
                        }
                    }
                    labelList+='<span class="tag"><span>'+text+'</span><a href="#" class="labelTag" data-index="'+i+'">x</a></span>&nbsp&nbsp&nbsp'
                }
                $("#labelList").html(labelList);
            }
        });

        $("#imageUpload").imageUpload({
            width: 171,
            height: 120,
            realInputName: "url",
            uploadInputName: "files",
            url: serverContextPath + '/fileupload/uploads',
            queryParams: {
                bucket: "grassImg"
            },
            onBeforeSubmit: function () {
                debugger;
                var oobj = $(this).find("input[type='file']");
                var files = oobj[0].files;

                for(var i=0; i<files.length;i++){
                    var obj = files[i];
                    if(obj!=null && obj!=''){
                        debugger
                        if(obj.name.substring(obj.name.lastIndexOf(".")).toLowerCase() == '.png'){
                            $.messager.alert("提示","不允许上传png格式的图片", "info", function(){return false;});
                            return false;
                        }
                        if(obj.type.toLowerCase() == 'image/png'){
                            $.messager.alert("提示","不允许上传png格式的图片", "info", function(){return false;});
                            return false;
                        }
                    }
                }
                $.messager.progress({
                    title: "正在执行",
                    msg: "正在执行，请稍后...",
                    interval: 500,
                    text: ""
                });
            },
            filterFileName: function (data) {
                debugger;
                if (!data || data.code != 200) {
                    $.messager.progress("close");
                    $.messager.alert("错误", data.message);
                    return "";
                }
                return data.data;
            },
            onLoadSuccess: function (data) {
                $.messager.progress("close");

                return false;
            }
        });

        $("#topicGroupId").combobox({
            prompt: "选择话题分组",
            required: false,
            selectOnNavigation : false,
            valueField: 'id',
            textField: 'groupName',
            url : serverContextPath + "/topicGroupManage/getAllTopicGroupInfo",
            loadFilter: function (data) {
                return defaultLoadFilter(data);
            },
            onChange:function (data) {
                $('#topicId').combobox('reload',serverContextPath + "/grassTopicManage/grassTopicByGroupId?groupId="+data);

                // 清空业务线
                $("#topicId").combobox("setValue",'');
            }
        });

        $("#topicId").combobox({
            prompt: "选择话题",
            required: false,
            selectOnNavigation : true,
            valueField: 'id',
            textField: 'topicName',
            url : serverContextPath + "/grassTopicManage/grassTopicByGroupId",
            loadFilter: function (data) {
                return defaultLoadFilter(data);
            },
            onChange:function (data) {
                var arr = $(this).combobox("getValue");
                var textarr = $(this).combobox("getData");
                var html='';
                debugger
                var text = '';
                for (var j=0; j< textarr.length;j++){
                    if( arr == textarr[j].id){
                        text=textarr[j].topicName;
                    }
                }
                if(text !=''){
                    html+='<span class="tag"><span>'+text+'</span><a href="#" class="topicTag" ">x</a></span>&nbsp&nbsp&nbsp'
                }
                $("#topicList").html(html);
            }
        });

        $(document).on("click", ".labelTag", function () {
            var index = $(this).attr("data-index");
            var arr =  $("#labelId").combobox("getValues");
            $("#labelId").combobox("unselect",arr[index]);
        });

        $(document).on("click", ".topicTag", function () {
            $("#topicId").combobox("setValue","");
        });

        $(document).on("click", ".goodTag", function () {
            debugger
            var product_skn = $(this).attr("data-index");
            removeSingleItemById(product_skn);
            var skns = '';
            // for (var i = 0; i < checkedItems.length; i++) {
            //     if( i == checkedItems.length -1){
            //         skns = skns+ checkedItems[i]
            //     }else{
            //         skns = skns+ checkedItems[i] +","
            //     }
            // }
            // $("#skns").val(skns);
            var div= $(this).parent("span").parent("div");
            div.remove();
        });

        $("#subBotton").linkbutton({
            iconCls: "icon-save",
            width:200,
            onClick: function () {
                $("#publishArticleForm").form("submit",{
                    url : serverContextPath+"/grassArticle/publishArticle",
                    onSubmit : function(param) {
                        debugger;
                        if (!$("#publishArticleForm").form("validate")) {
                            return false;

                        }
                        if($("#appurl").is(":checked")){
                            $("#sort").val(3);
                        }

                        var imgs = '';
                        var imageCount = 0;
                        $("input[name='url']").each(function(j,item){
                            debugger
                            var url = item.value;
                            if(imgs == ''){
                                imgs = url;
                            }else{
                                imgs = imgs + ","+url;
                            }
                            imageCount++;
                        });
                        $("#coverImage").val(imgs);

                        if(imageCount < 1){
                            $.messager.alert("发布失败", "请选择至少一张图片", "error");
                            return false;
                        }
                        var labels = '';
                        $("input[name='labelId']").each(function(j,item){
                            debugger
                            var id = item.value;
                            if(labels == ''){
                                labels = id;
                            }else{
                                labels = labels + ","+id;
                            }
                        });
                        $("#labelIds").val(labels);

                        return true;
                    },
                    success : function(data) {
                        if (data) {
                            data = $.parseJSON(data);
                            if (data.code == 200) {
                                $.messager.alert("提示","发布成功", "info", function(){window.location.reload()});
                                // alert("保存成功");


                            } else {
                                $.messager.alert("保存失败", data.message, "error");
                            }
                        } else {
                            $.messager.alert("保存失败", data.message, "error");
                        }
                    }
                });

            }
        });

        $("#draftBotton").linkbutton({
            iconCls: "icon-save",
            width:200,
            onClick: function () {
                $("#publishArticleForm").form("submit",{
                    url : serverContextPath+"/grassArticle/saveArticleDraft",
                    onSubmit : function(param) {
                        debugger;
                        if (!$("#publishArticleForm").form("validate")) {
                            return false;

                        }
                        if($("#appurl").is(":checked")){
                            $("#sort").val(3);
                        }
                        var imgs = '';
                        var imageCount = 0;
                        $("input[name='url']").each(function(j,item){
                            debugger
                            var url = item.value;
                            if(imgs == ''){
                                imgs = url;
                            }else{
                                imgs = imgs + ","+url;
                            }
                            imageCount++;
                        });
                        $("#coverImage").val(imgs);

                        var labels = '';
                        $("input[name='labelId']").each(function(j,item){
                            debugger
                            var id = item.value;
                            if(labels == ''){
                                labels = id;
                            }else{
                                labels = labels + ","+id;
                            }
                        });
                        $("#labelIds").val(labels);
                        var html = '';

                        return true;
                    },
                    success : function(data) {
                        if (data) {
                            data = $.parseJSON(data);
                            if (data.code == 200) {
                                $.messager.alert("提示","保存成功", "info", function(){window.location.reload()});
                                // alert("保存成功");


                            } else {
                                $.messager.alert("保存失败", data.message, "error");
                            }
                        } else {
                            $.messager.alert("保存失败", data.message, "error");
                        }
                    }
                });

            }
        });


    // 定时 选择时间
    function getTimeDialog(data,id, status){
        var timeChoose = $("<div id='timeChoose'>").appendTo($(document.body));
        var title =  "选择时间";
        var textVar = "确认";

        window.self.paramObject.mkData = data;
        $(timeChoose).myDialog({
            title: title,
            width: "20%",
            height: "30%",
            resizable:false,
            buttons:[{
                id : "saveBtn",
                text:textVar,
                iconCls : "icon-save",
                handler:function(){
                    debugger;
                    var time=''
                    if($("#publishTimeStr").datetimebox('getValue') !=null && $("#publishTimeStr").datetimebox('getValue') !=''){
                         time = parseInt(new Date($("#publishTimeStr").datetimebox('getValue')).getTime() );
                    }else {
                        $.messager.alert("发布失败", "请选择时间", "error");
                        return;
                    }
                    $("#publishArticleForm").form("submit",{
                        url : serverContextPath+"/grassArticle/timerPublish",
                        onSubmit : function(param) {
                            debugger;
                            if (!$("#publishArticleForm").form("validate")) {
                                return false;
                            }
                            if($("#appurl").is(":checked")){
                                $("#sort").val(3);
                            }

                            param.publishTime =time;
                            var imgs = '';
                            var imageCount = 0;
                            $("input[name='url']").each(function(j,item){
                                debugger
                                var url = item.value;
                                if(imgs == ''){
                                    imgs = url;
                                }else{
                                    imgs = imgs + ","+url;
                                }
                                imageCount++;
                            });
                            $("#coverImage").val(imgs);

                            if(imageCount < 1){
                                $.messager.alert("发布失败", "请选择至少一张图片", "error");
                                return false;
                            }
                            var labels = '';
                            $("input[name='labelId']").each(function(j,item){
                                debugger
                                var id = item.value;
                                if(labels == ''){
                                    labels = id;
                                }else{
                                    labels = labels + ","+id;
                                }
                            });
                            $("#labelIds").val(labels);

                            return true;
                        },
                        success : function(data) {
                            if (data) {
                                data = $.parseJSON(data);
                                if (data.code == 200) {
                                    $.messager.alert("提示","发布成功", "info", function(){window.location.reload()});
                                    // alert("保存成功");
                                } else {
                                    $.messager.alert("保存失败", data.message, "error");
                                }
                            } else {
                                $.messager.alert("保存失败", data.message, "error");
                            }
                        }
                    });
                    $(timeChoose).dialog("close");
                }
            }, {
                text: "关闭",
                iconCls: "icon-cancel",
                handler: function () {
                    $.messager.confirm("确认", "确认关闭吗？", function (flag) {
                        if(flag){
                            $(timeChoose).dialog("close");
                        }
                    });
                }
            }],
            modal: true,
            href: contextPath + "/html/grass/article/chooseTime.html"
        });
    }

        // 跳转链接
        function getAppUrlDialog(data){
            var timeChoose = $("<div id='appUrl'>").appendTo($(document.body));
            var title =  "添加链接";
            var textVar = "确认";

            window.self.paramObject.mkData = data;
            $(timeChoose).myDialog({
                title: title,
                width: "40%",
                height: "30%",
                resizable:true,
                buttons:[{
                    id : "saveBtn",
                    text:textVar,
                    iconCls : "icon-save",
                    handler:function(){
                        debugger;

                        var json = JSON.stringify({
                            action: $("#goTo").combobox("getValue"),
                            url: $("#goToUrl").textbox("getValue")});
                        $("#actionUrl").val(json);
                        $(timeChoose).dialog("close");
                    }
                }, {
                    text: "关闭",
                    iconCls: "icon-cancel",
                    handler: function () {
                        $.messager.confirm("确认", "确认关闭吗？", function (flag) {
                            if(flag){
                                $(timeChoose).dialog("close");
                            }
                        });
                    }
                }],
                modal: true,
                href: contextPath + "/html/grass/longArticle/appUrl.html"
            });
        }


    })


</script>
</html>