details.html 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>{$data['title']}</title>
  8. <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.css">
  9. <link rel="stylesheet" href="/css/news.css">
  10. <link rel="stylesheet" href="/static/dropload-gh-pages/dropload.css">
  11. <script type="text/javascript" src="/static/jquery-2.2.4.min.js"></script>
  12. <script type="text/javascript" src="/static/dropload-gh-pages/dropload.min.js"></script>
  13. <script type="text/javascript" src="/static/layer/layer.js"></script>
  14. <style>
  15. .container{
  16. padding: 10px;
  17. background-color: #FFFFFF;
  18. padding-bottom: 50px;
  19. padding-top: 0;
  20. }
  21. .content img{
  22. max-width: 100%;
  23. }
  24. </style>
  25. </head>
  26. <body>
  27. <div class="container">
  28. <h3>{$data['title']}</h3>
  29. <div class="text-muted">{$data['source']} {$data['comment_num']}评 {$data['create_time']}</div>
  30. <div class="content">
  31. {$data['content']|raw}
  32. </div>
  33. <div id="page-all">
  34. {if $comment}
  35. <div class="comment-select">
  36. <div class="comment-title">
  37. <img class="comment-title-img" src="/img/remen2x.png"></img>
  38. <text class="comment-title-content">热门评论</text>
  39. </div>
  40. {foreach $comment as $v}
  41. <div class="comment-content">
  42. <div class="comment-content-all">
  43. <div class="comment-head-img">
  44. <img class="head-img" src="{$v['head_image']}" onerror="this.src='/img/defaulthead.png'" alt="" />
  45. </div>
  46. <div class="comment-info-title-user">
  47. <div class="comment-name">{$v['user_name']}</div>
  48. <div class="comment-time shijian">{$v['create_time']}</div>
  49. </div>
  50. {if $token}
  51. <div class="link-a">
  52. {if $v['user_id']==$userid}
  53. <a style="text-decoration:none;" class="comment-delete" href="javascript:void" data-id="{$v['id']}" >删除</a>
  54. {/if}
  55. {if $v['user_id'] !== $userid}
  56. <a class="comment-reply" href="javascript:;" data-reply-user="{$v['user_id']}" data-id="{$v['id']}" name="{$v['user_name']}">回复</a>
  57. {/if}
  58. </div>
  59. {/if}
  60. </div>
  61. <p class="comment-content-info">{$v['content']}</p>
  62. {if $v['sub']}
  63. <div class="reply-select">
  64. {foreach $v['sub'] as $key=>$val}
  65. <div class="reply-select-title1">
  66. {if $val['user_id']==$userid}
  67. <label>{$val['user_name']}</label>
  68. {else}
  69. <label class="replyRen" data-reply-user="{$val['user_id']}" data-id="{$v['id']}">{$val['user_name']}</label>
  70. {/if}
  71. <text class="reply-select-tetx">回复</text>
  72. {if $val['reply_user_id']==$userid}
  73. <label >{$val['reply_name']}:</label>
  74. {else}
  75. <label class="replyRen" data-reply-user="{$val['reply_user_id']}" data-id="{$v['id']}">{$val['reply_name']}:</label>
  76. {/if}
  77. <text>{$val['content']}</text>
  78. </div>
  79. {/foreach}
  80. </div>
  81. {/if}
  82. </div>
  83. {/foreach}
  84. </div>
  85. {/if}
  86. </div>
  87. <div class="footer input-select bottom">
  88. <div class="input-select-text">
  89. <input type="text" readonly onclick="reply_news()" class="form-control" placeholder="欢迎发表您的观点哦~" aria-describedby="basic-addon1" />
  90. </div>
  91. <div class="bottom-all-img">
  92. <img onclick="reply_news()" src="/img/comment.png" />
  93. {if $data['like']==1}
  94. <img class="islike" value="1" src="/img/like.png" />
  95. {else}
  96. <img class="islike" value="0" src="/img/nolike.png" />
  97. {/if}
  98. </div>
  99. </div>
  100. </div>
  101. <div id="tcbox" class="tcbox">
  102. <div class="tkmain">
  103. <div class="tkmain-title">
  104. <span id="relpy"></span>
  105. <i class="glyphicon glyphicon-remove pull-right" onclick="closeTcbox()"></i>
  106. </div>
  107. <div class="tkmain-body">
  108. <textarea id="replycontent" class="form-control" rows="3"></textarea>
  109. </div>
  110. <div class="text-center">
  111. <button type="button" class="btn btn-primary" onclick="submitBtn(this)">提交</button>
  112. </div>
  113. </div>
  114. </div>
  115. </body>
  116. </html>
  117. <script>
  118. var newsid = "{$data['id']}";
  119. var token = '{$token}';
  120. var replyId = 0;
  121. var username = '';
  122. var replyUserId = 0;
  123. //删除回复
  124. $(document).on('touchstart','.comment-delete',function(){
  125. var id = $(this).attr('data-id');
  126. var url = "/h5/News/delReplay";
  127. var that = $(this);
  128. $.post(url,{id:id,token:token,},function (res) {
  129. if(res.code == 0){
  130. that.parent().parent().parent().remove();
  131. layer.msg('删除成功',{time:1000},function () {
  132. window.location.reload();
  133. })
  134. }else{
  135. layer.msg(res.msg);
  136. }
  137. })
  138. })
  139. //回复
  140. $(document).on('touchstart','.comment-reply',function(){
  141. replyId = $(this).attr('data-id');
  142. username= $(this).attr('name');
  143. replyUserId = $(this).attr('data-reply-user');
  144. showTcbox();
  145. $('#relpy').html('回复:'+username);
  146. })
  147. function reply_news() {
  148. replyId = 0;
  149. username = '';
  150. replyUserId = 0;
  151. $('#relpy').html('');
  152. showTcbox();
  153. }
  154. $(document).on('touchstart','.replyRen',function(){
  155. username= $(this).html();
  156. replyId = $(this).attr('data-id');
  157. replyUserId = $(this).attr('data-reply-user');
  158. showTcbox();
  159. $('#relpy').html('回复:'+username.replace(/[:]/g,''));
  160. })
  161. //点赞
  162. $(document).on('touchstart','.islike',function(){
  163. var type= $(this).attr('value');
  164. var url = "/h5/News/like";
  165. if(!token){
  166. layer.msg('游客无权操作');
  167. return false;
  168. }
  169. $.post(url,{newsid:newsid,token:token,type:type},function (res) {
  170. if(res.code == 0){
  171. layer.msg(res.message,{time:1000},function () {
  172. window.location.reload()
  173. })
  174. }else{
  175. layer.msg(res.message);
  176. }
  177. })
  178. });
  179. function showTcbox() {
  180. if(!token){
  181. layer.msg('游客无权操作');
  182. return false;
  183. }
  184. $('#tcbox').show();
  185. }
  186. function closeTcbox() {
  187. $('#tcbox').hide();
  188. }
  189. function submitBtn(_self){
  190. if(!token){
  191. layer.msg('游客无权操作');
  192. return false;
  193. }
  194. var flag ;
  195. if(!flag){
  196. $(_self).attr('data-flag',true);
  197. var content = $('#replycontent').val();
  198. var url = "/h5/News/replytc";
  199. $.post(url,{newsid:newsid,content:content,token:token,replyId:replyId,replyUserId:replyUserId},function (res) {
  200. if(res.code == 0){
  201. window.location.reload();
  202. }else{
  203. layer.msg(res.message);
  204. }
  205. $(_self).attr('data-flag',false);
  206. })
  207. }
  208. }
  209. </script>
  210. <script>
  211. var newsid = "{$data['id']}";
  212. var token = '{$token}';
  213. var userid= '{$userid}';
  214. $(function(){
  215. // 页数
  216. var page = 1;
  217. // 每页展示10个
  218. var size = 10;
  219. // dropload
  220. $('.container').dropload({
  221. scrollArea : window,
  222. domDown : {
  223. domClass : 'dropload-down',
  224. domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
  225. domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
  226. domNoData : '<div class="dropload-noData">暂无数据</div>'
  227. },
  228. loadDownFn : function(me){
  229. page++;
  230. // 拼接HTML
  231. var result = '';
  232. var url='/h5/News/newDetails';
  233. $.ajax({
  234. type: 'GET',
  235. url: url+'?page='+page+'&size='+size+'&newsid='+newsid+'&token='+token,
  236. dataType: 'json',
  237. success: function(res){
  238. var pageData=res.message;
  239. var arrLen = pageData.length;
  240. if(arrLen > 0){
  241. for(var i=0; i<arrLen; i++){
  242. var pageSubData =pageData[i].sub;
  243. var subLen = pageSubData.length;
  244. result +=' <div class="comment-content">';
  245. result +='<div class="comment-content-all">';
  246. result +='<div class="comment-head-img">';
  247. result +='<img class="head-img" src="'+pageData[i].head_image+'" onerror="this.src=\'/public/img/defaulthead.png\'" alt=""/>';
  248. result +='</div>';
  249. result +='<div class="comment-info-title-user">';
  250. result +='<div class="comment-name">'+pageData[i].user_name+'</div>';
  251. result +='<div class="comment-time shijian">'+pageData[i].create_time+'</div>';
  252. result +='</div>';
  253. if(token){
  254. result +='<div class="link-a">'
  255. if(pageData[i].user_id == userid){
  256. result +='<a style="text-decoration:none;" class="comment-delete" href="javascript:void" data-id="'+pageData[i].id+'" >删除</a>';
  257. }else {
  258. result +='<a class="comment-reply" href="javascript:;" data-reply-user="'+pageData[i].user_id+'" data-id="'+pageData[i].id+'" name="'+pageData[i].user_name+'">回复</a>';
  259. }
  260. result +='</div>';
  261. }
  262. result +='</div>';
  263. result +='<p class="comment-content-info">'+pageData[i].content+'</p>';
  264. if(pageSubData){
  265. if(subLen > 0){
  266. result +='<div class="reply-select">';
  267. for(var s=0; s < subLen; s++){
  268. result +='<div class="reply-select-title1">';
  269. if(pageSubData[s].user_id == userid){
  270. result +='<label>'+pageSubData[s].user_name+'</label>';
  271. }else {
  272. result +='<label class="replyRen" data-reply-user="'+pageSubData[s].user_id+'" data-id="'+pageData[i].id+'">'+pageSubData[s].user_name+'</label>';
  273. }
  274. result +='<text class="reply-select-tetx">回复</text>';
  275. if(pageSubData[s].reply_user_id == userid){
  276. result +='<label>'+pageSubData[s].reply_name+':</label>';
  277. }else{
  278. result +='<label class="replyRen" data-reply-user="'+pageSubData[s].reply_user_id+'" data-id="'+pageData[i].id+'">'+pageSubData[s].reply_name+':</label>';
  279. }
  280. result +='<text>'+pageSubData[s].content+'</text>';
  281. result+='</div>'
  282. }
  283. result+='</div>';
  284. }
  285. result+='</div>';
  286. }
  287. result+='</div>';
  288. }
  289. // 如果没有数据
  290. }else{
  291. // 锁定
  292. me.lock();
  293. // 无数据
  294. me.noData();
  295. }
  296. // 为了测试,延迟1秒加载
  297. setTimeout(function(){
  298. // 插入数据到页面,放到最后面
  299. $('.comment-select').append(result);
  300. // 每次数据插入,必须重置
  301. me.resetload();
  302. },1000);
  303. },
  304. error: function(xhr, type){
  305. // 即使加载出错,也得重置
  306. me.resetload();
  307. }
  308. });
  309. },
  310. threshold : 50
  311. });
  312. });
  313. </script>