order-details.html 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494
  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. <footer class="mui-bar mui-bar-tab" id="footer-bar-tab">
  19. <a class="mui-tab-item ">
  20. <span class="iconfont">
  21. <svg class="icon" aria-hidden="true">
  22. <use xlink:href="#icon-kang-hui"></use>
  23. </svg>
  24. </span>
  25. <span class="mui-tab-label" >首页</span>
  26. </a>
  27. <a class="mui-tab-item">
  28. <span class="iconfont" >
  29. <svg class="icon" aria-hidden="true">
  30. <use xlink:href="#icon-ji-hui"></use>
  31. </svg>
  32. </span>
  33. <span class="mui-tab-label">购物车</span>
  34. </a>
  35. <a class="mui-tab-item mui-active-select">
  36. <span class="iconfont ">
  37. <svg class="icon" aria-hidden="true">
  38. <use xlink:href="#icon-yi"></use>
  39. </svg>
  40. </span>
  41. <span class="mui-tab-label">订单</span>
  42. </a>
  43. <a class="mui-tab-item">
  44. <span class="iconfont">
  45. <svg class="icon" aria-hidden="true">
  46. <use xlink:href="#icon-qing-hui"></use>
  47. </svg>
  48. </span>
  49. <span class="mui-tab-label">我的</span>
  50. </a>
  51. </footer>
  52. <div class="loading-bg">
  53. <div class="mui-loading">
  54. <div class="mui-spinner">
  55. </div>
  56. &nbsp;&nbsp;加载中...
  57. </div>
  58. </div>
  59. <div class="mui-content">
  60. <input type="hidden" id="salesPostFirm" name="salesPostFirm" value=""/>
  61. <input type="hidden" id="salesPostNum" name="salesPostNum" value=""/>
  62. <div style="margin:14px 14px 0 14px;background-color: #f3f3f3;text-align: center;">
  63. <ul class="mui-table-view mui-table-view-striped my-grid-view-no mui-table-view-condensed">
  64. <li class="mui-table-view-cell" style="background-color: #f3f3f3;border-radius: 5px;padding: 11px 8px;">
  65. <div class="mui-table" style="height: 80px;">
  66. <div class="mui-table-cell mui-col-xs-12 table-middle" style="display: none;">
  67. <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>
  68. </div>
  69. <div class="mui-table-cell mui-col-xs-1 mui-text-left table-middle">
  70. <p><span class="iconfont icon-dingwei"></span></p>
  71. </div>
  72. <div class="mui-table-cell mui-col-xs-10 mui-text-left table-middle">
  73. <div><span id="addressName"></span> <span class="" style="padding-left: 10px;" id="salesAddressTel"></span></div>
  74. <p id="addressInfo"></p>
  75. </div>
  76. <div class="mui-table-cell mui-col-xs-1 mui-text-right table-middle">
  77. <!--<p><span class="mui-icon mui-icon-arrowright"></span></p>-->
  78. </div>
  79. </div>
  80. </li>
  81. </ul>
  82. </div>
  83. <div class="clearing-box">
  84. <ul class="mui-table-view mui-table-view-striped my-grid-view-no mui-table-view-condensed shopping-cart-list">
  85. </ul>
  86. <ul class="mui-table-view my-view-no-top">
  87. <li class="mui-table-view-cell cl-red" style="padding: 11px 2px;">
  88. 共<span id="num">0</span>件<span class="mui-pull-right">合计:¥<span id="salesYetAmount">0.00</span></span>
  89. </li>
  90. </ul>
  91. <ul class="my-table-view">
  92. <li>
  93. 订单状态:<span id="statusName"></span>
  94. </li>
  95. <li>
  96. 订单编号:<span id="orderId"></span>
  97. </li>
  98. <li>
  99. 下单时间:<span id="salesCreateDate"></span><br>
  100. </li>
  101. <li id="salesUserRemarkShow" style="display: none;">
  102. 订单备注:<span id="salesUserRemark"></span>
  103. </li>
  104. </ul>
  105. <!--<textarea id="textarea" rows="1" placeholder="如您选择退款,请先输入退款原因!" style="background-color: #f9f9f9;border: 0;margin:0;padding: 15px;font-size: 14px;"></textarea>-->
  106. <div class="mui-content-padded mui-text-center" id="operation">
  107. </div>
  108. </div>
  109. </div>
  110. <script src="js/mui.min.js"></script>
  111. <script src="js/jquery-2.1.1.min.js"></script>
  112. <script src="js/main.js"></script>
  113. <script src="js/wechat-utils-1.0.js"></script>
  114. <script src="js/iconfont.js"></script>
  115. <script>
  116. var orderId = getParam("orderId");
  117. var status;
  118. var isPay = true; // 是否在请求支付,false表示正在请求,true可以请求
  119. var isEfficacious = true; //商品是否有效,有效则可以支付,无效则不能支付
  120. mui.ready(function() {
  121. // var str="";
  122. // for (i=0;i<3;i++) {
  123. // 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>';
  124. // }
  125. // document.querySelector('.shopping-cart-list').innerHTML=str;
  126. var table = document.body.querySelector('.shopping-cart-list');
  127. $.ajax(base_path + '/wechat/cart/getShopOrderByOrderId', {
  128. data: {
  129. orderId: orderId
  130. },
  131. dataType: 'json',
  132. xhrFields: {
  133. withCredentials: true
  134. },
  135. crossDomain: true,
  136. type: 'post',
  137. timeout: 15000,
  138. success: function(dt) {
  139. //服务器返回响应
  140. if(dt.isRedirect) {
  141. location.href = dt.redirectURL;
  142. } else {
  143. if(dt.status) {
  144. console.log(dt)
  145. var order = dt.data;
  146. status = order.salesStatus;
  147. $("#addressInfo").html(order.salesAddressInfo);
  148. $("#addressName").html(order.salesAddressName);
  149. $("#salesAddressTel").html(order.salesAddressTel);
  150. var str = '';
  151. var num = 0,a='';
  152. mui.each(order.orderItemList, function(index) {
  153. num += this.itemNum;
  154. str += '<div class="mui-table"><div class="mui-table-cell mui-col-xs-4"><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><span class="center" style="margin-left: 0px;line-height: 15px;">颜色:'+ this.itemProductColor +'</span></br><span class="center" style="margin-left: 0px;line-height: 15px;">数量:'+ this.itemNum +'</span></h6><div>¥'+ accDiv(this.itemProductDiscount,100) +'</div></div></div>';
  155. mui(this.salesUserGiftList).each(function(index) {
  156. var txt_gift = this;
  157. if (index == 0) {
  158. a += '<h6>赠品:' + txt_gift.giftName + '&nbsp;&nbsp;&nbsp;&nbsp;数量:' + txt_gift.userGiftCount + '</h6>';
  159. } else {
  160. a += '<h6>&nbsp;&nbsp;&nbsp;&nbsp;' + txt_gift.giftName + '&nbsp;&nbsp;&nbsp;&nbsp;数量:' + txt_gift.userGiftCount + '</h6>';
  161. }
  162. });
  163. str += a
  164. });
  165. document.querySelector('.shopping-cart-list').innerHTML = str;
  166. document.querySelector('.loading-bg').style.display = 'none';
  167. if(order.salesPostFirm != null && order.salesPostFirm != "" && typeof(order.salesPostFirm) != "undefined"){
  168. $("#salesPostFirm").val(order.salesPostFirm);
  169. }
  170. if(order.salesPostNum != null && order.salesPostNum != "" && typeof(order.salesPostNum) != "undefined"){
  171. $("#salesPostNum").val(order.salesPostNum);
  172. }
  173. var logisticsHtml = '';
  174. if(status == 5 || status == 12 || status == 6 || status == 11) { //状态为取消,待支付,代发货,退货,换货都没有物流信息
  175. if(order.salesPostFirm != null && order.salesPostFirm != "" && typeof(order.salesPostFirm) != "undefined" && order.salesPostNum != null && order.salesPostNum != "" && typeof(order.salesPostNum) != "undefined"){
  176. logisticsHtml = '<button type="button" class="mui-btn my-btn-request logistics" style="margin-left: 10px;">查看物流</button>';
  177. }
  178. }
  179. var payHtml = '<button type="button" class="mui-btn my-btn-request go_pay" style="margin-left: 10px;">立即支付</button>';
  180. var cancelOrderHtml = '<button type="button" class="mui-btn my-btn-request go_cancel" style="margin-left: 10px;">取消订单</button>';
  181. var aftermarketHtml = '<button type="button" class="mui-btn my-btn-request go_aftermarket" style="margin-left: 10px;">我要售后</button>';
  182. var cancelHtml = '<button type="button" class="mui-btn my-btn-request go_cancel" style="margin-left: 10px;">取消申请</button>';
  183. var confirmHtml = '<button type="button" class="mui-btn my-btn-request go_confirm" style="margin-left: 10px;">确认收货</button>';
  184. /*订单状态*/
  185. var statusName = "";
  186. var operationHtml = "";
  187. switch (parseInt(order.salesStatus)){
  188. case 0 :
  189. statusName = "取消订单";
  190. break;
  191. case 1 :
  192. statusName = "待支付(未支付订单超过20分钟自动取消)";
  193. operationHtml += payHtml + cancelOrderHtml;
  194. break;
  195. case 2 :
  196. statusName = "已支付";
  197. operationHtml += aftermarketHtml;
  198. break;
  199. case 3 :
  200. statusName = "退款申请中";
  201. operationHtml += cancelHtml;
  202. break;
  203. case 4 :
  204. statusName = "已退款";
  205. break;
  206. case 5 :
  207. statusName = "已发货";
  208. operationHtml += aftermarketHtml + logisticsHtml;
  209. break;
  210. case 6 :
  211. statusName = "申请退货中";
  212. operationHtml += cancelHtml + logisticsHtml;
  213. break;
  214. case 7 :
  215. statusName = "退货中(请尽快寄回产品)";
  216. operationHtml += cancelHtml;
  217. break;
  218. case 8 :
  219. statusName = "订单退货完成";
  220. break;
  221. case 9 :
  222. statusName = "换货中";
  223. break;
  224. case 10 :
  225. statusName = "换货完成";
  226. break;
  227. case 11 :
  228. statusName = "申请换货中";
  229. operationHtml += cancelHtml + logisticsHtml;
  230. break;
  231. case 12 :
  232. statusName = "订单完成";
  233. operationHtml += logisticsHtml
  234. break;
  235. default:
  236. break;
  237. }
  238. $("#statusName").html(statusName);
  239. $("#orderId").html(order.salesOrderid);
  240. $("#salesCreateDate").html(order.salesCreateDate);
  241. $("#salesYetAmount").html(accDiv(order.salesYetAmount,100));
  242. $("#salesUserRemark").html(order.salesUserRemark);
  243. if(order.salesUserRemark != null && order.salesUserRemark != "" && typeof(order.salesUserRemark) != 'undefined'){
  244. $("#salesUserRemarkShow").show();
  245. }
  246. $("#num").html(num);
  247. $("#operation").html(operationHtml);
  248. }
  249. }
  250. },
  251. error: function(xhr, type, errorThrown) {
  252. console.log(xhr);
  253. }
  254. });
  255. });
  256. mui('body').on('tap', '.go_web_shop', function() {
  257. mui.openWindow({
  258. url: 'chanpin_list.html'
  259. });
  260. });
  261. mui('body').on('tap', '.go-clearing', function() {
  262. if($("input[type='checkbox']:checked").length > 0) {
  263. mui.openWindow({
  264. url: 'clearing.html'
  265. });
  266. } else {
  267. mui.alert('您没有选中任何商品', '爱贝源-消息提醒', function() {
  268. console.log("您关闭了警告框");
  269. });
  270. }
  271. });
  272. /*确认收货*/
  273. mui('body').on('tap', '.go_confirm', function() {
  274. confirm_receipt(orderId,status);
  275. });
  276. //确认收货
  277. function confirm_receipt(salesOrderid,status) {
  278. var dataArgs = {
  279. "orderId": salesOrderid,
  280. "status": status
  281. };
  282. $.ajax(base_path+'/wechat/cart/confirm_receipt', {
  283. data: dataArgs,
  284. dataType: 'json',
  285. type: 'POST',
  286. xhrFields: {
  287. withCredentials: true
  288. },
  289. crossDomain: true,
  290. timeout: 15000,
  291. success: function (dt) {
  292. mui.alert(dt.message);
  293. },
  294. error: function(xhr, type, errorThrown) {
  295. }
  296. });
  297. }
  298. /**
  299. * 立即支付
  300. */
  301. mui('body').on('tap', '.go_pay', function() {
  302. goOrderPay(orderId);
  303. });
  304. /**
  305. * 申请售后
  306. */
  307. mui('body').on('tap', '.go_aftermarket', function() {
  308. location.href = "customer-service.html?orderId=" + orderId;
  309. });
  310. /**
  311. * 查询物流
  312. */
  313. mui('body').on('tap', '.logistics', function() {
  314. var salesPostFirm = $("#salesPostFirm").val();
  315. var salesPostNum = $("#salesPostNum").val();
  316. location.href = "logistics-massage.html?salesPostFirm="+salesPostFirm + "&salesPostNum="+salesPostNum;
  317. });
  318. /**
  319. * 取消订单
  320. */
  321. mui('body').on('tap', '.go_cancel', function() {
  322. var newStatus;
  323. if(status == 1){//取消订单
  324. newStatus = 1;
  325. }else if(status == 3){ //申请退款的
  326. newStatus = 3;
  327. }else if(status == 6){ //申请退货的
  328. newStatus = 5;
  329. }else if(status == 7){ //退货中 的
  330. newStatus = 6;
  331. }else if(status == 11){
  332. newStatus = 8;
  333. }
  334. if(status != null){
  335. updateOrderStatus(orderId,newStatus,"");
  336. }
  337. });
  338. /*修改订单状态*/
  339. function updateOrderStatus(orderId, status, remark) {
  340. var msg = "";
  341. if(status == 1){
  342. msg = "是否取消该订单";
  343. }else if(status == 3){
  344. msg = "是否取消申请退款";
  345. }else if(status == 5){
  346. msg = "是否取消申请退货";
  347. }else if(status == 6){
  348. msg = "是否取消申请退货";
  349. }else if(status == 8){
  350. msg = "是否取消申请换货";
  351. }
  352. var btnArray = ['否', '是'];
  353. mui.confirm(msg, "", btnArray, function(e){
  354. if (e.index == 1) {
  355. $.ajax(base_path + '/wechat/cart/updateOrderStatus?dates=' + new Date().getTime(), {
  356. data: {
  357. "status": status, //更改后的状态
  358. "orderId": orderId, //订单id
  359. "remark": remark
  360. },
  361. dataType: 'json',
  362. xhrFields: {
  363. withCredentials: true
  364. },
  365. crossDomain: true,
  366. type: 'get',
  367. timeout: 15000,
  368. success: function(dt) {
  369. if(dt.resultCode == 200) {
  370. //mui.alert("获取订单列表失败!网络错误");
  371. //location.reload();//刷新
  372. }
  373. location.reload();//刷新
  374. },
  375. error: function(xhr, type, errorThrown) {
  376. console.log(xhr);
  377. mui.alert("获取订单列表失败!网络错误");
  378. }
  379. });
  380. }
  381. })
  382. }
  383. function goOrderPay(salesOrderid) {
  384. var dataArgs = {
  385. "orderId": salesOrderid
  386. };
  387. $.ajax(base_path+'/wechat/cart/orderPay', { // 提交订单,准备支付
  388. data: dataArgs,
  389. dataType: 'json',
  390. xhrFields: {
  391. withCredentials: true
  392. },
  393. crossDomain: true,
  394. type: 'POST',
  395. xhrFields: {
  396. withCredentials: true
  397. },
  398. crossDomain: true,
  399. timeout: 15000,
  400. success: function(dt) {
  401. // layer.closeAll();
  402. if(dt.status) {
  403. var str = dt.data.info;
  404. var obj = JSON.parse("{" + str + "}");
  405. WeixinJSBridge.invoke('getBrandWCPayRequest', obj, function(res) {
  406. if(res.err_msg == 'get_brand_wcpay_request:ok') {
  407. var orderIds = {
  408. "orderId": dt.data.orderId
  409. };
  410. // layer.open({
  411. // type: 2,
  412. // shadeClose: false,
  413. // content: "正在请求加载订单信息..."
  414. // }); // 调用加载弹出层
  415. $.ajax(base_path+'/wechat/order/checkOrderPaySuccess', { // 校验订单状态
  416. data: orderIds,
  417. dataType: 'json',
  418. xhrFields: {
  419. withCredentials: true
  420. },
  421. crossDomain: true,
  422. type: 'post',
  423. xhrFields: {
  424. withCredentials: true
  425. },
  426. crossDomain: true,
  427. timeout: 15000,
  428. success: function(dt) {
  429. if(dt.status) { // 支付成功
  430. window.location.href = "pay-win.html?orderId=" + orderIds.orderId + "&dates=" + new Date().getTime();
  431. } else {
  432. mui.toast("支付失败,请稍后重试!");
  433. //setTimeout(checkOrderStatus(orderIds), 1000);
  434. }
  435. },
  436. error: function(xhr, type, errorThrown) {
  437. isPay = true;
  438. // layer.closeAll();
  439. mui.toast("您的网络异常,请刷新重试!");
  440. return;
  441. }
  442. });
  443. } else {
  444. isPay = true;
  445. mui.alert("支付失败!请稍后重试!");
  446. //window.location.href = "order-details.html?orderId=" + dt.data.orderId; // 前往订单详情
  447. }
  448. });
  449. } else {
  450. isPay = true;
  451. mui.toast(dt.message);
  452. }
  453. },
  454. error: function(xhr, type, errorThrown) {
  455. isPay = true;
  456. // layer.closeAll();
  457. mui.toast("您的网络异常,请刷新重试!");
  458. return;
  459. }
  460. });
  461. }
  462. </script>
  463. </body>
  464. </html>