receive-charger.html 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  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 class="receive-null">
  23. <img width="100px" src="images/charger-null.png">
  24. <p>暂无已领取充电器信息</p>
  25. </div>
  26. <ul class="my-list" style="display: none;margin: 5px 0 0 0;">
  27. <!--<li>
  28. <div class="mui-table">
  29. <div class="mui-card">
  30. <div class="mui-card-content my-card-content">
  31. <div class="mui-table">
  32. <div class="mui-table-cell mui-col-xs-3 mui-text-center">
  33. <div class="status-radius cl-red">正在处理</div>
  34. </div>
  35. <div class="mui-table-cell mui-col-xs-6">
  36. <div>soodo上朵-樱花粉</div>
  37. <span class="mui-h6 mui-ellipsis">何小小 159****7808 </span>
  38. </div>
  39. <div class="mui-table-cell mui-col-xs-3 mui-text-right middle-top">
  40. <a class="mui-btn my-btn-link">查看物流</a>
  41. </div>
  42. </div>
  43. <div class="mui-table">
  44. <div class="mui-table-cell mui-col-xs-3">
  45. </div>
  46. <div class="mui-table-cell mui-col-xs-5">
  47. <p>邮费:¥10.00</p>
  48. </div>
  49. <div class="mui-table-cell mui-col-xs-4 mui-text-right">
  50. <div class="mui-content-padded">
  51. <p>2019-12-20</p>
  52. </div>
  53. </div>
  54. </div>
  55. </div>
  56. </div>
  57. </div>
  58. </li>-->
  59. </ul>
  60. <div style="padding:20px 0;text-align: center;">
  61. <button type="button" data-loading-icon="mui-spinner mui-spinner-custom" data-loading-text="加载中" class="mui-btn btn-submit" style="padding: 8px 18px;display: none;">立即领取</button>
  62. </div>
  63. </div>
  64. <!-- 加载ing begin-->
  65. <div class="loading covers">
  66. <div class="loading-bj"></div>
  67. <p>正在加载...</p>
  68. </div>
  69. <!-- 加载ing end -->
  70. <script type="text/javascript" src="js/mui.min.js"></script>
  71. <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
  72. <script type="text/javascript" src="js/main.js"></script>
  73. <script type="text/javascript">
  74. window.addEventListener('pageshow', function(e) {
  75. // 通过persisted属性判断是否存在 BF Cache
  76. if(e.persisted) {
  77. location.reload();
  78. }
  79. });
  80. mui.ready(function() {
  81. $.ajax(base_path + '/wechat/receive/select_receive?dates=' + new Date().getTime(), {
  82. data: {
  83. pageSize:'10',
  84. pageNO:'1'
  85. },
  86. dataType: 'json',
  87. xhrFields: {
  88. withCredentials: true
  89. },
  90. crossDomain: true,
  91. type: 'post',
  92. timeout: 15000,
  93. success: function(dt) {
  94. if(dt.isRedirect) {
  95. location.href = dt.redirectURL;
  96. } else {
  97. console.log(dt)
  98. if(dt.status) {
  99. var table = document.body.querySelector('.my-list');
  100. var list=dt.data.list;
  101. if(list.length>0){
  102. $(".my-list").show();
  103. }else{
  104. $(".receive-null").show();
  105. }
  106. mui.each(list, function(index) {
  107. var li = document.createElement("li");
  108. var status='',post='';
  109. if(this.receiveStatus==2){
  110. status='<div class="status-radius cl-blue">正在处理</div>';
  111. }else if(this.receiveStatus==3){
  112. status='<div class="status-radius cl-yellow">正在发货</div>';
  113. post='<a class="mui-btn my-btn-link">查看物流</a>';
  114. }
  115. li.innerHTML='<div class="mui-table"><div class="mui-card"><div class="mui-card-content my-card-content"><div class="mui-table"><div class="mui-table-cell mui-col-xs-3 mui-text-center">'+status+'</div><div class="mui-table-cell mui-col-xs-6"><div>'+this.colorName+'</div><span class="mui-h6 mui-ellipsis">'+this.receiveAddressName+' '+this.receiveAddressTel+' </span></div><div class="mui-table-cell mui-col-xs-3 mui-text-right middle-top">'+post+'</div></div><div class="mui-table"><div class="mui-table-cell mui-col-xs-3"></div><div class="mui-table-cell mui-col-xs-5"><p>邮费:¥10.00</p></div><div class="mui-table-cell mui-col-xs-4 mui-text-right"><div class="mui-content-padded"><p>'+formatDateFull(this.receiveCreateTime)+'</p></div></div></div></div></div></div>';
  116. table.appendChild(li);
  117. });
  118. // if(dt.data.isReceive){
  119. $(".btn-submit").show();
  120. // }
  121. }else{
  122. mui.alert(dt.message, function() {
  123. location.href = "index.html?dates=" + new Date().getTime(); // 前往首页
  124. });
  125. }
  126. $(".loading").hide(); //隐藏(正在加载...)
  127. }
  128. },
  129. error: function(xhr, type, errorThrown) {
  130. console.log(xhr);
  131. mui.alert("获取数据失败!网络错误");
  132. }
  133. });
  134. });
  135. //查看物流
  136. $(document).on('tap', '.my-btn-link', function() {
  137. });
  138. //自定义显示loading的按钮
  139. mui(document.body).on('tap', '.mui-btn', function(e) {
  140. mui(this).button('loading');//显示
  141. setTimeout(function() {
  142. mui(this).button('reset');//隐藏
  143. location.href="free-receive-charger.html";
  144. }.bind(this), 500);
  145. });
  146. </script>
  147. </body>
  148. </html>