my-tooth.html 5.7 KB

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