gift_card_give_order_list.html 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  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" href="/css/mui.min.css">
  10. <link rel="stylesheet" href="/css/iconfont.css" />
  11. <link rel="stylesheet" href="/css/icons-extra.css"/>
  12. <link rel="stylesheet" href="/css/style.css" />
  13. <style type="text/css">
  14. .return{position: fixed;
  15. right: 30px;
  16. bottom: 80px;
  17. background: rgba(0,0,0,.2);
  18. padding: 12px;
  19. border-radius: 50%;
  20. text-align: center;
  21. opacity: .9;color: #333;display: none;}
  22. .my-btn-hand{display:block;width: 100%;height: 55px;background-color: #c5c5c5;color: #fff;border: 0;border-radius: 0;}
  23. .my-btn-hand.active{background-color: #1cc9f4;}
  24. .cl-blue{color: #1cc9f4;}
  25. .iconfont{font-size: 20px;}
  26. .mui-content-madded{background: #fff;padding: 10px 10px 40px 10px;}
  27. .lease-ul{font-size: 12px;color: #999;}
  28. .lease-left{display: inline-block;width: 25%;}
  29. .ul_radio{width: 73%;display: inline-block;}
  30. .ul_radio li{width:100%;height: 55px;margin: 0 1%;border-radius: 5px; display: inline-block;position: relative;font-family:"iconfont" !important;font-style:normal;-webkit-font-smoothing: antialiased;}
  31. .radio-cell .active:after{position: absolute;right: 0;bottom: 0;content: "\e66f";color: #f1436c;line-height: 1;font-size: 20px;}
  32. .lease-r-center{position: absolute;left: 70px;top: 20px;}
  33. .lease-select-box{padding: 12px 0;position: relative;}
  34. .lease-select{position: absolute;left: 0;top: 10px;}
  35. .order-noline{font-size: 12px;color: #999;padding-top:5px;}
  36. .order-noline li{margin: 5px 0;}
  37. .order-noline .mui-media{padding: 10px;}
  38. .mui-media:after,.order-noline:after{display: none;}
  39. .wh-60{width: 50px;margin-right:10px;}
  40. .btn-give,.btn-activation{padding: 3px 10px; border: 1px solid #1cc9f4;font-size: 14px;margin-right: 10px;color: #1cc9f4;width: 90px;}
  41. .btn-give:before,.btn-activation:before,.btn-tui:before,.btn-shouhou:before{font-size: 16px;}
  42. .btn-tui{padding: 3px 10px;border:0;font-size: 14px;color: #1CC9F4;}
  43. .btn-shouhou{padding: 3px 10px;border: 0;font-size: 14px;color: #1CC9F4;}
  44. .lease-order-list>.mui-table-view-cell{border-bottom: 7px solid #f3f3f3;}
  45. .lease-order-list:after{display: none;}
  46. .pd-10{padding:0 0 10px 0;}
  47. </style>
  48. <script>
  49. // 屏蔽分享
  50. window.hiddenAllWechatMenu = true;
  51. </script>
  52. </head>
  53. <body>
  54. <div class="loading-bg">
  55. <div class="mui-loading">
  56. <div class="mui-spinner">
  57. </div>
  58. &nbsp;&nbsp;加载中...
  59. </div>
  60. </div>
  61. <div class="mui-content">
  62. <!--下拉刷新容器-->
  63. <div id="pullrefresh_lease_orderlist" class="mui-content mui-scroll-wrapper">
  64. <div class="mui-scroll">
  65. <!--数据列表-->
  66. <ul class="mui-table-view lease-order-list">
  67. </ul>
  68. </div>
  69. </div>
  70. </div>
  71. <script src="/js/mui.min.js"></script>
  72. <script src="/js/jquery-2.1.1.min.js"></script>
  73. <script src="/js/shop/main.js"></script>
  74. <script src="/js/shop/wechat-utils-1.0.js"></script>
  75. <script>
  76. mui.init({
  77. pullRefresh: {
  78. container: '#pullrefresh_lease_orderlist',
  79. down: {
  80. //callback: pulldownRefresh
  81. },
  82. up: {
  83. contentrefresh: '正在加载...',
  84. callback: pullupRefresh
  85. }
  86. }
  87. });
  88. var pageNumber = 0,pagesize = 10;
  89. /**
  90. * 上拉加载具体业务实现
  91. */
  92. function pullupRefresh() {
  93. ++pageNumber;
  94. mui.ajax(base_path + '/giftCard/card/giftList?dates=' + new Date().getTime(), {
  95. data: {
  96. "pageSize": pagesize,
  97. "pageNO": pageNumber
  98. },
  99. dataType: 'json',
  100. type: 'post',
  101. timeout: 15000,
  102. success: function(dt) {
  103. //console.log(dt);
  104. if(dt.status) {
  105. var machine_data = [];
  106. machine_data = dt.data;
  107. mui('#pullrefresh_lease_orderlist').pullRefresh().endPullupToRefresh(machine_data.length < pagesize);
  108. var table = document.body.querySelector('.lease-order-list');
  109. mui(machine_data).each(function(index) {
  110. var daili = "";
  111. var status = "";
  112. var logistics = '';
  113. switch (this.agentMachineType) {
  114. case 1:daili = "成为代理赠送";break;
  115. case 2:daili = "推荐代理成功赠送";break;
  116. default:daili = "销售奖励";break;
  117. }
  118. switch (this.agentMachineStatus) {
  119. case 0:status = "未支付";break;
  120. case 1:status = "待确定";break;
  121. case 2:status = "待发货";break;
  122. default:status = "已发货";logistics = '<a class="cl-blue mui-pull-right show_post_info" postfirm="' + this.agentMachinePostName + '" postnum="' + this.agentMachinePostNum + '" gourl="/watero/view/gift_card_give_order_list.html">查看物流</a>';break;
  123. }
  124. var cl='';
  125. switch (this.agentMachineColorName){
  126. case "品蓝":
  127. cl='cp-1.jpg'
  128. break;
  129. case "西瓜红":
  130. cl='cp-4.jpg'
  131. break;
  132. case "苹果绿":
  133. cl='cp-3.jpg'
  134. break;
  135. case "品黑":
  136. cl='cp-2.jpg'
  137. break;
  138. default:
  139. break;
  140. }
  141. var li = document.createElement('li');
  142. li.className = 'mui-table-view-cell';
  143. li.innerHTML = '<div class="pd-10"><span class="iconfont icon-type cl-blue"></span>&nbsp;类型:' + daili + '<span class="mui-h5 mui-pull-right">状态:' + status + '</span></div><ul class="mui-table-view order-noline"><li class="mui-table-view-cell mui-media"><a><img class="mui-media-object mui-pull-left" src="//s.iamberry.com/watero/images/'+cl+'"><div class="mui-media-body">' + this.agentMachineProductName + '<div>' + this.agentMachineColorName + '</div></div></a></li><li>' + this.agentMachineAddressName + ':' + this.agentMachineAddressTel + logistics + '</li><li>' + this.agentMachineAddressInfo + '</li></ul>';
  144. table.appendChild(li);
  145. });
  146. mui('body').on('tap', '.show_post_info', function() {
  147. var urlStr = document.domain;
  148. mui.openWindow({
  149. url: '//m.kuaidi100.com/index_all.html?type=' + this.getAttribute("postFirm") + '&postid=' + this.getAttribute("postNum") + '&callbackurl=//' + urlStr + this.getAttribute("gourl") + "&tiemstamp=" + new Date().getTime()
  150. })
  151. });
  152. } else {
  153. mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
  154. }
  155. },
  156. error: function(xhr, type, errorThrown) {
  157. console.log(xhr)
  158. }
  159. })
  160. }
  161. mui.ready(function() {
  162. //console.log("页面加载完毕")
  163. mui('#pullrefresh_lease_orderlist').pullRefresh().pullupLoading();
  164. document.querySelector('.loading-bg').style.display = 'none';
  165. });
  166. </script>
  167. </body>
  168. </html>