pro-list-channel-1.html 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
  6. <meta name="apple-mobile-web-app-capable" content="yes">
  7. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  8. <title>产品列表</title>
  9. <link rel="stylesheet" type="text/css" href="css/mui.min.css" />
  10. <link rel="stylesheet" type="text/css" href="css/iconfont.css" />
  11. <link rel="stylesheet" type="text/css" href="css/main.css" />
  12. <style>
  13. .btn-buy-know{border: 1px solid #999;position: absolute;right: 0;bottom: 0;}
  14. .pro-title{padding:10px 0 6px 0;}
  15. .pro-desc{padding: 0 0 8px 0;}
  16. .pro-delete{color: #999;margin-left: 15px;}
  17. .my-view-no .mui-table-view-cell:after{display: none;}
  18. </style>
  19. <script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
  20. <script>
  21. //屏蔽分享
  22. document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
  23. WeixinJSBridge.call('hideOptionMenu');
  24. });
  25. </script>
  26. </head>
  27. <body>
  28. <!--内容开始-->
  29. <div class="mui-content">
  30. <div class="banner-box">
  31. <!--banner开始-->
  32. <div id="slider" class="mui-slider">
  33. <div class="mui-slider-group mui-slider-loop">
  34. <!-- 额外增加的一个节点(循环轮播:第一个节点是最后一张轮播) -->
  35. <div class="mui-slider-item mui-slider-item-duplicate">
  36. <a>
  37. <img src="images/banner-6.png">
  38. </a>
  39. </div>
  40. <!-- 第一张 -->
  41. <div class="mui-slider-item">
  42. <a>
  43. <img src="images/banner-6.png">
  44. </a>
  45. </div>
  46. <!-- 额外增加的一个节点(循环轮播:最后一个节点是第一张轮播) -->
  47. <div class="mui-slider-item mui-slider-item-duplicate">
  48. <a>
  49. <img src="images/banner-6.png">
  50. </a>
  51. </div>
  52. </div>
  53. <!--轮播图下面的点(和轮播图数量一致)-->
  54. <div class="mui-slider-indicator my-slider-indicator">
  55. <!--<div class="mui-indicator mui-active"></div>
  56. <div class="mui-indicator"></div>
  57. <div class="mui-indicator"></div>-->
  58. </div>
  59. </div>
  60. <!--banner结束-->
  61. <div class="index-banner" style="display: none;"></div>
  62. </div>
  63. <ul class="mui-table-view mui-table-view-striped my-view-no mui-table-view-condensed" id="con_product_list" style="margin-top: 5px;">
  64. <!--<li class="mui-table-view-cell">
  65. <div class="mui-table">
  66. <div class="mui-table-cell mui-col-xs-12">
  67. <img width="100%" src="images/pro-channel-1.jpg">
  68. </div>
  69. </div>
  70. <div class="mui-table">
  71. <div class="mui-table-cell mui-col-xs-12">
  72. <h4 class="pro-title">上朵都市轻奢款声波牙刷</h4>
  73. <p class="pro-desc">柔和清洁牙龈,温柔呵护牙齿</p>
  74. <span class="pro-price">¥349.00</span><s class="pro-delete">¥399.00</s>
  75. <button type="button" class="mui-btn btn-buy-know pro-datail" color="203" >立即购买</button>
  76. </div>
  77. </div>
  78. </li>
  79. <li class="mui-table-view-cell">
  80. <div class="mui-table">
  81. <div class="mui-table-cell mui-col-xs-12">
  82. <img width="100%" src="images/pro-channel-2.jpg">
  83. </div>
  84. </div>
  85. <div class="mui-table">
  86. <div class="mui-table-cell mui-col-xs-12">
  87. <h4 class="pro-title">上朵儿童款声波牙刷</h4>
  88. <p class="pro-desc">柔羽呵护刷毛,专为孩子定制</p>
  89. <span class="pro-price">¥249.00</span><s class="pro-delete">¥289.00</s>
  90. <button type="button" class="mui-btn btn-buy-know pro-datail" color="208">立即购买</button>
  91. </div>
  92. </div>
  93. </li>-->
  94. </ul>
  95. </div>
  96. <!--内容结束-->
  97. <!-- 加载ing begin-->
  98. <div class="loading covers">
  99. <div class="loading-bj"></div>
  100. <p>正在加载...</p>
  101. </div>
  102. <!-- 加载ing end -->
  103. <script src="js/mui.min.js"></script>
  104. <script src="js/jquery-2.1.1.min.js"></script>
  105. <script src="js/main.js"></script>
  106. <script>
  107. window.addEventListener('pageshow', function(e) {
  108. // 通过persisted属性判断是否存在 BF Cache
  109. if(e.persisted) {
  110. location.reload();
  111. }
  112. });
  113. var channelType = getParam("channelType"); //类型
  114. var channelId = getParam("channelId"); //渠道id
  115. //ready事件
  116. mui.ready(function() {
  117. $(".loading").hide().css("opacity", "0");//隐藏(正在加载...)
  118. $.ajax(base_path + '/wechat/channelAdmin/getProductList?dates=' + new Date().getTime(), {
  119. data: {
  120. "channelType": channelType,
  121. "channelId": channelId
  122. },
  123. dataType: 'json',
  124. xhrFields: {
  125. withCredentials: true
  126. },
  127. crossDomain: true,
  128. type: 'get',
  129. timeout: 15000,
  130. success: function(dt) {
  131. if(dt.isRedirect) {
  132. location.href = dt.redirectURL;
  133. } else {
  134. //console.log(dt);
  135. var str = '';
  136. mui.each(dt.data, function(index) {
  137. str += '<li class="mui-table-view-cell">'
  138. + '<div class="mui-table">'
  139. + '<div class="mui-table-cell mui-col-xs-12">'
  140. + '<img width="100%" src="'+ this.productIntroduceImg +'">'
  141. + '</div></div>'
  142. + '<div class="mui-table">'
  143. + ' <div class="mui-table-cell mui-col-xs-12">'
  144. + '<h4 class="pro-title">'+ this.productName +'</h4>'
  145. + '<p class="pro-desc">'+ this.productColorDes +'</p>'
  146. + '<span class="pro-price">¥'+ accDiv(this.productDiscount,100) +'</span><s class="pro-delete">¥'+ accDiv(this.productPrice,100) +'</s>'
  147. + '<button type="button" class="mui-btn btn-buy-know pro-datail" color="'+ this.colorId +'" >立即购买</button>'
  148. + ' </div>'
  149. + ' </div>'
  150. + ' </li>'
  151. });
  152. $("#con_product_list").html(str);
  153. $(".loading").hide().css("opacity", "0"); //隐藏(正在加载...)
  154. }
  155. },
  156. error: function(xhr, type, errorThrown) {
  157. console.log(xhr);
  158. mui.alert("获取订单列表失败!网络错误");
  159. }
  160. });
  161. });
  162. //跳转产品详情
  163. $(document).on('tap', '.pro-datail', function() {
  164. var id = $(this).attr("color");
  165. location.href='pro-details.html?colorId='+id+'&channelType='+channelType+'&channelId='+channelId;
  166. });
  167. </script>
  168. </body>
  169. </html>