my-tooth.html 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>我的牙刷</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
  7. <meta name="apple-mobile-web-app-capable" content="yes">
  8. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  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. <script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
  13. <script>
  14. //屏蔽分享
  15. // document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
  16. // WeixinJSBridge.call('hideOptionMenu');
  17. // });
  18. </script>
  19. </head>
  20. <body>
  21. <div class="mui-content">
  22. <div style="padding: 25px 0;text-align: center;" class="saomiao">
  23. <div class="mui-content-padded">
  24. <span class="iconfont icon-saomiao cl-red"></span>
  25. </div>
  26. <p>土豪,请继续添加您的牙刷吧!</p>
  27. </div>
  28. <div id="pullrefresh_tooth_list">
  29. <div>
  30. <ul class="my-tooth-ul">
  31. <li>
  32. <!--<div class="mui-card">
  33. <div class="mui-card-header mui-card-media">
  34. <img src="images/card-bai.png">
  35. <div class="mui-media-body">
  36. 柔性声波牙刷
  37. <h6>产品尾号:3948</h6>
  38. <div class="footer">
  39. JD购买<span class="mui-pull-right">延保截止:2019-12-20</span>
  40. </div>
  41. </div>
  42. </div>
  43. </div>-->
  44. </li>
  45. </ul>
  46. </div>
  47. </div>
  48. </div>
  49. <!-- 加载ing begin-->
  50. <div class="loading covers">
  51. <div class="loading-bj"></div>
  52. <p>正在加载...</p>
  53. </div>
  54. <!-- 加载ing end -->
  55. <script type="text/javascript" src="js/mui.min.js"></script>
  56. <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
  57. <script type="text/javascript" src="js/main.js"></script>
  58. <script type="text/javascript" src="js/wechat-utils-1.0.js"></script>
  59. <script type="text/javascript">
  60. window.addEventListener('pageshow', function(e) {
  61. // 通过persisted属性判断是否存在 BF Cache
  62. if(e.persisted) {
  63. location.reload();
  64. }
  65. });
  66. var pageNumber = 0,pagesize = 10;//pageNumber第几页,pagesize每页条数
  67. mui.init({
  68. pullRefresh: {
  69. container: '#pullrefresh_tooth_list',//上拉加载容器
  70. down: {
  71. //callback: pulldownRefresh
  72. },
  73. up: {
  74. contentrefresh: '正在加载...',//上拉加载时显示的文字
  75. callback: pullupRefresh//上拉加载的回调方法
  76. }
  77. }
  78. });
  79. /**
  80. * 上拉加载具体业务实现
  81. */
  82. function pullupRefresh() {
  83. ++pageNumber;//每次上拉页数+1
  84. $.ajax(base_path + '/wechat/apparatus/select_apparatus_page?dates=' + new Date().getTime(), {
  85. data: {
  86. "pageNO":pageNumber,//pageNo第几页
  87. "pageSize":pagesize//pageSize每页条数
  88. },
  89. dataType: 'json',
  90. xhrFields: {
  91. withCredentials: true
  92. },
  93. crossDomain: true,
  94. type: 'get',
  95. timeout: 15000,
  96. success: function(dt) {
  97. if(dt.isRedirect) {
  98. location.href = dt.redirectURL;
  99. } else {
  100. if(dt.status) {//判断接口返回状态status
  101. var table = document.body.querySelector('.my-tooth-ul');//table是插入数据li的父级容器
  102. mui('#pullrefresh_tooth_list').pullRefresh().endPullupToRefresh(dt.data.length<pagesize);//endPullupToRefresh(ture)表示没有更多数据了,停止上拉加载
  103. if(dt.data.length<pagesize){
  104. $(".mui-pull-caption-nomore").hide();
  105. }
  106. mui.each(dt.data, function(index) {
  107. var li = document.createElement('li');//创建li标签
  108. //li.className='mui-table-view-cell mui-media mui-col-xs-6';//給li标签className
  109. var baercode = this.apparatusBarcode.substring(this.apparatusBarcode.length-9);
  110. var store = "";
  111. switch(this.apparatusStore){
  112. case 1:
  113. store = "天猫";
  114. break;
  115. case 2:
  116. store = "淘宝";
  117. break;
  118. case 3:
  119. store = "京东";
  120. break;
  121. case 4:
  122. store = "微信";
  123. break;
  124. }
  125. li.innerHTML = '<div class="mui-card"><div class="mui-card-header mui-card-media"> <img src="'+this.productImg+'"> <div class="mui-media-body"> '+this.productName+' <h6>产品尾号:'+baercode+'</h6> <div class="footer"> '+store+'<span class="mui-pull-right">延保截止:'+formatDateFull(this.apparatusWarrantyDate)+'</span> </div> </div> </div></div>';
  126. table.appendChild(li);//将li插入table
  127. });
  128. $(".loading").hide().css("opacity", "0"); //隐藏(正在加载...)
  129. } else {
  130. mui.alert("获取产品列表失败!");
  131. }
  132. }
  133. },
  134. error: function(xhr, type, errorThrown) {
  135. console.log(xhr);
  136. mui.alert("获取产品列表失败!网络错误");
  137. }
  138. });
  139. }
  140. //调用微信扫一扫
  141. $(document).on('tap', '.saomiao', function() {
  142. wx.scanQRCode({
  143. needResult: 0, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
  144. scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码,默认二者都有
  145. success: function(res) {
  146. /*var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
  147. */
  148. }
  149. });
  150. });
  151. mui.ready(function() {
  152. mui('#pullrefresh_tooth_list').pullRefresh().pullupLoading();
  153. });
  154. </script>
  155. </body>
  156. </html>