exchange-goods.html 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214
  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/style.css" />
  12. <style>
  13. html,body,.mui-content{background: #fff;}
  14. .my-btn-black{width: 100px;display: block;margin: 0 auto;border-radius: 0;}
  15. </style>
  16. <script>
  17. //屏蔽分享
  18. document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
  19. WeixinJSBridge.call('hideOptionMenu');
  20. });
  21. </script>
  22. </head>
  23. <body>
  24. <div class="mui-content">
  25. <div class="clearing-box">
  26. <!--换货列表-->
  27. <ul class="mui-table-view mui-table-view-striped my-grid-view-no mui-table-view-condensed shopping-cart-list">
  28. </ul>
  29. <br/>
  30. <ul class="mui-table-view cusomer-ul">
  31. <li>
  32. <div class="mui-input-row">
  33. <label class="lbl-remarks"><span id="nameMsg"></span></label>
  34. <input class="ipt-remarks" type="text" placeholder="" id="remark">
  35. </div>
  36. </li>
  37. </ul>
  38. </div>
  39. <div class="address-cantainner" id="addressInfo">
  40. <ul class="mui-table-view mui-table-view-striped my-grid-view-no mui-table-view-condensed">
  41. <li class="mui-table-view-cell">
  42. <div class="mui-table">
  43. <!--微信地址-->
  44. <div class="mui-table-cell mui-col-xs-1 mui-text-left table-middle">
  45. <p><span class="iconfont icon-dingwei"></span></p>
  46. </div>
  47. <div class="mui-table-cell mui-col-xs-10 mui-text-left table-middle">
  48. <div>收货人:殷中华 <span class="mui-pull-right">18318941947</span></div>
  49. <p>收货地址:东莞清溪三中金龙工业区徐福记对面优尼雅电子科技</p>
  50. </div>
  51. </div>
  52. </li>
  53. </ul>
  54. </div>
  55. <div class="clearing-box">
  56. <br />
  57. <p id="msg"></p>
  58. <div class="mui-content-padded mui-text-center">
  59. <button type="button" class="mui-btn my-btn-black" id="orderUpdateStatus">提交</button>
  60. </div>
  61. </div>
  62. </div>
  63. <!-- 加载ing begin-->
  64. <div class="loading covers">
  65. <div class="loading-bj"></div>
  66. <p>正在加载...</p>
  67. </div>
  68. <!-- 加载ing end -->
  69. <script src="js/mui.min.js"></script>
  70. <script src="js/jquery-2.1.1.min.js"></script>
  71. <script src="js/main.js"></script>
  72. <script>
  73. var orderId = getParam("orderId");//从URL带过来的订单id
  74. var newStatus = getParam("newStatus"); //2:退款 5:退货 7:换货
  75. var status = 0;
  76. //dom加载完毕
  77. mui.ready(function() {
  78. var nameMsg = "";
  79. if(newStatus == 2){
  80. $("#nameMsg").html("退款原因");
  81. $("#remark").attr("placeholder","请填写您的退款原因");
  82. }else if(newStatus == 5){
  83. $("#nameMsg").html("退货原因");
  84. $("#remark").attr("placeholder","请填写您的退货原因");
  85. }else if(newStatus == 7){
  86. $("#nameMsg").html("换货原因");
  87. $("#remark").attr("placeholder","请填写您的换货原因");
  88. }
  89. $.ajax(base_path + '/cart/getShopOrderByOrderId?dates=' + new Date().getTime(), {
  90. data: {
  91. "orderId": orderId
  92. },
  93. dataType: 'json',
  94. xhrFields: {
  95. withCredentials: true
  96. },
  97. crossDomain: true,
  98. type: 'get',
  99. timeout: 15000,
  100. success: function(dt) {
  101. if(dt.isRedirect) {
  102. location.href = dt.redirectURL;
  103. } else {
  104. console.log(dt);
  105. var order = dt.data
  106. status = order.salesStatus; //赋值状态
  107. if(status == 2){
  108. $("#addressInfo").hide();
  109. $("#msg").html("提示:提交审核成功后,退款金额为您实付金额,当实付金额不为0时,您实付金额将在3个工作日内退款到原支付账户。");
  110. }else if(newStatus == 5){ //退货退款
  111. $("#addressInfo").show();
  112. $("#msg").html("<p>提示:</p><p>1:您好,麻烦您那边把机器邮寄前请将水箱、接水台中的水倒掉并擦干,不要留有水渍,避免运输途中水或奶粉溅入机器内部造成不必要的 损失; 用原包装或泡沫等材质包裹好机身。避免运输途中造成机器     磕碰、损坏。 请勿寄顺丰、圆通、EMS以及到付件快递,其他快递物流随意,寄回时,麻烦您在产品里面留下故障原因说明。</p><p>2:寄回后把单号给我们提供下然后提供下您的姓名、地址和电话方便我们修好后给您回寄。</p>" );
  113. }else if(newStatus == 7){
  114. $("#addressInfo").show();
  115. $("#msg").html("提示:提交成功后,需联系客服并寄回产品,并且将寄回单号和 寄件人信息、需要更换的机器信息一起提供给客服" );
  116. }
  117. var str = "";
  118. mui.each(order.orderItemList, function(index) {
  119. 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>¥'+ (this.itemProductDiscount / 100).toFixed(2) +'</div></div></div>';
  120. });
  121. document.querySelector('.shopping-cart-list').innerHTML = str;
  122. $(".loading").hide().css("opacity", "0"); //隐藏(正在加载...)
  123. }
  124. },
  125. error: function(xhr, type, errorThrown) {
  126. console.log(xhr);
  127. mui.alert("获取订单列表失败!网络错误");
  128. }
  129. });
  130. $(".loading").hide().css("opacity", "0"); //隐藏(正在加载...)
  131. });
  132. /*提交*/
  133. $(document).on('tap', '#orderUpdateStatus', function() {
  134. var remark = $("#remark").val();
  135. remark=remark.replace(/(^\s*)|(\s*$)/g, "");
  136. if(remark !=null && remark.trim().length != 0 && typeof(remark)!="undefined"){
  137. //if(remark){
  138. //}
  139. // var remark = $("#textarea").val();
  140. var ch_en_num = /^[A-Za-z0-9_\[\]\【\】\{\}\{\}\(\)\(\)\《\》\<\>\,\,\.\。\、\!\!\~\·\@\#\¥\$\%\^\…\&\—\:\:\;\;\‘\’\'\'\"\"\“\”\?\?\-\=\|\*\s\+\-\u4e00-\u9fa5]{0,100}$/;
  141. if(ch_en_num.test(remark)) {
  142. console.log("退款验证通过")
  143. } else {
  144. mui.alert("内容格式错误!仅支持中/英文,数字,普通符号");
  145. return false;
  146. }
  147. updateOrderStatus(orderId,newStatus,remark);
  148. }else{
  149. var info = "";
  150. if(newStatus == 2){
  151. info = "请填写您的退款原因";
  152. }else if(newStatus == 4){
  153. info = "请填写您的退货原因";
  154. }else if(newStatus == 7){
  155. info = "请填写您的换货原因";
  156. }
  157. mui.alert(info);
  158. }
  159. })
  160. /*修改状态*/
  161. function updateOrderStatus(orderId, status, remark) {
  162. var msg = "",url='';
  163. var data = new Array;
  164. if(newStatus==7){
  165. url = base_path + '/cart/exchangeOrder';
  166. data = {
  167. orderId: orderId,
  168. remake: remark
  169. }
  170. }else{
  171. url = base_path + '/cart/returnOrder';
  172. data = {
  173. orderId: orderId,
  174. remake: remark,
  175. status:newStatus
  176. }
  177. }
  178. $.ajax({
  179. data: data,
  180. url: url,
  181. dataType: 'json',
  182. type: 'post',
  183. timeout: 15000,
  184. xhrFields: {
  185. withCredentials: true
  186. },
  187. crossDomain: true,
  188. success: function(dt) {
  189. if(dt.status) {
  190. console.log(dt);
  191. mui.alert('您的申请已提交,如有疑问请联系客服人员!',"提醒",function(){
  192. location.href = "order_details.html?orderId="+orderId;
  193. });
  194. } else{
  195. mui.alert("提交失败!请联系客服人员!")
  196. }
  197. }
  198. });
  199. }
  200. </script>
  201. </body>
  202. </html>