index.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276
  1. <extend name="Public:pinduoduobase" />
  2. <block name="content">
  3. <link rel="stylesheet" href="__PUBLIC__/pinduoduo/assets/css/rank_v2.css">
  4. <div id="main">
  5. <section id="rank-content">
  6. <div id="hot-list">
  7. <div id="rank-scroll" avalonctrl="hot-list">
  8. <div class="rank-scroll-header" onclick="location.href='{:U('Category/index',array('sort' =>'hot'))}';">
  9. <div class="header-title">
  10. 热门排行
  11. </div>
  12. <div class="header-view-more" >
  13. 查看更多
  14. <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAQBAMAAADdUfNzAAAAIVBMVEUAAACcnJycnJycnJycnJycnJycnJycnJycnJycnJycnJx3mU74AAAAC3RSTlMAfw5vJHdYSjUbQQwBkC0AAAAySURBVAjXY+AoYgCCicIKQFJV0AhIsgiCOY6onAQgySUYAGFDxMFqIEywXpg5IDNhAAB0CwdERcuYjQAAAABJRU5ErkJggg==">
  15. </div>
  16. </div>
  17. <div class="rank-scroll-container">
  18. <ul class="rank-wrapper rank-scroll-type-hot">
  19. <?php $ij = 1; ?>
  20. <volist name="hot_goods_list" id="d">
  21. <li onclick="location.href='{:U('/goods/'.$d['goods_id'])}';">
  22. <img src="{$fan_ly_image}" class="scrollLoading rank-goods-img" data-echo="{$d.image}">
  23. <p class="goods-name">{$d.name}<?php echo $ij; ?></p>
  24. <div class="goods-detail">
  25. <b class="price-icon">¥</b>
  26. <b class="goods-price">{$d.pinprice}</b>
  27. <div class="goods-info">
  28. <?php if($d['seller_count']>10000)
  29. {
  30. ?>
  31. 已团1万+件
  32. <?php }else{ ?>
  33. 已团{$d.seller_count}件
  34. <?php } ?>
  35. </div>
  36. <!--ms-if-->
  37. </div>
  38. <?php if($ij < 4){ ?>
  39. <?php if($ij == 1){ ?>
  40. <img class="rank-mark-img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAAoCAMAAACcjsm3AAAAS1BMVEX/I0f/I0cAAAD/I0f/I0f/I0f/I0f/I0f/I0f/I0f/I0f/I0f/I0f/I0f/I0f/I0f/I0f/I0f/I0f/I0f/I0f/I0f/I0f/I0f/I0dL4BhjAAAAGXRSTlP1zADw3+rS2sWifjTJuq6lk3NkWU0/GQwIgwGVZQAAAJ5JREFUSMe9ljcWg0AQQ7WwYIJtcrj/SWl4qEUqRv1/sztJg/cq60Q1UMhE/aCoIviHpPyALTQ93xwB77EdRH1ucAYlZXYFYOWnhxlyhxeyKeCFHAhqie0IarVcCGrt01tgTt/TAsvUFhaIejLBvJlgdUSDeQtLDssR1QBsuagm51iFDTJXR9Sy4nqMWsi0gCjToc3ZxmpbuX082OfKBT6zBC8e3ZyZAAAAAElFTkSuQmCC">
  41. <span class="rank-mark-text rank-mark-text-white">
  42. <?php echo $ij; ?>
  43. </span>
  44. <?php } ?>
  45. <?php if($ij == 2){ ?>
  46. <img class="rank-mark-img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAAoCAMAAACcjsm3AAAASFBMVEX/0gD/0gAAAAD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gD/0gAjSJLOAAAAGHRSTlP1zADw3+rS2sWifjS6rqWTc2RZTT8ZDAj0SaaDAAAAnUlEQVRIx72WORaEMAxDFQgMy7Bv978pDQ+1SIXV/+dEcSzju8o6UQ0UMlF/KKoIDpCUX7CFpveaE+AdtoOo3wMuoCRnNwCWPz3Mkge8kk0Br+RIUDO2I6i95UpQa5+eoGbPZYFlagsLRD2bYN5NsDqjwbyHmcPniGoAtlxUk/NbhX1kjo6oYcXxGDWQGQFRocOYs4PVjnJ7ebDXlRt2fwQBBkdoFAAAAABJRU5ErkJggg==">
  47. <span class="rank-mark-text rank-mark-text-white">
  48. <?php echo $ij; ?>
  49. </span>
  50. <?php } ?>
  51. <?php if($ij == 3){ ?>
  52. <img class="rank-mark-img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAAoCAMAAACcjsm3AAAAe1BMVEUez08r0FQbz04AAAAdz08fz08ez08k0FEp0FMj0FEfz08bz04r0FQbz04cz08cz04m0FIcz04bz04bz04q0FQbz04r0FQj0FEbz04j0FEj0FEj0FEj0FEj0FEj0FEj0FEcz08r0FQbz04r0FQbz04r0FQr0FQr0FQbz07ie+ymAAAAKXRSTlP1zMwA8Ory39I07cejo9/d2trS0c7OxZN+ZFlNPxkMCOC6uq6ugHxzczb80G4AAADMSURBVEjHvdFJFoJADEXRRKEoWhWQVsRe979C4wGsqfkD3/weqB/6PZOvXDEp8vYOXkiT7+CNVG2+MNVBUyywJl3RAhtStpthq4XeDHvSlk0wVEMzHXMgCThJvCaCXpk6qBu2QaAvsEMgFTIqBE+reISgJ9tAkPIXCLMDCP3jv2GA/qp9YjDiBIMB8whByxwi0GfmDoFbgXcAeiwlAAxYqvTQlPxpgD4ohdALpV4/6VSrvuHcQ7mMXWANLSMl0I9KV42LSgfPmktYdlVvFakHO+HxPKoAAAAASUVORK5CYII=">
  53. <span class="rank-mark-text rank-mark-text-white">
  54. <?php echo $ij; ?>
  55. </span>
  56. <?php } ?>
  57. <?php } ?>
  58. </li>
  59. <?php $ij = $ij+1; ?>
  60. </volist>
  61. <li onclick="location.href='{:U('Category/index',array('sort' =>'hot'))}';">
  62. <div class="rank-see-all">
  63. <div>
  64. 全部
  65. </div>
  66. <div class="see-all-en-text">
  67. see all
  68. </div>
  69. </div>
  70. </li>
  71. </ul>
  72. </div>
  73. </div>
  74. </div>
  75. <div id="new-list">
  76. <div id="rank-scroll" avalonctrl="new-list">
  77. <div class="rank-scroll-header">
  78. <div class="header-title" onclick="location.href='{:U('Category/index',array('sort' =>'new'))}';">
  79. 新品推荐
  80. </div>
  81. <div class="header-view-more" onclick="location.href='{:U('Category/index',array('sort' =>'new'))}';">
  82. 查看更多
  83. <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAQBAMAAADdUfNzAAAAIVBMVEUAAACcnJycnJycnJycnJycnJycnJycnJycnJycnJycnJx3mU74AAAAC3RSTlMAfw5vJHdYSjUbQQwBkC0AAAAySURBVAjXY+AoYgCCicIKQFJV0AhIsgiCOY6onAQgySUYAGFDxMFqIEywXpg5IDNhAAB0CwdERcuYjQAAAABJRU5ErkJggg==">
  84. </div>
  85. </div>
  86. <div class="rank-scroll-container">
  87. <ul class="rank-wrapper rank-scroll-type-new">
  88. <volist name="new_goods_list" id="d">
  89. <li onclick="location.href='{:U('/goods/'.$d['goods_id'])}';">
  90. <img src="{$fan_ly_image}" class="scrollLoading rank-goods-img" data-echo="{$d.image}">
  91. <p class="goods-name">{$d.name}</p>
  92. <div class="goods-detail">
  93. <b class="price-icon">¥</b>
  94. <b class="goods-price">{$d.pinprice}</b>
  95. <!--ms-if-->
  96. <div class="goods-info" >
  97. <?php echo date('Y-m-d', strtotime($d['date_added'])); ?>
  98. </div>
  99. </div>
  100. </li>
  101. </volist>
  102. <li onclick="location.href='{:U('Category/index',array('sort' =>'new'))}';">
  103. <div class="rank-see-all">
  104. <div>
  105. 全部
  106. </div>
  107. <div class="see-all-en-text">
  108. see all
  109. </div>
  110. </div>
  111. </li>
  112. </ul>
  113. </div>
  114. </div>
  115. </div>
  116. <div class="rank-subjects-title">
  117. 精选专题
  118. </div>
  119. <div id="subjects-list">
  120. <div class="base-list-wrapper" id="tuan_list">
  121. <volist name="list" id="d">
  122. <div class="subjects-list-item-0">
  123. <div class="rank-subject-item rank-subject-first-item">
  124. <div id="subject-item-header" onclick="location.href='{:U('Subject/index', array('id' => $d['id']) )}';">
  125. <div class="item-header-title">
  126. {$d.name}
  127. </div>
  128. <div class="item-subject-total" style="display:none;">
  129. 28件商品,累计已团1.9万次
  130. </div>
  131. <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAQBAMAAADdUfNzAAAAIVBMVEUAAACcnJycnJycnJycnJycnJycnJycnJycnJycnJycnJx3mU74AAAAC3RSTlMAfw5vJHdYSjUbQQwBkC0AAAAySURBVAjXY+AoYgCCicIKQFJV0AhIsgiCOY6onAQgySUYAGFDxMFqIEywXpg5IDNhAAB0CwdERcuYjQAAAABJRU5ErkJggg==">
  132. </div>
  133. <div class="subject-goods-container">
  134. <ul class="subject-goods-wrapper rank-subject-scroll-subjects-list-item-0">
  135. <volist name="d.list" id="good">
  136. <li onclick="location.href='{:U('/goods/'.$good['goods_id'])}';">
  137. <img src="{$fan_ly_image}" class="scrollLoading subject-goods-img" data-echo="{$good.image}">
  138. <p class="goods-name">{$good.name} </p>
  139. <div class="goods-price">
  140. <b class="price-icon">¥</b>
  141. <b class="price-num">{$good.pinprice}</b>
  142. </div>
  143. </li>
  144. </volist>
  145. <li onclick="location.href='{:U('Subject/index', array('id' => $d['id']) )}';">
  146. <div class="subject-see-bg">
  147. <div class="subject-see-all">
  148. <div>
  149. 全部
  150. </div>
  151. <div class="see-all-en-text">
  152. see all
  153. </div>
  154. </div>
  155. </div>
  156. </li>
  157. </ul>
  158. </div>
  159. </div>
  160. </div>
  161. </volist>
  162. </div>
  163. </div>
  164. </section>
  165. </div>
  166. <div class="center" id="center_pullup" style="display:none;">
  167. <span><img class="img_rotate" src="__PUBLIC__/pinduoduo/assets/img/pull_loading_8eba142.png"/>
  168. </span><span class="orders_text"></span>
  169. </div>
  170. <include file="Widget:pin_notify" />
  171. <include file="Public:foot_lazy" />
  172. <include file="Public:foot_pinduoduo" />
  173. <style>
  174. .center {
  175. width: 170px;
  176. margin: 0 auto;
  177. text-align: center;
  178. }
  179. .img_rotate {
  180. width: 30px;
  181. height: 30px;
  182. margin-top: 7px;
  183. margin-right: 5px;
  184. -webkit-animation: loading 1s linear 0s infinite;
  185. }
  186. @-webkit-keyframes loading {
  187. 0% {
  188. -webkit-transform: rotate(0);
  189. }
  190. 100% {
  191. -webkit-transform: rotate(360deg);
  192. }
  193. }
  194. .orders_text {
  195. line-height: 45px;
  196. font-weight: 700;
  197. font-size: 15px;
  198. }
  199. </style>
  200. <script>
  201. var offset = 0;
  202. var _pa = 2;
  203. var is_can_next = 1;
  204. var cur_url = "{:U('Rank/info')}";
  205. var req_step = 1;
  206. function loaddata()
  207. {
  208. var totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop()); //浏览器的高度加上滚动条的高度
  209. if ($(document).height() <= totalheight+200) //当文档的高度小于或者等于总的高度的时候,开始动态加载数据
  210. {
  211. if(is_can_next == 1)//加载数据
  212. {
  213. is_can_next = 0;
  214. nextpage();
  215. }
  216. }
  217. }
  218. function nextpage()
  219. {
  220. $('#center_pullup').show();
  221. $.ajax(
  222. {
  223. url: cur_url,
  224. type:'post',
  225. data:{page:_pa},
  226. dataType: 'json',
  227. success: function(result){
  228. if(result.code == 1)
  229. {
  230. $('#tuan_list').append(result.html);
  231. $('#center_pullup').hide();
  232. _pa++;
  233. is_can_next = 1;
  234. bindImgEvent();
  235. } else if(result.code == 0) {
  236. $('#center_pullup').remove();
  237. }
  238. }
  239. }
  240. );
  241. }
  242. $(function(){
  243. $(window).scroll( function() {
  244. loaddata();
  245. });
  246. })
  247. </script>
  248. </block>