publishArticle.html 23.5 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>
    <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" >
<div  region="north" style="height: 100px;">
    <script>
        document.write(addHead('种草社区管理', '种草内容发布'));
    </script>

</div>
<div region="center" id="labelGroupList" style="margin-left: 20px">
    <div id="tt" class="easyui-layout" fit="true" style="overflow-y: scroll">
        <form name="publishArticleForm" id="publishArticleForm" method="post"   >
            <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 >
                            <span style="color:red">*</span><label>选择用户</label>  <br>
                            <input id="articleUid" name="authorUid" style="width:60% "  class="easyui-combobox" /> <br>
                            <span style="color:red"> 必填项，选择某个马甲身份后，才能发布</span><label>
                           </label>
                        </td>
                    </tr>

                    <tr style="height: 60px">
                        <td>
                            <span style="color:red">*</span><label>文字内容</label> <br>
                            <textarea rows="5" id="content" style="width:60%; white-space: pre-wrap;" name = "content" class="form-control" placeholder="请在这里输入1-500字的笔记" required="" maxlength="500"></textarea>
                                <span id="content-count">0</span>/500
                        </td>
                    </tr>

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

                            </div>
                        </td>
                    </tr>
                    <tr style="height: 20px">
                        <td >
                            <span style="color:red">*</span><label>选择图片(最多九张)</label><br>
                            <span style="color:red">需要上传1-9张图片，必填项<br>
                            请上传1-9张图片，图片比例1:1、3:4、4:3（宽：高），大小不超过2M</span><label></label><br>
                            <!--<a id="addImage" class="btn btn-primary" >选择图片+</a>-->
                            <input id="imgs" name="articleImages" hidden="hidden"/>
                        </td>
                    </tr>
                    <tr style="height: 60px">
                        <td id="imgTd">
                            <div id="imageUpload1">
                            </div>
                        </td>
                    </tr>
                    <tr style="height: 60px">
                        <td>
                            <label>关联商品</label> <br>
                            <span style="color:red">支持商品编号（SKN&SKUP）查询商品<br>
                                至多添加10个商品，非必填项</span><label></label><br>
                            <a id="addSkn" class="btn btn-primary"   style="font-size: 15px">选择商品+</a>
                            <input id="skns" name="articleSkns" hidden="hidden"/>
                            <input id="sknType" name="sknType" hidden="hidden"/>
                        </td>

                    </tr>
                    <tr style="height: 60px">
                        <td id="goodstd">
                            <div id="good0" style="float: left;margin-left: 30px;width: 150px;">

                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td  valign="bottom">
                            <input  id="subBotton" class="btn btn-primary"   style="font-size: 20px; margin-top: 0px;margin-bottom: 0px;" value="保存"/>
                        </td>
                    </tr>
                </table>
            </div>
        </form>

    </div>

</div>


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

        $("#addImage").linkbutton({
            iconCls : "icon-search",
            onClick : function() {

            }
        });

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

        $("#articleUid").combobox({
            required: true,
            editable:true,
            missingMessage: "发布用户不能为空",
            prompt: "请输入发布用户",
            selectOnNavigation : true,
            valueField: 'text',
            textField: 'value',
            url : serverContextPath + "/grassArticle/platPublishUser",
            loadFilter: function (data) {
                var list = [];
                debugger;
                for (var i = 0; i < data.data.length; i++) {
                    var obj = {};
                    obj['text'] = data.data[i];
                    obj['value']  = data.data[i].toString();
                    list.push(obj);
                }
                return list;
            },
            filter: function (q,row) {
                debugger
                var opts = $(this).combobox('options');
                var value = row[opts.textField].toString();
                return value.indexOf(q)!=-1;
            }
        });

        /*字数限制*/
        $("#content").on("input propertychange", function() {
            debugger
            var $this = $(this);
            var count = $this.val().length;
            $("#content-count").text(count);
        });


        $("#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++){
                        debugger
                        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);
            }
        });

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

        $(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++) {
                buildgood(i,checkedItems[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:100,
            onClick: function () {
                $("#publishArticleForm").form("submit",{
                    url : serverContextPath+"/grassArticle/publishArticle",
                    onSubmit : function(param) {
                        debugger;
                        if (!$("#publishArticleForm").form("validate")) {
                            return false;

                        }
                        if($("#articleUid").combobox("getValue") == ''){
                            return false;
                        }
                        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++;
                        });
                        $("#imgs").val(imgs);
                        if(imageCount > 9){
                            $.messager.alert("保存失败", "最多只能选择9张图片", "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");
                        }
                    }
                });

            }
        });


        $("#imageUpload1").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;
                        }
                    }
                }
                var imageCount = 0;
                $("input[name='url']").each(function(j,item){
                    debugger
                    var url = item.value;
                    if(url != ''){
                        imageCount++;
                    }
                });
                if(imageCount +files.length > 9 ){
                    $.messager.alert("提示","最多上传九张图片", "info");
                    return false;
                }
                $.messager.progress({
                    title: "正在执行",
                    msg: "正在执行，请稍后...",
                    interval: 500,
                    text: ""
                });
            },
            filterFileName: function (data) {
                debugger;
                if (!data || data.code != 200) {
                    $.messager.progress("close");
                    initimg(1,1);
                    $(this).remove();
                    $.messager.alert("错误",data.message);
                    return "";
                }
                return data.data[0];
            },
            onLoadSuccess: function (data) {
                debugger;
                initimg(1,data.data.length);
                for (var i= 1; i<= data.data.length; i++){
                    $("#imageUpload"+i).imageUpload("setValue",data.data[i-1])
                }
                $.messager.progress("close");
                return false;
            },
            onClose:function(data){
                $("#imageUpload1").remove();
            }
        });
    });


    // 编辑分组
    function getEditDialog(data){
        var labelGroupList = $("<div id='labelGroupList'>").appendTo($(document.body));
        var title =  "选择商品";
        var textVar = "确认";
        var msgVar =  "确认新增吗？";

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

                    $("#goodstd").html("<div id=\"good0\" style=\"float: left;margin-left: 30px;width: 300px\">\n" +
                        "                            </div>");
                    var skns = '';
                    for (var i = 0; i < checkedItems.length; i++) {
                        buildgood(i,checkedItems[i]);
                        if( i == checkedItems.length -1){
                            skns = skns+ checkedItems[i]
                        }else{
                            skns = skns+ checkedItems[i] +","
                        }
                    }
                    $("#skns").val(skns);
                    $("#sknType").val(checkType);
                    $(labelGroupList).dialog("close");
                }
            }, {
                text: "关闭",
                iconCls: "icon-cancel",
                handler: function () {
                    $.messager.confirm("确认", "确认关闭吗？", function (flag) {
                        if(flag){
                            $(labelGroupList).dialog("close");
                        }
                    });
                }
            }],
            modal: true,
            href: contextPath + "/html/grass/article/chooseSkns.html"
        });
    }

    function oo(num){
        // debugger
        // if(num >9){
        //     return
        // }
        // var imageCount = 0;
        // $("input[name='url']").each(function(j,item){
        //     debugger
        //     var url = item.value;
        //     if(url != ''){
        //         imageCount++;
        //     }
        // });
        // if(imageCount > 8 ){
        //     return;
        // }
        $("#imageUpload"+num).imageUpload({
            width: 171,
            height: 120,
            realInputName: "url",
            uploadInputName: "files",
            url: serverContextPath + '/fileupload/uploads',
            queryParams: {
                bucket: "grassImg"
            },
            onBeforeSubmit: function () {
                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;
                        }
                    }
                }
                var imageCount = 0;
                $("input[name='url']").each(function(j,item){
                    debugger
                    var url = item.value;
                    if(url != ''){
                        imageCount++;
                    }
                });
                if(imageCount +files.length > 9 ){
                    $.messager.alert("提示","最多上传九张图片", "info");
                    return false;
                }
                $.messager.progress({
                    title: "正在执行",
                    msg: "正在执行，请稍后...",
                    interval: 500,
                    text: ""
                });
            },
            filterFileName: function (data) {
                debugger;
                if (!data || data.code != 200) {
                    $.messager.progress("close");
                    initimg(num,1);
                    $(this).remove();
                    $.messager.alert("错误",data.message);
                    return "";
                }
                return data.data[0];
            },
            onLoadSuccess: function (data) {
                debugger;
                    initimg(num,data.data.length);
                    var c =0;
                    for (var i= 0; i<= data.data.length; i++){
                        nnum = num +i;
                        $("#imageUpload"+nnum).imageUpload("setValue",data.data[c]);
                        c++;
                    }
                $.messager.progress("close");
                return false;
            },
            onClose:function(data){
                $("#imageUpload"+num).remove();
            }
        });
    }


    function initimg(m,n) {
        for (var i =1 ; i<=n; i++){
            debugger
            var nnum = m+i;
            $("#imageUpload"+(nnum-1)).after('<div id="imageUpload'+nnum+'">  </div>');
            oo(nnum);
        }
    }

    function buildgood(index,obj) {
        debugger;
        var data = checkedItemsObj[obj];
        $("#good"+index).html(gooddiv(data));
        $div = $("#good"+(index+1));
            $("#good"+index).after('<div id="good'+(index+1)+'"style="float: left;margin-left: 30px;width: 300px">  </div>');
    }
    function gooddiv(data) {

        return "  <span>商品图:<img width=\"120\" height=\"60\" src="+getImageUrl(data.default_images)+
            "                               /> <a  href=\"#\" class=\"goodTag\" data-index=\""+data.product_skn+"\">x</a></span>" +
            "<h5 style=\"margin-top: 0px;margin-bottom: 0px\">商品名："+ data.product_name +"</h5>\n" +
            "<h5 style=\"margin-top: 0px;margin-bottom: 0px\">价格："+data.sales_price+"</h5>"
    }

    function getImageUrl(image) {
        var result='';
        if (image) {
            if(image.indexOf('http://') == 0){
                result = image.split("?")[0];
            }else{
                var fileMode = image.substring(15, 17);
                if(fileMode=='01'){
                    result= "http://"+"img11.static.yhbimg.com"+"/goodsimg"+image;
                }
                if(fileMode=='02'){
                    result= "http://"+"img12.static.yhbimg.com"+"/goodsimg"+image;
                }
            }
        }
        else {
            result = ""
        }
        if (result) {
            return result + "?imageMogr2/thumbnail/320x320/extent/320x320/background/d2hpdGU=/position/center/quality/90";
        } else {
            return "";
        }
    }
    function findCheckedItem(ID) {
        for (var i = 0; i < checkedItems.length; i++) {
            if (checkedItems[i] == ID) return i;
        }
        return -1;
    }
    function addcheckItem() {
        if(searchType != checkType && checkedItems.length>0){
            checkedItems=[];
        }
        checkType = searchType;
        var i=0;
        $("input[type='checkbox'][name='product_skn']:checked").each(function () {
            if(i > 4){
                alert("最多只能选择五个商品");
                return false;
            }
            var k = findCheckedItem($(this).val());
            if (k == -1) {
                checkedItems.push($(this).val());
            }
            i++;

        });
    }

    function removeAllItem(rows) {
        $("input[type='checkbox'][name='product_skn']").each(function () {
            if (!this.checked) {
                var k = findCheckedItem($(this).val());
                if (k != -1) {
                    checkedItems.splice(k, 1);
                }
            }
        });
    }
    function resetSelectedCheckBox(data){
        $("input[type='checkbox'][name='product_skn']").each(function () {
            var cb=$(this);
            $.each(checkedItems,function(index,value){
                if(value==cb.val()){
                    cb.attr("checked",true);
                    return false;
                }
            });
        });
    }
    function removeSingleItem(rowIndex, rowData) {
        var k = findCheckedItem(rowData.product_skn);
        if (k != -1) {
            checkedItems.splice(k, 1);
        }
    }
    function removeSingleItemById(id) {
        debugger
        var k = findCheckedItem(id);
        if (k != -1) {
            checkedItems.splice(k, 1);
        }
    }
</script>
</html>