clearing.html 21 KB

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