liujiankang
/
static


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544
							<!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" />
		<style>
			.my-picker {max-height: 100%;background-color: rgba(0, 0, 0, .5);}
			.my-btn-buy-know {width: 50%;border-radius: 0;bottom: 0;height: 50px;border: 1px solid #727171;position: fixed;right: 0;}
			.my-btn-buy-cancel {width: 50%;border-radius: 0;bottom: 0;height: 50px;border: 0;border-top: 1px solid #ccc;position: fixed;left: 0;}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<div id="pro-menu" class="mui-segmented-control">
				<!--<a class="mui-control-item mui-active" href="#item1">净水机</a>
				<a class="mui-control-item" href="#item2">冲奶机</a>
				<a class="mui-control-item" href="#item3">电动牙刷</a>-->
			</div>
		</header>
		<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-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="index-title">
				<strong>选购</strong>
			</div>-->
			<div id="item1" class="mui-control-content mui-active">
				<ul class="pro-table-pull">
					<!--产品列表区域-->
				</ul>

				<!--<div class="index-title">
				<strong>配件选购</strong>
			</div>-->
				<!--<ul class="mui-table-view mui-grid-view my-view-no" style="padding-bottom: 0;">
				<li class="mui-table-view-cell mui-media mui-col-xs-5">
					<a href="#"><img class="mui-media-object" src="images/chanpin-2.jpg"></a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-7">
					<a>
						<div class="pro-tit">Aiberle智能净水机滤芯配件 t1、t2、t3、t4</div>
						<h6 class="mui-text-left">4级ro净化、只喝净水</h6>
						<p class="pro-price">¥79.00～320.00</p>
						<div class="mui-text-right">
							<span class="add-cart"><span class="iconfont icon-gouwuche"></span></span>
							<button type="button" class="btn-buy-now">立即购买</button>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-5">
					<a href="#"><img class="mui-media-object" src="images/chanpin-3.jpg"></a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-7">
					<a>
						<div class="pro-tit">Aiberle智能净水机水箱配件</div>
						<h6 class="mui-text-left">优质安全材质，放心使用</h6>
						<p class="pro-price">¥99.00</p>
						<div class="mui-text-right">
							<span class="add-cart"><span class="iconfont icon-gouwuche"></span></span>
							<button type="button" class="btn-buy-now">立即购买</button>
						</div>
					</a>
				</li>
			</ul>-->
			</div>

			<div id="product-type">

			</div>
			<!--<div id="item2" class="mui-control-content">
				<ul class="pro-table-pull">
				</ul>
			</div>

			<div id="item3" class="mui-control-content">
				<ul class="pro-table-pull">
				</ul>
			</div>

			<div id="item4" class="mui-control-content">
				<ul class="pro-table-pull">
				</ul>
			</div>

			<div id="item5" class="mui-control-content">
				<ul class="pro-table-pull">
				</ul>
			</div>

			<div id="item6" class="mui-control-content">
				<ul class="pro-table-pull">
				</ul>
			</div>
			<div id="item7" class="mui-control-content">
				<ul class="pro-table-pull">
				</ul>
			</div>
			<div id="item10" class="mui-control-content">
				<ul class="pro-table-pull">
				</ul>
			</div>
			<div id="item11" class="mui-control-content">
				<ul class="pro-table-pull">
				</ul>
			</div>-->
		</div>
		<!-- 加载ing -->
		<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>
			var search_data = null,
				typeId = '';
			if(!window.sessionStorage) {
				mui.alert("您的浏览器不支持sessionStorage");
			} else {
				//读取上一个页面带过来的sessionStorage
				search_data = JSON.parse(sessionStorage.getItem('search_data'));
				if(search_data != null) {
					typeId = search_data.text[0].typeId; //如果不为空就赋值給typeId（产品类型id）
					//$('#item'+typeId+']').addClass("mui-active").siblings().removeClass("mui-active");
				} else {
					typeId = getParam("productId");
				}
			}
			var mao = getParam("childTypeId"),
				maodian = '';
			mui.ready(function() {
				//页面首次加载区分
				if(typeId != '') {
					getProlist(typeId, null);
				} else {
					getProlist(null, null);
				}
				$(".loading").hide().css("opacity", "0"); //页面加载完成，隐藏loading
			});

			//查询产品列表（items代表显示类型）（load值为null代表没有从其他页面带参数，并且是首次加载，其他值代表选中的区域）
			function getProlist(items, load) {
				console.log(items, load);
				var parameter = {};
				if(items != null) {
					parameter["typeId"] = items;
					parameter["pageSize"] = 100;
					parameter["pageNO"] = 1;
				}
				$.ajax(base_path + '/wechat/product/productIndex?dates=' + new Date().getTime(), {
					data: parameter,
					dataType: 'json',
					xhrFields: {
						withCredentials: true
					},
					crossDomain: true,
					type: 'post',
					timeout: 15000,
					success: function(dt) {
						if(dt.isRedirect) {
							location.href = dt.redirectURL;
						} else {
							console.log(dt)
							if(dt.status) {
								var productTypeList = dt.data.productTypeList;
								var typeHtml = '';
								for(var k = 0; k < productTypeList.length; k++) {
									var typeId = productTypeList[k].typeId;
									typeHtml += '<div id="item' + typeId + '" class="mui-control-content">';
									typeHtml += '<ul class="pro-table-pull">';
									typeHtml += '</ul>';
									typeHtml += '</div>';
								}
								$("#product-type").html(typeHtml);

								var menu_data = dt.data.productTypeList;
								if(load == null) {
									var table = document.body.querySelector("#pro-menu");
									mui(menu_data).each(function(index) {
										var li = document.createElement('a');
										if(items != null) {
											if(items == this.typeId) {
												li.className = 'mui-control-item mui-active';
											} else {
												li.className = 'mui-control-item';
											}
										} else {
											if(index == 0) {
												li.className = 'mui-control-item mui-active';
											} else {
												li.className = 'mui-control-item';
											}
										}
										li.setAttribute("name", this.typeId);
										li.setAttribute("href", "#item" + (index + 1));
										li.innerHTML = this.typeName;
										table.appendChild(li);
									});
								}
								var pro_list = dt.data.productList;
								if(items == null) {
									items = 1
								}
								$(".mui-control-content").removeClass("mui-active");
								var table1 = document.body.querySelector('#item' + items + ' .pro-table-pull');
								$("#item" + items).addClass("mui-active");
								if(load != null) {
									document.body.querySelector(load + " .pro-table-pull");
									table1.innerHTML = '';
								}
								var n = '';
								mui(pro_list).each(function(index) {
//									var div = document.createElement('div');
//									div.className = 'index-title';
//									div.innerHTML = '<strong>' + this.productChildTypeName + '</strong>';
//									if(index == 0) {
//										table1.appendChild(div);
//									}
//									if(n != '' && this.productChildTypeName != n) {
//										table1.appendChild(div);
//									}
									n = this.productChildTypeName;
									var li = document.createElement('li');
									li.setAttribute("name", this.productId);
									li.setAttribute("class", "product-id");
									var zen = '';
									console.log(this.productColorList)
									if(this.productColorList.length > 0) {
										$.each(this.productColorList[0].salesUserGiftList, function() {
											zen += this.giftName + "、"
										});
									}
									if(zen != '') {
										zen = '<div class="index-title"><p><span class="iconfont icon-liwu"></span>' + zen.substring(0, zen.length - 1) + '</p></div>';
									}
									if(mao != null && mao == this.productChildType) {
										li.setAttribute("id", "mao-" + this.productId);
										maodian = this.productId;
										mao = null;
									}
									var c = 'FFF',
										cList = '';
									mui(this.productColorList).each(function(index) {
										if(typeof(this.colorCode) != "undefined") {
											c = this.colorCode;
										}
										cList += '<i style="width:12px;height:12px;box-shadow: 0 0 1px rgba(0,0,0,.85);background:#' + c + ';display: inline-block;border-radius: 10px;margin: 0 3px 0 10px;"></i>';
									});

									if(this.productColorList != null && this.productColorList.length > 0){
										li.innerHTML = '<ul class="mui-table-view mui-grid-view my-view-no" style="padding-bottom: 0;"><li class="mui-table-view-cell mui-media mui-col-xs-5 mui-text-left"><a><img style="background-color: #eff6f6;" class="mui-media-object to-product" src="' + this.productParameterImg + '"></a></li><li class="mui-table-view-cell mui-media mui-col-xs-7"><a><div class="pro-tit to-product" >' + this.productName + '</div><h6 class="mui-text-left" style="white-space: pre-wrap;">' + this.productColorDes + '</h6><p class="pro-price"><span style="float:left;">¥' + accDiv(this.productColorList[0].colorDiscount,100) + '</span>'+cList+'</p><div class="mui-text-right"><span class="add-cart" name="' + this.productId + '" cartIsSource="1"><span class="iconfont icon-gouwuche"></span></span><button type="button" class="btn-buy-now" name="' + this.productId + '" cartIsSource="1">立即购买</button></div></a></li></ul>' + zen;
										table1.appendChild(li);
									}

								});
								if(maodian != '') {
									var t = $('#mao-' + maodian).offset().top;
									if(t > 300) {
										$(window).scrollTop(t, 500);
									}
									maodian = '';
								}
							} else {
								mui.alert("获取商品菜单失败！");
							}
						}
					},
					error: function(xhr, type, errorThrown) {
						console.log(xhr);
						mui.alert("获取商品菜单失败！网络错误");
					}
				});
			}
			//头部菜单点击事件
			$(document).on('tap', '#pro-menu .mui-control-item', function() {
				var th = $(this);
				if(!window.sessionStorage) {
					mui.alert("您的浏览器不支持sessionStorage");
				} else {
					//如果点击头部的菜单，则删除其他页面带过来的sessionStorage
					sessionStorage.removeItem('search_data');
				}
				//根据类型获取产品列表
				getProlist(th.attr("name"), th.attr("href"));
				var oldUrl = location.href; //原浏览器地址
				var newUrl = jsUrlHelper.delUrlParam(oldUrl, "childTypeId"); //删除url中的子类型参数 
				newUrl = jsUrlHelper.putUrlParam(newUrl, 'productId', th.attr("name")); //修改url中的productId参数
				history.pushState(oldUrl, '产品类型', newUrl); //无刷新删除修改url地址参数
				console.log("url历史操作" + history.length + "次"); //获取历史操作过url地址几次
				mao = null;
			});
			//监听浏览器前进后退			
			window.addEventListener("popstate", function() {
				var currentState = history.state;
				//根据类型获取产品列表
				mao = getParam("childTypeId"), ref = '';
				$.each($("#pro-menu .mui-control-item"), function() {
					if($(this).attr("name") == getParam("productId")) {
						ref = $(this).attr("href");
						$(this).addClass("mui-active");
					} else {
						$(this).removeClass("mui-active");
					}
				})
				getProlist(getParam("productId"), ref);
			});

			var count = 0; //统计所有产品加减，数量默认0，当count<1的时候设置（结算）按钮失效
			//购物车数量加
			$(document).on('tap', '.mui-btn-numbox-plus', function() {
				++count; //产品总数量
				var th = $(this);
				var val = mui(th.parent()[0]).numbox().getValue(); //获取当前产品数量
				var parameter = {}; //ajax参数json集合
				if(typeof(th.attr("productid")) != "undefined") {
					parameter["productId"] = th.attr("productid"); //产品id
					if(typeof(th.attr("colorid")) != "undefined") {
						parameter["productColorId"] = 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: 'post',
							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");
					}
				} else {
					mui.alert("没有获取到产品id");
				}
			});
			//购物车数量减
			$(document).on('tap', '.mui-btn-numbox-minus', function() {
				--count; //产品总数量
				var th = $(this);
				var val = mui(th.parent()[0]).numbox().getValue(); //获取当前产品数量
				if(val == 0) {
					th.parent().removeAttr("cartid");
				}
				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) {
									console.log("减少数量数量成功！");
								} else {
									mui.alert("减少数量数量失败！");
								}
							}
						},
						error: function(xhr, type, errorThrown) {
							console.log(xhr);
							mui.alert("减少数量失败！网络错误");
						}
					});
				} else {
					mui.alert("没有获取到产品颜色id");
				}
			});
			//立即购买-购物车按钮  获取颜色列表
			$(document).on('tap', '.add-cart,.btn-buy-now', function() {
				count = 0;
				var th = $(this);
				//mask.show(); //显示遮罩层
				//在body尾部增加-产品颜色列表父级ul
				$("body").append('<div id="scroll" class="mui-scroll-wrapper my-picker"><div class="mui-scroll" style="top: 0;background-color: #fff;min-height: 100%;"><br/><ul class="mui-table-view mui-table-view-striped mui-table-view-condensed my-grid-view-no" style="margin-bottom: 50px;"></ul><button class="mui-btn my-btn-buy-cancel">取消</button><button class="mui-btn my-btn-buy-know" disabled="disabled">确定</button></div></div>');
				$.ajax(base_path + '/wechat/product/selectProductColor?dates=' + new Date().getTime(), {
					data: {
						"productId": th.attr("name") //productId产品id
					},
					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 data = dt.data.productColorList;
								var table = document.body.querySelector('.my-picker .mui-table-view'); //产品颜色列表父级ul
								table.innerHTML = '';
								//循环遍历产品颜色数组
								mui(data).each(function(index) {
									var li = document.createElement('li'); //创建li标签
									li.className = 'my-table-view-cell'; //給li标签设置className
									if(typeof(this.cartNum) != "undefined") {
										count += parseInt(this.cartNum);
									} else {
										this.cartNum = 0;
									}
									li.innerHTML = '<div class="mui-table" ><div class="mui-table-cell mui-col-xs-3"><img style="background-color: #eff6f6;" class="my-media-object" src="' + this.colorProductPic + '" /></div><div class="mui-table-cell table-middle mui-col-xs-5">' + this.colorName + '<h6>' + this.colorDesc + '</h6><div style="color: #ff3b3b;">¥' + accDiv(this.colorDiscount, 100) + '</div></div><div class="mui-table-cell table-middle mui-col-xs-4"><div class="mui-numbox" data-numbox-min="0" data-numbox-max="99" cartid="' + this.cartId + '"><button class="mui-btn mui-btn-numbox-minus" type="button" productid="' + this.colorProductId + '" colorid="' + this.colorId + '">-</button><input class="mui-input-numbox" type="number" value="' + this.cartNum + '" readonly="readonly"/><button class="mui-btn mui-btn-numbox-plus" type="button" productid="' + this.colorProductId + '" colorid="' + this.colorId + '">+</button></div></div></div>';
									table.appendChild(li); //将li标签加入到-产品颜色列表父级ul
								});
								$(".my-picker").addClass("active"); //显示产品颜色加减数量列表
								//								if(count > 0) {
								$(".my-btn-buy-know").removeAttr("disabled"); //激活结算按钮
								//								}
								if(th.hasClass("add-cart")) {
									$(".my-btn-buy-know").attr("cart", "cart");
								}
								mui(".mui-numbox").numbox(); //激活加减按钮组合
								mui('#scroll').scroll();
							} else {
								mui.alert("获取数据失败！");
							}
						}
					},
					error: function(xhr, type, errorThrown) {
						console.log(xhr);
						mui.alert("获取数据失败！网络错误");
					}
				});
				mui('#scroll').scroll({
					indicators: true, //是否显示滚动条
					bounce: false //是否启用回弹
				});
			});
			$(document).on('tap', '.my-btn-buy-cancel', function() {
				//$(".mui-backdrop").css("opacity", 0).remove(); //移除遮罩层
					$(".my-picker").removeClass("active");
					setTimeout(function() {
						$(".my-picker").remove(); //移除选择颜色列表
					}, 500);
			});
			//确定事件
			$(document).on('tap', '.my-btn-buy-know', function() {
				//判断是点立即购买还是加入购物车的
				var cartidList = ''; //购物项id集合
				if($(this).attr("cart") == "cart") {
					if(count > 0) {
						//$(".mui-backdrop").css("opacity", 0).remove(); //移除遮罩层
						$(".my-picker").removeClass("active");
					setTimeout(function() {
						$(".my-picker").remove(); //移除选择颜色列表
					}, 500);
						mui.toast("加入购物车成功！");
					}else{
						mui.toast("请选择数量")
					}
				} else {

					$.each($(".my-picker .mui-numbox"), function(index) {
						var th = $(this);
						if(th.attr("cartid") != "undefined") {
							if(cartidList == '') {
								cartidList += th.attr("cartid");
							} else {
								cartidList += '-' + th.attr("cartid");
							}
						}
					});
					if(cartidList != "undefined" && count > 0) {
						$(".my-btn-buy-know").removeAttr("disabled"); //激活结算按钮

						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.toast("请选择数量")
					}
				}
			});
			//产品详情
			$(document).on('tap', '.to-product', function() {
				var productId = $(this).parents(".product-id").attr("name");
				location.href = 'pro-details.html?productId=' + productId;
			});
		</script>
	</body>

</html>