hexiugang
/
iamberry-common-parent


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274
							<!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>
		<div class="mui-content">
			<div class="gwc_null">
				<img src="images/cart-null.png">
				<h3>购物车还是空的</h3>
				<a href="javascript:;" class="mui-btn my-btn-danger go_web_shop" style="width: 65%;padding: 10px 10px;">马上逛逛</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">165.06</span></span>元</td>
							<td>
								<a id="go-clearing" class="mui-btn mui-pull-right add_gwc go-clearing">去结算(3)</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() {

				var str = "";
				for(i = 0; i < 3; i++) {
					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" /><span class="mui-media-object mui-pull-left wh-100"><img src="images/chanpin-1.jpg" /></span><div class="mui-media-body"><div class="wt-space gwc_tit">Aiberle美国智能净饮水一体机</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><h6 class="gift">（赠品：美国aiberle咖啡杯  数量：3）</h6></div></li>'
				}
				document.querySelector('.shopping-cart-list').innerHTML = str;
				
				$.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)

							} else {
								mui.alert("获取数据失败！");
							}
						}
					},
					error: function(xhr, type, errorThrown) {
						console.log(xhr);
						mui.alert("获取数据失败！网络错误");
					}
				});

				//		mui('body').on('swipeleft','.shopping-cart-list .mui-table-view-cell',function(){
				//				mui.swipeoutOpen(this);
				//		});

				//拖拽后显示操作图标，点击操作图标删除元素；
				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) {
							li.parentNode.removeChild(li);
						} else {
							setTimeout(function() {
								mui.swipeoutClose(li);
							}, 0);
						}
					});
				});

				document.querySelector('.loading-bg').style.display = 'none';
				$("input[type='checkbox']").prop('checked', true);
				if($(".mui-table-view input[type='checkbox']:checked").length > 0) {
					$("#go-clearing").removeClass('add_gwc1').addClass('add_gwc').text("去结算(" + $(".mui-table-view input[type='checkbox']:checked").length + ")");
					calculator();
				} else {

				}

				mui(".mui-numbox").numbox();
			});
			
			
			//全选/取消全选
			$(document).on('click', 'input[type="checkbox"]', function(e) {

				if($(this).hasClass("all_check")) {
					if($(this).prop("checked") == true) {
						console.log("全选")
						$("input[type='checkbox']").prop('checked', true);
						$("#go-clearing").removeClass('add_gwc1').addClass('add_gwc').text("去结算(" + $(".mui-table-view input[type='checkbox']:checked").length + ")");
					} else {
						console.log("取消全选")
						$("input[type='checkbox']").prop('checked', false);
						$("#go-clearing").removeClass('add_gwc').addClass('add_gwc1').text("去结算(" + $(".mui-table-view input[type='checkbox']:checked").length + ")");
					}
				} else {
					$(".all_check").prop('checked', false);
					if($("input[type='checkbox']:checked").length > 0) {
						$("#go-clearing").removeClass('add_gwc1').addClass('add_gwc').text("去结算(" + $(".mui-table-view 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("去结算(" + $(".mui-table-view input[type='checkbox']:checked").length + ")");
					}
				}
				calculator();
			});
			mui('body').on('tap', '.del', function() {
				var th = $(this);
				var btnArray = ['否', '是'];
				mui.confirm('您确认要删除此商品吗？', '爱贝源-消息提醒', btnArray, function(e) {
					if(e.index == 1) {
						th.parent().remove();
						$("#go-clearing").text("去结算(" + $(".mui-table-view input[type='checkbox']:checked").length + ")");
						if($(".mui-table-view input[type='checkbox']:checked").length == 0) {
							$("input[type='checkbox']").prop('checked', false);
							$("#go-clearing").removeClass('add_gwc').addClass('add_gwc1');
							if($(".shoping-tt .mui-table-view li").length == 0) {
								$(".gwc_null").show();
								$(".shopping-box,.buy-footer1").hide();
							}
						}
						calculator();
					} else {

					}
				});
			});
			//mui('.mui-content').on('tap','.mui-numbox',function(e){
			//	console.log(e);
			//}) 
			mui('body').on('tap', '.go_web_shop', function() {
				mui.openWindow({
					url: 'chanpin_list.html'
				});
			});

			mui('body').on('tap', '.go-clearing', function() {
				if($("input[type='checkbox']:checked").length > 0) {
					mui.openWindow({
						url: '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']").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));
			}
		</script>
	</body>

</html>