liujiankang
/
static


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378
							<!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">
			// 屏蔽分享
			window.hiddenAllWechatMenu = true;
		</script>
		<style>
			.order_operate{
				    color: #000; border-radius: 0px;border: 1px solid rgba(0,0,0,.5);
			}
		</style>
	</head>

	<body>
		<!--底部菜单开始-->
		<footer class="mui-bar mui-bar-tab" id="footer-bar-tab">
			<a class="mui-tab-item">
				<span class="iconfont icon-shouye"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item">
				<span class="iconfont icon-liebiao"></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-huiyuan"></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 order_operate go_web_shop" style="    color: #000; border-radius: 0px; border: 1px solid #000; padding: 7px 0px 7px 0px; width: 100px;font-family: 微软雅黑; font-size: 16px;">立即选购</a>
			</div>
			<div class="shopping-box">
				<div class="shoping-tt">
					<ul class="mui-table-view my-grid-view-no shopping-cart-list">
						<!--购物车列表-->
					</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>
		<!-- 加载ing begin-->
		<div class="loading covers">
			<div class="loading-bj"></div>
			<p>正在加载...</p>
		</div>
		<!-- 加载ing end -->
		<script src="js/mui.min.js"></script>
		<script src="js/jquery-2.1.1.min.js"></script>
		<script src="js/main.js"></script>
		<script src="js/wechat-utils-1.0.js"></script>
		<script>
			window.addEventListener('pageshow', function(e) {
				// 通过persisted属性判断是否存在 BF Cache
				if(e.persisted) {
					location.reload();
				}
			});
			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();
								}else{
								mui.each(dt.data.cartList, function(index) {	
									$("#footer-bar-tab").hide();
									var li = document.createElement("li");
									li.className = 'mui-table-view-cell mui-media';
									var num = this.cartNum;
									var proStatus='',disabled='';
									if(this.productStatus!=1){
										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><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>';
									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(); //激活加减按钮组合
								$(".loading").hide().css("opacity", "0");//隐藏（正在加载...）
								calculator();
								}
							} else {
								mui.alert("获取数据失败！");
							}
							}
					},
					error: function(xhr, type, errorThrown) {
						console.log(xhr);
						mui.alert("获取数据失败！网络错误");
					}
				});
//				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" 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>';
//			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>';
//		}
//		document.querySelector('.shopping-cart-list').innerHTML=str;
//
//		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();

//			$(".loading").hide().css("opacity", "0");//隐藏（正在加载...）
		});
		
		

			//拖拽后显示操作图标，点击删除；
			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: {
								"colorId": 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();
									mui.toast("删除成功！")
								} else {
									mui.toast("删除失败！");
								}
								}
							},
							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["colorId"] = th.attr("colorid"); //颜色id
						parameter["cartNum"] = 1; //需要加的产品数量，每次都是1
						$.ajax(base_path + '/wechat/cart/addProductToCart?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);
										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["colorId"] = 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) {
									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>