order-details.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327
  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. <footer class="mui-bar mui-bar-tab" id="footer-bar-tab">
  29. <a class="mui-tab-item">
  30. <span class="iconfont icon-shouye"></span>
  31. <span class="mui-tab-label">首页</span>
  32. </a>
  33. <a class="mui-tab-item">
  34. <span class="iconfont icon-gouwuche"></span>
  35. <span class="mui-tab-label">购物车</span>
  36. </a>
  37. <a class="mui-tab-item mui-active">
  38. <span class="iconfont icon-dingdan"></span>
  39. <span class="mui-tab-label">订单</span>
  40. </a>
  41. <a class="mui-tab-item">
  42. <span class="iconfont icon-wode"></span>
  43. <span class="mui-tab-label">我的</span>
  44. </a>
  45. </footer>
  46. <div class="mui-content">
  47. <div style="margin:14px 14px 0 14px;background-color: #f3f3f3;text-align: center;">
  48. <ul class="mui-table-view mui-table-view-striped my-grid-view-no mui-table-view-condensed">
  49. <li class="mui-table-view-cell" style="background-color: #f3f3f3;border-radius: 5px;padding: 11px 8px;">
  50. <div class="mui-table" style="height: 80px;">
  51. <div class="mui-table-cell mui-col-xs-12 table-middle" style="display: none;">
  52. <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>
  53. </div>
  54. <div class="mui-table-cell mui-col-xs-1 mui-text-left table-middle">
  55. <p><span class="iconfont icon-dingwei"></span></p>
  56. </div>
  57. <div class="mui-table-cell mui-col-xs-10 mui-text-left table-middle">
  58. <div><span id="addressName"></span> <span class="mui-pull-right" id="salesAddressTel"></span></div>
  59. <p id="addressInfo"></p>
  60. </div>
  61. <div class="mui-table-cell mui-col-xs-1 mui-text-right table-middle">
  62. <!--<p><span class="mui-icon mui-icon-arrowright"></span></p>-->
  63. </div>
  64. </div>
  65. </li>
  66. </ul>
  67. </div>
  68. <div class="clearing-box">
  69. <ul class="mui-table-view mui-table-view-striped my-grid-view-no mui-table-view-condensed shopping-cart-list">
  70. </ul>
  71. <ul class="mui-table-view my-view-no-top">
  72. <li class="mui-table-view-cell cl-red" style="padding: 11px 2px;">
  73. 共<span id="num">0</span>件<span class="mui-pull-right">合计:¥<span id="salesYetAmount">0.00</span></span>
  74. </li>
  75. </ul>
  76. <ul class="my-table-view">
  77. <li>
  78. 订单状态:<span id="statusName"></span>
  79. </li>
  80. <li>
  81. 订单编号:<span id="orderId"></span>
  82. </li>
  83. <li>
  84. 下单时间:<span id="salesCreateDate"></span>
  85. </li>
  86. </ul>
  87. <!--<textarea id="textarea" rows="1" placeholder="如您选择退款,请先输入退款原因!" style="background-color: #f9f9f9;border: 0;margin:0;padding: 15px;font-size: 14px;"></textarea>-->
  88. <div class="mui-content-padded mui-text-center" id="operation">
  89. </div>
  90. </div>
  91. </div>
  92. <script src="js/mui.min.js"></script>
  93. <script src="js/jquery-2.1.1.min.js"></script>
  94. <script src="js/main.js"></script>
  95. <script>
  96. var orderId = getParam("orderId");
  97. var isPay = true; // 是否在请求支付,false表示正在请求,true可以请求
  98. var isEfficacious = true; //商品是否有效,有效则可以支付,无效则不能支付
  99. mui.ready(function() {
  100. // var str="";
  101. // for (i=0;i<3;i++) {
  102. // 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>';
  103. // }
  104. // document.querySelector('.shopping-cart-list').innerHTML=str;
  105. var table = document.body.querySelector('.shopping-cart-list');
  106. $.ajax(base_path + '/wechat/cart/getShopOrderByOrderId', {
  107. data: {
  108. orderId: orderId
  109. },
  110. dataType: 'json',
  111. xhrFields: {
  112. withCredentials: true
  113. },
  114. crossDomain: true,
  115. type: 'post',
  116. timeout: 15000,
  117. success: function(dt) {
  118. //服务器返回响应
  119. if(dt.isRedirect) {
  120. location.href = dt.redirectURL;
  121. } else {
  122. if(dt.status) {
  123. console.log(dt)
  124. var order = dt.data;
  125. $("#addressInfo").html(order.salesAddressInfo);
  126. $("#addressName").html(order.salesAddressName);
  127. $("#salesAddressTel").html(order.salesAddressTel);
  128. var str = '';
  129. var num = 0;
  130. mui.each(order.orderItemList, function(index) {
  131. num += this.itemNum;
  132. 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>';
  133. });
  134. document.querySelector('.shopping-cart-list').innerHTML = str;
  135. document.querySelector('.loading-bg').style.display = 'none';
  136. var payHtml = '<button type="button" class="mui-btn my-btn-request go_pay" >立即支付</button>';
  137. var aftermarketHtml = '<button type="button" class="mui-btn my-btn-request go_aftermarket" >我要售后</button>';
  138. var logisticsHtml = '<button type="button" class="mui-btn my-btn-request" >查看物流</button>';
  139. var cancelHtml = '<button type="button" class="mui-btn my-btn-request" >取消申请</button>';
  140. /*订单状态*/
  141. var statusName = "";
  142. var operationHtml = "";
  143. switch (parseInt(order.salesStatus)){
  144. case 0 :
  145. statusName = "取消订单";
  146. break;
  147. case 1 :
  148. statusName = "待支付";
  149. operationHtml += payHtml;
  150. break;
  151. case 2 :
  152. statusName = "已支付";
  153. operationHtml += aftermarketHtml;
  154. break;
  155. case 3 :
  156. statusName = "退款申请中";
  157. operationHtml += cancelHtml;
  158. break;
  159. case 4 :
  160. statusName = "已退款";
  161. break;
  162. case 5 :
  163. statusName = "已发货";
  164. operationHtml += aftermarketHtml + logisticsHtml;
  165. break;
  166. case 6 :
  167. statusName = "申请退货中";
  168. operationHtml += cancelHtml + logisticsHtml;
  169. break;
  170. case 7 :
  171. statusName = "退货中";
  172. operationHtml += cancelHtml;
  173. break;
  174. case 8 :
  175. statusName = "订单退货完成";
  176. break;
  177. case 9 :
  178. statusName = "换货中";
  179. operationHtml += cancelHtml;
  180. break;
  181. case 10 :
  182. statusName = "换货完成";
  183. break;
  184. case 11 :
  185. statusName = "申请换货中";
  186. operationHtml += cancelHtml + logisticsHtml;
  187. break;
  188. case 12 :
  189. statusName = "订单完成";
  190. operationHtml += logisticsHtml
  191. break;
  192. default:
  193. break;
  194. }
  195. $("#statusName").html(statusName);
  196. $("#orderId").html(order.salesOrderid);
  197. $("#salesCreateDate").html(order.salesCreateDate);
  198. $("#salesYetAmount").html(accDiv(order.salesYetAmount,100));
  199. $("#num").html(num);
  200. $("#operation").html(operationHtml);
  201. }
  202. }
  203. },
  204. error: function(xhr, type, errorThrown) {
  205. console.log(xhr);
  206. }
  207. });
  208. });
  209. mui('body').on('tap', '.go_web_shop', function() {
  210. mui.openWindow({
  211. url: 'chanpin_list.html'
  212. });
  213. });
  214. mui('body').on('tap', '.go-clearing', function() {
  215. if($("input[type='checkbox']:checked").length > 0) {
  216. mui.openWindow({
  217. url: 'clearing.html'
  218. });
  219. } else {
  220. mui.alert('您没有选中任何商品', '爱贝源-消息提醒', function() {
  221. console.log("您关闭了警告框");
  222. });
  223. }
  224. });
  225. /**
  226. * 立即支付
  227. */
  228. mui('body').on('tap', '.go_pay', function() {
  229. goOrderPay(orderId);
  230. });
  231. /**
  232. * 申请售后
  233. */
  234. mui('body').on('tap', '.go_aftermarket', function() {
  235. location.href = "customer-service.html?orderId=" + orderId;
  236. });
  237. /**
  238. * 立即支付
  239. */
  240. mui('body').on('tap', '.go_pay', function() {
  241. goOrderPay(orderId);
  242. });
  243. function goOrderPay(salesOrderid) {
  244. var dataArgs = {
  245. "orderId": salesOrderid
  246. };
  247. $.ajax(base_path+'/wechat/cart/orderPay', { // 提交订单,准备支付
  248. data: dataArgs,
  249. dataType: 'json',
  250. type: 'POST',
  251. timeout: 15000,
  252. success: function(dt) {
  253. // layer.closeAll();
  254. if(dt.status) {
  255. var str = dt.data.info;
  256. var obj = JSON.parse("{" + str + "}");
  257. WeixinJSBridge.invoke('getBrandWCPayRequest', obj, function(res) {
  258. if(res.err_msg == 'get_brand_wcpay_request:ok') {
  259. var orderIds = {
  260. "orderId": dt.data.orderId
  261. };
  262. // layer.open({
  263. // type: 2,
  264. // shadeClose: false,
  265. // content: "正在请求加载订单信息..."
  266. // }); // 调用加载弹出层
  267. $.ajax(base_path+'/wechat/order/checkOrderPaySuccess', { // 校验订单状态
  268. data: orderIds,
  269. dataType: 'json',
  270. type: 'post',
  271. timeout: 15000,
  272. success: function(dt) {
  273. if(dt.status) { // 支付成功
  274. window.location.href = "pay-win.html?orderId=" + orderIds.orderId + "&dates=" + new Date().getTime();
  275. } else {
  276. setTimeout(checkOrderStatus(orderIds), 1000);
  277. }
  278. },
  279. error: function(xhr, type, errorThrown) {
  280. isPay = true;
  281. // layer.closeAll();
  282. mui.toast("您的网络异常,请刷新重试!");
  283. return;
  284. }
  285. });
  286. } else {
  287. isPay = true;
  288. //mui.alert("对不起,支付失败!请稍后重试!" + dt.data.orderId + "支付失败!");
  289. //window.location.href = "order-details.html?orderId=" + dt.data.orderId; // 前往订单详情
  290. }
  291. });
  292. } else {
  293. isPay = true;
  294. mui.toast(dt.message);
  295. }
  296. },
  297. error: function(xhr, type, errorThrown) {
  298. isPay = true;
  299. // layer.closeAll();
  300. mui.toast("您的网络异常,请刷新重试!");
  301. return;
  302. }
  303. });
  304. }
  305. </script>
  306. </body>
  307. </html>