message.js 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. var $;
  2. layui.config({
  3. base : "../../js/"
  4. }).use(['form','layer','layedit'],function(){
  5. var form = layui.form(),
  6. layer = parent.layer === undefined ? layui.layer : parent.layer,
  7. layedit = layui.layedit;
  8. $ = layui.jquery;
  9. //消息回复
  10. var editIndex = layedit.build('msgReply',{
  11. tool: ['face'],
  12. height:100
  13. });
  14. form.on('select(selectMsg)',function(data){
  15. var len = $(".msgHtml tr").length;
  16. for(var i=0;i<len;i++){
  17. if(data.value == "0"){
  18. $(".msgHtml tr").eq(i).show();
  19. $(".msgHtml tr.no_msg").remove();
  20. }else{
  21. if($(".msgHtml tr").eq(i).find(".msg_collect i").hasClass("icon-star")){
  22. $(".msgHtml tr").eq(i).show();
  23. }else{
  24. $(".msgHtml tr").eq(i).hide();
  25. }
  26. }
  27. }
  28. if(data.value=="1" && $(".msgHtml tr").find(".msg_collect i.icon-star").length=="0"){
  29. $(".msgHtml").append("<tr class='no_msg' align='center'><td colspan='4'>暂无收藏消息</td></tr>")
  30. }
  31. })
  32. //加载数据
  33. $.get("../../json/message.json",function(data){
  34. var msgHtml = '',msgReply;
  35. for(var i=0; i<data.length; i++){
  36. if(data[i].msgReply && data[i].msgReply.length != 0){
  37. msgReply = "已回复";
  38. }else{
  39. msgReply = "";
  40. }
  41. msgHtml += '<tr>';
  42. msgHtml += ' <td class="msg_info">';
  43. msgHtml += ' <img src="'+data[i].userface+'" width="50" height="50"><input type="hidden" value="'+data[i].msgId+'">';
  44. msgHtml += ' <div class="user_info">';
  45. msgHtml += ' <h2>'+data[i].userName+'</h2>';
  46. msgHtml += ' <p>'+data[i].userAsk+'</p>';
  47. msgHtml += ' </div>';
  48. msgHtml += ' </td>';
  49. msgHtml += ' <td class="msg_time">'+data[i].askTime+'</td>';
  50. msgHtml += ' <td class="msg_reply">'+msgReply+'</td>';
  51. msgHtml += ' <td class="msg_opr">';
  52. msgHtml += ' <a class="layui-btn layui-btn-mini layui-btn-normal msg_collect"><i class="layui-icon">&#xe600;</i> 收藏</a>';
  53. msgHtml += ' <a class="layui-btn layui-btn-mini reply_msg"><i class="layui-icon">&#xe611;</i> 回复</a>';
  54. msgHtml += ' </td>';
  55. msgHtml += '</tr>';
  56. }
  57. $(".msgHtml").html(msgHtml);
  58. })
  59. //操作
  60. $("body").on("click",".msg_collect",function(){ //收藏
  61. if($(this).text().indexOf("已收藏") > 0){
  62. layer.msg("取消收藏成功!");
  63. $(this).html("<i class='layui-icon'>&#xe600;</i> 收藏");
  64. }else{
  65. layer.msg("收藏成功!");
  66. $(this).html("<i class='iconfont icon-star'></i> 已收藏");
  67. }
  68. })
  69. //回复
  70. $("body").on("click",".reply_msg,.msgHtml .user_info h2,.msgHtml .msg_info>img",function(){
  71. var id = $(this).parents("tr").find("input[type=hidden]").val();
  72. var userName = $(this).parents("tr").find(".user_info h2").text();
  73. var index = layui.layer.open({
  74. title : "与 "+userName+" 的聊天",
  75. type : 2,
  76. content : "messageReply.html",
  77. success : function(layero, index){
  78. layui.layer.tips('点击此处返回消息列表', '.layui-layer-setwin .layui-layer-close', {
  79. tips: 3
  80. });
  81. var body = layui.layer.getChildFrame('body', index);
  82. //加载回复信息
  83. $.get("../../json/message.json",function(data){
  84. var msgReplyHtml = '',msgReply;
  85. for(var i=0; i<data.length; i++){
  86. if(data[i].msgReply && data[i].msgReply.length != 0){
  87. msgReply = "已回复";
  88. }else{
  89. msgReply = "";
  90. }
  91. if(data[i].msgId == id){
  92. if(data[i].msgReply && data[i].msgReply.length != 0){
  93. for(var j=0;j<data[i].msgReply.length;j++){
  94. msgReplyHtml += '<tr>';
  95. msgReplyHtml += ' <td class="msg_info">';
  96. msgReplyHtml += ' <img src="'+data[i].msgReply[j].userface+'" width="50" height="50">';
  97. msgReplyHtml += ' <div class="user_info">';
  98. msgReplyHtml += ' <h2>'+data[i].msgReply[j].userName+'</h2>';
  99. msgReplyHtml += ' <p>'+data[i].msgReply[j].userAsk+'</p>';
  100. msgReplyHtml += ' </div>';
  101. msgReplyHtml += ' </td>';
  102. msgReplyHtml += ' <td class="msg_time">'+data[i].msgReply[j].askTime+'</td>';
  103. msgReplyHtml += ' <td class="msg_reply"></td>';
  104. msgReplyHtml += '</tr>';
  105. }
  106. }
  107. msgReplyHtml += '<tr>';
  108. msgReplyHtml += ' <td class="msg_info">';
  109. msgReplyHtml += ' <img src="'+data[i].userface+'" width="50" height="50">';
  110. msgReplyHtml += ' <div class="user_info">';
  111. msgReplyHtml += ' <h2>'+data[i].userName+'</h2>';
  112. msgReplyHtml += ' <p>'+data[i].userAsk+'</p>';
  113. msgReplyHtml += ' </div>';
  114. msgReplyHtml += ' </td>';
  115. msgReplyHtml += ' <td class="msg_time">'+data[i].askTime+'</td>';
  116. msgReplyHtml += ' <td class="msg_reply">'+msgReply+'</td>';
  117. msgReplyHtml += '</tr>';
  118. }
  119. }
  120. body.find(".msgReplyHtml").html(msgReplyHtml);
  121. })
  122. }
  123. })
  124. //改变窗口大小时,重置弹窗的高度,防止超出可视区域(如F12调出debug的操作)
  125. $(window).resize(function(){
  126. layui.layer.full(index);
  127. })
  128. layui.layer.full(index);
  129. })
  130. //提交回复
  131. var message = [];
  132. $(".send_msg").click(function(){
  133. if(layedit.getContent(editIndex) != ''){
  134. var replyHtml = '',msgStr;
  135. replyHtml += '<tr>';
  136. replyHtml += ' <td class="msg_info">';
  137. replyHtml += ' <img src="../../images/face.jpg" width="50" height="50">';
  138. replyHtml += ' <div class="user_info">';
  139. replyHtml += ' <h2>请叫我马哥</h2>';
  140. replyHtml += ' <p>'+layedit.getContent(editIndex)+'</p>';
  141. replyHtml += ' </div>';
  142. replyHtml += ' </td>';
  143. replyHtml += ' <td class="msg_time">'+formatTime(new Date())+'</td>';
  144. replyHtml += ' <td class="msg_reply"></td>';
  145. replyHtml += '</tr>';
  146. $(".msgReplyHtml").prepend(replyHtml);
  147. $("#LAY_layedit_1").contents().find("body").html('');
  148. }else{
  149. layer.msg("请输入回复信息");
  150. }
  151. })
  152. })
  153. function formatTime(_time){
  154. var year = _time.getFullYear();
  155. var month = _time.getMonth()+1<10 ? "0"+(_time.getMonth()+1) : _time.getMonth()+1;
  156. var day = _time.getDate()<10 ? "0"+_time.getDate() : _time.getDate();
  157. var hour = _time.getHours()<10 ? "0"+_time.getHours() : _time.getHours();
  158. var minute = _time.getMinutes()<10 ? "0"+_time.getMinutes() : _time.getMinutes();
  159. return year+"-"+month+"-"+day+" "+hour+":"+minute;
  160. }