gift_card_exchange_list.html 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  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: 14px;color: #999;padding-top:5px;}
  36. .order-noline li{margin: 5px 0;}
  37. .order-noline .mui-media{padding: 10px;border-top: 1px solid rgba(0,0,0,.1);}
  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. .lease-order-list{padding-bottom: 55px;}
  47. .pd-10{padding:0 0 10px 0;}
  48. #btn_submit{color: #fff;font-size: 18px;background: #24cae9;margin-bottom: 0;border: 0;}
  49. .mui-btn-block.mui-active,.btn-pull-code.mui-active{background-color: #c8c8c8 !important;}
  50. .buy-footer{z-index: 99;}
  51. .mui-scroll-wrapper {bottom:55px !important;}
  52. .lease-order-list>.mui-table-view-cell.mui-active{background:#fff;}
  53. .mui-table-view-cell>a:not(.mui-btn).mui-active {background-color: #fff;}
  54. </style>
  55. <script>
  56. // 屏蔽分享
  57. window.hiddenAllWechatMenu = true;
  58. </script>
  59. </head>
  60. <body>
  61. <div class="loading-bg">
  62. <div class="mui-loading">
  63. <div class="mui-spinner">
  64. </div>
  65. &nbsp;&nbsp;加载中...
  66. </div>
  67. </div>
  68. <div class="mui-content">
  69. <!--数据列表-->
  70. <ul class="mui-table-view lease-order-list">
  71. </ul>
  72. </div>
  73. <div class="buy-footer">
  74. <button type="button" data-loading-icon="mui-spinner mui-spinner-custom" data-loading-text="提交中" class="mui-btn mui-btn-block mui-btn-outlined" id="btn_submit">继续兑换</button>
  75. </div>
  76. <script src="js/mui.min.js"></script>
  77. <script src="js/jquery-2.1.1.min.js"></script>
  78. <script src="js/main.js"></script>
  79. <script src="js/page/wechat-utils-1.0.js"></script>
  80. <script>
  81. mui.ready(function() {
  82. $.ajax(base_path + '/giftCard/card/exchange/logs?dates=' + new Date().getTime(), {
  83. data: {},
  84. dataType: 'json',
  85. type: 'post',
  86. timeout: 15000,
  87. xhrFields: {
  88. withCredentials: true
  89. },
  90. crossDomain: true,
  91. success: function(dt) {
  92. //console.log(dt);
  93. if(dt.isRedirect) {
  94. location.href = dt.redirectURL;
  95. } else {
  96. if(dt.returnCode=="200" && dt.resultCode=="200"){
  97. var table = document.body.querySelector('.lease-order-list');
  98. mui(dt.returnMsg.logs).each(function(index) {
  99. var li = document.createElement('li');
  100. li.className ='mui-table-view-cell';
  101. var cl='';
  102. switch (this.userMachineColorName){
  103. case "品蓝":
  104. cl='cp-1.jpg'
  105. break;
  106. case "西瓜红":
  107. cl='cp-4.jpg'
  108. break;
  109. case "苹果绿":
  110. cl='cp-3.jpg'
  111. break;
  112. case "品黑":
  113. cl='cp-2.jpg'
  114. break;
  115. default:
  116. break;
  117. }
  118. var postfirm='',postnum='';
  119. if(this.userMachinePostNum != null || typeof(this.userMachinePostNum)!="undefined") {
  120. postnum=this.userMachinePostNum;
  121. postfirm=this.userMachinePostName;
  122. }
  123. var order_status='';
  124. var logistics = '';
  125. switch (this.userMachineStatus) {
  126. case 1:order_status = "待发货";break;
  127. case 2:order_status = "已发货";logistics = '<span class="cl-blue mui-pull-right go_wuliu" postfirm="' + postfirm + '" postnum="' + postnum + '" gourl="/watero/wechat/giftCard/card/exchangeUI">查看物流</span>';break;
  128. default:order_status = "已发货";break;
  129. }
  130. li.innerHTML='<div class="pd-10"><span class="iconfont icon-gift1 cl-blue"></span>&nbsp;礼品兑换详情</div><ul class="mui-table-view order-noline"><li>兑换码:'+this.cardPwd+'</li><li>兑换时间:'+formatDate(this.userMachineCreateDate)+'</li><li>兑换手机号:'+this.userMachineTel+'</li><li>订单状态:'+order_status+ logistics +'</li><li class="mui-table-view-cell mui-media"><a><img class="mui-media-object mui-pull-left" src="images/'+cl+'"><div class="mui-media-body">'+this.userMachineProductName+'<div>'+this.userMachineColorName+'</div></div></a></li><li>'+this.userMachineAddressName+':'+this.userMachineAddressTel+'</li><li>'+this.userMachineAddressInfo+'</li></ul>';
  131. li.setAttribute("name",this.cardPwd);
  132. table.appendChild(li);
  133. });
  134. mui('body').on('tap', '.go_wuliu', function() {
  135. var urlStr = document.domain;
  136. if(typeof(this.getAttribute("postFirm"))!="undefined" && typeof(this.getAttribute("postNum"))!="undefined"){
  137. mui.openWindow({
  138. url: '//m.kuaidi100.com/index_all.html?type=' + this.getAttribute("postFirm") + '&postid=' + this.getAttribute("postNum") + '&callbackurl=//' + urlStr + this.getAttribute("gourl") + "&tiemstamp=" + new Date().getTime()
  139. })
  140. }
  141. });
  142. document.querySelector('.loading-bg').style.display = 'none';
  143. }else{
  144. mui.alert(dt.resultMsg);
  145. }
  146. }
  147. },
  148. error: function(xhr, type, errorThrown) {
  149. console.log(xhr)
  150. }
  151. });
  152. //console.log("页面加载完毕")
  153. //mui('#pullrefresh_lease_orderlist').pullRefresh().pullupLoading();
  154. mui('body').on('tap', '#btn_submit', function() {
  155. mui.openWindow({
  156. url: '/watero/view/gift_card_user_exchange.html'
  157. });
  158. });
  159. /* mui('body').on('tap', '.lease-order-list>.mui-table-view-cell', function() {
  160. mui.openWindow({
  161. url: '/watero/view/gift_card_exchange_details.html?name='+this.getAttribute("name")
  162. });
  163. }); */
  164. });
  165. </script>
  166. </body>
  167. </html>