my-tooth.html 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  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. var pageNumber = 0,pagesize = 10;//pageNumber第几页,pagesize每页条数
  61. mui.init({
  62. pullRefresh: {
  63. container: '#pullrefresh_tooth_list',//上拉加载容器
  64. down: {
  65. //callback: pulldownRefresh
  66. },
  67. up: {
  68. contentrefresh: '正在加载...',//上拉加载时显示的文字
  69. callback: pullupRefresh//上拉加载的回调方法
  70. }
  71. }
  72. });
  73. /**
  74. * 上拉加载具体业务实现
  75. */
  76. function pullupRefresh() {
  77. ++pageNumber;//每次上拉页数+1
  78. $.ajax(base_path + '/wechat/apparatus/select_apparatus_page?dates=' + new Date().getTime(), {
  79. data: {
  80. "pageNO":pageNumber,//pageNo第几页
  81. "pageSize":pagesize//pageSize每页条数
  82. },
  83. dataType: 'json',
  84. xhrFields: {
  85. withCredentials: true
  86. },
  87. crossDomain: true,
  88. type: 'get',
  89. timeout: 15000,
  90. success: function(dt) {
  91. if(dt.isRedirect) {
  92. location.href = dt.redirectURL;
  93. } else {
  94. if(dt.status) {//判断接口返回状态status
  95. var table = document.body.querySelector('.my-tooth-ul');//table是插入数据li的父级容器
  96. mui('#pullrefresh_tooth_list').pullRefresh().endPullupToRefresh(dt.data.length<pagesize);//endPullupToRefresh(ture)表示没有更多数据了,停止上拉加载
  97. if(dt.data.length<pagesize){
  98. $(".mui-pull-caption-nomore").hide();
  99. }
  100. mui.each(dt.data, function(index) {
  101. var li = document.createElement('li');//创建li标签
  102. //li.className='mui-table-view-cell mui-media mui-col-xs-6';//給li标签className
  103. var baercode = this.apparatusBarcode.substring(this.apparatusBarcode.length-9);
  104. var store = "";
  105. switch(this.apparatusStore){
  106. case 1:
  107. store = "天猫";
  108. break;
  109. case 2:
  110. store = "淘宝";
  111. break;
  112. case 3:
  113. store = "京东";
  114. break;
  115. case 4:
  116. store = "微信";
  117. break;
  118. }
  119. 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>';
  120. table.appendChild(li);//将li插入table
  121. });
  122. $(".loading").hide().css("opacity", "0"); //隐藏(正在加载...)
  123. } else {
  124. mui.alert("获取产品列表失败!");
  125. }
  126. }
  127. },
  128. error: function(xhr, type, errorThrown) {
  129. console.log(xhr);
  130. mui.alert("获取产品列表失败!网络错误");
  131. }
  132. });
  133. }
  134. //调用微信扫一扫
  135. $(document).on('tap', '.saomiao', function() {
  136. wx.scanQRCode({
  137. needResult: 0, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
  138. scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码,默认二者都有
  139. success: function(res) {
  140. /*var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
  141. */
  142. }
  143. });
  144. });
  145. mui.ready(function() {
  146. mui('#pullrefresh_tooth_list').pullRefresh().pullupLoading();
  147. });
  148. </script>
  149. </body>
  150. </html>