order-details.html 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412
  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">
  13. // 屏蔽分享
  14. window.hiddenAllWechatMenu = true;
  15. </script>
  16. </head>
  17. <body>
  18. <div class="loading-bg">
  19. <div class="mui-loading">
  20. <div class="mui-spinner">
  21. </div>
  22. &nbsp;&nbsp;加载中...
  23. </div>
  24. </div>
  25. <div class="mui-content">
  26. <input type="hidden" id="salesPostFirm" name="salesPostFirm" value=""/>
  27. <input type="hidden" id="salesPostNum" name="salesPostNum" value=""/>
  28. <div style="margin:14px 14px 0 14px;background-color: #f3f3f3;text-align: center;">
  29. <ul class="mui-table-view mui-table-view-striped my-grid-view-no mui-table-view-condensed">
  30. <li class="mui-table-view-cell" style="background-color: #f3f3f3;border-radius: 5px;padding: 11px 8px;">
  31. <div class="mui-table" style="height: 80px;">
  32. <div class="mui-table-cell mui-col-xs-12 table-middle" style="display: none;">
  33. <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>
  34. </div>
  35. <div class="mui-table-cell mui-col-xs-1 mui-text-left table-middle">
  36. <p><span class="iconfont icon-dingwei"></span></p>
  37. </div>
  38. <div class="mui-table-cell mui-col-xs-10 mui-text-left table-middle">
  39. <div><span id="addressName"></span> <span class="mui-pull-right" id="salesAddressTel"></span></div>
  40. <p id="addressInfo"></p>
  41. </div>
  42. <div class="mui-table-cell mui-col-xs-1 mui-text-right table-middle">
  43. <!--<p><span class="mui-icon mui-icon-arrowright"></span></p>-->
  44. </div>
  45. </div>
  46. </li>
  47. </ul>
  48. </div>
  49. <div class="clearing-box">
  50. <ul class="mui-table-view mui-table-view-striped my-grid-view-no mui-table-view-condensed shopping-cart-list">
  51. </ul>
  52. <ul class="mui-table-view my-view-no-top">
  53. <li class="mui-table-view-cell cl-red" style="padding: 11px 2px;">
  54. 共<span id="num">0</span>件<span class="mui-pull-right">合计:¥<span id="salesYetAmount">0.00</span></span>
  55. </li>
  56. </ul>
  57. <ul class="my-table-view">
  58. <li>
  59. 订单状态:<span id="statusName"></span>
  60. </li>
  61. <li>
  62. 订单编号:<span id="orderId"></span>
  63. </li>
  64. <li>
  65. 下单时间:<span id="salesCreateDate"></span>
  66. </li>
  67. </ul>
  68. <!--<textarea id="textarea" rows="1" placeholder="如您选择退款,请先输入退款原因!" style="background-color: #f9f9f9;border: 0;margin:0;padding: 15px;font-size: 14px;"></textarea>-->
  69. <div class="mui-content-padded mui-text-center" id="operation">
  70. </div>
  71. </div>
  72. </div>
  73. <script src="js/mui.min.js"></script>
  74. <script src="js/jquery-2.1.1.min.js"></script>
  75. <script src="js/main.js"></script>
  76. <script src="js/wechat-utils-1.0.js"></script>
  77. <script>
  78. var orderId = getParam("orderId");
  79. var status;
  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. status = order.salesStatus;
  109. $("#addressInfo").html(order.salesAddressInfo);
  110. $("#addressName").html(order.salesAddressName);
  111. $("#salesAddressTel").html(order.salesAddressTel);
  112. var str = '';
  113. var num = 0;
  114. mui.each(order.orderItemList, function(index) {
  115. num += this.itemNum;
  116. 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.itemProductColor +'<span class="center">数量:'+ this.itemNum +'</span></h6><div>¥'+ accDiv(this.itemProductDiscount,100) +'</div></div></div>';
  117. });
  118. document.querySelector('.shopping-cart-list').innerHTML = str;
  119. document.querySelector('.loading-bg').style.display = 'none';
  120. if(order.salesPostFirm != null && order.salesPostFirm != "" && typeof(order.salesPostFirm) != "undefined"){
  121. $("#salesPostFirm").val(order.salesPostFirm);
  122. }
  123. if(order.salesPostNum != null && order.salesPostNum != "" && typeof(order.salesPostNum) != "undefined"){
  124. $("#salesPostNum").val(order.salesPostNum);
  125. }
  126. var logisticsHtml = '';
  127. if(status == 5 || status == 12 || status == 6 || status == 11) { //状态为取消,待支付,代发货,退货,换货都没有物流信息
  128. if(order.salesPostFirm != null && order.salesPostFirm != "" && typeof(order.salesPostFirm) != "undefined" && order.salesPostNum != null && order.salesPostNum != "" && typeof(order.salesPostNum) != "undefined"){
  129. logisticsHtml = '<button type="button" class="mui-btn my-btn-request logistics" style="margin-right: 20px;">查看物流</button>';
  130. }
  131. }
  132. var payHtml = '<button type="button" class="mui-btn my-btn-request go_pay" style="margin-right: 20px;">立即支付</button>';
  133. var aftermarketHtml = '<button type="button" class="mui-btn my-btn-request go_aftermarket" style="margin-right: 20px;">我要售后</button>';
  134. var cancelHtml = '<button type="button" class="mui-btn my-btn-request go_cancel" style="margin-right: 20px;">取消申请</button>';
  135. /*订单状态*/
  136. var statusName = "";
  137. var operationHtml = "";
  138. switch (parseInt(order.salesStatus)){
  139. case 0 :
  140. statusName = "取消订单";
  141. break;
  142. case 1 :
  143. statusName = "待支付";
  144. operationHtml += payHtml;
  145. break;
  146. case 2 :
  147. statusName = "已支付";
  148. operationHtml += aftermarketHtml;
  149. break;
  150. case 3 :
  151. statusName = "退款申请中";
  152. operationHtml += cancelHtml;
  153. break;
  154. case 4 :
  155. statusName = "已退款";
  156. break;
  157. case 5 :
  158. statusName = "已发货";
  159. operationHtml += aftermarketHtml + logisticsHtml;
  160. break;
  161. case 6 :
  162. statusName = "申请退货中";
  163. operationHtml += cancelHtml + logisticsHtml;
  164. break;
  165. case 7 :
  166. statusName = "退货中";
  167. operationHtml += cancelHtml;
  168. break;
  169. case 8 :
  170. statusName = "订单退货完成";
  171. break;
  172. case 9 :
  173. statusName = "换货中";
  174. operationHtml += cancelHtml;
  175. break;
  176. case 10 :
  177. statusName = "换货完成";
  178. break;
  179. case 11 :
  180. statusName = "申请换货中";
  181. operationHtml += cancelHtml + logisticsHtml;
  182. break;
  183. case 12 :
  184. statusName = "订单完成";
  185. operationHtml += logisticsHtml
  186. break;
  187. default:
  188. break;
  189. }
  190. $("#statusName").html(statusName);
  191. $("#orderId").html(order.salesOrderid);
  192. $("#salesCreateDate").html(order.salesCreateDate);
  193. $("#salesYetAmount").html(accDiv(order.salesYetAmount,100));
  194. $("#num").html(num);
  195. $("#operation").html(operationHtml);
  196. }
  197. }
  198. },
  199. error: function(xhr, type, errorThrown) {
  200. console.log(xhr);
  201. }
  202. });
  203. });
  204. mui('body').on('tap', '.go_web_shop', function() {
  205. mui.openWindow({
  206. url: 'chanpin_list.html'
  207. });
  208. });
  209. mui('body').on('tap', '.go-clearing', function() {
  210. if($("input[type='checkbox']:checked").length > 0) {
  211. mui.openWindow({
  212. url: 'clearing.html'
  213. });
  214. } else {
  215. mui.alert('您没有选中任何商品', '爱贝源-消息提醒', function() {
  216. console.log("您关闭了警告框");
  217. });
  218. }
  219. });
  220. /**
  221. * 立即支付
  222. */
  223. mui('body').on('tap', '.go_pay', function() {
  224. goOrderPay(orderId);
  225. });
  226. /**
  227. * 申请售后
  228. */
  229. mui('body').on('tap', '.go_aftermarket', function() {
  230. location.href = "customer-service.html?orderId=" + orderId;
  231. });
  232. /**
  233. * 查询物流
  234. */
  235. mui('body').on('tap', '.logistics', function() {
  236. var salesPostFirm = $("#salesPostFirm").val();
  237. var salesPostNum = $("#salesPostNum").val();
  238. location.href = "logistics-massage.html?salesPostFirm="+salesPostFirm + "&salesPostNum="+salesPostNum;
  239. });
  240. /**
  241. * 取消订单
  242. */
  243. mui('body').on('tap', '.go_cancel', function() {
  244. var newStatus;
  245. if(status == 3){ //申请退款的
  246. newStatus = 3
  247. }else if(status == 6){ //申请退货的
  248. newStatus = 5
  249. }else if(status == 7){ //退货中 的
  250. newStatus = 6
  251. }else if(status == 11){
  252. newStatus = 8
  253. }
  254. if(status != null){
  255. updateOrderStatus(orderId,newStatus,"");
  256. }
  257. });
  258. /*修改订单状态*/
  259. function updateOrderStatus(orderId, status, remark) {
  260. var msg = "";
  261. if(status == 1){
  262. msg = "是否取消该订单";
  263. }else if(status == 3){
  264. msg = "是否取消申请退款";
  265. }else if(status == 5){
  266. msg = "是否取消申请退货";
  267. }else if(status == 6){
  268. msg = "是否取消申请退货";
  269. }else if(status == 8){
  270. msg = "是否取消申请换货";
  271. }
  272. var btnArray = ['否', '是'];
  273. mui.confirm(msg, "", btnArray, function(e){
  274. if (e.index == 1) {
  275. $.ajax(base_path + '/wechat/cart/updateOrderStatus?dates=' + new Date().getTime(), {
  276. data: {
  277. "status": status, //更改后的状态
  278. "orderId": orderId, //订单id
  279. "remark": remark
  280. },
  281. dataType: 'json',
  282. xhrFields: {
  283. withCredentials: true
  284. },
  285. crossDomain: true,
  286. type: 'get',
  287. timeout: 15000,
  288. success: function(dt) {
  289. if(dt.resultCode == 200) {
  290. //mui.alert("获取订单列表失败!网络错误");
  291. //location.reload();//刷新
  292. }
  293. location.reload();//刷新
  294. },
  295. error: function(xhr, type, errorThrown) {
  296. console.log(xhr);
  297. mui.alert("获取订单列表失败!网络错误");
  298. }
  299. });
  300. }
  301. })
  302. }
  303. function goOrderPay(salesOrderid) {
  304. var dataArgs = {
  305. "orderId": salesOrderid
  306. };
  307. $.ajax(base_path+'/wechat/cart/orderPay', { // 提交订单,准备支付
  308. data: dataArgs,
  309. dataType: 'json',
  310. xhrFields: {
  311. withCredentials: true
  312. },
  313. crossDomain: true,
  314. type: 'POST',
  315. xhrFields: {
  316. withCredentials: true
  317. },
  318. crossDomain: true,
  319. timeout: 15000,
  320. success: function(dt) {
  321. // layer.closeAll();
  322. if(dt.status) {
  323. var str = dt.data.info;
  324. var obj = JSON.parse("{" + str + "}");
  325. WeixinJSBridge.invoke('getBrandWCPayRequest', obj, function(res) {
  326. if(res.err_msg == 'get_brand_wcpay_request:ok') {
  327. var orderIds = {
  328. "orderId": dt.data.orderId
  329. };
  330. // layer.open({
  331. // type: 2,
  332. // shadeClose: false,
  333. // content: "正在请求加载订单信息..."
  334. // }); // 调用加载弹出层
  335. $.ajax(base_path+'/wechat/order/checkOrderPaySuccess', { // 校验订单状态
  336. data: orderIds,
  337. dataType: 'json',
  338. xhrFields: {
  339. withCredentials: true
  340. },
  341. crossDomain: true,
  342. type: 'post',
  343. xhrFields: {
  344. withCredentials: true
  345. },
  346. crossDomain: true,
  347. timeout: 15000,
  348. success: function(dt) {
  349. if(dt.status) { // 支付成功
  350. window.location.href = "pay-win.html?orderId=" + orderIds.orderId + "&dates=" + new Date().getTime();
  351. } else {
  352. mui.toast("支付失败,请稍后重试!");
  353. //setTimeout(checkOrderStatus(orderIds), 1000);
  354. }
  355. },
  356. error: function(xhr, type, errorThrown) {
  357. isPay = true;
  358. // layer.closeAll();
  359. mui.toast("您的网络异常,请刷新重试!");
  360. return;
  361. }
  362. });
  363. } else {
  364. isPay = true;
  365. mui.alert("对不起,支付失败!请稍后重试!" + dt.data.orderId + "支付失败!");
  366. //window.location.href = "order-details.html?orderId=" + dt.data.orderId; // 前往订单详情
  367. }
  368. });
  369. } else {
  370. isPay = true;
  371. mui.toast(dt.message);
  372. }
  373. },
  374. error: function(xhr, type, errorThrown) {
  375. isPay = true;
  376. // layer.closeAll();
  377. mui.toast("您的网络异常,请刷新重试!");
  378. return;
  379. }
  380. });
  381. }
  382. </script>
  383. </body>
  384. </html>