apply_replacement.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>申请换货</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
  7. <meta name="apple-mobile-web-app-capable" content="yes">
  8. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9. <link rel="stylesheet" href="//css.iamberry.com/wateroPF/css/mui.min.css">
  10. <link rel="stylesheet" href="//css.iamberry.com/wateroPF/css/iconfont.css" />
  11. <link rel="stylesheet" href="//css.iamberry.com/wateroPF/css/icons-extra.css"/>
  12. <link rel="stylesheet" href="//css.iamberry.com/wateroPF/css/style.css" />
  13. <style type="text/css">
  14. .cart_fixed{position: fixed;right: 30px;bottom:135px;background: rgba(0,0,0,.2);padding: 12px;border-radius: 50%;text-align: center;opacity: .5;}
  15. .cart_fixed .mui-badge{position: absolute;right:-7px;top:-5px;font-size: 12px;}
  16. .return{position: fixed;right: 30px;bottom: 80px;background: rgba(0,0,0,.2);padding: 12px;border-radius: 50%;text-align: center;opacity: .9;color: #333;display: none;}
  17. .my-btn-hand{display:block;width: 100%;height: 55px;background-color: #1cc9f4;color: #fff;border: 0;border-radius: 0;}
  18. .my-btn-hand.active{background-color: #c5c5c5;}
  19. .cl-blue{color: #1cc9f4;}
  20. .iconfont{font-size: 20px;}
  21. .mui-content-madded{background: #fff;padding: 10px;}
  22. .lease-ul{font-size: 12px;color: #999;}
  23. .lease-ul li{padding: 5px 0;}
  24. .lease-left{display: inline-block;width: 25%;}
  25. .ul_radio{width: 73%;display: inline-block;}
  26. .ul_radio li{width:100%;height: 55px;margin: 0 1%;border-radius: 5px; display: inline-block;position: relative;font-family:"iconfont" !important;font-style:normal;-webkit-font-smoothing: antialiased;}
  27. .radio-cell .active:after{position: absolute;right: 0;bottom: 0;content: "\e66f";color: #f1436c;line-height: 1;font-size: 20px;}
  28. .lease-r-center{position: absolute;left: 70px;top: 20px;}
  29. .lease-color{padding: 10px 0;float: left;}
  30. .lease-select-box{padding: 12px 0;position: relative;}
  31. .lease-select{position: absolute;left: 0;top: 10px;}
  32. .mui-input-row{font-size: 13px;}
  33. .mui-input-row input{font-size: 13px;}
  34. .mui-input-group:before{display: none;}
  35. #xieyi-dalog{text-decoration:underline}
  36. .ul_noline{padding-bottom: 60px;}
  37. .ul_noline:before{display: none;}
  38. .ul_noline li:after{display: none;}
  39. .address_ul{color: #999;font-size: 12px;}
  40. .address_ul li{white-space:nowrap;overflow: hidden;text-overflow: ellipsis;}
  41. .my-select {border:0!important;color: #999;background-color: #f5f5f5;margin-bottom: 0;padding: 3px 14px;text-align: center;-webkit-appearance: menulist;height: 40px;}
  42. .my-view1:after,.my-view1 li:after{display: none;}
  43. .ul_noline:after{display: none;}
  44. </style>
  45. <script>
  46. // 屏蔽分享
  47. window.hiddenAllWechatMenu = true;
  48. </script>
  49. </head>
  50. <body style="background-color: #fff;">
  51. <div class="loading-bg">
  52. <div class="mui-loading">
  53. <div class="mui-spinner">
  54. </div>
  55. &nbsp;&nbsp;加载中...
  56. </div>
  57. </div>
  58. <div class="mui-content">
  59. <div style="padding: 0 10px;background: #fff;">
  60. <ul class="mui-table-view">
  61. <li class="mui-table-view-cell" style="padding: 11px 0;">
  62. <span class="iconfont icon-lease7 cl-blue"></span>&nbsp;订单编号:<span id="order_num"></span>
  63. </li>
  64. </ul>
  65. <ul class="lease-ul">
  66. <!--<li>产品名称:美国watero净饮水一体机</li>
  67. <li>产品颜色:黑色x1</li>-->
  68. </ul>
  69. <ul class="mui-table-view my-view1">
  70. <li class="mui-table-view-cell" style="padding: 11px 0;">
  71. <span class="mui-h5">寄回快递单号:</span><input type="text" style="width:50% !important" id="ipt_kuaidi"/><span id="kuaidi_name"></span>
  72. </li>
  73. </ul>
  74. <ul class="mui-table-view ul_noline">
  75. <li class="mui-table-view-cell" style="padding: 11px 0 0 0;">
  76. <span class="iconfont icon-lease2 cl-blue"></span>&nbsp;选择换货邮寄地址
  77. </li>
  78. <li class="mui-table-view-cell" style="padding: 11px 10px;">
  79. <a class="mui-navigate-right" id="open-wechat-addres-a">
  80. <!--选择收货地址-->
  81. <ul class="address_ul">
  82. <!--<li>收 货 人:林林</li>
  83. <li>手 机 号:15999999999</li>
  84. <li>详细地址:广东省深圳市福田区莲花街道特区报业大厦12B</li>-->
  85. </ul>
  86. </a>
  87. </li>
  88. <li>
  89. <span class="mui-h5">换货备注</span>
  90. </li>
  91. <li style="ppadding:10px 0 5px 0;">
  92. <input type="text" placeholder="请输入您的换货备注" style="font-size: 12px;background: #f0f0f0;border: 0;text-align: center;" id="ipt_beizhu"/>
  93. </li>
  94. <li class="mui-text-center" style="padding:10px 15px 15px 15px;">
  95. <a href="/wateroPF/view/lease_xieyi.html" style="text-decoration: underline;color: #999;" id="btn_shouhou">售后说明</a>
  96. </li>
  97. </ul>
  98. </div>
  99. <div class="buy-footer">
  100. <button type="button" class="mui-btn my-btn-hand active" data-loading-icon="mui-spinner mui-spinner-custom" data-loading-text="申请中" id="btn_submit">申请换货</button>
  101. </div>
  102. </div>
  103. <script src="//s.iamberry.com/wateroPF/js/mui.min.js"></script>
  104. <script src="//s.iamberry.com/wateroPF/js/jquery-2.1.1.min.js"></script>
  105. <script src="//s.iamberry.com/wateroPF/js/shop/main.js"></script>
  106. <script src="//s.iamberry.com/wateroPF/js/shop/wechat-utils-1.0.js"></script>
  107. <script>
  108. var address='',nickname='',ads_tel='';
  109. var parm=getParam("orderId"),item1=getParam("itemId");
  110. mui.ready(function() {
  111. mui.ajax(base_path + '/rent_order/to_apply_exchange', {
  112. data: {
  113. orderId: parm,
  114. itemId:item1
  115. },
  116. type: 'post',
  117. timeout: 15000,
  118. success: function(dt) {
  119. /*console.log(dt)*/
  120. if(dt.isRedirect) {
  121. location.href = dt.redirectURL;
  122. }else{
  123. if(dt.status) {
  124. address=dt.data.rentAddressInfo;
  125. nickname=dt.data.rentAddressName;
  126. ads_tel=dt.data.rentAddressTel;
  127. $("#order_num").text(dt.data.rentOrderId);
  128. $(".address_ul").html('<li>收 货 人:' + dt.data.rentAddressName + '</li><li>手 机 号:' + dt.data.rentAddressTel + '</li><li>详细地址:' + dt.data.rentAddressInfo + '</li>');
  129. var str='';
  130. mui(dt.data.list).each(function(index) {
  131. if(this.itemProductType==1){
  132. str+='<li>产品名称:'+this.itemProductName+'</li><li>产品颜色:'+this.itemProductColorName+'x1</li>'
  133. }else{
  134. str+='<li>赠品名称:'+this.itemProductName+'</li><li>赠品颜色:'+this.itemProductColorName+'x1</li>'
  135. }
  136. });
  137. $(".lease-ul").html(str);
  138. }
  139. }
  140. },
  141. error: function(xhr, type, errorThrown) {
  142. console.log(xhr)
  143. }
  144. })
  145. document.querySelector('.loading-bg').style.display = 'none';
  146. });
  147. //申请换货
  148. var isPay=true,check=false;
  149. mui('body').on('tap', '#btn_submit', function() {
  150. console.log(check)
  151. var th=this;
  152. if(check){
  153. if(isPay) {
  154. isPay = false; // 锁定请求按钮
  155. mui(this).button('loading');
  156. var param = {
  157. "orderId": parm,
  158. "itemId": item1,
  159. "exchangeAddressName": nickname,
  160. "exchangeAddressTel": ads_tel,
  161. "exchangeAddressInfo":address,
  162. "exchangePostFirm":"申通快递",
  163. "exchangePostNum":$("#ipt_kuaidi").val(),
  164. "exchangeRemark":$("#ipt_beizhu").val()
  165. }
  166. $.ajax({
  167. type: 'post',
  168. url: base_path+'/rent_order/apply_exchange?dates=' + new Date().getTime(),
  169. data: param,
  170. dataType: 'json',
  171. timeout: 15000,
  172. success: function(dt) {
  173. //console.log(dt);
  174. if(dt.isRedirect) {
  175. location.href = dt.redirectURL;
  176. }else{
  177. if(dt.status) {
  178. mui.alert(dt.message,'',function(){
  179. location.href='/wateroPF/view/rent/lease_order_details.html?rentStatus=-1';
  180. });
  181. } else {
  182. mui(th).button('reset');
  183. isPay = true;
  184. mui.alert(dt.message);
  185. }
  186. }
  187. },
  188. error: function(xhr, type, errorThrown) {
  189. //异常处理;
  190. console.log(xhr);
  191. isPay = true;
  192. layer.closeAll();
  193. mui.alert("请检查网络或刷新页面重试!");
  194. mui(th).button('reset');
  195. }
  196. });
  197. }else{
  198. mui.alert("正在申请换货中~~请稍后!");
  199. return;
  200. }
  201. }
  202. });
  203. // 获取微信共享地址
  204. mui('body').on('tap', '#open-wechat-addres-a', function() {
  205. editAddrV1(
  206. function(res) {
  207. // 用户成功拉出地址
  208. address = res.provinceName + "-" + res.cityName + "-" + res.countryName + "-" + res.detailInfo;
  209. nickname=res.userName;
  210. ads_tel= res.telNumber;
  211. wechatAddr.status = true;
  212. wechatAddr.detailInfo = address;
  213. wechatAddr.postalCode = res.postalCode;
  214. wechatAddr.userName = res.userName;
  215. wechatAddr.userTel = res.telNumber;
  216. wechatAddr.nationalCode = res.nationalCode;
  217. $("#open-wechat-addres-a").empty().append('<ul class="address_ul"><li>收 件 人:'+ wechatAddr.userName +'</li><li>手 机 号:' + wechatAddr.userTel + '</li><li>详细地址:'+ wechatAddr.detailInfo+'</li></ul>');
  218. },
  219. function() {
  220. if($('#open-wechat-addres-a').html() != null && $('#open-wechat-addres-a').html() != '') {
  221. wechatAddr.status = true;
  222. } else {
  223. wechatAddr.status = false;
  224. // 用户取消拉出地址
  225. $('#open-wechat-addres-a').html('收货地址<span class="mui-h5">请选择收货地址</span>');
  226. mui.alert("您没有选择收货地址!");
  227. }
  228. }
  229. );
  230. });
  231. mui.os.ios ? listener_ipt() : keyup_fn();
  232. function keyup_fn() {
  233. $('body').on('keyup', '#ipt_kuaidi', function(e) {
  234. //传参数并加载数据
  235. var str = $.trim($(this).val());
  236. console.log(str!='' && typeof(str) != "undefined");
  237. if(str!='' && typeof(str) != "undefined"){
  238. check=true;
  239. $("#btn_submit").removeClass("active").removeAttr("disabled");
  240. }else{
  241. check=false;
  242. $("#btn_submit").addClass("active").prop("disabled","disabled");
  243. }
  244. });
  245. }
  246. function listener_ipt() {
  247. document.getElementById('ipt_kuaidi').onblur = function() {
  248. //传参数并加载数据
  249. var str = $.trim($("#ipt_kuaidi").val());
  250. console.log(str!='' && typeof(str) != "undefined");
  251. var btn_submit=$("#btn_submit");
  252. if(str!='' && typeof(str) != "undefined"){
  253. check=true;
  254. $("#btn_submit").removeClass("active").removeAttr("disabled");
  255. }else{
  256. check=false;
  257. $("#btn_submit").addClass("active").prop("disabled","disabled");
  258. }
  259. }
  260. }
  261. mui('body').on('tap', '#btn_shouhou', function() {
  262. location.href="/wateroPF/view/lease_xieyi.html"
  263. });
  264. </script>
  265. </body>
  266. </html>