多图文页面

最新推荐文章于 2021-06-09 16:19:43 发布

hjxgood

最新推荐文章于 2021-06-09 16:19:43 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/hjxgood/article/details/47400417

<%@ page language="java" pageEncoding="UTF-8"%>
<%@page import="com.xxx.data.entity.User"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<head>
    <title>多图文</title>
    <link href="../resources/css/style.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="../resources/themes/default.css" />
    <link rel="stylesheet" href="../resources/css/loading.css" />
    <link rel="stylesheet" href="../resources/css/appmsg.css" />
    <style>
        form {
            margin: 0;
        }
        textarea {
            display: block;
        }
        .mainboard{
           display: block;
           float: left;
        }
        .mainboard img{
            border:2px solid #fff;
            width:106px;
            height:60px;
            cursor:pointer;
        }
        .mainboard ul{
           display:inline;
         }
    </style>
    <script type="text/javascript" src="../resources/js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../resources/js/jquery.form.js"></script>
    <script type="text/javascript" src="../resources/js/admin.js"></script>
    <script charset="utf-8" src="../resources/js/kindeditor-min.js"></script>
    <script charset="utf-8" src="../resources/js/zh_CN.js"></script>
    <script type="text/javascript">
        $(function(){
            $(".num-imgshow img").bind("click",function(){
                clickImg($(this));
            });

            $('.imageFile').live('change',function(){
               uploadImg();
            });

            $('.r_hide').each(function(){
               if($(this).val()=="1"){
                   $(this).trigger("click");
                   $(this).val("1");
               }
            });



            $(".title_").keyup(function(){
               var data_id = $(this).attr("data-id");
               $("#appmsgItem"+data_id+"_title").text($(this).val());
            });

            $(".icon18_common").click(function(){
               var data_id = $(this).attr("data-id");
               var data_type = $(this).attr("data-type");
               if(data_type=="edit"){
                   js_edit(data_id);
               }
               else{
                   js_del(data_id);
               }

            });

            $(".icon20_common").click(function(){
               js_add();
            });

            $(".appmsg img").each(function(){
               initImg($(this));
            });

            init_edit();
        });


        var d_id = "1";
        var i_id = "0";
        var editor = new Array();
        var del_id = new Array();

        function js_edit(data_id){
           d_id = data_id;
           $(".appmsgInner_class").each(function(){
               if($(this).attr("data-id")==data_id){
                   $(this).show();
               }
               else{
                   $(this).hide();
               }
             });
        }

        function js_del(data_id){
           var id = $("#id"+data_id).val();
           del_id.push(id);
           $("#appmsgItem"+data_id).remove();
           $("#appmsgInner"+data_id).remove();
        }

        function js_add(){
        //   var d_id = $(".js_appmsg_item").last().attr("data-id");
       //    var id = Number(d_id) + 1;
       //    add_appmsg(id);
        }

        function add_appmsg(d_id){
           var str = "";
           str += "<div id=\"appmsgItem"+d_id+"\" data-fileid=\"\" data-id=\""+d_id+"\" class=\"appmsg_item js_appmsg_item \">";
           str += "<img id=\"appmsgItem"+d_id+"_img\" class=\"appmsg_thumb\" data-id=\""+d_id+"\" src/>";
           str += "<i class=\"appmsg_thumb default\">缩略图</i>";
           str += "<h4 class=\"appmsg_title\"><a href=\"javascript:void(0);\" target=\"_blank\" id=\"appmsgItem"+d_id+"_title\"></a></h4>";
           str += "<div class=\"appmsg_edit_mask\">";
           str += "<a class=\"icon18_common edit_gray js_edit\" data-id=\""+d_id+"\" data-type=\"edit\" href=\"javascript:void(0);\">编辑</a>";
           str += "<a class=\"icon18_common del_gray js_del\" data-id=\""+d_id+"\" data-type=\"del\" href=\"javascript:void(0);\">删除</a>";
           str += "</div>";
           str += "</div>";
           $("#js_appmsg_preview").append(str);
        }

        function initImg(img){
           var d_id = $(img).attr("data-id");
           var src = $(img).attr("src");
           if(d_id!="1"&&!isEmpty(src)){
               $(img).attr("class","appmsg_thumb default");
               $(img).next("i").hide();
            }
        }

        function uploadImg(){
           loadingUpload();
            $("#imageform"+d_id).ajaxForm({success:showResponse}).submit();
        }

        function init_edit(){
           $(".num-imgshow img").first().trigger("click");

        }

        function loadingUpload(){
           $("#preview"+d_id).html('');
             $("#preview"+d_id).parent().show();
             $("#preview"+d_id).html('<img src="../resources/images/loading.gif" alt="Uploading...."/>');
        }

        function viewServer(){
           $("input[name='viewServer']").first().trigger("click");
        }


        function delHtmlTag(str){
            return str.replace(/<[^>]+>/g,"");
        }

        function clickImg(img){
           $(".num-imgshow img").each(function(){
               $(this).css("border","2px solid #fff");
           });
           var imgUrl = null;
           var $this = null;
           if(!isEmpty(img)){
               $this = img;
               imgUrl = $this.attr("src");
               $($this).css("border","2px solid blue");
           }
           else{
               imgUrl = $("#upladImg"+d_id).attr("src");
               $("#upladImg"+d_id).css("border","2px solid blue");
           }
           $("#imageUrl"+d_id).val(imgUrl);
            $("#appmsgItem"+d_id+"_img").attr("src",imgUrl);
            if(d_id=="1"){
               $("#appmsgItem"+d_id+"_img").attr("class","js_appmsg_thumb");
            }
            else{
               $("#appmsgItem"+d_id+"_img").attr("class","appmsg_thumb default");
               $("#appmsgItem"+d_id+"_img").next("i").hide();
            }
        }

        function showResponse(responseText){
           responseText = delHtmlTag(responseText);
           var text = eval('(' + responseText + ')');
           if(text.error==1){
               alert(text.message);
               return;
           }
            responseText = text.url;
            var url1 = text.url1;
           var text = "<div><img src=\"" + responseText + "\" class=\"preview\" id=\"upladImg"+d_id+"\" onclick=\"clickImg();\" /></div><div style=\"background-color: #e6edf0;\"><a href="+ responseText +" class=\"check\" target=\"_blank\">缩略图</a><b class=\"check\"> | </b><a href="+ url1 +" class=\"check\" target=\"_blank\">原图</a></div>";
           $("#preview"+d_id).html(text);
        }

        KindEditor.ready(function(K) {
           $('textarea[class="content_"]').each(function(){
               var i = $(this).attr("data-id");
               editor[i] = K.create($("#content"+i), {
                   minWidth : '380px',
                   uploadJson : '${ctx}/my/uploadImage.htm',
                   fileManagerJson : '${ctx}/my/file_manager_json.htm',
                    allowFileManager : true,
                    allowImageUpload : true,
                    urlType:'domain',
                    items : [
                           'source','|','fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
                           'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
                           'insertunorderedlist', '|', 'image', 'link','|',"fullscreen"]

                });
           });
       });



        function showBg() {
              var bh = $("body").height();
              var bw = $("body").width();
              $("#fullbg").css({
                   height:bh,
                   width:bw,
                   display:"block"
              });
              $("#dialog").show();
        }

        function closeBg() {
           $("#fullbg,#dialog").hide();
        }

        function imageReduce(path){
           if(isEmpty(path)){
               path = $("#upladImg").attr("src");
           }
           $.ajax({
                type: "POST",
                url: "${ctx}/my/imageReduce.htm",
                data:{
                   "ctx":"${ctx}",
                   "url":path
                },
                success: function(data) {
                    if (!isEmpty(data)) {
                        window.open(data);
                    }
                    },
                    error : function() {
                      alert("提交数据失败!");
                 }
           });
        }

        function Material(id_,parentId_,title_,summary_,imageUrl_,showCover_,content_){
           this.id = id_;
           this.parentId = parentId_;
           this.title = title_;
           this.summary = summary_;
           this.imageUrl = imageUrl_;
           this.showCover = showCover_;
           this.content = content_;
        }

        function saveMaterial(){
           var i_i = 1;
           var list = new Array();
           var check = true;
           var data_id = 1;

           $(".appmsgInner_class").each(function(){
               data_id = $(this).attr("data-id");
               var id = $("#id"+data_id).val();
               var pid = $("#pid"+data_id).val();
                 var title = $("#title"+data_id).val();
                 var summary = $("#summary"+data_id).val();
                 var imageUrl = $("#imageUrl"+data_id).val();
                 var showCover = $("#showCove"+data_id).val();
                var content = editor[data_id].html();

                if(isEmpty(title)){
                   alert("第"+i_i+"个图文请输入标题!");
                   check = false;
                   return false;
               }
               if(isEmpty(imageUrl)){
                   alert("第"+i_i+"个图文请选择封面!");
                   check = false;
                   return false;
               }
               if(isEmpty(summary)){
                   alert("第"+i_i+"个图文摘要不能为空!");
                   check = false;
                   return false;
               }
               if(isEmpty(content)){
                   alert("第"+i_i+"个图文内容不能为空!");
                   check = false;
                   return false;
               }
               if(isEmpty(showCover)){
                   showCover = "0";
               }
               if(id==null||id==""){
                   id = 0;
               }
               if(pid==null||pid==""){
                   pid = 0;
               }

                var material = new Material();
                material.id = id;
                material.parentId = pid;
                material.title = title;
                material.summary = summary;
                material.imageUrl = imageUrl;
                material.showCover = showCover;
                material.content = content;
                list.push(material);
                i_i++;
           });

           if(!check){
               return;
           }

           $.ajax({
                type: "POST",
                dataType: "json",
                url: "${ctx}/my/mul_saveMaterial.htm",
                data:{
                   "mlistStr":arrayToJson(list),
                   "delIds":arrayToJson(del_id)
                },
                success: function(data) {
                   $("#background,#progressBar").hide();
                    if (!isEmpty(data)) {
                       if(data.result=="success"){
                          location.href="${ctx}/news/pushManager.htm";
                       }
                    }
                    },
                    error : function() {
                      $("#background,#progressBar").hide();
                      alert("提交数据失败!");
                 },
                    beforeSend : function() {
                       $("#background,#progressBar").show();
                  }
           });
        }

        function preview(){
           var i_i = 1;
           var list = new Array();
           var check = true;
           var data_id = 1;

           $(".appmsgInner_class").each(function(){
               data_id = $(this).attr("data-id");
               var id = $("#id"+data_id).val();
               var pid = $("#pid"+data_id).val();
                 var title = $("#title"+data_id).val();
                 var summary = $("#summary"+data_id).val();
                 var imageUrl = $("#imageUrl"+data_id).val();
                 var showCover = $("#showCove"+data_id).val();
                 var content = editor[data_id].html();

                if(isEmpty(title)){
                   alert("第"+i_i+"个图文请输入标题!");
                   check = false;
                   return false;
               }
               if(isEmpty(imageUrl)){
                   alert("第"+i_i+"个图文请选择封面!");
                   check = false;
                   return false;
               }
               if(isEmpty(summary)){
                   alert("第"+i_i+"个图文摘要不能为空!");
                   check = false;
                   return false;
               }
               if(isEmpty(content)){
                   alert("第"+i_i+"个图文内容不能为空!");
                   check = false;
                   return false;
               }
               if(isEmpty(showCover)){
                   showCover = "0";
               }
               if(id==null||id==""){
                   id = 0;
               }
               if(pid==null||pid==""){
                   pid = 0;
               }

                var material = new Material();
                material.id = id;
                material.parentId = pid;
                material.title = title;
                material.summary = summary;
                material.imageUrl = imageUrl;
                material.showCover = showCover;
                material.content = content;
                list.push(material);
                i_i++;
           });

           if(!check){
               return;
           }

           $.ajax({
                type: "POST",
                dataType: "json",
                url: "${ctx}/my/mul_preview.htm",
                data:{
                   "mlistStr":arrayToJson(list)
                },
                success: function(data) {
                   $("#background,#progressBar").hide();
                    if (!isEmpty(data)) {
                       if(data.result=="success"){
                          alert("预览请求已发送成功,请在手机微信客户端查看信息！");
                       }
                       else{
                          alert(data.msg);
                       }
                    }
                    },
                    error : function() {
                      $("#background,#progressBar").hide();
                      alert("提交数据失败!");
                 },
                    beforeSend : function() {
                      $("#background,#progressBar").show();
                    }
           });
        }

        function sendMsg(){
           var i_i = 1;
           var list = new Array();
           var check = true;
           var data_id = 1;

           $(".appmsgInner_class").each(function(){
               data_id = $(this).attr("data-id");
               var id = $("#id"+data_id).val();
               var pid = $("#pid"+data_id).val();
                 var title = $("#title"+data_id).val();
                 var summary = $("#summary"+data_id).val();
                 var imageUrl = $("#imageUrl"+data_id).val();
                 var showCover = $("#showCove"+data_id).val();
                 var content = editor[data_id].html();

                if(isEmpty(title)){
                   alert("第"+i_i+"个图文请输入标题!");
                   check = false;
                   return false;
               }
               if(isEmpty(imageUrl)){
                   alert("第"+i_i+"个图文请选择封面!");
                   check = false;
                   return false;
               }
               if(isEmpty(summary)){
                   alert("第"+i_i+"个图文摘要不能为空!");
                   check = false;
                   return false;
               }
               if(isEmpty(content)){
                   alert("第"+i_i+"个图文内容不能为空!");
                   check = false;
                   return false;
               }
               if(isEmpty(showCover)){
                   showCover = "0";
               }
               if(id==null||id==""){
                   id = 0;
               }
               if(pid==null||pid==""){
                   pid = 0;
               }

                var material = new Material();
                material.id = id;
                material.parentId = pid;
                material.title = title;
                material.summary = summary;
                material.imageUrl = imageUrl;
                material.showCover = showCover;
                material.content = content;
                list.push(material);
                i_i++;
           });

           if(!check){
               return;
           }

           $.ajax({
                type: "POST",
                dataType: "json",
                url: "${ctx}/my/mul_sendMsg.htm",
                data:{
                   "mlistStr":arrayToJson(list)
                },
                success: function(data) {
                   $("#background,#progressBar").hide();
                    if (!isEmpty(data)) {
                       if(data.result=="success"){
                          alert("群发请求已发送成功,请在手机微信客户端查看信息！");
                       }
                       else{
                          alert(data.msg);
                       }
                    }
                    },
                    error : function() {
                      $("#background,#progressBar").hide();
                      alert("提交数据失败!");
                 },
                    beforeSend : function() {
                      $("#background,#progressBar").show();
                    }
           });
          }

    </script>
</head>
<body class="bggrey">
<%@ include file="common/header2.jsp"%>

    <div class="nummain">
    <div class="nummaincontent1">
    <%@ include file="common/leftMenu.jsp"%>

    <div class="right-content"> 
      <br />
      <br />
      <div style="font-size:16px;margin-left:20px;">Step 1：从收藏夹选择新闻 ----》Step 2：调整与排序-----》<span style="border:1px solid #1d71b6;padding:5px;background:#1d71b6;color:#fff;">Step 3：生成素材</span></div>
    <div class="main_bd">
    <div class="media_preview_area">
        <div class="appmsg multi editing">
        <div id="js_appmsg_preview" class="appmsg_content">
         <c:forEach var="mList" items="${mList}" varStatus="num" begin="0" end="0">
         <div id="appmsgItem${num.count}" data-fileid="" data-id="${num.count}" class="first_appmsg_item js_appmsg_item ">
         <div class="cover_appmsg_item">
            <h4 class="appmsg_title"><a href="javascript:void(0);" target="_blank" id="appmsgItem${num.count}_title">${mList.title}</a></h4>
            <div class="appmsg_thumb_wrp">
                <img id="appmsgItem${num.count}_img" class="js_appmsg_thumb appmsg_thumb" data-id="${num.count}" src="${mList.imageUrl}"/>
                <i class="appmsg_thumb default">封面图片</i>
            </div>
            <div class="appmsg_edit_mask">
                <a class="icon18_common edit_gray js_edit" data-id="${num.count}" data-type="edit" href="javascript:;">编辑</a>
                <a></a>
            </div>
        </div>
       </div>
       </c:forEach>

       <c:forEach var="mList" items="${mList}" varStatus="num" begin="1">
       <div id="appmsgItem${num.count+1}" data-fileid="" data-id="${num.count+1}" class="appmsg_item js_appmsg_item ">
            <img id="appmsgItem${num.count+1}_img" class="appmsg_thumb" data-id="${num.count+1}" src="${mList.imageUrl}"/>
            <i class="appmsg_thumb default">缩略图</i>
            <h4 class="appmsg_title"><a href="javascript:void(0);" target="_blank" id="appmsgItem${num.count+1}_title">${mList.title}</a></h4>
            <div class="appmsg_edit_mask">
                <a class="icon18_common edit_gray js_edit" data-id="${num.count+1}" data-type="edit" href="javascript:void(0);">编辑</a>
                <a class="icon18_common del_gray js_del" data-id="${num.count+1}" data-type="del" href="javascript:void(0);">删除</a>
            </div>
       </div>
       </c:forEach>

       </div>
       
        </div>
    </div>
    <div class="media_edit_area">
    <div class="appmsg_editor" style="margin-top: 10px;">

   <div class="inner" id="inner">
         <c:forEach var="mList" items="${mList}" varStatus="num">
         <div id="appmsgInner${num.count}" <c:if test="${num.count!='1'}">style="display:none;"</c:if> data-id="${num.count}" class="appmsgInner_class">
       <div class="num-contile" ><label>标题：</label>
                   <input type="hidden" id="id${num.count}" name="id${num.count}" value="${mList.id}"/>
                   <input type="hidden" id="pid${num.count}" name="pid${num.count}" value="${mList.parentId}"/>
                   <input type="text" id="title${num.count}" name="title${num.count}" class="title_ form-control" data-id="${num.count}" placeholder="输入标题" style="width:310px" value="${mList.title}" />
         </div>
         <div class="num-conmiddle">
                  <p><span>封面：</span> (大图片建议尺寸:900像素*500像素，<b style="text-decoration:underline">提示：点击下面图片则为选中封面)</b></p>
                  <div class="num-conupimg">
                  <form style="margin: 5px 0 0 20px;" id="imageform${num.count}" method="post" enctype="multipart/form-data" action="${ctx}/my/uploadImage.htm">
                   <input type="file" value="上传" name="imageFile" class="imageFile" accept="image/*"/>
                  </form>
                     
                      <input type="hidden" id="imageUrl${num.count}" name="imageUrl${num.count}" value="${mList.imageUrl}"/>
                  </div>
                  <div class="num-imgshow mainboard" style="width:100%;" data-id="${num.count}">
                  <ul>
                  <li style="display:none;"><div id='preview${num.count}'></div></li>
                  <c:forEach var="imgList" items="${mList.imgList}">
                    <li> <div><img src="${imgList}" data-id="${num.count}"/></div><div style="background-color: #e6edf0;"><a href="#" onclick="imageReduce('${imgList}');" class="check">缩略图</a><b class="check"> | </b><a href="${imgList}" class="check" target="_blank">原图</a></div></li>
                  </c:forEach>
                  </ul>
                  </div>
                  <div class="num-cheboxdiv"><input type="checkbox" class="r_hide" name="checkboxs" id="showCover${num.count}" value=""/>封面图片显示在正文中</div>
           </div>
           <div class="digest">摘要： (选填)</div>
           <div><textarea class="num-texta" rows="3" cols="20" id="summary${num.count}" name="summary${num.count}" style="width:370px;">${mList.summary}</textarea></div>
           <div class="mainbody">正文：</div>
           <div style="margin:7px auto 0;margin-left:15px; width:380px;">
                 <textarea name="content${num.count}" id="content${num.count}" data-id="${num.count}" class="content_" style="width:380px;height:300px;visibility:hidden;">${mList.content}</textarea>
           </div>
           </div>
           </c:forEach>
   </div>

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


     <div class="btn_div" style="margin:17px">
           <input type="button" name="getHtml" class="submit_btn" value="保存" onclick="saveMaterial();"/>
           <input type="button" class="submit_btn" value="手机预览" onclick="preview();"/>
           <input type="button" class="submit_btn" value="正式群发" onclick="sendMsg();"/>
     </div>
     </div>

    </div>
    </div>
<div id="background" class="background" style="display:none;"></div>
<div id="progressBar" class="progressBar" style="display:none;">正在处理中，请稍等...</div>

<%@ include file="common/footer.jsp"%>
</body>
</html>