i_want_lease_pay.html 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421
  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/mui.min.css">
  10. <link rel="stylesheet" href="/css/iconfont.css" />
  11. <link rel="stylesheet" href="/css/icons-extra.css"/>
  12. <link rel="stylesheet" href="/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: #c5c5c5;color: #fff;border: 0;border-radius: 0;}
  18. .my-btn-hand.active{background-color: #1cc9f4;}
  19. .cl-blue{color: #1cc9f4;}
  20. .iconfont{font-size: 20px;}
  21. .mui-content-madded{background: #fff;padding: 10px;}
  22. .lease-ul{font-size: 14px;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. .btn-pull-code{position: absolute;right: 10px;top:3px;height:34px;padding:0 6px;border-radius: 5px; line-height: 34px;font-size: 12px; color: #fff; background: #24cae9;}
  36. .btn-pull-code .active{background: #c8c8c8;}
  37. .icon-fuxuankuang a {color: #24cae9;}
  38. .icon-fuxuankuang{font-size: 13px;padding:5px 5px 5px 22px;}
  39. .icon-fuxuankuang:before{font-size: 18px;color:#e4004d;position: absolute;left: 0;width: 20px;height: 18px;top:1px;}
  40. .icon-fuxuankuang.mui-active:before {color: #c8c8c8;}
  41. #xieyi-dalog{text-decoration:underline}
  42. .ul_noline{padding-bottom: 60px;}
  43. .ul_noline:before{display: none;}
  44. .ul_noline li:after{display: none;}
  45. .address_ul{color: #999;font-size: 12px;}
  46. .address_ul li{white-space:nowrap;overflow: hidden;text-overflow: ellipsis;}
  47. .my-select {border:0!important;color: #999;background-color: #f5f5f5;margin-bottom: 0;padding: 3px 14px;text-align: center;-webkit-appearance: none;height:36px;}
  48. .my-view1:after,.my-view1 li:after{display: none;}
  49. .color{position:absolute; left:100px;top:25px;-webkit-transform: translateY(-50%);}
  50. .after{position: relative;}
  51. .after:before{content:'';width: 0;
  52. height: 0;
  53. border-left: 4px solid transparent;
  54. border-right: 4px solid transparent;
  55. border-top: 8px solid #666;position: absolute;
  56. right: 15px;
  57. top: 15px;}
  58. </style>
  59. <script>
  60. // 屏蔽分享
  61. window.hiddenAllWechatMenu = true;
  62. </script>
  63. </head>
  64. <body>
  65. <div class="loading-bg">
  66. <div class="mui-loading">
  67. <div class="mui-spinner">
  68. </div>
  69. &nbsp;&nbsp;加载中...
  70. </div>
  71. </div>
  72. <div class="mui-content">
  73. <div style="padding: 0 10px;background: #fff;">
  74. <ul class="mui-table-view">
  75. <li class="mui-table-view-cell" style="padding: 11px 0;">
  76. <span class="iconfont icon-lease cl-blue"></span>&nbsp;租用产品信息
  77. </li>
  78. </ul>
  79. <ul class="lease-ul">
  80. <li>产品名称:<span id="productName"></span></li>
  81. <li style="position: relative;"><span class="lease-color">产品颜色:</span><img src="//s.iamberry.com/watero/images/cp-1.jpg" width="30px" /> <span class="color" id="productColor"></span></li>
  82. <li>租用时长:<span id="rentTime"></span><span class="mui-pull-right">年服务费:<span id="serviceMoney" class="cl-red"></span></span></li>
  83. <li>设备押金:<span id="pledgeMoney" class="cl-red"></span><span class="mui-pull-right">费用合计:<span id="rentMoney" class="cl-red"></span></span></li>
  84. </ul>
  85. <ul class="mui-table-view my-view1">
  86. <li class="mui-table-view-cell" style="padding: 11px 0;">
  87. <span class="mui-h6">使用抵扣券</span>
  88. </li>
  89. <li class="after">
  90. <select class="my-select" id="couponSelect">
  91. </select>
  92. </li>
  93. <li style="padding: 10px 0;display:none;" class="for_money">
  94. <div><span class="mui-h6">抵扣金额:</span><span id="couponMoney" class="cl-red mui-pull-right">¥0</span></div>
  95. </li>
  96. </ul>
  97. <ul class="mui-table-view ul_noline">
  98. <li class="mui-table-view-cell" style="padding: 11px 0 5px 0;border-bottom: 1px solid rgba(0,0,0,.1);">
  99. <span class="iconfont icon-lease2 cl-blue"></span>&nbsp;收货信息
  100. </li>
  101. <li class="mui-table-view-cell" style="padding: 11px 10px;">
  102. <a class="mui-navigate-right" id="open-wechat-addres-a">
  103. <span class="mui-h6">选择收货地址</span>
  104. <!-- <ul class="address_ul">
  105. <li>收 货 人:林林</li>
  106. <li>手 机 号:15999999999</li>
  107. <li>详细地址:广东省深圳市福田区莲花街道特区报业大厦12B</li>
  108. </ul> -->
  109. </a>
  110. </li>
  111. <li>
  112. <span class="mui-h6">说明:因滤芯为一次性耗材,不可回收,故充值金额概不退返</span>
  113. </li>
  114. <li class="mui-text-center" style="padding: 10px;">
  115. <span class="iconfont icon-fuxuankuang mui-active" id="btn-tongyi">我已阅,并同意<a id="xieyi-dalog">《美国watero租用协议》</a></span>
  116. </li>
  117. <li class="mui-text-center" style="padding:10px 15px 15px 15px;">
  118. 支付金额:<span class="cl-red" id="rentPayMoney"></span>
  119. </li>
  120. </ul>
  121. </div>
  122. <div class="buy-footer">
  123. <button type="button" data-loading-icon="mui-spinner mui-spinner-custom" data-loading-text="支付中" class="mui-btn my-btn-hand" id="btn_submit">立即支付</button>
  124. </div>
  125. </div>
  126. <script src="/js/mui.min.js"></script>
  127. <script src="/js/jquery-2.1.1.min.js"></script>
  128. <script src="/js/shop/main.js"></script>
  129. <script src="/js/shop/wechat-utils-1.0.js"></script>
  130. <script src="/js/shop/layer.js"></script>
  131. <script>
  132. var pledgeMoney=getParam('pledgeMoney');
  133. var serviceMoney=getParam('serviceMoney');
  134. var radio1=getParam('radio1');
  135. var rentProduct=getParam('rentProduct');
  136. var giftId=getParam('giftId');
  137. var productName = decodeURI(escape(getParam('productName')));
  138. var rentMoney = getParam('rentMoney');
  139. var productColor = decodeURI(escape(getParam('productColor')));
  140. var isPay = true; // 是否在请求支付,false表示正在请求,true可以请求
  141. mui.ready(function() {
  142. document.querySelector('.loading-bg').style.display = 'none';
  143. $('#productName').html(productName);
  144. $('#productColor').html(productColor + ' x1');
  145. $('#btn_submit').addClass("mui-active").prop("disabled","disabled");
  146. $('#rentPayMoney').html('¥ ' + accDiv(rentMoney, 100));
  147. switch (radio1) {
  148. case '1':
  149. $('#rentTime').html('1年');
  150. $('#pledgeMoney').html('¥' + accDiv(pledgeMoney, 100));
  151. $('#serviceMoney').html('¥' + accDiv(serviceMoney, 100));
  152. $('#rentMoney').html('¥' + accDiv(rentMoney, 100));
  153. break;
  154. case '2':
  155. $('#rentTime').html('2年');
  156. $('#pledgeMoney').html('¥' + 0);
  157. $('#serviceMoney').html('¥' + accDiv(rentMoney, 100));
  158. $('#rentMoney').html('¥' + accDiv(rentMoney, 100));
  159. break;
  160. default:
  161. $('#rentTime').html('3年');
  162. $('#pledgeMoney').html('¥' + 0);
  163. $('#serviceMoney').html('¥' + accDiv(rentMoney, 100));
  164. $('#rentMoney').html('¥' + accDiv(rentMoney, 100));
  165. break;
  166. }
  167. mui.ajax(base_path + '/rent_order/selectServiceCoupon?dates=' + new Date().getTime(), {
  168. dataType: 'json',
  169. type: 'post',
  170. timeout: 15000,
  171. success: function(dt) {
  172. //console.log(dt);
  173. if(dt.isRedirect) {
  174. location.href = dt.redirectURL;
  175. }else{
  176. if(dt.status) {
  177. var coupon_data = dt.data[0];
  178. //循环显示租用类型
  179. if (coupon_data != null) {
  180. mui(coupon_data).each(function(index) {
  181. if (index == 0) {
  182. $("#couponSelect").append( '<option serviceid="" value="0" selected>不使用抵扣券</option><option serviceId="' + this.serviceId + '" value="' + this.serviceMoney + '">' + this.serviceName + '</option>');
  183. } else {
  184. $("#couponSelect").append( '<option serviceId="' + this.serviceId + '" value="' + this.serviceMoney + '">' + this.serviceName + '</option>');
  185. }
  186. });
  187. /* console.log($('#couponSelect option:first').val())
  188. $('#couponMoney').html('-¥' + accDiv($('#couponSelect option:first').val(),100)); */
  189. }else{
  190. $("#couponSelect").append( '<option serviceid="" value="" selected="selected">没有可用的抵扣券</option>');
  191. }
  192. } else {
  193. //mui('#pullrefresh_chanpin_list').pullRefresh().endPullupToRefresh(true);
  194. }
  195. }
  196. },
  197. error: function(xhr, type, errorThrown) {
  198. console.log(xhr)
  199. }
  200. })
  201. });
  202. //支付方法
  203. mui('body').on('tap', '#btn_submit', function() {
  204. var th=this;
  205. var check = true;
  206. if(!wechatAddr.status){
  207. mui.alert("请选择收货地址");
  208. check = false;
  209. }
  210. if (radio1 == null) {
  211. mui.alert("请选择租用类型");
  212. check = false;
  213. }
  214. if (rentProduct == null) {
  215. mui.alert("请选择租用商品信息");
  216. check = false;
  217. }
  218. if (giftId == null) {
  219. mui.alert("请选择租用赠品信息");
  220. check = false;
  221. }
  222. if(check){
  223. if(isPay) {
  224. isPay = false; // 锁定请求按钮
  225. layer.open({
  226. type: 2,
  227. shadeClose: false,
  228. content: "正在请求加载订单信息..."
  229. }); // 调用加载弹出层
  230. mui(this).button('loading');
  231. var param = {
  232. "rentAddressInfo": address,
  233. "rentAddressName": nickname,
  234. "rentAddressTel": ads_tel,
  235. "rentTypeId": radio1,
  236. "rentServiceId":$("#couponSelect").find("option:selected").attr("serviceId"),
  237. "productId":rentProduct,
  238. "giftId":giftId
  239. }
  240. $.ajax({
  241. type: 'post',
  242. url: '/watero/wechat/rent_order/rentOrderPay?dates=' + new Date().getTime(),
  243. data: param,
  244. dataType: 'json',
  245. timeout: 15000,
  246. success: function(dt) {
  247. //console.log(dt);
  248. layer.closeAll();
  249. if(dt.isRedirect) {
  250. location.href = dt.redirectURL;
  251. }else{
  252. if(dt.resultCode== '200') {
  253. var obj = JSON.parse("{" + dt.data.info + "}");
  254. WeixinJSBridge.invoke('getBrandWCPayRequest', obj, function(res) {
  255. if(res.err_msg == 'get_brand_wcpay_request:ok') {
  256. layer.open({
  257. type: 2,
  258. shadeClose: false,
  259. content: "正在请求加载订单信息..."
  260. }); // 调用加载弹出层
  261. $.ajax({
  262. type: 'post',
  263. url: base_path +'/rent_order/check_rent_order_status',
  264. data: {"orderId":dt.data.orderId},
  265. dataType: 'json',
  266. timeout: 15000,
  267. success: function(data) {
  268. //console.log(data);
  269. if(data.status) {
  270. if(data.data.rentStatus == 2){
  271. isPay = true;
  272. mui.openWindow({url:'/watero/view/lease_order_win.html'});
  273. }else{
  274. mui.alert('如果已支付,请等待同步支付状态!', '', function() {
  275. isPay = true;
  276. });
  277. }
  278. } else {
  279. isPay = true;
  280. mui.alert(data.message);
  281. }
  282. },
  283. error: function(xhr, type, errorThrown) {
  284. //异常处理;
  285. console.log(xhr);
  286. isPay = true;
  287. mui.alert("请检查网络或刷新页面重试!");
  288. }
  289. });
  290. } else {
  291. isPay = true;
  292. mui(th).button('reset');
  293. mui.alert("对不起,支付失败!请稍后重试!");
  294. }
  295. });
  296. } else {
  297. mui(th).button('reset');
  298. isPay = true;
  299. mui.alert(dt.message);
  300. }
  301. }
  302. },
  303. error: function(xhr, type, errorThrown) {
  304. //异常处理;
  305. console.log(xhr);
  306. isPay = true;
  307. layer.closeAll();
  308. mui.alert("请检查网络或刷新页面重试!");
  309. mui(th).button('reset');
  310. }
  311. });
  312. }else{
  313. mui.alert("正在请求支付中~~请稍后!");
  314. return;
  315. }
  316. }
  317. });
  318. var address='',nickname='',ads_tel='';
  319. // 获取微信共享地址
  320. mui('body').on('tap', '#open-wechat-addres-a', function() {
  321. editAddrV1(
  322. function(res) {
  323. // 用户成功拉出地址
  324. address = res.provinceName + "-" + res.cityName + "-" + res.countryName + "-" + res.detailInfo;
  325. nickname=res.userName;
  326. ads_tel= res.telNumber;
  327. wechatAddr.status = true;
  328. wechatAddr.detailInfo = address;
  329. wechatAddr.postalCode = res.postalCode;
  330. wechatAddr.userName = res.userName;
  331. wechatAddr.userTel = res.telNumber;
  332. wechatAddr.nationalCode = res.nationalCode;
  333. $("#open-wechat-addres-a").empty().append('<ul class="ft-12" style="color: #333;"><li>收 货 人:'+ wechatAddr.userName +'</li><li>手 机 号:' + wechatAddr.userTel + '</li><li>详细地址:'+ wechatAddr.detailInfo+'</li></ul>');
  334. var btn_submit=$("#btn_submit");
  335. if ($('#btn-tongyi').hasClass("mui-active")) {
  336. btn_submit.addClass("mui-active").prop("disabled","disabled");
  337. btn_submit.removeClass("active");
  338. } else {
  339. btn_submit.removeClass("mui-active").removeAttr("disabled");
  340. btn_submit.addClass("active");
  341. }
  342. },
  343. function() {
  344. if($('#open-wechat-addres-a').html() != null && $('#open-wechat-addres-a').html() != '') {
  345. wechatAddr.status = true;
  346. } else {
  347. wechatAddr.status = false;
  348. // 用户取消拉出地址
  349. $('#open-wechat-addres-a').html('收货地址<span class="mui-h5">请选择收货地址</span>');
  350. mui.alert("您没有选择收货地址!");
  351. }
  352. }
  353. );
  354. });
  355. $(".ul_radio li").each(function() {
  356. $(this).on("click", function() {
  357. $(this).addClass("active");
  358. $(this).siblings().removeClass("active");
  359. });
  360. });
  361. $('#couponSelect').change(function(){
  362. var serMoney = $('#couponSelect').val();
  363. var money = rentMoney - serMoney;
  364. $('#couponMoney').html('-¥' + accDiv(serMoney,100));
  365. if(serMoney!=0){
  366. $(".for_money").show();
  367. }else{
  368. $(".for_money").hide();
  369. }
  370. $('#rentPayMoney').html('¥' + accDiv(money,100));
  371. });
  372. $(document).on('tap', '#btn-tongyi', function() {
  373. var btn_submit=$("#btn_submit");
  374. if($(this).hasClass("mui-active")){
  375. $(this).removeClass("mui-active");
  376. if(wechatAddr.status){
  377. btn_submit.removeClass("mui-active").removeAttr("disabled");
  378. btn_submit.addClass("active");
  379. }else{
  380. btn_submit.addClass("mui-active").prop("disabled","disabled");
  381. btn_submit.removeClass("active");
  382. }
  383. }else{
  384. $(this).addClass("mui-active");
  385. btn_submit.addClass("mui-active").prop("disabled","disabled");
  386. btn_submit.removeClass("active");
  387. }
  388. });
  389. /*
  390. $(document).on('tap', '#btn-tongyi', function() {
  391. var btn_submit=$("#btn_submit");
  392. console.log($(this).hasClass("mui-active"));
  393. if($(this).hasClass("mui-active")){
  394. $(this).removeClass("mui-active");
  395. btn_submit.removeClass("mui-active");
  396. }else{
  397. $(this).addClass("mui-active");
  398. btn_submit.addClass("mui-active");
  399. }
  400. }); */
  401. mui('body').on('tap', '#xieyi-dalog', function() {
  402. mui.openWindow({
  403. url: 'try_xieyi.html'
  404. });
  405. });
  406. </script>
  407. </body>
  408. </html>