firstanswers.jsp 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2. pageEncoding="UTF-8"%>
  3. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  4. <%
  5. String path = request.getContextPath();
  6. String basePath = path + "/common/";
  7. %>
  8. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  9. <html>
  10. <head>
  11. <meta charset="utf-8">
  12. <meta name="renderer" content="webkit|ie-comp|ie-stand">
  13. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  14. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  15. <meta http-equiv="Cache-Control" content="no-siteapp" />
  16. <LINK rel="Bookmark" href="/favicon.ico" >
  17. <LINK rel="Shortcut Icon" href="/favicon.ico" />
  18. <!--[if lt IE 9]>
  19. <script type="text/javascript" src="lib/html5.js"></script>
  20. <script type="text/javascript" src="lib/respond.min.js"></script>
  21. <script type="text/javascript" src="lib/PIE_IE678.js"></script>
  22. <![endif]-->
  23. <link href="<%=basePath %>admin/css/H-ui.min.css" rel="stylesheet" type="text/css" />
  24. <link href="<%=basePath %>admin/css/H-ui.admin.css" rel="stylesheet" type="text/css" />
  25. <link href="<%=basePath %>admin/css/style.css" rel="stylesheet" type="text/css" />
  26. <link href="<%=basePath %>admin/lib/Hui-iconfont/1.0.1/iconfont.css" rel="stylesheet" type="text/css" />
  27. <!--[if IE 6]>
  28. <script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js" ></script>
  29. <script>DD_belatedPNG.fix('*');</script>
  30. <![endif]-->
  31. <title>关键字回复</title>
  32. <style type="text/css">
  33. .matext{font-size: 16px; color: #0088CC; font-weight: bold;}
  34. .maimg{width: 100%; height: 120px;}
  35. </style>
  36. </head>
  37. <body>
  38. <!-- 遮罩层 -->
  39. <div align="center" style="position: absolute; width: 100%; height: 100%; z-index: 1000;color:#fff!important;background-color:rgba(0,0,0,0.6); display: none;" id="imageTextSource">
  40. <div class="pt-20 mt-30" align="center" style="width: 830px; height:85%; overflow:auto;background-color: white;">
  41. <div class="text-c bk-gray radius box-shadow" style="width: 800px;">
  42. <div class="text-l bk-gray radius pd-5 f-16 c-black" style="background-color: #F5FAFE; font-weight: bold;">&nbsp;素材资源
  43. <div class="text-c pl-10" style="float: right;">
  44. <input class="btn btn-success radius" type="button" value="确认" onclick="sureImageText()">&nbsp;&nbsp;&nbsp;
  45. <input class="btn radius" type="button" onclick="closeWindow(this, '')" value="取消">
  46. </div>
  47. </div>
  48. <div class="text-c radius pt-10 pb-10" style="float: inherit;padding-left: 2%; padding-right: 2%;" id="imageTextList">
  49. <!-- 显示在左侧的素材 -->
  50. <div class="text-c f-l" style="width: 375px;" id="leftImageText">
  51. <!-- 一个图文素材 -->
  52. <!-- <div class="text-c bk-gray radius mt-20 box-shadow" style="background-color: #F5FAFE">
  53. <div class="text-l pl-10 pt-10 pr-10">
  54. <span class="matext">【双十二5元现金券】12.7-14号,双12来袭,替你省下一个双11</span>
  55. <p>2015-02-08</p>
  56. </div>
  57. <div class="text-c pl-10 pb-10 pr-10" style="border-bottom: 1px solid #E8F5FF;">
  58. <img src="" alt="" class="maimg">
  59. </div>
  60. <div class="text-l min_img box-shadow" style="border-bottom: 1px solid #E8F5FF;width: 100%; height: 70px;" id="minzhezhao">
  61. <div class="f-l mt-10 mt-10" style="width: 75%;">
  62. <p class="ml-10">&nbsp;&nbsp;${imageTextMore.title }</p>
  63. </div>
  64. <div class="f-r text-r mt-5 mb-5" style="width: 24%;">
  65. <img src="${imageTextMore.imageUrl }" alt="缩略图" style="width: 60px; height: 60px; margin-right: 10px;">
  66. </div>
  67. </div>
  68. </div> -->
  69. </div>
  70. <!-- 显示在右侧的素材 -->
  71. <div class="text-c f-r" style="width: 375px;" id="rightImageText">
  72. <!-- 一个图文素材 -->
  73. <!-- <div class="text-c bk-gray radius mt-20 box-shadow">
  74. <div class="text-l pl-10 pt-10 pr-10">
  75. <span class="matext">【双十二5元现金券】12.7-14号,双12来袭,替你省下一个双11</span>
  76. <p>2015-02-08</p>
  77. </div>
  78. <div class="text-c pl-10 pb-10 pr-10">
  79. <img src="" alt="" class="maimg">
  80. </div>
  81. </div> -->
  82. </div>
  83. <!-- 右侧框end -->
  84. </div>
  85. </div>
  86. <!-- 整个素材框end -->
  87. </div>
  88. <!-- <div style="background-color:rgba(0,0,0,0.6); float: left;width: 100%; height: 50px; z-index: 2000;position:fixed;">dsfad</div> -->
  89. </div>
  90. <nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 微信管理 <span class="c-gray en">&gt;</span> 首次关注回复 <a class="btn btn-success radius r mr-20" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
  91. <div class="pd-20" align="center">
  92. <div class="text-c bk-gray radius box-shadow" style="width: 700px;">
  93. <div class="text-l bk-gray radius pd-5 f-16 c-black" style="background-color: #F5FAFE; font-weight: bold;">&nbsp;首次关注回复</div>
  94. <div class="text-c radius pt-10 pb-10" style="float: inherit;padding-left: 4%; padding-right: 4%;">
  95. <!-- 显示在左侧的素材 -->
  96. <div class="text-c f-l" style="width: 650px;">
  97. <form action="${pageContext.request.contextPath }/admin/wx/updateandaddFirstJoinKey/${token}" method="post" id="myForm">
  98. <!-- 添加素材按钮 -->
  99. <div class="text-c bk-gray radius pd-20 mt-20">
  100. <div class="text-l pt-10">
  101. 回复类型:<span class="select-box inline" style="width: 100px;">
  102. <select name="reType" class="select" style="width: 90px;" id="selectTextAndImg">
  103. <c:choose>
  104. <c:when test="${firstJoinKey.reMessageType ==2}">
  105. <option value="1">文字</option>
  106. <option value="2" selected="selected">图文</option>
  107. </c:when>
  108. <c:otherwise>
  109. <option value="1" selected="selected">文字</option>
  110. <option value="2">图文</option>
  111. </c:otherwise>
  112. </c:choose>
  113. </select>
  114. </span>
  115. </div>
  116. <c:if test="${firstJoinKey.reMessageType == 1}">
  117. <!-- 自动回复图文素材模块 -->
  118. <div id="imgtext" style="display: none;">
  119. <div class="text-l mt-20">
  120. 图文资源:<span class="btn-upload form-group">
  121. <a href="javascript:void();" class="btn btn-primary upload-btn" onclick="return searchimgtext()"><i class="Hui-iconfont">&#xe642;</i>选择图文</a>
  122. </span>
  123. (<font style="color: red;">*</font><font style="font-size: 13px;">必填,请选择一条图文素材</font>)
  124. </div>
  125. <!-- 一个图文素材 -->
  126. <div class="text-c bk-gray radius mt-20 box-shadow" style="width: 350px;" id="imageText">
  127. <input type="hidden" id="refImageTextId" name="refImageTextId" value=""/>
  128. <div class="text-l pl-10 pt-10 pr-10">
  129. <span class="matext" id="mobanTitle">标题</span>
  130. <p id="mobanTime">2015-02-08</p>
  131. </div>
  132. <div class="text-c pl-10 pb-10 pr-10" style="border-bottom: 1px solid #E8F5FF;">
  133. <img src="" alt="" class="maimg" id="mobanImage">
  134. </div>
  135. <!-- <div class="text-l min_img box-shadow" style="border-bottom: 1px solid #E8F5FF;width: 100%; height: 70px;" id="">
  136. <div class="f-l mt-10 mt-10" style="width: 75%;">
  137. <p class="ml-10">&nbsp;&nbsp;标题</p>
  138. </div>
  139. <div class="f-r text-r mt-5 mb-5" style="width: 24%;">
  140. <img src="" alt="缩略图" style="width: 60px; height: 60px; margin-right: 10px;">
  141. </div>
  142. </div> -->
  143. </div>
  144. </div>
  145. <div class="text-l pl-10 pt-20 pr-10 pb-20" id="facetext">
  146. <span style="vertical-align: top; height: 100%; width: 20%;">&nbsp;&nbsp;&nbsp;&nbsp;回复:</span>
  147. <textarea rows='10' cols='30' style='reset;width:85%;' name="refText" id="bodyEdit">${firstJoinKey.reText}</textarea>
  148. </div>
  149. </c:if>
  150. <c:if test="${firstJoinKey.reMessageType == 2}">
  151. <!-- 自动回复图文素材模块 -->
  152. <div id="imgtext" style="display: block;">
  153. <div class="text-l mt-20">
  154. 图文资源:<span class="btn-upload form-group">
  155. <a href="javascript:void(0);" class="btn btn-primary upload-btn" onclick="searchimgtext()"><i class="Hui-iconfont">&#xe642;</i>选择图文</a>
  156. </span>
  157. (<font style="color: red;">*</font><font style="font-size: 13px;">必填,请选择一条图文素材</font>)
  158. </div>
  159. <c:if test="${!empty imageTextInfo }">
  160. <!-- 一个图文素材 -->
  161. <div class="text-c bk-gray radius mt-20 box-shadow" style="width: 350px;" id="imageText">
  162. <input type="hidden" id="refImageTextId" name="refImageTextId" value="${imageTextInfo.imagetextno }"/>
  163. <div class="text-l pl-10 pt-10 pr-10">
  164. <span class="matext" id="mobanTitle">${imageTextInfo.title }</span>
  165. <p id="mobanTime">${imageTextInfo.createtime }</p>
  166. </div>
  167. <div class="text-c pl-10 pb-10 pr-10" style="border-bottom: 1px solid #E8F5FF;">
  168. <img src="${imageTextInfo.imageurl }" alt="" class="maimg" id="mobanImage">
  169. </div>
  170. <c:if test="${!empty imageTextInfo.subVoList }">
  171. <c:forEach items="${imageTextInfo.subVoList }" var="imageTextChild">
  172. <div class='text-l min_img box-shadow' title='minimg' style='border-bottom: 1px solid #E8F5FF;width: 100%; height: 70px;'>
  173. <div class='f-l mt-10 mt-10' style='width: 75%;'>
  174. <p class='ml-10' style='color:black;'>&nbsp;&nbsp;${imageTextChild.title }</p>
  175. </div>
  176. <div class='f-r text-r mt-5 mb-5' style='width: 24%;'>
  177. <img src='${imageTextChild.imageUrl }' alt='image' style='width: 60px; height: 60px; margin-right: 10px;'>
  178. </div>
  179. </div>
  180. </c:forEach>
  181. </c:if>
  182. </div>
  183. </c:if>
  184. </div>
  185. <div class="text-l pl-10 pt-20 pr-10 pb-20" id="facetext" style="display: none;">
  186. <span style="vertical-align: top; height: 100%; width: 20%;">&nbsp;&nbsp;&nbsp;&nbsp;回复:</span>
  187. <textarea rows='10' cols='30' style='reset;width:85%;' name="refText" id="bodyEdit">${firstJoinKey.reText}</textarea>
  188. </div>
  189. </c:if>
  190. <!-- 保存取消按钮 -->
  191. <div class="text-l pl-10 pt-20 pr-10 pb-20">
  192. <input class="btn btn-success radius" id="saveKeyAnswerButton" type="button" value="保存">&nbsp;&nbsp;&nbsp;
  193. <input class="btn disabled radius" type="button" value="取消">
  194. </div>
  195. </div>
  196. </form>
  197. </div>
  198. </div>
  199. </div>
  200. </div>
  201. <script type="text/javascript" src="<%=basePath %>admin/lib/jquery/1.9.1/jquery.min.js"></script>
  202. <script type="text/javascript" src="<%=basePath %>admin/lib/Validform/5.3.2/Validform.min.js"></script>
  203. <script type="text/javascript" src="<%=basePath %>admin/lib/layer/1.9.3/layer.js"></script>
  204. <script type="text/javascript" src="<%=basePath %>admin/js/H-ui.js"></script>
  205. <script type="text/javascript" src="<%=basePath %>admin/js/H-ui.admin.js"></script>
  206. <script charset="utf-8" src="<%=basePath %>other/kingedit/kindeditor-min.js"></script>
  207. <script charset="utf-8" src="<%=basePath %>other/kingedit/lang/zh_CN.js"></script>
  208. <script type="text/javascript">
  209. $(function() {
  210. $("#selectTextAndImg").on("change", function() {
  211. if($("#selectTextAndImg").val() == 1) {
  212. //显示文字编辑器
  213. $("#imgtext").hide();
  214. $("#facetext").show();
  215. } else if($("#selectTextAndImg").val() == 2) {
  216. //显示图文素材选择器
  217. $("#facetext").hide();
  218. $("#imgtext").show();
  219. }
  220. });
  221. //保存事件
  222. $("#saveKeyAnswerButton").click(function() {
  223. var type = $("#selectTextAndImg").val();
  224. var imageTextId = $("#refImageTextId").val();
  225. var bodyEdit = $("#bodyEdit").val();
  226. var url = $("#myForm").attr("action");
  227. if(type == 1) {
  228. if(bodyEdit.length < 1 || bodyEdit.length > 200) {
  229. layer.msg("关键字长度在1~200个字符之间!", {icon: 1,time:1000});
  230. return false;
  231. } else {
  232. var reqJSON = {"type":type,"bodyEdit":bodyEdit};
  233. $.post(url, reqJSON, function(result) {
  234. if(result.msg == "tokenerr") {
  235. layer.msg("token表单验证失败!请刷新重试!", {icon: 5,time:1000});
  236. } else if(result.msg == "success"){
  237. layer.msg("保存成功!", {icon: 6,time:1000});
  238. $("#myForm").attr("action", "${pageContext.request.contextPath }/admin/wx/updateandaddFirstJoinKey/"+result.token);
  239. } else {
  240. layer.msg(result.msg, {icon: 5,time:1000});
  241. $("#myForm").attr("action", "${pageContext.request.contextPath }/admin/wx/updateandaddFirstJoinKey/"+result.token);
  242. }
  243. });
  244. }
  245. } else if(type == 2) {
  246. if(imageTextId == null || imageTextId == "") {
  247. layer.msg("请选择图文素材!", {icon: 1,time:1000});
  248. return false;
  249. } else {
  250. var reqJSON = {
  251. "type":type,
  252. "imageTextId":imageTextId
  253. };
  254. $.post(url, reqJSON, function(result) {
  255. if(result.msg == "tokenerr") {
  256. layer.msg("token表单验证失败!请刷新重试!", {icon: 5,time:1000});
  257. } else if(result.msg == "success"){
  258. layer.msg("保存成功!", {icon: 6,time:1000});
  259. $("#myForm").attr("action", "${pageContext.request.contextPath }/admin/wx/updateandaddFirstJoinKey/"+result.token);
  260. } else {
  261. layer.msg(result.msg, {icon: 5,time:1000});
  262. $("#myForm").attr("action", "${pageContext.request.contextPath }/admin/wx/updateandaddFirstJoinKey/"+result.token);
  263. }
  264. });
  265. }
  266. }
  267. });
  268. });
  269. var token = true;
  270. //获取请求资源
  271. function searchimgtext() {
  272. if(token) {
  273. token = false;
  274. //$("#imageTextSource").css("display", "block");
  275. var url = "${pageContext.request.contextPath}/admin/wx/showImageTextSource";
  276. $.post(url, {"time":new Date}, function(result) {
  277. $("#imageTextSource").css("display", "block");
  278. if(result != "") {
  279. for(var i = 0; i < result.length; i++) {
  280. if((i%2) == 0) {
  281. $("#leftImageText").append("<div id='sucai"+i+"' class='text-c bk-gray radius mt-20 box-shadow changeColor' style='background-color: #fff' onclick='changeDiv(this)'><input type='hidden' id='imageTextId' value='"+result[i].imageTextMD5+"'/><div class='text-l pl-10 pt-10 pr-10'><span class='matext'> "+result[i].title+"</span><p style='color:black;' id='datetime'> "+result[i].createtime+"</p></div><div class='text-c pl-10 pb-10 pr-10' style='border-bottom: 1px solid #E8F5FF;'><img src='"+result[i].imageurl+"' alt='' class='maimg'></div></div>");
  282. var moreImageText = result[i].subVoList;
  283. if(moreImageText != "" && moreImageText.length >= 1) {
  284. for(var j = 0; j < moreImageText.length; j++) {
  285. $("#sucai"+i).append("<div class='text-l min_img box-shadow' title='minimg' style='border-bottom: 1px solid #E8F5FF;width: 100%; height: 70px;'><div class='f-l mt-10 mt-10' style='width: 75%;'><p class='ml-10' style='color:black;'>&nbsp;&nbsp;"+moreImageText[j].title+"</p></div><div class='f-r text-r mt-5 mb-5' style='width: 24%;'><img src='"+moreImageText[j].imageUrl+"' alt='image' style='width: 60px; height: 60px; margin-right: 10px;'></div></div>");
  286. }
  287. }
  288. }
  289. if((i%2) == 1) {
  290. $("#rightImageText").append("<div id='sucai"+i+"' class='text-c bk-gray radius mt-20 box-shadow changeColor' style='background-color: #fff' onclick='changeDiv(this)'><input type='hidden' id='imageTextId' value='"+result[i].imageTextMD5+"'/><div class='text-l pl-10 pt-10 pr-10'><span class='matext'> "+result[i].title+"</span><p style='color:black;' id='datetime'> "+result[i].createtime+"</p></div><div class='text-c pl-10 pb-10 pr-10' style='border-bottom: 1px solid #E8F5FF;'><img src='"+result[i].imageurl+"' alt='' class='maimg'></div></div>");
  291. var moreImageText = result[i].subVoList;
  292. if(moreImageText != "" && moreImageText.length >= 1) {
  293. for(var j = 0; j < moreImageText.length; j++) {
  294. $("#sucai"+i).append("<div class='text-l min_img box-shadow' title='minimg' style='border-bottom: 1px solid #E8F5FF;width: 100%; height: 70px;'><div class='f-l mt-10 mt-10' style='width: 75%;'><p class='ml-10' style='color:black;'>&nbsp;&nbsp;"+moreImageText[j].title+"</p></div><div class='f-r text-r mt-5 mb-5' style='width: 24%;'><img src='"+moreImageText[j].imageUrl+"' alt='image' style='width: 60px; height: 60px; margin-right: 10px;'></div></div>");
  295. }
  296. }
  297. }
  298. }
  299. } else {
  300. //alert("暂时没有您要的信息");
  301. $("#imageTextList").html("<div style='color:black;'>暂没有任何图文素材,请及时添加!</div>");
  302. }
  303. return false;
  304. })
  305. } else {
  306. layer.msg("正在发送请求,请稍等...", {icon: 5,time:3000});
  307. }
  308. }
  309. //关闭图文资源
  310. function closeWindow(obj, id) {
  311. $("#imageTextSource").css("display", "none");
  312. $("#leftImageText").html("");
  313. $("#rightImageText").html("");
  314. token = true;
  315. }
  316. //选择使用哪一个图文,改变其背景颜色
  317. function changeDiv(obj) {
  318. $(".changeColor").each(function() {
  319. $(this).css("background-color","#fff")
  320. })
  321. $(obj).css("background-color", "#E8F5FF");
  322. }
  323. //确认图文
  324. function sureImageText() {
  325. $(".changeColor").each(function() {
  326. //alert($(this).css("background-color"));
  327. if($(this).css("background-color") == "rgb(232, 245, 255)") {
  328. //alert($(this).find("img[class='maimg']").attr("src"));
  329. $("#refImageTextId").val($(this).find(":input[type='hidden']").val());
  330. $("#mobanTitle").html($(this).find("span:nth-child(1)").html());//主图文标题回显
  331. $("#mobanTime").html($(this).find("p[id='datetime']").html());//主图文时间回显
  332. $("#mobanImage").attr("src", $(this).find("img[class='maimg']").attr("src"));//主图文状态回显
  333. $("#imageText .min_img").each(function() {
  334. $(this).remove();
  335. })
  336. $(this).find("div[title='minimg']").each(function() {
  337. //alert($(this).find("img[alt='image']").attr("src"));
  338. $("#imageText").append("<div class='text-l min_img box-shadow' style='border-bottom: 1px solid #E8F5FF;width: 100%; height: 70px;'><div class='f-l mt-10 mt-10' style='width: 75%;'><p class='ml-10'>"+$(this).find("p[class='ml-10']").html()+"</p></div><div class='f-r text-r mt-5 mb-5' style='width: 24%;'><img src='"+$(this).find("img[alt='image']").attr("src")+"' alt='缩略图' style='width: 60px; height: 60px; margin-right: 10px;'></div></div>");
  339. });
  340. }
  341. })
  342. $("#imageTextSource").css("display", "none");
  343. $("#leftImageText").html("");
  344. $("#rightImageText").html("");
  345. token = true;
  346. }
  347. </script>
  348. <script type="text/javascript">
  349. KindEditor.ready(function(K) {
  350. window.editor = K.create('#bodyEdit',{
  351. fileManagerJson : '<%= path %>/common/other/kingedit/jsp/file_manager_json.jsp',
  352. uploadJson : '<%= path %>/common/other/kingedit/jsp/upload_json.jsp',
  353. allowFileManager : true,
  354. afterBlur: function(){this.sync();},
  355. items : []//'emoticons'
  356. });
  357. });
  358. </script>
  359. </body>
  360. </html>