order-details.html 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
  6. <meta name="apple-mobile-web-app-capable" content="yes">
  7. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  8. <title>订单详情</title>
  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="loading-bg">
  22. <div class="mui-loading">
  23. <div class="mui-spinner">
  24. </div>
  25. &nbsp;&nbsp;加载中...
  26. </div>
  27. </div>
  28. <div class="mui-content">
  29. <div style="margin:14px 14px 0 14px;background-color: #f3f3f3;text-align: center;">
  30. <ul class="mui-table-view mui-table-view-striped my-grid-view-no mui-table-view-condensed">
  31. <li class="mui-table-view-cell" style="background-color: #f3f3f3;border-radius: 5px;padding: 11px 8px;">
  32. <div class="mui-table" style="height: 80px;">
  33. <div class="mui-table-cell mui-col-xs-12 table-middle" style="display: none;">
  34. <div style="height: 20px;position: relative;width: 150px; margin: 0 auto;"><span class="iconfont icon-jia" style="position: absolute;left:0%;top: 0;font-size: 20px;"></span></div>
  35. </div>
  36. <div class="mui-table-cell mui-col-xs-1 mui-text-left table-middle">
  37. <p><span class="iconfont icon-dingwei"></span></p>
  38. </div>
  39. <div class="mui-table-cell mui-col-xs-10 mui-text-left table-middle">
  40. <div><span id="addressName"></span> <span class="mui-pull-right" id="salesAddressTel"></span></div>
  41. <p id="addressInfo"></p>
  42. </div>
  43. <div class="mui-table-cell mui-col-xs-1 mui-text-right table-middle">
  44. <!--<p><span class="mui-icon mui-icon-arrowright"></span></p>-->
  45. </div>
  46. </div>
  47. </li>
  48. </ul>
  49. </div>
  50. <div class="clearing-box">
  51. <ul class="mui-table-view mui-table-view-striped my-grid-view-no mui-table-view-condensed shopping-cart-list">
  52. </ul>
  53. <ul class="mui-table-view my-view-no-top">
  54. <li class="mui-table-view-cell cl-red" style="padding: 11px 2px;">
  55. 共<span id="num">0</span>件<span class="mui-pull-right">合计:¥<span id="salesYetAmount">0.00</span></span>
  56. </li>
  57. </ul>
  58. <ul class="my-table-view">
  59. <li>
  60. 订单状态:<span id="statusName"></span>
  61. </li>
  62. <li>
  63. 订单编号:<span id="orderId"></span>
  64. </li>
  65. <li>
  66. 下单时间:<span id="salesCreateDate"></span>
  67. </li>
  68. </ul>
  69. <textarea id="textarea" rows="1" placeholder="如您选择退款,请先输入退款原因!" style="background-color: #f9f9f9;border: 0;margin:0;padding: 15px;font-size: 14px;"></textarea>
  70. <div class="mui-content-padded mui-text-center">
  71. <button type="button" class="mui-btn my-btn-request" disabled="disabled">我要退款</button>
  72. </div>
  73. </div>
  74. </div>
  75. <script src="js/mui.min.js"></script>
  76. <script src="js/jquery-2.1.1.min.js"></script>
  77. <script src="js/main.js"></script>
  78. <script>
  79. var orderId = getParam("orderId");
  80. var isPay = true; // 是否在请求支付,false表示正在请求,true可以请求
  81. var isEfficacious = true; //商品是否有效,有效则可以支付,无效则不能支付
  82. mui.ready(function() {
  83. // var str="";
  84. // for (i=0;i<3;i++) {
  85. // str+='<div class="mui-table"><div class="mui-table-cell mui-col-xs-4"><img class="mui-media-object wh-100" src="images/chanpin-1.jpg"></div><div class="mui-table-cell table-middle mui-col-xs-8">Aiberle美国智能净饮水一体机<h6>颜色:优雅白<span class="center">数量:2</span></h6><div>¥2999.00</div><h6>(赠品:美国aiberle咖啡杯 数量:3)</h6></div></div>';
  86. // }
  87. // document.querySelector('.shopping-cart-list').innerHTML=str;
  88. var table = document.body.querySelector('.shopping-cart-list');
  89. $.ajax(base_path + '/wechat/cart/getShopOrderByOrderId', {
  90. data: {
  91. orderId: orderId
  92. },
  93. dataType: 'json',
  94. xhrFields: {
  95. withCredentials: true
  96. },
  97. crossDomain: true,
  98. type: 'post',
  99. timeout: 15000,
  100. success: function(dt) {
  101. //服务器返回响应
  102. if(dt.isRedirect) {
  103. location.href = dt.redirectURL;
  104. } else {
  105. if(dt.status) {
  106. console.log(dt)
  107. var order = dt.data;
  108. $("#addressInfo").html(order.salesAddressInfo);
  109. $("#addressName").html(order.salesAddressName);
  110. $("#salesAddressTel").html(order.salesAddressTel);
  111. var str = '';
  112. var num = 0;
  113. mui.each(order.orderItemList, function(index) {
  114. num += this.itemNum;
  115. str += '<div class="mui-table"><div class="mui-table-cell mui-col-xs-5"><img class="mui-media-object wh-100" src="'+ this.itemProductPic +'"></div><div class="mui-table-cell table-middle mui-col-xs-7" style="line-height:2.5">'+ this.itemProductName +'<h6>颜色:'+ this.productColor +'<span class="center">数量:'+ this.itemNum +'</span></h6><div>¥'+ accDiv(this.itemProductDiscount,100) +'</div></div></div>';
  116. });
  117. document.querySelector('.shopping-cart-list').innerHTML = str;
  118. document.querySelector('.loading-bg').style.display = 'none';
  119. /*订单状态*/
  120. var statusName = "";
  121. switch (parseInt(order.salesStatus)){
  122. case 0 :
  123. statusName = "取消订单";
  124. break;
  125. case 1 :
  126. statusName = "待支付";
  127. break;
  128. case 2 :
  129. statusName = "已支付";
  130. break;
  131. case 3 :
  132. statusName = "退款申请中";
  133. break;
  134. case 4 :
  135. statusName = "已退款";
  136. break;
  137. case 5 :
  138. statusName = "已发货";
  139. break;
  140. case 6 :
  141. statusName = "申请退货中";
  142. break;
  143. case 7 :
  144. statusName = "退货中";
  145. break;
  146. case 8 :
  147. statusName = "订单退货完成";
  148. break;
  149. case 9 :
  150. statusName = "换货中";
  151. break;
  152. case 10 :
  153. statusName = "换货完成";
  154. break;
  155. case 11 :
  156. statusName = "申请换货中";
  157. break;
  158. case 12 :
  159. statusName = "订单完成";
  160. break;
  161. default:
  162. break;
  163. }
  164. $("#statusName").html(statusName);
  165. $("#orderId").html(order.salesOrderid);
  166. $("#salesCreateDate").html(order.salesCreateDate);
  167. $("#salesYetAmount").html(accDiv(order.salesYetAmount,100));
  168. $("#num").html(num);
  169. }
  170. }
  171. },
  172. error: function(xhr, type, errorThrown) {
  173. console.log(xhr);
  174. }
  175. });
  176. });
  177. mui('body').on('tap', '.go_web_shop', function() {
  178. mui.openWindow({
  179. url: 'chanpin_list.html'
  180. });
  181. });
  182. mui('body').on('tap', '.go-clearing', function() {
  183. if($("input[type='checkbox']:checked").length > 0) {
  184. mui.openWindow({
  185. url: 'clearing.html'
  186. });
  187. } else {
  188. mui.alert('您没有选中任何商品', '爱贝源-消息提醒', function() {
  189. console.log("您关闭了警告框");
  190. });
  191. }
  192. });
  193. </script>
  194. </body>
  195. </html>