shopping-cart.html 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373
  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. <!--底部菜单开始-->
  19. <footer class="mui-bar mui-bar-tab" id="footer-bar-tab">
  20. <a class="mui-tab-item">
  21. <span class="iconfont icon-shouye"></span>
  22. <span class="mui-tab-label">首页</span>
  23. </a>
  24. <a class="mui-tab-item">
  25. <span class="iconfont icon-liebiao"></span>
  26. <span class="mui-tab-label">列表</span>
  27. </a>
  28. <a class="mui-tab-item mui-active">
  29. <span class="iconfont icon-gouwuche"></span>
  30. <span class="mui-tab-label">购物车</span>
  31. </a>
  32. <a class="mui-tab-item">
  33. <span class="iconfont icon-huiyuan"></span>
  34. <span class="mui-tab-label">会员</span>
  35. </a>
  36. </footer>
  37. <!--底部菜单结束-->
  38. <div class="mui-content">
  39. <div class="gwc_null">
  40. <img width="130px" src="images/cart-null.png">
  41. <h4 style="margin: 10px 0 20px 0;">购物车还是空的</h4>
  42. <a href="javascript:;" class="mui-btn my-btn-danger go_web_shop" style="width: 150px;padding: 10px 10px;color: #666;">立即选购</a>
  43. </div>
  44. <div class="shopping-box">
  45. <div class="shoping-tt">
  46. <ul class="mui-table-view my-grid-view-no shopping-cart-list">
  47. <!--购物车列表-->
  48. </ul>
  49. </div>
  50. <div class="buy-footer1">
  51. <table class="tb-clearing">
  52. <tr>
  53. <td class="quanxuan">
  54. <input type="checkbox" name="checkbox" class="all_check" /> 全选
  55. </td>
  56. <td class="mui-text-center">合计:<span class="count_price_box">¥<span class="count_price">0.0</span></span>元</td>
  57. <td>
  58. <a id="go-clearing" class="mui-btn mui-pull-right add_gwc1 go-clearing">结算(0)</a>
  59. </td>
  60. </tr>
  61. </table>
  62. </div>
  63. </div>
  64. </div>
  65. <!-- 加载ing begin-->
  66. <div class="loading covers">
  67. <div class="loading-bj"></div>
  68. <p>正在加载...</p>
  69. </div>
  70. <!-- 加载ing end -->
  71. <script src="js/mui.min.js"></script>
  72. <script src="js/jquery-2.1.1.min.js"></script>
  73. <script src="js/main.js"></script>
  74. <script src="js/wechat-utils-1.0.js"></script>
  75. <script>
  76. window.addEventListener('pageshow', function(e) {
  77. // 通过persisted属性判断是否存在 BF Cache
  78. if(e.persisted) {
  79. location.reload();
  80. }
  81. });
  82. mui.ready(function() {
  83. $.ajax(base_path + '/wechat/cart/selectCartByOpenId?dates=' + new Date().getTime(), {
  84. data: {},
  85. dataType: 'json',
  86. xhrFields: {
  87. withCredentials: true
  88. },
  89. crossDomain: true,
  90. type: 'post',
  91. timeout: 15000,
  92. success: function(dt) {
  93. if(dt.isRedirect) {
  94. location.href = dt.redirectURL;
  95. } else {
  96. if(dt.status) {
  97. console.log(dt);
  98. var table = document.body.querySelector('.shopping-cart-list');
  99. if(dt.data.cartList.length==0){
  100. $(".shopping-box,.buy-footer1").hide();
  101. $(".gwc_null").show();
  102. }else{
  103. mui.each(dt.data.cartList, function(index) {
  104. $("#footer-bar-tab").hide();
  105. var li = document.createElement("li");
  106. li.className = 'mui-table-view-cell mui-media';
  107. var num = this.cartNum;
  108. var proStatus='',disabled='';
  109. if(this.productStatus!=1){
  110. proStatus='<div class="xiajia">已售罄</div>';
  111. disabled='disabled="disabled"';
  112. }
  113. li.innerHTML = '<div class="mui-slider-right mui-disabled"><a class="mui-btn mui-btn-red btn-del" name="' + this.cartColorId + '">删除</a></div> <div class="mui-slider-handle"><input name="checkbox" type="checkbox" class="mui-pull-left mt-mr-che" '+disabled+'/><span class="mui-media-object mui-pull-left wh-100"><img src="' + this.productIntroduceImg + '" /></span><div class="mui-media-body"><div class="wt-space gwc_tit">' + this.productName + '</div><small class="gwc_pp">颜色:' + this.productColor + '</small><div class="price"><span class="price_sp">¥' + (this.productDiscount / 100).toFixed(2) + '</span></div><p class="mui-ellipsis"></p><div class="mui-numbox" data-numbox-min="1" data-numbox-max="99"><button class="mui-btn mui-btn-numbox-minus" type="button" colorid='+this.cartColorId+'>-</button><input class="mui-input-numbox" type="tel" value="' + this.cartNum + '" readonly="readonly" disabled="disabled" cartid="'+this.cartId+'"/><button class="mui-btn mui-btn-numbox-plus" type="button" colorid='+this.cartColorId+'>+</button></div></div>'+proStatus+'</div>';
  114. table.appendChild(li);
  115. });
  116. if($(".shopping-cart-list input[type='checkbox']:not(:disabled)").length>0){//判断购物车列表未下架的产品数量>0
  117. $(".shopping-cart-list input[type='checkbox']:not(:disabled)").prop('checked', true); //选中所有未下架产品
  118. $(".all_check").prop('checked', true);//全选按钮选中
  119. $("#go-clearing").removeClass("add_gwc1").addClass("add_gwc").text('去结算('+$(".shopping-cart-list input[type=checkbox]:not(:disabled):checked").length+')');//点亮结算按钮
  120. }
  121. mui(".mui-numbox").numbox(); //激活加减按钮组合
  122. $(".loading").hide().css("opacity", "0");//隐藏(正在加载...)
  123. calculator();
  124. }
  125. } else {
  126. mui.alert("获取数据失败!");
  127. }
  128. }
  129. },
  130. error: function(xhr, type, errorThrown) {
  131. console.log(xhr);
  132. mui.alert("获取数据失败!网络错误");
  133. }
  134. });
  135. // var str="";
  136. // for (i=0;i<3;i++) {
  137. // str+='<li class="mui-table-view-cell mui-media"><div class="mui-slider-right mui-disabled"><a class="mui-btn mui-btn-red btn-del">删除</a></div> <div class="mui-slider-handle"><input name="checkbox" type="checkbox" class="mui-pull-left mt-mr-che" disabled="disabled"/><span class="mui-media-object mui-pull-left wh-100"><img src="images/pro-bai.png" /></span><div class="mui-media-body"><div class="wt-space gwc_tit">柔性声波牙刷</div><small class="gwc_pp">颜色:极光白</small><div class="price"><span class="price_sp">¥2999.00</span></div><p class="mui-ellipsis"></p><div class="mui-numbox" data-numbox-min="1" data-numbox-max="99"><button class="mui-btn mui-btn-numbox-minus" type="button" disabled="">-</button><input class="mui-input-numbox" type="number" value="1" readonly="readonly"><button class="mui-btn mui-btn-numbox-plus" type="button">+</button></div></div><div class="xiajia">已售罄</div></div></li>';
  138. // str+='<li class="mui-table-view-cell mui-media"><div class="mui-slider-right mui-disabled"><a class="mui-btn mui-btn-red btn-del">删除</a></div> <div class="mui-slider-handle"><input name="checkbox" type="checkbox" class="mui-pull-left mt-mr-che" checked/><span class="mui-media-object mui-pull-left wh-100"><img src="images/pro-bai.png" /></span><div class="mui-media-body"><div class="wt-space gwc_tit">柔性声波牙刷</div><small class="gwc_pp">颜色:极光白</small><div class="price"><span class="price_sp">¥2999.00</span></div><p class="mui-ellipsis"></p><div class="mui-numbox" data-numbox-min="1" data-numbox-max="99"><button class="mui-btn mui-btn-numbox-minus" type="button" disabled="">-</button><input class="mui-input-numbox" type="number" value="1" readonly="readonly"><button class="mui-btn mui-btn-numbox-plus" type="button">+</button></div></div></div></li>';
  139. // }
  140. // document.querySelector('.shopping-cart-list').innerHTML=str;
  141. //
  142. // if($(".mui-table-view input[type='checkbox']:checked").length>0){
  143. // $("#go-clearing").removeClass('add_gwc1').addClass('add_gwc').text("结算("+$(".mui-table-view input[type='checkbox']:checked").length+")");
  144. // calculator();
  145. // }else{
  146. //
  147. // }
  148. // mui(".mui-numbox").numbox();
  149. // $(".loading").hide().css("opacity", "0");//隐藏(正在加载...)
  150. });
  151. //拖拽后显示操作图标,点击删除;
  152. mui('body').on('tap', '.btn-del', function(event) {
  153. var btnArray = ['取消', '确定'];
  154. var elem = this;
  155. var li = elem.parentNode.parentNode;
  156. mui.confirm('您确定要删除吗?', '提示', btnArray, function(e) {
  157. if(e.index == 1) {
  158. $.ajax(base_path + '/wechat/cart/deleteCartByProductId?dates=' + new Date().getTime(), {
  159. data: {
  160. "colorId": elem.getAttribute("name")
  161. },
  162. dataType: 'json',
  163. xhrFields: {
  164. withCredentials: true
  165. },
  166. crossDomain: true,
  167. type: 'get',
  168. timeout: 15000,
  169. success: function(dt) {
  170. if(dt.isRedirect) {
  171. location.href = dt.redirectURL;
  172. } else {
  173. if(dt.status == true) {
  174. li.parentNode.removeChild(li);
  175. if($(".shopping-cart-list>li").length < 1) {
  176. $(".shopping-box,.buy-footer1").hide();
  177. $(".gwc_null,#footer-bar-tab").show();
  178. }
  179. calculator();
  180. mui.alert("删除成功!")
  181. } else {
  182. mui.alert("删除失败!");
  183. }
  184. }
  185. },
  186. error: function(xhr, type, errorThrown) {
  187. console.log(xhr);
  188. }
  189. });
  190. } else {
  191. mui.toast("您取消了删除!");
  192. setTimeout(function() {
  193. mui.swipeoutClose(li);
  194. }, 0);
  195. }
  196. });
  197. });
  198. //购物车数量加
  199. $(document).on('tap', '.mui-btn-numbox-plus', function() {
  200. var th = $(this);
  201. var val = mui(th.parent()[0]).numbox().getValue(); //获取当前产品数量
  202. var parameter = {}; //ajax参数json集合
  203. if(typeof(th.attr("colorid")) != "undefined") {
  204. parameter["colorId"] = th.attr("colorid"); //颜色id
  205. parameter["cartNum"] = 1; //需要加的产品数量,每次都是1
  206. $.ajax(base_path + '/wechat/cart/addProductToCart?dates=' + new Date().getTime(), {
  207. data: parameter,
  208. dataType: 'json',
  209. xhrFields: {
  210. withCredentials: true
  211. },
  212. crossDomain: true,
  213. type: 'get',
  214. timeout: 15000,
  215. success: function(dt) {
  216. if(dt.isRedirect) {
  217. location.href = dt.redirectURL;
  218. } else {
  219. if(dt.status) {
  220. th.parent().attr("cartid", dt.data);
  221. console.log("增加数量成功!");
  222. } else {
  223. mui.alert("增加数量失败!");
  224. }
  225. }
  226. },
  227. error: function(xhr, type, errorThrown) {
  228. console.log(xhr);
  229. mui.alert("增加数量失败!网络错误");
  230. }
  231. });
  232. } else {
  233. mui.alert("没有获取到产品颜色id");
  234. }
  235. });
  236. //购物车数量减
  237. $(document).on('tap', '.mui-btn-numbox-minus', function() {
  238. var th = $(this);
  239. var val = mui(th.parent()[0]).numbox().getValue(); //获取当前产品数量
  240. var parameter = {}; //ajax参数json集合
  241. if(typeof(th.attr("colorid")) != "undefined") {
  242. parameter["colorId"] = th.attr("colorid"); //产品颜色id
  243. parameter["cartNum"] = 1; //需要减的产品数量,每次都是1
  244. $.ajax(base_path + '/wechat/cart/deleteCart?dates=' + new Date().getTime(), {
  245. data: parameter,
  246. dataType: 'json',
  247. xhrFields: {
  248. withCredentials: true
  249. },
  250. crossDomain: true,
  251. type: 'get', //减少数量后台限制用get
  252. timeout: 15000,
  253. success: function(dt) {
  254. if(dt.isRedirect) {
  255. location.href = dt.redirectURL;
  256. } else {
  257. if(dt.status) {
  258. console.log("减少数量数量成功!");
  259. } else {
  260. mui.alert("减少数量数量失败!");
  261. }
  262. }
  263. },
  264. error: function(xhr, type, errorThrown) {
  265. console.log(xhr);
  266. mui.alert("减少数量失败!网络错误");
  267. }
  268. });
  269. } else {
  270. mui.alert("没有获取到产品颜色id");
  271. }
  272. });
  273. //全选/取消全选
  274. $(document).on('click', 'input[type="checkbox"]', function(e) {
  275. if($(this).hasClass("all_check")) {
  276. if($(this).prop("checked") == true) {
  277. console.log("全选")
  278. if($(".shopping-cart-list input[type='checkbox']:not(:disabled)").length>0){
  279. $(".shopping-cart-list input[type='checkbox']:not(:disabled)").prop('checked', true);
  280. $("#go-clearing").removeClass('add_gwc1').addClass('add_gwc').text("去结算(" + $(".shopping-cart-list input[type='checkbox']:checked").length + ")");
  281. }
  282. } else {
  283. console.log("取消全选")
  284. $("input[type='checkbox']").prop('checked', false);
  285. $("#go-clearing").removeClass('add_gwc').addClass('add_gwc1').text("去结算(" + $(".shopping-cart-list input[type='checkbox']:checked").length + ")");
  286. }
  287. } else {
  288. $(".all_check").prop('checked', false);
  289. if($(".shopping-cart-list input[type='checkbox']:checked").length > 0) {
  290. $("#go-clearing").removeClass('add_gwc1').addClass('add_gwc').text("去结算(" + $(".shopping-cart-list input[type='checkbox']:checked").length + ")");
  291. if(($("input[type='checkbox']:checked").length + 1) == $("input[type='checkbox']").length) {
  292. $("input[type='checkbox']").prop('checked', true);
  293. }
  294. } else {
  295. $("#go-clearing").removeClass('add_gwc').addClass('add_gwc1').text("去结算(" + $(".shopping-cart-list input[type='checkbox']:checked").length + ")");
  296. }
  297. }
  298. calculator();
  299. });
  300. //跳转产品列表页面
  301. mui('body').on('tap', '.go_web_shop', function() {
  302. mui.openWindow({
  303. url: 'pro-list.html'
  304. });
  305. });
  306. //结算事件
  307. mui('body').on('tap', '.go-clearing', function() {
  308. if($(".shopping-cart-list input[type='checkbox']:checked").length > 0) {
  309. var cartidList = ''; //购物项id集合
  310. $.each($(".shopping-cart-list input[type='checkbox']:not(:disabled):checked"), function(index) {
  311. var th = $(this).parent().find('.mui-input-numbox');
  312. if(typeof(th.attr("cartid")) != "undefined") {
  313. var a = '';
  314. if(index != 0) {
  315. a = '-' + th.attr("cartid"); //组装购物项id
  316. } else {
  317. a = th.attr("cartid");
  318. }
  319. cartidList += a;
  320. }
  321. });
  322. if(!window.sessionStorage) {
  323. mui.alert("您的浏览器不支持sessionStorage");
  324. } else {
  325. //自定义json数据
  326. var obj = {
  327. text: [cartidList]
  328. };
  329. //json格式化插入 购物项id集合
  330. sessionStorage.setItem('pay_data', JSON.stringify(obj));
  331. location.href = 'clearing.html'; //跳转结算页面
  332. }
  333. } else {
  334. mui.alert('您还没有选中商品', '消息提醒', function() {
  335. console.log("您关闭了警告框");
  336. });
  337. }
  338. });
  339. //监听加减框组合值
  340. mui('body').on('change', '.mui-input-numbox', function() {
  341. calculator();
  342. });
  343. //重新计算
  344. function calculator() {
  345. var count = 0;
  346. var num = 0;
  347. $(".mui-table-view li").each(function() {
  348. if($(this).find("input[type='checkbox']:not(:disabled)").prop('checked') == true) {
  349. num = parseFloat($(this).find(".price_sp").text().replace(/¥/g, "") * $(this).find(".mui-input-numbox").val()).toFixed(2);
  350. count = accAdd(count, num);
  351. }
  352. });
  353. $(".count_price").text(accAdd(count, 0).toFixed(2));
  354. $("#go-clearing").text('去结算('+$(".shopping-cart-list input[type=checkbox]:not(:disabled):checked").length+')');
  355. if($(".shopping-cart-list input[type='checkbox']:not(:disabled):checked").length<1){
  356. $("#go-clearing").removeClass("add_gwc").addClass("add_gwc1");
  357. }else{
  358. $("#go-clearing").removeClass("add_gwc1").addClass("add_gwc");
  359. }
  360. }
  361. </script>
  362. </body>
  363. </html>