clearing.html 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435
  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. <style>
  13. input[type="checkbox"] {
  14. /*pointer-events: none;*/
  15. }
  16. </style>
  17. <script type="text/javascript">
  18. // 屏蔽分享
  19. window.hiddenAllWechatMenu = true;
  20. </script>
  21. </head>
  22. <body>
  23. <div class="loading-bg">
  24. <div class="mui-loading">
  25. <div class="mui-spinner">
  26. </div>
  27. &nbsp;&nbsp;加载中...
  28. </div>
  29. </div>
  30. <div class="mui-content">
  31. <div style="margin:14px 14px 0 14px;background-color: #f3f3f3;text-align: center;">
  32. <ul class="mui-table-view mui-table-view-striped my-grid-view-no mui-table-view-condensed">
  33. <li class="mui-table-view-cell" style="background-color: #f3f3f3;border-radius: 5px;padding: 11px 8px;">
  34. <div class="mui-table" id="user-address-div" style="height: 80px;">
  35. <div class="mui-table-cell mui-col-xs-12 table-middle" style="display: table-cell;">
  36. <div class="btn-add-address"><span class="iconfont icon-jia"></span>添加收货地址</div>
  37. </div>
  38. <!--<div class="mui-table-cell mui-col-xs-1 mui-text-left table-middle">
  39. <p><span class="iconfont icon-dingwei"></span></p>
  40. </div>
  41. <div class="mui-table-cell mui-col-xs-10 mui-text-left table-middle">
  42. <div>收货人:林笑笑 <span class="mui-pull-right">16899996678</span></div>
  43. <p>收货地址:广东省深圳市福田区莲花街道深圳特区 报业大厦12b</p>
  44. </div>
  45. <div class="mui-table-cell mui-col-xs-1 mui-text-right table-middle">
  46. <p><span class="mui-icon mui-icon-arrowright"></span></p>
  47. </div>-->
  48. </div>
  49. </li>
  50. </ul>
  51. </div>
  52. <ul class="mui-table-view mui-table-view-striped my-grid-view-no mui-table-view-condensed shopping-cart-list">
  53. </ul>
  54. <div class="clearing-box">
  55. <ul class="mui-table-view my-view-no-top" id="ul-youhuiquan" style="display: none;">
  56. <li class="mui-table-view-cell" style="padding-left:9px;">
  57. <a class="mui-navigate-right btn-youhuiquan">
  58. 优惠券<span class="mui-pull-right cl-red" style="margin-right: 10px;display: none;">-¥0.0</span>
  59. </a>
  60. </li>
  61. </ul>
  62. <textarea id="textarea" maxlength="140" rows="1" placeholder="您对订单有特殊要求,可以在此备注" style="background-color: #f9f9f9;border: 0;margin:14px 0 0 0;padding: 15px;font-size: 14px;"></textarea>
  63. <p id="tips"></p>
  64. <div>由于购买人数较多,下单后,订单将会按下单顺序依次发货,敬请谅解</div>
  65. </div>
  66. <div></div>
  67. <div class="buy-footer1">
  68. <table class="tb-clearing">
  69. <tr>
  70. <td class="quanxuan">
  71. 共<span class="cl-red"><span id="pro-count">0</span>件</span>商品
  72. </td>
  73. <td class="mui-text-center">合计:<span class="count_price_box">¥<span class="count_price">0.00</span></span>元</td>
  74. <td>
  75. <a id="go-pay" class="mui-btn mui-pull-right add_gwc">立即支付</a>
  76. </td>
  77. </tr>
  78. </table>
  79. </div>
  80. </div>
  81. <script src="js/mui.min.js"></script>
  82. <script src="js/jquery-2.1.1.min.js"></script>
  83. <script src="js/main.js"></script>
  84. <script src="js/wechat-utils-1.0.js"></script>
  85. <script>
  86. var userIntegral = 0; // 用户可用积分
  87. var meonyProportion = 0; // 兑换比例:1个积分=?分钱
  88. var payTotal = 0.0; // 支付总金额
  89. var userInputIntegral = 0; // 抵扣积分
  90. var isPay = true; // 是否在请求支付,false表示正在请求,true可以请求
  91. var cartIdStr = ""; // 购物车ID
  92. var usePayMoney = 0;
  93. var ipt_balance = 0;
  94. var yhq_val = 0;
  95. var used_balance = 0;
  96. var yhq_type = 1;
  97. var yhq_id=''; mui.ready(function() {
  98. var parameter = {}; //ajax参数json集合
  99. var cartidList = '';
  100. if(!window.sessionStorage) {
  101. mui.alert("您的浏览器不支持sessionStorage");
  102. } else {
  103. //读取上一个页面带过来的sessionStorage
  104. pay_data = JSON.parse(sessionStorage.getItem('pay_data'));
  105. if(pay_data != null) {
  106. cartidList = pay_data.text[0]; //购物项id集合
  107. parameter["cartIds"] = cartidList;
  108. $.ajax(base_path + '/wechat/order/payBefore', {
  109. data: parameter,
  110. dataType: 'json',
  111. type: 'POST',
  112. xhrFields: {
  113. withCredentials: true
  114. },
  115. crossDomain: true,
  116. timeout: 15000,
  117. success: function(dt) {
  118. if(dt.isRedirect) {
  119. location.href = dt.redirectURL;
  120. } else {
  121. console.log(dt);
  122. if(dt.status == true) {
  123. // 购物项遍历
  124. console.log(dt)
  125. var liNote = "";
  126. var yhq_str = "";
  127. payTotal = dt.data.payTotal; // 支付金额,单位分
  128. if(dt.data.couponItems.length > 0) {
  129. $("#ul-youhuiquan").show();
  130. //console.log("有优惠券" + dt.data.couponItems.length + "张")
  131. var str='';
  132. mui.each(dt.data.couponItems,function(index){
  133. var opacity=1,checked='checked',disabled='';
  134. if(index>0){
  135. opacity=0.5;
  136. checked='';
  137. }
  138. if(payTotal<this.couponConsumeEnough){
  139. opacity=0.5;
  140. checked='';
  141. disabled='disabled="disabled"';
  142. }
  143. str+= '<li class="my-table-view-cell" style="opacity:'+opacity+'"><div class="mui-table"><div class="mui-table-cell table-middle mui-col-xs-11">优惠券:¥'+ ((this.couponReduce)/100).toFixed(2)+'<h6>有效期至:'+this.couponUseEndDate+'</h6></div><div class="mui-table-cell table-middle mui-col-xs-1"><input name="checkbox" val="'+(this.couponReduce/100).toFixed(2)+'" type="checkbox" '+checked+' '+disabled+' class="mui-pull-left" id="'+this.couponItemId+'"/></div></div></li>';
  144. });
  145. $("body").append('<div class="my-picker"><ul class="mui-table-view mui-table-view-striped mui-table-view-condensed my-grid-view-no" style="padding: 20px 0 30px 0;overflow: scroll;max-height: 400px;">' + str + '</ul><button class="mui-btn my-btn-block my-btn-buy-know">确认使用</button></div>');
  146. }
  147. mui.each(dt.data.cartItems,function(index){
  148. var num = this.cartNum;
  149. var total = (num * this.productPrice / 100).toFixed(2); //购物车小计,单位分,保留两位小数
  150. var productId = this.cartProductId;
  151. var zeng='';
  152. if(typeof(this.salesUserGiftList)!="undefined"){
  153. $.each(this.salesUserGiftList, function() {
  154. zeng+=this.giftName+'*'+(num*this.userGiftCount)+'件 '
  155. });
  156. }
  157. if(zeng!=''){
  158. zeng='<p style="font-size:12px;">(赠品:'+zeng+')</p>';
  159. }
  160. liNote += '<li class="mui-table-view-cell"><div class="mui-table"><div class="mui-table-cell mui-col-xs-4"><img class="mui-media-object wh-100" src="' + this.productIntroduceImg + '"></div><div class="mui-table-cell table-middle mui-col-xs-8" style="line-height:2.5">' + this.productName + '<h6><span class="center" style="line-height: 15px;">颜色:'+this.productColor+'</span></br><span class="center" style="line-height: 15px;">数量:' + num + '</span></h6><div>单价 ¥' + (this.productPrice/100).toFixed(2) + '</div></div></div><div>'+zeng+'</div></li>';
  161. });
  162. var $productListUl = $(".shopping-cart-list");
  163. $productListUl.empty();
  164. $productListUl.append(liNote);
  165. // 保存数据
  166. cartIdStr = dt.data.cartId; // 购物车ID
  167. //默认自己拉出地址
  168. if(dt.data.addressInfo != undefined && dt.data.addressInfo != null) {
  169. $(".btn-add-address").parent().hide();
  170. $("#user-address-div").append('<div class="mui-table-cell mui-col-xs-1 mui-text-left table-middle addr"><p><span class="iconfont icon-dingwei"></span></p></div><div class="mui-table-cell mui-col-xs-10 mui-text-left table-middle addr"><div>收货人:'+dt.data.addressInfo.salesAddressName+' <span class="" style="padding-left: 10px;" >'+ dt.data.addressInfo.salesAddressTel +'</span></div><p>收货地址:'+ dt.data.addressInfo.salesAddressInfo +'</p></div><div class="mui-table-cell mui-col-xs-1 mui-text-right table-middle addr"><p><span class="mui-icon mui-icon-arrowright"></span></p></div>');
  171. //给微信参数赋值
  172. wechatAddr.status = true;
  173. wechatAddr.detailInfo = dt.data.addressInfo.salesAddressInfo;
  174. wechatAddr.userName = dt.data.addressInfo.salesAddressName;
  175. wechatAddr.userTel = dt.data.addressInfo.salesAddressTel;
  176. wechatAddr.postalCode = dt.data.addressInfo.salesAddressPostnum;
  177. }
  178. $("#pro-count").text(dt.data.cartItems.length);
  179. if(dt.data.couponItems.length){
  180. yhq_id=$("input[name=checkbox]:checked").attr('id');
  181. var cout =0;
  182. console.log(yhq_id)
  183. if(typeof(yhq_id)!="undefined"){
  184. $(".btn-youhuiquan>span").text("-¥"+$("input[name=checkbox]:checked").attr("val")).show();
  185. cout = $("input[name=checkbox]:checked").attr("val");
  186. }
  187. var count_price = payTotal - cout*100;
  188. if(count_price <= 0) {
  189. count_price = 0.0; //判断商品价格减去现金券价格若<0 则显示0
  190. }
  191. $(".count_price").text((count_price/100).toFixed(2));
  192. }else{
  193. $(".count_price").text((dt.data.payTotal/100).toFixed(2));
  194. }
  195. } else {
  196. mui.alert(dt.message,function(){
  197. location.href = "shopping-cart.html?dates=" + new Date().getTime(); // 前往购物车
  198. });
  199. }
  200. }
  201. },
  202. error: function(xhr, type, errorThrown) {
  203. console.log(xhr);
  204. mui.alert("获取数据失败,网络错误!")
  205. }
  206. });
  207. } else {
  208. mui.alert("sessionStorage异常!",function(){
  209. location.href="index.html";
  210. })
  211. }
  212. }
  213. document.querySelector('.loading-bg').style.display = 'none';
  214. });
  215. //callback为用户点击蒙版时自动执行的回调;
  216. var mask = mui.createMask(function() {
  217. $(".my-picker").removeClass("active");
  218. });
  219. //点击弹出优惠券列表
  220. $(document).on('tap', '.btn-youhuiquan', function() {
  221. mask.show();
  222. $(".my-picker").addClass("active");
  223. });
  224. //选择优惠券
  225. $(document).on('click', '.my-picker input[name=checkbox]', function() {
  226. var th=$(this);
  227. if(th.prop("checked")){
  228. th.parent().parent().parent().siblings().css("opacity",.5).find("input").prop("checked",false);
  229. th.parent().parent().parent().css("opacity",1);
  230. $('.my-btn-buy-know').removeAttr("disabled");
  231. }else{
  232. th.parent().parent().parent().css("opacity",.5);
  233. $('.my-btn-buy-know').attr("disabled","disabled");
  234. }
  235. });
  236. //确认使用优惠券
  237. $(document).on('tap', '.my-btn-buy-know', function() {
  238. console.log("确认使用");
  239. yhq_id=$("input[name=checkbox]:checked").attr('id');
  240. var cout=0;
  241. if(typeof(yhq_id)!="undefined"){
  242. $(".btn-youhuiquan>span").text("-¥"+$("input[name=checkbox]:checked").attr("val")).show();
  243. cout = $("input[name=checkbox]:checked").attr("val");
  244. }
  245. $(".my-picker").removeClass("active");
  246. $(".mui-backdrop").css("opacity",0).remove();
  247. var count_price = payTotal - cout*100;
  248. if(count_price <= 0) {
  249. count_price = 0.0; //判断商品价格减去现金券价格若<0 则显示0
  250. }
  251. $(".count_price").text((count_price/100).toFixed(2));
  252. });
  253. // 获取微信共享地址
  254. $(document).on('tap', '#user-address-div', function() {
  255. editAddrV1(
  256. function(res) {
  257. // 用户成功拉出地址
  258. var address = res.provinceName + "-" + res.cityName + "-" + res.countryName + "-" + res.detailInfo;
  259. wechatAddr.status = true;
  260. wechatAddr.detailInfo = address;
  261. wechatAddr.postalCode = res.postalCode;
  262. wechatAddr.userName = res.userName;
  263. wechatAddr.userTel = res.telNumber;
  264. wechatAddr.nationalCode = res.nationalCode;
  265. $("#user-address-div .addr").remove();
  266. $(".btn-add-address").parent().hide();
  267. $("#user-address-div").append('<div class="mui-table-cell mui-col-xs-1 mui-text-left table-middle addr"><p><span class="iconfont icon-dingwei"></span></p></div><div class="mui-table-cell mui-col-xs-10 mui-text-left table-middle addr"><div>收货人:'+wechatAddr.userName+' <span class="" style="padding-left: 10px;">'+ wechatAddr.userTel +'</span></div><p>收货地址:'+ wechatAddr.detailInfo +'</p></div><div class="mui-table-cell mui-col-xs-1 mui-text-right table-middle addr"><p><span class="mui-icon mui-icon-arrowright"></span></p></div>');
  268. },
  269. function() {
  270. if($('#user-address-div .addr').html() != null && $('#user-address-div .addr').html() != '') {
  271. wechatAddr.status = true;
  272. } else {
  273. wechatAddr.status = false;
  274. // 用户取消拉出地址
  275. mui.alert("您没有选择收货地址!");
  276. }
  277. }
  278. );
  279. });
  280. // 去支付
  281. $(document).on('tap', '#go-pay', function() {
  282. var remark = $("#textarea").val();
  283. var ch_en_num = /^[A-Za-z0-9 _\[\]\【\】\{\}\{\}\(\)\(\)\《\》\<\>\,\,\.\。\、\!\!\~\·\@\#\¥\$\%\^\…\&\—\:\:\;\;\‘\’\'\'\"\"\“\”\?\?\-\=\|\*\+\-\u4e00-\u9fa5]{0,100}$/;
  284. if(ch_en_num.test(remark)){
  285. console.log("备注验证通过")
  286. }else{
  287. mui.alert("备注格式错误!仅支持中/英文,数字,普通符号");
  288. return false;
  289. }
  290. if(wechatAddr.status) {
  291. if(isPay) {
  292. isPay = false; // 锁定请求按钮
  293. /* 组装数据 */
  294. var dataArgs = {
  295. "orderAddressInfo": wechatAddr.detailInfo,
  296. "orderAddressPostNum": wechatAddr.postalCode,
  297. "orderAddressMoblie": wechatAddr.userTel,
  298. "orderAddressName": wechatAddr.userName,
  299. "cartIdStr": cartIdStr,
  300. "orderIntegralNum": 0,
  301. "orderUserRemark": remark,
  302. "couponId": yhq_id,
  303. "balancePayAmount": 0
  304. };
  305. $.ajax(base_path+'/wechat/order/pay', { // 提交订单,准备支付
  306. data: dataArgs,
  307. dataType: 'json',
  308. type: 'POST',
  309. xhrFields: {
  310. withCredentials: true
  311. },
  312. crossDomain: true,
  313. timeout: 15000,
  314. success: function(dt) {
  315. // layer.closeAll();
  316. //mui.alert(dt.resultCode=="500");
  317. if(dt.resultCode == "500") {
  318. mui.alert(dt.message);
  319. isPay = true;
  320. return;
  321. };
  322. if(dt.data.info == "isOK") {
  323. location.href = 'pay-win.html?orderId=' + dt.data.orderId + "&dates=" + new Date().getTime();
  324. return;
  325. };
  326. var orderId=dt.data.orderId;
  327. if(dt.status) {
  328. var str = dt.data.info;
  329. var obj = JSON.parse("{" + str + "}");
  330. WeixinJSBridge.invoke('getBrandWCPayRequest', obj, function(res) {
  331. //console.log(res)
  332. if(res.err_msg == 'get_brand_wcpay_request:ok') {
  333. $.ajax(base_path + '/wechat/order/checkOrderPaySuccess?dates=' + new Date().getTime(), {
  334. data: {
  335. "orderId": orderId
  336. },
  337. dataType: 'json',
  338. xhrFields: {
  339. withCredentials: true
  340. },
  341. crossDomain: true,
  342. type: 'get',
  343. timeout: 15000,
  344. success: function(dataobj) {
  345. if(dataobj.isRedirect) {
  346. location.href = dataobj.redirectURL;
  347. } else {
  348. if(dataobj.status == true) { // 支付成功
  349. location.href = "pay-win.html?orderId=" + orderId + "&dates=" + new Date().getTime();
  350. } else {
  351. location.href = "order-details.html?orderId=" + orderId + "&dates=" + new Date().getTime(); // 前往订单详情
  352. }
  353. }
  354. },
  355. error: function(xhr, type, errorThrown) {
  356. console.log(xhr);
  357. isPay = true;
  358. mui.alert("支付失败!网络错误");
  359. }
  360. });
  361. // var orderIds = {
  362. // "orderId": dt.data.orderId
  363. // };
  364. // var url =base_path+"/wechat/order/checkOrderPaySuccess";
  365. // $.getJSON(url, {
  366. // "s": new Date().getTime(),
  367. // "orderId": dt.data.orderId
  368. // }, function(data) {
  369. // if(data.status == true) { // 支付成功
  370. // location.href = "pay-win.html?orderId=" + orderIds.orderId + "&dates=" + new Date().getTime();
  371. // } else {
  372. // setTimeout("checkOrderStatus('" + dt.data.orderId + "')", 1000);
  373. // }
  374. // });
  375. } else {
  376. isPay = true;
  377. mui.alert("支付失败!请稍后重试!", function() {
  378. location.href = "order-details.html?orderId=" + orderId + "&dates=" + new Date().getTime(); // 前往订单详情
  379. });
  380. }
  381. });
  382. } else {
  383. isPay = true;
  384. mui.alert(dt.message);
  385. location.href = "order-details.html?orderId=" + orderId + "&dates=" + new Date().getTime(); // 前往订单详情
  386. }
  387. },
  388. error: function(xhr, type, errorThrown) {
  389. isPay = true;
  390. // layer.closeAll();
  391. mui.alert("您的网络异常,请刷新重试!");
  392. return;
  393. }
  394. });
  395. } else {
  396. mui.alert("正在请求支付中~~请稍后!");
  397. return;
  398. }
  399. } else {
  400. mui.alert("请选择收货地址!");
  401. return;
  402. }
  403. });
  404. //实时监听文本框字数
  405. document.getElementById("textarea").addEventListener("input", function() {
  406. if(this.value.length > 140) {
  407. $("#tips").text("超出长度"+(this.value.length-140)+"字");
  408. }else{
  409. $("#tips").text("还可输入"+(140-this.value.length)+"字");
  410. }
  411. });
  412. </script>
  413. </body>
  414. </html>