order-details.html 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371
  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="http://s.iamberry.com/soodo/wechat/css/mui.min.css" />
  10. <link rel="stylesheet" type="text/css" href="http://s.iamberry.com/soodo/wechat/css/iconfont.css" />
  11. <link rel="stylesheet" type="text/css" href="http://s.iamberry.com/soodo/wechat/css/main.css" />
  12. </head>
  13. <body>
  14. <div class="mui-content">
  15. <div class="address-cantainner">
  16. <input type="hidden" id="salesPostFirm" name="salesPostFirm" value=""/>
  17. <input type="hidden" id="salesPostNum" name="salesPostNum" value=""/>
  18. <ul class="mui-table-view mui-table-view-striped my-grid-view-no mui-table-view-condensed">
  19. <li class="mui-table-view-cell">
  20. <div class="mui-table">
  21. <!--<div class="mui-table-cell mui-col-xs-12 table-middle" style="display: none;">
  22. <div class="add-address"><span class="iconfont icon-jia"></span>添加收货地址</div>
  23. </div>-->
  24. <div class="mui-table-cell mui-col-xs-1 mui-text-left table-middle">
  25. <p><span class="iconfont icon-dingwei"></span></p>
  26. </div>
  27. <div class="mui-table-cell mui-col-xs-10 mui-text-left table-middle">
  28. <div>收货人:<span id="receiver"></span> <span class="mui-pull-right" id="salesAddressTel">16899996678</span></div>
  29. <p>收货地址:<span id="salesAddressInfo"></span></p>
  30. </div>
  31. <!--<div class="mui-table-cell mui-col-xs-1 mui-text-right table-middle">
  32. <p><span class="mui-icon mui-icon-arrowright"></span></p>
  33. </div>-->
  34. </div>
  35. </li>
  36. </ul>
  37. </div>
  38. <div class="clearing-box">
  39. <ul class="mui-table-view mui-table-view-striped my-grid-view-no mui-table-view-condensed shopping-cart-list">
  40. </ul>
  41. <ul class="mui-table-view">
  42. <li class="mui-table-view-cell" style="padding-left:7px;">
  43. <a class="btn-youhuiquan">
  44. 商品总价<span class="mui-pull-right">¥<span id="salesAmount">0.00</span></span>
  45. </a>
  46. </li>
  47. <li class="mui-table-view-cell" style="padding-left:7px;" id="isCouponReduce">
  48. <a class="btn-youhuiquan">
  49. 抵扣金额<span class="mui-pull-right">-¥<span id="couponReduce">0.00</span></span>
  50. </a>
  51. </li>
  52. </ul>
  53. <div class="mui-content-padded mui-text-right">实付:<span class="pro-price">¥<span id="salesYetAmount">0.00</span></span></div>
  54. </div>
  55. <ul class="mui-table-view my-grid-view-no status-list">
  56. <li class="mui-table-view-cell">
  57. 订单状态:<span id="statusName"></span>
  58. </li>
  59. <li class="mui-table-view-cell">
  60. 订单编号:<span id="orderId"></span>
  61. </li>
  62. <li class="mui-table-view-cell">
  63. 下单时间:<span id="salesCreateDate"></span>
  64. </li>
  65. <li class="mui-table-view-cell" id="isShowOrderRemark">
  66. 订单留言:<span id="salesUserRemark"></span>
  67. </li>
  68. </ul>
  69. <br />
  70. <div class="mui-content-padded mui-text-center" id="operation">
  71. <!--<button type="button" class="my-btn-black">申请售后</button><button type="button" class="my-btn-black">查看物流</button>-->
  72. </div>
  73. </div>
  74. <!-- 加载ing begin-->
  75. <div class="loading covers">
  76. <div class="loading-bj"></div>
  77. <p>正在加载...</p>
  78. </div>
  79. <!-- 加载ing end -->
  80. <script src="http://s.iamberry.com/soodo/wechat/js/mui.min.js"></script>
  81. <script src="http://s.iamberry.com/soodo/wechat/js/jquery-2.1.1.min.js"></script>
  82. <script src="http://s.iamberry.com/soodo/wechat/js/main.js"></script>
  83. <script>
  84. var orderId = getParam("orderId");//从URL带过来的订单id
  85. var orderStatus = {
  86. 1: '<button type="button" class="my-btn-black my-order-btn order_operate" fixedStatus="pay" orderId>立即支付</button><button type="button" class="my-btn-black order_operate " fixedStatus="1" orderId>取消订单</button>',
  87. 2: '<button type="button" class="my-btn-black order_operate " fixedStatus="aftermarket" orderId>申请售后</button>', //申请退款
  88. 3: '<button type="button" class="my-btn-black order_operate " fixedStatus="3" orderId>取消申请</button>', //退款申请中,可以取消退款
  89. 5: '<button type="button" class="my-btn-black order_operate " fixedStatus="aftermarket" orderId>申请售后</button>', //已发货状态,可以申请退货、申请换货;
  90. 6: '<button type="button" class="my-btn-black order_operate " fixedStatus="5" orderId>取消申请</button>', //申请退货中,可以取消申请;
  91. 7: '<button type="button" class="my-btn-black order_operate " fixedStatus="6" orderId>取消退货</button>', //退货中,可以取消退货
  92. 11: '<button type="button" class="my-btn-black order_operate " fixedStatus="8" orderId>取消申请</button>' //申请换货中,可以取消申请
  93. };
  94. //dom加载完毕
  95. mui.ready(function() {
  96. $.ajax(base_path + '/wechat/cart/getShopOrderByOrderId?dates=' + new Date().getTime(), {
  97. data: {
  98. "orderId": orderId
  99. },
  100. dataType: 'json',
  101. xhrFields: {
  102. withCredentials: true
  103. },
  104. crossDomain: true,
  105. type: 'get',
  106. timeout: 15000,
  107. success: function(dt) {
  108. if(dt.isRedirect) {
  109. location.href = dt.redirectURL;
  110. } else {
  111. console.log(dt);
  112. var order = dt.data
  113. $("#receiver").html(order.salesAddressName);
  114. $("#salesAddressTel").html(order.salesAddressTel);
  115. $("#salesAddressInfo").html(order.salesAddressInfo);
  116. $("#salesAmount").html(accDiv(order.salesAmount,100));
  117. if(order.salesPostFirm != null && order.salesPostFirm != "" && typeof(order.salesPostFirm) != "undefined"){
  118. $("#salesPostFirm").val(order.salesPostFirm);
  119. }
  120. if(order.salesPostNum != null && order.salesPostNum != "" && typeof(order.salesPostNum) != "undefined"){
  121. $("#salesPostNum").val(order.salesPostNum);
  122. }
  123. if(order.couponReduce != null && order.couponReduce != "" && typeof(order.couponReduce) != "undefined"){
  124. var newCouponReduce = order.salesAmount - order.salesYetAmount;
  125. if(newCouponReduce <= 0){
  126. newCouponReduce = 0;
  127. }else{
  128. $("#couponReduce").html(accDiv(newCouponReduce,100));
  129. }
  130. $("#isCouponReduce").show();
  131. }else{
  132. $("#isCouponReduce").hide();
  133. }
  134. $("#salesYetAmount").html(accDiv(order.salesYetAmount,100));
  135. var str = "";
  136. mui.each(order.orderItemList, function(index) {
  137. 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>';
  138. });
  139. document.querySelector('.shopping-cart-list').innerHTML = str;
  140. /*订单状态*/
  141. var statusName = "";
  142. switch (parseInt(order.salesStatus)){
  143. case 0 :
  144. statusName = "取消订单";
  145. break;
  146. case 1 :
  147. statusName = "待支付";
  148. break;
  149. case 2 :
  150. statusName = "已支付";
  151. break;
  152. case 3 :
  153. statusName = "退款申请中";
  154. break;
  155. case 4 :
  156. statusName = "已退款";
  157. break;
  158. case 5 :
  159. statusName = "已发货";
  160. break;
  161. case 6 :
  162. statusName = "申请退货中";
  163. break;
  164. case 7 :
  165. statusName = "退货中";
  166. break;
  167. case 8 :
  168. statusName = "订单退货完成";
  169. break;
  170. case 9 :
  171. statusName = "换货中";
  172. break;
  173. case 10 :
  174. statusName = "换货完成";
  175. break;
  176. case 11 :
  177. statusName = "申请换货中";
  178. break;
  179. case 12 :
  180. statusName = "订单完成";
  181. break;
  182. default:
  183. break;
  184. }
  185. $("#statusName").html(statusName);
  186. $("#orderId").html(order.salesOrderid);
  187. $("#salesUserRemark").html(order.salesUserRemark);
  188. if(order.salesUserRemark != null && order.salesUserRemark != "" && typeof(order.salesUserRemark) != "undefined"){
  189. $("#isShowOrderRemark").show();
  190. }else{
  191. $("#isShowOrderRemark").hide();
  192. }
  193. $("#salesCreateDate").html(order.salesCreateDate);
  194. var status = order.salesStatus;
  195. var statusHtml = '';
  196. statusHtml = orderStatus[status]; //获取订单状态所展示的按钮
  197. if(statusHtml == null || statusHtml == "" || typeof(statusHtml) == "undefined") {
  198. statusHtml = '';
  199. }
  200. if(status != 1) {
  201. if(order.salesPostFirm != null && order.salesPostFirm != "" && typeof(order.salesPostFirm) != "undefined" && order.salesPostNum != null && order.salesPostNum != "" && typeof(order.salesPostNum) != "undefined"){
  202. statusHtml += '<button type="button" class="my-btn-black order_operate order_logistics" fixedStatus="logistics" orderId>查询物流</button>';
  203. }
  204. }
  205. statusHtml = statusHtml.replace(/\orderId/g,'orderId="'+ order.salesOrderid +'"')
  206. $("#operation").html(statusHtml);
  207. $(".loading").hide().css("opacity", "0"); //隐藏(正在加载...)
  208. }
  209. },
  210. error: function(xhr, type, errorThrown) {
  211. console.log(xhr);
  212. mui.alert("获取订单列表失败!网络错误");
  213. }
  214. });
  215. });
  216. /*订单按钮触发事件*/
  217. $(document).on('tap', '.order_operate', function() {
  218. var status = $(this).attr("fixedStatus");
  219. var orderId = $(this).attr("orderId");
  220. var remark = "";
  221. if( status == "pay") { //调用支付接口
  222. pay(orderId);
  223. }else if(status == "logistics") { //查询物流
  224. var salesPostFirm = $("#salesPostFirm").val();
  225. var salesPostNum = $("#salesPostNum").val();
  226. location.href = "logistics-massage.html?salesPostFirm="+salesPostFirm + "&salesPostNum="+salesPostNum;
  227. }else if(status == "aftermarket"){
  228. location.href = "customer-service.html?orderId=" + orderId;
  229. }else{
  230. updateOrderStatus(orderId, status, remark);
  231. }
  232. });
  233. /*修改订单状态*/
  234. function updateOrderStatus(orderId, status, remark) {
  235. var msg = "";
  236. if(status == 1){
  237. msg = "是否取消该订单";
  238. }else if(status == 3){
  239. msg = "是否取消申请退款";
  240. }else if(status == 5){
  241. msg = "是否取消申请退货";
  242. }else if(status == 6){
  243. msg = "是否取消申请退货";
  244. }else if(status == 8){
  245. msg = "是否取消申请换货";
  246. }
  247. var btnArray = ['否', '是'];
  248. mui.confirm(msg, "", btnArray, function(e){
  249. if (e.index == 1) {
  250. $.ajax(base_path + '/wechat/cart/updateOrderStatus?dates=' + new Date().getTime(), {
  251. data: {
  252. "status": status, //更改后的状态
  253. "orderId": orderId, //订单id
  254. "remark": remark
  255. },
  256. dataType: 'json',
  257. xhrFields: {
  258. withCredentials: true
  259. },
  260. crossDomain: true,
  261. type: 'get',
  262. timeout: 15000,
  263. success: function(dt) {
  264. if(dt.resultCode == 200) {
  265. //mui.alert("获取订单列表失败!网络错误");
  266. location.reload();//刷新
  267. }
  268. },
  269. error: function(xhr, type, errorThrown) {
  270. console.log(xhr);
  271. mui.alert("获取订单列表失败!网络错误");
  272. }
  273. });
  274. }
  275. })
  276. }
  277. /*支付*/
  278. function pay(orderId) {
  279. $.ajax(base_path + '/wechat/cart/orderPay?dates=' + new Date().getTime(), {
  280. data: {
  281. "orderId": orderId
  282. },
  283. dataType: 'json',
  284. xhrFields: {
  285. withCredentials: true
  286. },
  287. crossDomain: true,
  288. type: 'get',
  289. timeout: 15000,
  290. success: function(dt) {
  291. if(dt.resultCode == "500") {
  292. mui.alert(dt.message);
  293. isPay = true;
  294. return;
  295. };
  296. if(dt.data.info == "isOK") {
  297. location.href='pay-win.html?orderId='+ dt.data.orderId + "&dates=" + new Date().getTime()
  298. // mui.openWindow({
  299. // url: base_path+"/wechat/order/paySuccess?orderId=" + dt.data.orderId + "&dates=" + new Date().getTime()
  300. // });
  301. return;
  302. };
  303. if(dt.status) {
  304. var str = dt.data.info;
  305. var obj = JSON.parse("{" + str + "}");
  306. WeixinJSBridge.invoke('getBrandWCPayRequest', obj, function(res) {
  307. if(res.err_msg == 'get_brand_wcpay_request:ok') {
  308. $.ajax(base_path + '/wechat/order/checkOrderPaySuccess?dates=' + new Date().getTime(), {
  309. data: {
  310. "orderId": dt.data.orderId
  311. },
  312. dataType: 'json',
  313. xhrFields: {
  314. withCredentials: true
  315. },
  316. crossDomain: true,
  317. type: 'get',
  318. timeout: 15000,
  319. success: function(dataobj) {
  320. if(dataobj.isRedirect) {
  321. location.href = dataobj.redirectURL;
  322. } else {
  323. if(dataobj.status == true) { // 支付成功
  324. location.href = "pay-win.html?orderId=" + dataobj.data + "&dates=" + new Date().getTime();
  325. } else {
  326. location.href = "order-details.html?orderId=" + dataobj.data + "&dates=" + new Date().getTime(); // 前往订单详情
  327. }
  328. }
  329. },
  330. error: function(xhr, type, errorThrown) {
  331. console.log(xhr);
  332. }
  333. });
  334. } else {
  335. isPay = true;
  336. mui.toast("对不起,支付失败!请稍后重试!");
  337. }
  338. });
  339. } else {
  340. isPay = true;
  341. mui.alert(dt.message);
  342. location.href = "order-details.html?orderId=" + dt.data.orderId + "&dates=" + new Date().getTime(); // 前往订单详情
  343. }
  344. },
  345. error: function(xhr, type, errorThrown) {
  346. console.log(xhr);
  347. mui.alert("获取订单列表失败!网络错误");
  348. }
  349. });
  350. }
  351. </script>
  352. </body>
  353. </html>