liujiankang
/
static


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501
							<!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/icons-extra.css" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/main.css" />
		<style>
			.return{position: fixed;
    right: 10px;
    bottom: 140px;
    background: rgba(0,0,0,.1);
    padding: 12px;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    text-align: center;
    opacity: .9;color: #333;display: none;}
		</style>
	</head>

	<body>
		<footer class="mui-bar mui-bar-tab">
			<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed my-grid-view-no">
				<li class="mui-table-view-cell">
					<div class="mui-table">
						<div class="mui-table-cell mui-col-xs-4 table-middle go-index"><img style="width: 60%;vertical-align: middle;" src="images/logo.png" /></div>
						<div class="mui-table-cell mui-col-xs-4 table-middle add-gouwuche" style="background-color: #ccc;color: #fff;font-size: 18px;">加入购物车</div>
						<div class="mui-table-cell mui-col-xs-4 table-middle div-btn-buy-know">立即购买</div>
					</div>
				</li>
			</ul>
		</footer>
		<div class="mui-content">
			<div class="banner-box-pro" style="display: none;">
			<!--<div id="slider" class="mui-slider">
				<div class="mui-slider-group mui-slider-loop">-->
					<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
					<!--<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="images/banner-3.jpg">
						</a>
					</div>-->
					<!-- 第一张 -->
					<!--<div class="mui-slider-item">
						<a href="#">
							<img src="images/banner-1.jpg">
						</a>
					</div>-->
					<!-- 第二张 -->
					<!--<div class="mui-slider-item">
						<a href="#">
							<img src="images/banner-2.jpg">
						</a>
					</div>-->
					<!-- 第三张 -->
					<!--<div class="mui-slider-item">
						<a href="#">
							<img src="images/banner-3.jpg">
						</a>
					</div>-->
					<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
					<!--<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="images/banner-1.jpg">
						</a>
					</div>
				</div>
				<div class="mui-slider-indicator">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
				</div>
			</div>-->
			</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-12" style="padding-right: 2px;">
		            <a href="#">
		                <div class="index-pro-tit">[精选] Aiberle美国智能净饮水一体机</div>
		                <p class="mui-text-left">4级ro净化、10s加热、3s出水<span style="float: right;color: #ff3b3b;">¥2999.00</span></p>
		            </a>
		        </li>
		        <li>
		        	<div class="index-title">
				<p><span class="iconfont icon-liwu"></span>美国aiberle咖啡杯、美国aiberle加湿器</p>
					</div>
		        </li>
		        <li class="mui-table-view-cell mui-media mui-col-xs-12">
		            <a href="#"><img class="mui-media-object" src="images/details-1.jpg">
		            </a>
		        </li>-->
		   </ul>
		</div>
		<div class="fixed-cart">
			<span class="iconfont icon-gouwuche"></span>
			<span class="mui-badge my-badge-danger">0</span>
		</div>
		<div class="return">
        	<span onClick="gotoTop(0.1,10);return false;" class="mui-icon-extra mui-icon-extra-top"></span>
        </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 productId = getParam("productId"),productName='',productRemark='',productIntroduceImg='';
			
			console.log(productId);
			
			mui.ready(function() {
				var slider = mui("#slider");
				$.ajax(base_path + '/wechat/product/getProductByProductId?dates=' + new Date().getTime(), {
					data: {"productId":productId},
					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.data)
							if(dt.status) {
								
								var bannerstr = "",
									dian = "";
									console.log(dt.data.product)
								var banner_data = dt.data.product.pictureList;
								mui(banner_data).each(function(index) {
									if(index == 0) {
										bannerstr += '<div class="mui-slider-item mui-slider-item-duplicate"><a href="'  + banner_data[banner_data.length - 1].pictureUrl + '"><img src="'  + (banner_data[banner_data.length - 1].pictureUrl) + '"></a></div><div class="mui-slider-item mui-active"><a href="#"><img src="'   + (this.pictureUrl) + '"></a></div>';
										dian += '<div class="mui-indicator mui-active"></div>'
									} else {
										bannerstr += '<div class="mui-slider-item"><a href="#"><img src="'  + (this.pictureUrl) + '"></a></div>';
										dian += '<div class="mui-indicator"></div>'
									}
									if(index == (banner_data.length - 1) || (banner_data.length - 1) == 0) {
										bannerstr += '<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="'   + (banner_data[0].pictureUrl) + '"></a></div>'
									}
								});
								dc('mui-slider-loop').innerHTML = bannerstr;
								dc('my-slider-indicator').innerHTML = dian;
								$("<div id='slider' class='mui-slider'><div class='mui-slider-group mui-slider-loop' id='mui-slider-loop'>" + bannerstr + "</div><div id='my-slider-indicator' class='mui-slider-indicator my-slider-indicator'>" + dian + "</div></div>").insertBefore(".banner-box-pro");

								//初始化banner自动轮播（interval:0为不自动轮播）单位ms
								var banner = mui('#slider');
								banner.slider({
									interval: 5000
								});
								
								
								var productInfo = dt.data.product;
								var table = document.body.querySelector(".my-view-no");
								
								var li = document.createElement('li');
								li.className = 'mui-table-view-cell mui-media mui-col-xs-12';
								var zen='';
								if(productInfo.productColorList.length>0){
										$.each(productInfo.productColorList[0].salesUserGiftList, function() {
											zen += this.giftName + "、"
										});
									}	
									if(zen != '') {
										zen = '<div class="details-title"><p><span class="iconfont icon-liwu"></span>' + zen.substring(0, zen.length - 1) + '</p></div>';
									}
									productName=productInfo.productName;
									productRemark=productInfo.productColorDes;
									productIntroduceImg=productInfo.productParameterImg;
									li.innerHTML = '<a><div class="index-pro-tit">'+productInfo.productName+'</div>'
		                						+'<p class="mui-text-left">'+productInfo.productColorDes+'<span style="float: right;color: #ff3b3b;">¥'+(productInfo.productDiscount/ 100).toFixed(2)+'</span></p></a>'
		                						+zen+'</br>'	
		                						+ productInfo.imagetextContext 
		                						+''
		                						;
								table.appendChild(li);
								getCartNumber();//获取购物车数量
								fenxiang();
								$(".loading").hide().css("opacity", "0");
							} else {
								mui.alert("获取数据失败！");
							}
						}
					},
					error: function(xhr, type, errorThrown) {
						console.log(xhr);
						mui.alert("获取数据失败！网络错误");
					}
				});
			});
			
			//callback为用户点击蒙版时自动执行的回调；
			var mask = mui.createMask(function() {
				$(".my-picker").remove();//移除颜色列表
			});
			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(); //获取当前产品数量
				if(count < 1) {
					$(".my-btn-buy-know").attr("disabled", "disabled"); //禁用结算按钮
				} else {
					$(".my-btn-buy-know").removeAttr("disabled"); //激活结算按钮
				}
				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);
										getCartNumber()
										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(count < 1) {
					$(".my-btn-buy-know").attr("disabled", "disabled"); //禁用结算按钮
				} else {
					$(".my-btn-buy-know").removeAttr("disabled"); //激活结算按钮
				}
				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("减少数量数量成功！");
									getCartNumber()
								} else {
									mui.alert("减少数量数量失败！");
								}
							}
						},
						error: function(xhr, type, errorThrown) {
							console.log(xhr);
							mui.alert("减少数量失败！网络错误");
						}
					});
				} else {
					mui.alert("没有获取到产品颜色id");
				}
			});
			
			$(document).on('tap', '.add-gouwuche,.div-btn-buy-know', function() {
				var th = $(this);
				mask.show(); //显示遮罩层
				//在body尾部增加-产品颜色列表父级ul
				$("body").append('<div class="my-picker"><ul class="mui-table-view mui-table-view-striped mui-table-view-condensed my-grid-view-no"></ul><button class="mui-btn my-btn-block my-btn-buy-know" disabled="disabled">确定</button></div>');
				$.ajax(base_path + '/wechat/product/selectProductColor?dates=' + new Date().getTime(), {
					data: {
						"productId": productId //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>ul'); //产品颜色列表父级ul
								table.innerHTML = '';
								//循环遍历产品颜色数组
								mui(data).each(function(index) {
									var li = document.createElement('li'); //创建li标签
									li.className = 'my-table-view-cell'; //給li标签设置className
									//var val=index==0?1:0;
									li.innerHTML = '<div class="mui-table" ><div class="mui-table-cell mui-col-xs-3"><img 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
									console.log(count)
									if(typeof(this.cartNum) != "undefined") {
										count += parseInt(this.cartNum);
									}
								});
								$(".my-picker").addClass("active"); //显示产品颜色加减数量列表
								console.log(count)
								if(count > 0) {
									$(".my-btn-buy-know").removeAttr("disabled"); //激活结算按钮
								}
								if(th.hasClass("add-gouwuche")) {
									$(".my-btn-buy-know").attr("cart", "cart");
								}
								mui(".mui-numbox").numbox(); //激活加减按钮组合
							} else {
								mui.alert("获取数据失败！");
							}
						}
					},
					error: function(xhr, type, errorThrown) {
						console.log(xhr);
						mui.alert("获取数据失败！网络错误");
					}
				});
			});
			//确定事件
			$(document).on('tap', '.my-btn-buy-know', function() {
				//判断是点立即购买还是加入购物车的
				if($(this).attr("cart") == "cart") {
					$(".mui-backdrop").css("opacity", 0).remove(); //移除遮罩层
					$(".my-picker").remove(); //移除选择颜色列表
					mui.toast("加入购物车成功！");
				} else {
					var cartidList = ''; //购物项id集合
					$.each($(".my-picker .mui-numbox"), function(index) {
						var th = $(this);
						if(th.attr("cartid") != "undefined") {
//							var a = '';
//							if(index != 0) {
//								a = '-' + th.attr("cartid"); //组装购物项id
//							} else {
//								a = th.attr("cartid");
//							}
							if(cartidList == ''){
								cartidList += th.attr("cartid") ;
							}else{
								cartidList += '-' + th.attr("cartid") ;
							}
						}
				});
					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'; //跳转结算页面
					}
				}
			});
				
			$(document).on('tap', '.go-index', function() {
				location.href='index.html';
			});	
			
			$(document).on('tap', '.fixed-cart', function() {
				location.href='shopping-cart.html';
			});
			//获取购物车数量
			function getCartNumber(){
				$.ajax(base_path + '/wechat/cart/getCartNumByCartOpenId?dates=' + new Date().getTime(), {
						data: {},
						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) {
									if(dt.data>0){
										$(".fixed-cart .my-badge-danger").text(dt.data).show();
									}else{
										$(".fixed-cart .my-badge-danger").text(dt.data).hide();
									}
								} else {
									mui.alert("获取购物车数量失败！");
								}
							}
						},
						error: function(xhr, type, errorThrown) {
							console.log(xhr);
							mui.alert("获取购物车数量失败！网络错误");
						}
					});
			}
			//分享		
			function fenxiang(){
				var src = location.href;
					src = "//s.iamberry.com/aiberle/wechat/pro-details.html?productId="+productId;
						window.wxFriend = {
							"appId": "",
							"imgUrl": productIntroduceImg,
							"link": src,
							"desc": productRemark,
							"title": 'Aiberle | '+ productName,
							"netError": "您的网络异常，请刷新重试!如多次刷新无效，请向我们反应 ~",
							"shareTimeSuccess": "分享成功",
							"shareTimeCancel": "已取消分享",
							"shareAppSuccess": "分享成功!",
							"shareAppCancel": "已取消分享"
						};
				getConfig();
			}
//返回顶部方法			
function gotoTop(acceleration, stime) {
	acceleration = acceleration || 0.1;
	stime = stime || 10;
	var x1 = 0,
		y1 = 0,
		x2 = 0,
		y2 = 0,
		x3 = 0,
		y3 = 0;
	if(document.documentElement) {
		x1 = document.documentElement.scrollLeft || 0;
		y1 = document.documentElement.scrollTop || 0
	}
	if(document.body) {
		x2 = document.body.scrollLeft || 0;
		y2 = document.body.scrollTop || 0
	}
	var x3 = window.scrollX || 0;
	var y3 = window.scrollY || 0;
	var x = Math.max(x1, Math.max(x2, x3));
	var y = Math.max(y1, Math.max(y2, y3));
	var speeding = 1 + acceleration;
	window.scrollTo(Math.floor(x / speeding), Math.floor(y / speeding));
	if(x > 0 || y > 0) {
		var run = "gotoTop(" + acceleration + ", " + stime + ")";
		window.setTimeout(run, stime)
	}
};
//绑定滚动条事件
$(window).on("scroll", function() {
	//向下滚动距离大于180像素显示返回顶部，否则隐藏
	if($(window).scrollTop() > 180) {
		$(".return").show();
	} else {
		$(".return").hide();
	}
});
		</script>
	</body>

</html>