recent.html 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
  1. {extend name="layout/layout" /}
  2. {block name="title"}最近阅读{/block}
  3. {block name="css"}
  4. <!-- 这里引入css -->
  5. <link href="{:client_asset('/css/frontend/common.css')}" rel="stylesheet" type="text/css">
  6. <link href="{:client_asset('/css/frontend/recently.css')}" rel="stylesheet" type="text/css">
  7. <link href="{:client_asset('/css/frontend/classify.css')}" rel="stylesheet" type="text/css">
  8. <style type="text/css">
  9. .content_null_top_border{
  10. border-top: 0;
  11. }
  12. </style>
  13. {/block}
  14. {block name="zepto"}
  15. <!-- 这是zepto插件 -->
  16. <script type="text/javascript" src="{:client_asset('/libs/zepto/zepto.picLazyLoad.min.js')}"></script>
  17. {/block}
  18. {block name="menu_title"}最近阅读{/block}
  19. {block name="main"}
  20. <!-- 这是正文 body_sytle_girl -->
  21. <!-- 提示置顶 -->
  22. <div class="set_top_box" style="display:none;">点击右上角[在聊天中置顶或者浮窗]阅读有惊喜↑</div>
  23. <div class="body_sytle">
  24. <!--i_nav_box 顶部导航-->
  25. {notempty name="rencently"}
  26. <div class="r_img_list_box">
  27. <div class="r_img_edit_box">
  28. <div class="r_book_num">
  29. <strong totalnum="{$totalNum}">共{$totalNum}本</strong>
  30. <em>选中0本</em>
  31. </div>
  32. <div class="r_img_edit_but_box">
  33. <a href="javascript:;" class="r_img_edit_open">管理</a>
  34. <a href="javascript:;" class="r_img_edit_close">取消</a>
  35. <a href="javascript:;" class="r_img_edit_remove">删除</a>
  36. </div>
  37. </div>
  38. <ul class="r_img_ul" id="recent_ul">
  39. {foreach name="$rencently" item="data" }
  40. <li supdatet="{$data.updatetime}" sbid = "{$data.book_id}" recentid = "{$data.id}">
  41. {if condition="$data.state eq '0'"}
  42. <a href="javascript:;" class="r_img_book_null">
  43. {else /}
  44. <a href="{:url('clientweb/book/chapter',['book_id'=>$data.book_id,'chapter_id'=>$data.chapter_id],true)}" class="client-read" data-chapter-id="{$data.chapter_id}" data-book-info='{$data.book_json}'>
  45. {/if}
  46. <div class="r_img">
  47. <img src="{$data.image}" />
  48. {if condition="$data.state eq '0'"}<span></span>{/if}
  49. </div>
  50. <div class="r_img_text">
  51. <h3>{$data.book_name}</h3>
  52. <div class="r_img_chaptername">上次读到:{$data.chapter_name}</div>
  53. <div class="r_img_end">更新至:{$data.last_chapter_name}</div>
  54. </div>
  55. </a>
  56. </li>
  57. {/foreach}
  58. </ul>
  59. <!--r_img_ul 最近阅读列表 r_img_remove_select-->
  60. <div class="loading_box"><span>已显示全部图书</span></div>
  61. </div>
  62. {/notempty}
  63. <!--r_img_list 编辑最近阅读列表 r_img_list_edit_remove r_img_list_edit -->
  64. <div class="content_null_box content_null_top_border" {if condition="count($rencently) eq 0 "} style="display:block;" {else /} style="display:none;"{/if}>
  65. <img src="{:client_asset('/img/frontend/icon/icon_5.png')}" style="width: 1.05rem;" />
  66. <span>你还没有<i>阅读</i>记录</span>
  67. </div>
  68. <div class="r_img_list_other" {if condition="count($rencently) elt 3 "} style="display:block;" {else /} style="display:none;"{/if}>
  69. <div class="r_img_list_other_tit">
  70. <h2>为你推荐</h2>
  71. </div>
  72. <ul class="r_img_ul">
  73. {volist name="$ranklist['idx']" id="data" offset="0" length='10'}
  74. <li>
  75. <a href="{:url('clientweb/book/info',['book_id'=>$data.id,],true)}">
  76. <div class="r_img">
  77. <img src="{$data.image}" />
  78. <span></span>
  79. </div>
  80. <div class="r_img_text">
  81. <h3>{$data.name}</h3>
  82. <p>{$data.description}</p>
  83. <div class="i_images_txt_other">
  84. <strong>
  85. {if condition="$data.is_finish eq 1"}
  86. <i>已完结</i>
  87. {else/}
  88. <i style="color: #7fdae9;">连载中</i>
  89. {/if}
  90. <b>{$data.author}</b>
  91. </strong>
  92. <em>{$data.read_num}人在追</em>
  93. </div>
  94. </div>
  95. </a>
  96. </li>
  97. {/volist}
  98. </ul>
  99. </div>
  100. </div>
  101. <!--活动弹框-->
  102. <div {empty name="activityRes"}style="display: none;" {else /}data-type="1"{/empty} class="christmas_popup_box">
  103. <div class="christmas_body">
  104. <div class="christmas_main">
  105. <a href="javascript:;" class="christmas_close_2"></a>
  106. {notempty name="$activityRes"}
  107. <a href="/s/0?rid={$activityRes.id}&aid={$activityRes.aid}" class="christmas_main_but"><img src="{$activityRes.popimage}" /></a>
  108. {/notempty}
  109. </div>
  110. </div>
  111. <div class="christmas_jgb"></div>
  112. </div>
  113. {/block}
  114. {block name="footer"}
  115. {include file='public/footer'}
  116. {/block}
  117. {block name="js"}
  118. <!-- 这里引入js -->
  119. <script type="text/javascript" src="{:client_asset('/js/frontend/recently.js')}"></script>
  120. <script>
  121. var pagenum=2,
  122. sBookstop=true,
  123. sBookstopTime=null,
  124. pagesize=10,
  125. block_id = $("#block_id").val(),
  126. user_id=$.fn.cookie('user_id');
  127. $(function(){
  128. $('img').picLazyLoad({
  129. effect : "fadeIn"
  130. });
  131. if(user_id && $('#recent_ul li').length >= pagesize){
  132. console.log(user_id);
  133. $(window).scroll(function(){
  134. var nWinH = document.documentElement.clientHeight;
  135. var nScrollTop = (document.body.scrollTop || document.documentElement.scrollTop) + nWinH;
  136. var nBodyScrollH = document.body.scrollHeight;
  137. if(sBookstop && nBodyScrollH - nScrollTop < 600){
  138. bookstoptime();
  139. loadingList();
  140. }
  141. });
  142. }
  143. });
  144. function loadingList(){
  145. var sUpadateTime = '';
  146. if($('#recent_ul li').length > 0){
  147. var sUpadateTime = $('#recent_ul li').last().attr('supdatet');
  148. }
  149. $('.loading_box').html('<span>正在加載中,请稍候......</span>').show();
  150. $.ajax({
  151. type: 'post',
  152. url: '/clientwebapi/user/getReadRecently',
  153. timeout: 10000,
  154. cache: false,
  155. dataType: 'json',
  156. data: {
  157. 'pageSize':pagesize,
  158. 'updatetime':sUpadateTime
  159. },
  160. success: function (data) {
  161. clearTimeout(sBookstopTime);
  162. if (typeof data == 'string') {
  163. data = JSON.parse(data);
  164. }
  165. data = data.data;
  166. var sLi = '';
  167. for(var i=0; i<data.length; i++){
  168. if(data[i]['state'] == 1 || data[i]['state'] == '-1'){
  169. sLi += '<li supdatet="' + data[i].updatetime + '" sbid = "' + data[i].book_id + '"'+ 'recentid = "'+ data[i].id+'">\
  170. <a href="/clientweb/book/chapter?book_id='+ data[i]['book_id']+'&chapter_id='+ data[i]['chapter_id']+'" class="client-read" data-chapter-id="'+data[i]['chapter_id']+'" data-book-info=\''+data[i]['book_json']+'\'>\
  171. <div class="r_img">\
  172. <img src="{:asset('/img/frontend/images/default_img.png')}" data-original="'+ data[i]['image'] +'" />\
  173. <span></span>\
  174. </div>\
  175. <div class="r_img_text">\
  176. <h3>'+ data[i]['book_name'] +'</h3>\
  177. <div class="r_img_chaptername">上次读到:'+ data[i]['chapter_name'] +'</div>\
  178. <div class="r_img_end">更新至:'+ data[i]['last_chapter_name'] +'</div>\
  179. </div>\
  180. </a>\
  181. </li>';
  182. }else{
  183. sLi += '<li supdatet="' + data[i].updatetime + '" sbid = "' + data[i].book_id + '"'+ 'recentid = "'+ data[i].id+'">\
  184. <a href="javascript:;" class="r_img_book_null">\
  185. <div class="r_img">\
  186. <img src="{:asset('/img/frontend/images/default_img.png')}" data-original="'+ data[i]['image'] +'" />\
  187. <span></span>\
  188. </div>\
  189. <div class="r_img_text">\
  190. <h3>'+ data[i]['book_name'] +'</h3>\
  191. <div class="r_img_chaptername">上次读到:'+ data[i]['chapter_name'] +'</div>\
  192. <div class="r_img_end">更新至:'+ data[i]['last_chapter_name'] +'</div>\
  193. </div>\
  194. </a>\
  195. </li>';
  196. }
  197. }
  198. $('#recent_ul').append(sLi);
  199. pagenum ++;
  200. if(data.length < pagesize){
  201. $('.loading_box').html('<span>已显示全部</span>').show();
  202. sBookstop = false;
  203. }else{
  204. $('.loading_box').html('<span>下拉加载更多</span>').show();
  205. sBookstop = true;
  206. }
  207. $('img').picLazyLoad({
  208. effect : "fadeIn"
  209. });
  210. },
  211. error: function (XMLHttpRequest, textStatus, errorThrown) {
  212. }
  213. });
  214. }
  215. //防止重复请求数据
  216. function bookstoptime() {
  217. clearTimeout(sBookstopTime);
  218. sBookstop = false;
  219. sBookstopTime = setTimeout(function () {
  220. sBookstop = true;
  221. }, 10000);
  222. }
  223. </script>
  224. {/block}