liujiankang
/
static


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430
							<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>购物车</title>
		<link rel="stylesheet" type="text/css" href="css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/main.css" />
		<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
		<script>
			//屏蔽分享
			//			document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
			//				WeixinJSBridge.call('hideOptionMenu');
			//			});
		</script>
	</head>

	<body>
		<div class="loading-bg">
			<div class="mui-loading">
				<div class="mui-spinner">
				</div>
				&nbsp;&nbsp;加载中...
			</div>
		</div>
		
		<footer class="mui-bar mui-bar-tab" id="footer-bar-tab" style="display: none;">
			<a class="mui-tab-item ">
				<span class="iconfont icon-shouye"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item mui-active">
				<span class="iconfont icon-gouwuche"></span>
				<span class="mui-tab-label">购物车</span>
			</a>
			<a class="mui-tab-item">
				<span class="iconfont icon-dingdan"></span>
				<span class="mui-tab-label">订单</span>
			</a>
			<a class="mui-tab-item">
				<span class="iconfont icon-wode"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</footer>
		
		<div class="mui-content">
			<div class="gwc_null">
				<img width="130px" src="images/cart-null.png">
				<h4 style="margin: 10px 0 20px 0;">购物车还是空的</h4>
				<a href="javascript:;" class="mui-btn my-btn-danger go_web_shop" style="width: 150px;padding: 10px 10px;color: #666;">立即选购</a>
			</div>
			<div class="shopping-box">
				<div class="shoping-tt">
					<ul class="mui-table-view my-grid-view-no shopping-cart-list">
						
						<!--<li class="mui-table-view-cell mui-media bg-f">
						<a href="javascript:;">
							<input name="checkbox" type="checkbox" class="mui-pull-left mt-mr-che" />
							<img class="mui-media-object mui-pull-left wh-100 bd-all-1" src="images/image-7.jpg">
							<div class="mui-media-body">
								<div class="wt-space gwc_tit">水时代净水机-Watero-N1</div>
								<small class="gwc_pp">水时代</small>
								<div class="price"><span class="price_sp">¥55.02</span><small>小计：¥1999.00</small></div>
								<p class="mui-ellipsis">
									</p><div class="mui-numbox" data-numbox-min="1" data-numbox-max="999">
										<button class="mui-btn mui-btn-numbox-minus" type="button" disabled="">-</button>
										<input class="mui-input-numbox" type="number" value="1">
										<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
									</div>
								<p></p>
							</div>
						</a>
						<span class="mui-icon mui-icon-trash ft-24 del"></span>
						<span class="jifen"><img src="images/corner_icon.png"> </span>
					</li>
					<li class="mui-table-view-cell mui-media bg-f">
						<a href="javascript:;">
							<input name="checkbox" type="checkbox" class="mui-pull-left mt-mr-che" />
							<img class="mui-media-object mui-pull-left wh-100 bd-all-1" src="images/image-7.jpg">
							<div class="mui-media-body">
								<div class="wt-space gwc_tit">水时代净水机-Watero-N1</div>
								<small class="gwc_pp">水时代</small>
								<div class="price"><span class="price_sp">¥55.02</span><small>小计：¥1999.00</small></div>
								<p class="mui-ellipsis">
									</p><div class="mui-numbox" data-numbox-min="1" data-numbox-max="999">
										<button class="mui-btn mui-btn-numbox-minus" type="button" disabled="">-</button>
										<input class="mui-input-numbox" type="number" value="1">
										<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
									</div>
								<p></p>
							</div>
						</a>
						<span class="mui-icon mui-icon-trash ft-24 del"></span>
						<span class="jifen"><img src="images/corner_icon.png"> </span>
					</li>
					<li class="mui-table-view-cell mui-media bg-f">
						<a href="javascript:;">
							<input name="checkbox" type="checkbox" class="mui-pull-left mt-mr-che" />
							<img class="mui-media-object mui-pull-left wh-100 bd-all-1" src="images/image-7.jpg">
							<div class="mui-media-body">
								<div class="wt-space gwc_tit">水时代净水机-Watero-N1</div>
								<small class="gwc_pp">水时代</small>
								<div class="price"><span class="price_sp">¥55.02</span><small>小计：¥1999.00</small></div>
								<p class="mui-ellipsis">
									</p><div class="mui-numbox" data-numbox-min="1" data-numbox-max="999">
										<button class="mui-btn mui-btn-numbox-minus" type="button" disabled="">-</button>
										<input class="mui-input-numbox" type="number" value="1">
										<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
									</div>
								<p></p>
							</div>
						</a>
						<span class="mui-icon mui-icon-trash ft-24 del"></span>
					</li>-->
					
					
					</ul>
				</div>
				<div class="buy-footer1">
					<table class="tb-clearing">
						<tr>
							<td class="quanxuan">
								<input type="checkbox" name="checkbox" class="all_check" /> 全选
							</td>
							<td class="mui-text-center">合计:<span class="count_price_box">¥<span class="count_price">0.0</span></span>元</td>
							<td>
								<a id="go-clearing" class="mui-btn mui-pull-right add_gwc1 go-clearing">去结算(0)</a>
							</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/jquery-2.1.1.min.js"></script>
		<script src="js/main.js"></script>
		<script>
			mui.ready(function() {
				$.ajax(base_path + '/wechat/cart/selectCartByOpenId?dates=' + new Date().getTime(), {
					data: {},
					dataType: 'json',
					xhrFields: {
						withCredentials: true
					},
					crossDomain: true,
					type: 'post',
					timeout: 15000,
					success: function(dt) {
						if(dt.isRedirect) {
							location.href = dt.redirectURL;
						} else {
							if(dt.status) {
								console.log(dt);
								var table = document.body.querySelector('.shopping-cart-list');
								if(dt.data.cartList.length==0){
									$(".shopping-box,.buy-footer1").hide();
									$(".gwc_null").show();
									$("#footer-bar-tab").show();
								}else{
									mui.each(dt.data.cartList, function(index) {									
										var li = document.createElement("li");
										li.className = 'mui-table-view-cell mui-media';
										var num = this.cartNum;
										var proStatus='',disabled='';
										var zeng = '';
										if(this.productStatus==1){
											$.each(this.salesUserGiftList, function() {
												zeng += this.giftName + '<span class="giftItems" count="'+this.userGiftCount+'">'+(num * this.userGiftCount) + '</span>件 ';
											});
											if(zeng != '') {
												zeng = '<p class="gift">（赠品：' + zeng + '）</p>&nbsp;&nbsp;';
											}
										}else{
											proStatus='<div class="xiajia">已下架</div>';
											disabled='disabled="disabled"';
										}
										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><p class="gwc_pp">颜色：' + this.productColor + '</p><div class="price"><span class="price_sp">¥' + (this.productPrice / 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>' + zeng +proStatus+ '</div>';
										table.appendChild(li);
									});
								if($(".shopping-cart-list input[type='checkbox']:not(:disabled)").length>0){//判断购物车列表未下架的产品数量>0
									$(".shopping-cart-list input[type='checkbox']:not(:disabled)").prop('checked', true); //选中所有未下架产品
									$(".all_check").prop('checked', true);//全选按钮选中
									$("#go-clearing").removeClass("add_gwc1").addClass("add_gwc").text('去结算('+$(".shopping-cart-list input[type=checkbox]:not(:disabled):checked").length+')');//点亮结算按钮
								}
									mui(".mui-numbox").numbox(); //激活加减按钮组合
//									$(".shopping-box,.buy-footer1").show();
									$(".gwc_null").hide();
									calculator();
								}
							} else {
								mui.alert("获取数据失败！");
							}
							document.querySelector('.loading-bg').style.display = 'none';
						}
					},
					error: function(xhr, type, errorThrown) {
						console.log(xhr);
						mui.alert("获取数据失败！网络错误");
					}
				});
			});

			//拖拽后显示操作图标，点击删除；
			mui('body').on('tap', '.btn-del', function(event) {
				var btnArray = ['取消', '确定'];
				var elem = this;
				var li = elem.parentNode.parentNode;
				mui.confirm('您确定要删除吗？', '提示', btnArray, function(e) {
					if(e.index == 1) {
						$.ajax(base_path + '/wechat/cart/deleteCartByProductId?dates=' + new Date().getTime(), {
							data: {
								"productColorId": elem.getAttribute("name")
							},
							dataType: 'json',
							xhrFields: {
								withCredentials: true
							},
							crossDomain: true,
							type: 'get',
							timeout: 15000,
							success: function(dt) {
								if(dt.isRedirect) {
								location.href = dt.redirectURL;
							} else {
									if(dt.status == true) {
										li.parentNode.removeChild(li);
										if($(".shopping-cart-list>li").length < 1) {
											$(".shopping-box,.buy-footer1").hide();
											$(".gwc_null,#footer-bar-tab").show();
										}
										calculator();
									} else {
										alert(dt.message);
									}
								}
							},
							error: function(xhr, type, errorThrown) {
								console.log(xhr);
							}
						});
					} else {
						//mui.toast("您取消了删除！");
						setTimeout(function() {
							mui.swipeoutClose(li);
						}, 0);
					}
				});
			});
			//购物车数量加
			$(document).on('tap', '.mui-btn-numbox-plus', function() {
				var th = $(this);
				var val = mui(th.parent()[0]).numbox().getValue(); //获取当前产品数量
				var parameter = {}; //ajax参数json集合
					if(typeof(th.attr("colorid")) != "undefined") {
						parameter["productColorId"] = th.attr("colorid"); //颜色id
						parameter["cartNum"] = 1; //需要加的产品数量，每次都是1
						$.ajax(base_path + '/wechat/cart/addCart?dates=' + new Date().getTime(), {
							data: parameter,
							dataType: 'json',
							xhrFields: {
								withCredentials: true
							},
							crossDomain: true,
							type: 'get',
							timeout: 15000,
							success: function(dt) {
								if(dt.isRedirect) {
									location.href = dt.redirectURL;
								} else {
									if(dt.status) {
										th.parent().attr("cartid", dt.data);
										//每次增加数量同时将赠品数量增加
										$.each($($(th).parent().parent().parent().find(".giftItems")),function(){
											$(this).text(val*parseInt($(this).attr("count")));
										});
										console.log("增加数量成功！");
									} else {
										mui.alert("增加数量失败！");
									}
								}
							},
							error: function(xhr, type, errorThrown) {
								console.log(xhr);
								mui.alert("增加数量失败！网络错误");
							}
						});
					} else {
						mui.alert("没有获取到产品颜色id");
					}
			});
			//购物车数量减
			$(document).on('tap', '.mui-btn-numbox-minus', function() {
				var th = $(this);
				var val = mui(th.parent()[0]).numbox().getValue(); //获取当前产品数量
				var parameter = {}; //ajax参数json集合
				if(typeof(th.attr("colorid")) != "undefined") {
					parameter["productColorId"] = th.attr("colorid"); //产品颜色id
					parameter["cartNum"] = 1; //需要减的产品数量，每次都是1
					$.ajax(base_path + '/wechat/cart/deleteCart?dates=' + new Date().getTime(), {
						data: parameter,
						dataType: 'json',
						xhrFields: {
							withCredentials: true
						},
						crossDomain: true,
						type: 'get', //减少数量后台限制用get
						timeout: 15000,
						success: function(dt) {
							if(dt.isRedirect) {
								location.href = dt.redirectURL;
							} else {
								if(dt.status) {
									//每次减少数量同时将赠品数量减少
									$.each($($(th).parent().parent().parent().find(".giftItems")),function(){
										$(this).text(val*parseInt($(this).attr("count")));
									});
									console.log("减少数量数量成功！");
								} else {
									mui.alert("减少数量数量失败！");
								}
							}
						},
						error: function(xhr, type, errorThrown) {
							console.log(xhr);
							mui.alert("减少数量失败！网络错误");
						}
					});
				} else {
					mui.alert("没有获取到产品颜色id");
				}
			});
			//全选/取消全选
			$(document).on('click', 'input[type="checkbox"]', function(e) {

				if($(this).hasClass("all_check")) {
					if($(this).prop("checked") == true) {
						console.log("全选")
						if($(".shopping-cart-list input[type='checkbox']:not(:disabled)").length>0){
							$(".shopping-cart-list input[type='checkbox']:not(:disabled)").prop('checked', true);
							$("#go-clearing").removeClass('add_gwc1').addClass('add_gwc').text("去结算(" + $(".shopping-cart-list input[type='checkbox']:checked").length + ")");
						}
					} else {
						console.log("取消全选")
						$("input[type='checkbox']").prop('checked', false);
						$("#go-clearing").removeClass('add_gwc').addClass('add_gwc1').text("去结算(" + $(".shopping-cart-list input[type='checkbox']:checked").length + ")");
					}
				} else {
					$(".all_check").prop('checked', false);
					if($(".shopping-cart-list input[type='checkbox']:checked").length > 0) {
						$("#go-clearing").removeClass('add_gwc1').addClass('add_gwc').text("去结算(" + $(".shopping-cart-list input[type='checkbox']:checked").length + ")");
						if(($("input[type='checkbox']:checked").length + 1) == $("input[type='checkbox']").length) {
							$("input[type='checkbox']").prop('checked', true);
						}
					} else {
						$("#go-clearing").removeClass('add_gwc').addClass('add_gwc1').text("去结算(" + $(".shopping-cart-list input[type='checkbox']:checked").length + ")");
					}
				}
				calculator();
			});
			//跳转产品列表页面
			mui('body').on('tap', '.go_web_shop', function() {
				mui.openWindow({
					url: 'pro-list.html'
				});
			});
			
			//结算事件
			mui('body').on('tap', '.go-clearing', function() {
				if($(".shopping-cart-list input[type='checkbox']:checked").length > 0) {
					var cartidList = ''; //购物项id集合
					$.each($(".shopping-cart-list input[type='checkbox']:not(:disabled):checked"), function(index) {
						var th = $(this).parent().find('.mui-input-numbox');
						if(typeof(th.attr("cartid")) != "undefined") {
							var a = '';
							if(index != 0) {
								a = '-' + th.attr("cartid"); //组装购物项id
							} else {
								a = th.attr("cartid");
							}
							cartidList += a;
						}
					});

					if(!window.sessionStorage) {
						mui.alert("您的浏览器不支持sessionStorage");
					} else {
						//自定义json数据
						var obj = {
							text: [cartidList]
						};
						//json格式化插入    购物项id集合
						sessionStorage.setItem('pay_data', JSON.stringify(obj));
						location.href = 'clearing.html'; //跳转结算页面
					}
				} else {
					mui.alert('您还没有选中商品', '消息提醒', function() {
						console.log("您关闭了警告框");
					});
				}
			});
			//监听加减框组合值
			mui('body').on('change', '.mui-input-numbox', function() {
				calculator();
			});
			//重新计算
			function calculator() {
				var count = 0;
				var num = 0;
				$(".mui-table-view li").each(function() {
					if($(this).find("input[type='checkbox']:not(:disabled)").prop('checked') == true) {
						num = parseFloat($(this).find(".price_sp").text().replace(/¥/g, "") * $(this).find(".mui-input-numbox").val()).toFixed(2);
						count = accAdd(count, num);
					}
				});
				$(".count_price").text(accAdd(count, 0).toFixed(2));
				$("#go-clearing").text('去结算('+$(".shopping-cart-list input[type=checkbox]:not(:disabled):checked").length+')');
				if($(".shopping-cart-list input[type='checkbox']:not(:disabled):checked").length<1){
					$("#go-clearing").removeClass("add_gwc").addClass("add_gwc1");
				}else{
					$("#go-clearing").removeClass("add_gwc1").addClass("add_gwc");
				}
			}
		</script>
	</body>

</html>