liujiankang
/
static


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435
							<!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" />
	</head>

	<body>
		<!--底部菜单开始-->
		<footer class="mui-bar mui-bar-tab" style="box-shadow: 0 0 0 0;">
			<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 cart">
							<span class="iconfont icon-gouwuche"></span>
							<div>购物车</div>
							<span class="mui-badge my-badge-danger">0</span>
						</div>
						<div class="mui-table-cell mui-col-xs-4 table-middle div-btn-buy-cart">加入购物车</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">
				<!--banner开始-->
				<!--banner结束-->
				<div class="index-banner" style="display: none;"></div>

				<div class="my-content-padded">
					<ul class="mui-table-view my-view-no" style="border-bottom:1px solid rgba(0,0,0,.1);">
						<li style="padding:0;">
							<div class="pro-details-name" style="padding:15px 0 0 0;"></div>
						</li>
						<li style="padding: 11px 0;" class="mui-table-view-cell mui-text-center">
							<span class="mui-pull-left cl-red price">¥0.0</span><span class="mui-h6">运费：免运费</span><span class="iconfont icon-fenxiang mui-pull-right" style="font-size: 16px;color: #999;padding: 10px;position: absolute;right: 0;top: 0;"></span>
						</li>
						<li style="padding: 11px 0 11px 7px;" class="mui-table-view-cell">
							<a class="mui-navigate-right select-color">
								选择颜色<span class="mui-pull-right" style="margin-right: 30px;"></span>
							</a>
						</li>
					</ul>
					<div class="details-content">
						<!--<img src="images/detais-5.jpg" />-->
					</div>
				</div>
			</div>
		</div>
		<div class="share-dalog">
			<img src="images/share.png" />
		</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/mui.zoom.js"></script>
		<script src="js/mui.previewimage.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();//重新加载页面
				}
			});
			var colorId = getParam("colorId"); //从URL带过来的产品颜色id
			var productName = "";//产品名称 分享用
			var colorName = "";//颜色名称 分享用
			//ready事件
			mui.ready(function() {
				if(colorId != null) {
					$.ajax(base_path + '/wechat/product/getProductByProductId?dates=' + new Date().getTime(), {
						data: {
							"colorId": colorId
						},
						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) {
									//遍历banner
									var bannerstr = "",
										dian = "";
									var banner_data = dt.data.product.pictureList;
									mui(banner_data).each(function(index) { //遍历banner集合
										if(index == 0) {
											bannerstr += '<div class="mui-slider-item mui-slider-item-duplicate"><a><img src="' + (banner_data[banner_data.length - 1].pictureUrl) + '"></a></div><div class="mui-slider-item mui-active"><a><img data-preview-src="" data-preview-group="1" src="' + (this.pictureUrl) + '"></a></div>';
											dian += '<div class="mui-indicator mui-active"></div>'
										} else {
											bannerstr += '<div class="mui-slider-item"><a><img data-preview-src="" data-preview-group="1" 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><img src="' + (banner_data[0].pictureUrl) + '"></a></div>'
										}
									});
									dc('mui-slider-loop').innerHTML = bannerstr;
									dc('my-slider-indicator').innerHTML = dian; //banner的点
									$("<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(".index-banner");
									$(document).attr("title",dt.data.product.productName);//title换成产品名字
									$(".pro-details-name").text(dt.data.product.productName); //产品名字
									productName = dt.data.product.productName;
									//初始化banner自动轮播（interval:0为不自动轮播）单位ms
									var banner = mui('#slider');
									banner.slider({
										interval: 5000
									});
									mui.previewImage(); //全屏预览图片
									if(typeof(dt.data.product.productImageText)!="undefined"){
										$(".details-content").html(dt.data.product.productImageText.imagetextContext); //产品介绍图文
									}
									//添加颜色列表弹窗
									var btn = '<div class="mui-table"><div class="mui-table-cell mui-col-xs-6 table-middle mui-hidden"><button class="mui-btn my-btn-block my-btn-add-cart">加入购物车</button></div><div class="mui-table-cell mui-col-xs-6 table-middle mui-hidden"><button class="mui-btn my-btn-block my-btn-buy-know">立即购买</button></div><div class="mui-table-cell mui-col-xs-12 table-middle"><button class="mui-btn my-btn-block my-btn-buy-know">确定</button></div></div>';
									var colorList = '',
										pic = '',
										price = '';
									mui.each(dt.data.colorList, function() { //遍历产品颜色集合
										var active = '';
										if(colorId == this.colorId) {
											active = 'active'; //弹窗选中当前颜色
											$(".select-color span").text(this.colorName); //当前颜色
											pic = this.colorImg; //当前图片
											price = '¥' + (this.colorDiscount / 100).toFixed(2);
											$(".price").text(price); //当前价格
											colorName = this.colorName;
										}
										colorList += '<span class="pro-select-color ' + active + '" name="' + this.colorId + '" src="' + this.colorImg + '" price="' + this.colorDiscount + '">' + this.colorName + '</span>';
									});
									$("body").append('<div class="my-picker"><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-3 table-middle"><img class="dalog-proPic" style="background: #f8f8f8;" width="90%" src="' + pic + '" /></div><div class="mui-table-cell mui-col-xs-8 table-middle"><div>' + dt.data.product.productName + '</div><h6>全身防水设计，给你更贴心的安全</h6><div class="dalog-proPrice">' + price + '</div></div></div></li><li class="mui-table-view-cell">选择颜色</li><li style="padding: 0 15px;"><div class="mui-table" ><div class="mui-table-cell mui-col-xs-12">' + colorList + '</div></div></li><li class="mui-table-view-cell"><div class="mui-table"><div class="mui-table-cell mui-col-xs-6">选择数量</div><div class="mui-table-cell mui-text-right mui-col-xs-6"><div class="mui-numbox" data-numbox-min="0" data-numbox-max="99" name="0"><button class="mui-btn mui-btn-numbox-minus" type="button">-</button><input class="mui-input-numbox" type="number" value="0" readonly="readonly" disabled="disabled"><button class="mui-btn mui-btn-numbox-plus" type="button">+</button></div></div></div></li></ul><br />' + btn + '<span class="iconfont icon-guanbi"></span></div>');
									mui(".mui-numbox").numbox(); //激活加减按钮组合
									getColorNumber();//获取单个购物项id数量
									getCartNumber();//获取购物车总数量
									$(".loading").hide().css("opacity", "0"); //隐藏（正在加载...）
									fenxiang();
								} else {
									mui.alert("获取产品详情失败！");
								}
							}
						},
						error: function(xhr, type, errorThrown) {
							console.log(xhr);
							mui.alert("获取产品详情失败！网络错误");
						}
					});
				}
			});
			//callback为用户点击蒙版时自动执行的回调；
			var mask = mui.createMask(function() {
				$(".my-picker").removeClass("active"); //隐藏颜色列表
			});
			//加入购物车弹出层
			var btnTap = '';
			$(document).on('tap', '.mui-bar-tab .div-btn-buy-cart,.mui-bar-tab .div-btn-buy-know,.select-color', function() {
				if($(".my-picker").length > 0) { //判断是否已有弹窗
					var th = $(this);
					mask.show(); //显示遮罩层
					//判断点击进来的按钮
					if(th.hasClass("select-color")) {
						$(".my-picker>.mui-table .mui-col-xs-12").addClass("mui-hidden");
						$(".my-picker>.mui-table .mui-col-xs-6").removeClass("mui-hidden");
					} else {
						$(".my-picker>.mui-table .mui-col-xs-6").addClass("mui-hidden");
						$(".my-picker>.mui-table .mui-col-xs-12").removeClass("mui-hidden");
						if(th.hasClass("div-btn-buy-cart")) {
							btnTap = 'addCart';
						} else {
							btnTap = 'buyknow';
						}
					}
					$(".my-picker").addClass("active"); //显示颜色列表弹窗
				}
			});
			//切换颜色
			$(document).on('tap', '.pro-select-color', function() {
				var th = $(this);
				colorId = th.attr("name");
				th.addClass("active").siblings().removeClass("active");//选中自己再把前后的兄弟元素取消选中
				$(".select-color span").text(th.text());
				getColorNumber();//重新获取单个购物项id数量
				$(".dalog-proPic").attr("src", th.attr("src"));//替换当前选择颜色的图片
				colorName = th.text();
				fenxiang();
			});
			//弹窗的加入购物车
			$(document).on('tap', '.my-picker .my-btn-add-cart', function() {
				btnTap = 'addCart';
				add();
			});
			//弹窗的立即购买
			$(document).on('tap', '.my-picker .mui-col-xs-6 .my-btn-buy-know', function() {
				btnTap = 'buyknow';
				add();
			});
			//弹窗的确定
			$(document).on('tap', '.my-picker .mui-col-xs-12 .my-btn-buy-know', function() {
				add();
				mui.toast('加入购物车成功！');
			});
			//判断是加减删，ajax分别调用不同的URL
			function add() {
				var parameter = {}; //ajax参数json集合
				var src = '/wechat/cart/addProductToCart';
				if(typeof($(".my-picker .pro-select-color.active").attr("name")) != "undefined") {
					parameter["colorId"] = $(".my-picker .pro-select-color.active").attr("name"); //颜色id
					if($(".mui-input-numbox").val() - $(".mui-numbox").attr("name") < 0) {
						if($(".mui-input-numbox").val() == 0) {
							src = '/wechat/cart/deleteCartByProductId';
							addCart(parameter, src)
						} else {
							parameter["cartNum"] = Math.abs($(".mui-input-numbox").val() - $(".mui-numbox").attr("name"));
							src = '/wechat/cart/deleteCart';
							addCart(parameter, src)
						}
					} else if($(".mui-input-numbox").val() - $(".mui-numbox").attr("name") > 0) {
						parameter["cartNum"] = Math.abs($(".mui-input-numbox").val() - $(".mui-numbox").attr("name"));
						addCart(parameter, src);
					} else {
						if($(".mui-input-numbox").val() < 1) {	
							mui.toast("请选择商品数量！");//如果数量为0提示用户去选
						} else {
							$(".my-picker").removeClass("active"); //隐藏颜色列表
							$(".mui-backdrop").remove(); //移除遮罩层
							if(btnTap == 'buyknow') {								
								if(!window.sessionStorage) {
									mui.alert("您的浏览器不支持sessionStorage");
								} else {
									//自定义json数据
									var obj = {
										text: [$(".mui-numbox").attr("cartid")]
									};
									//json格式化插入    购物项id集合
									sessionStorage.setItem('pay_data', JSON.stringify(obj));
									location.href = 'clearing.html'; //跳转结算页面
								}
								
							}
						}
					}
				} else {
					mui.alert("没有获取到产品颜色！");
				}
			};
			//商品加减删三个ajax接口集合，parameter参数，src接口的路径
			function addCart(parameter, src) {
				$.ajax(base_path + src + '?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) {
								getColorNumber();//重新获取单个购物项id数量
								getCartNumber();//重新获取购物车总数量
								if(btnTap == 'buyknow') {
									if($(".mui-input-numbox").val()>0){
										$(".my-picker").removeClass("active"); //隐藏颜色列表
										$(".mui-backdrop").remove(); //移除遮罩层
									if(!window.sessionStorage) {
										mui.alert("您的浏览器不支持sessionStorage");
									} else {
										setTimeout(function(){
											//自定义json数据
										var obj = {
											text: [$(".mui-numbox").attr("cartid")]
										};
										//json格式化插入    购物项id集合
										sessionStorage.setItem('pay_data', JSON.stringify(obj));
										location.href = 'clearing.html'; //跳转结算页面
										},500);
									}
									}else{
									mui.toast("请选择商品数量！");
								}
								}else{
									$(".my-picker").removeClass("active"); //隐藏颜色列表
									$(".mui-backdrop").remove(); //移除遮罩层
								}
							} else {
								mui.alert("添加失败！");
							}
						}
					},
					error: function(xhr, type, errorThrown) {
						console.log(xhr);
						mui.alert("添加失败！网络错误");
					}
				});
			};
			//获取单个购物项id数量
			function getColorNumber() {
				$.ajax(base_path + '/wechat/cart/getCartColorNum?dates=' + new Date().getTime(), {
					data: {
						"colorId": colorId
					},
					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) {
								if(typeof(dt.data) != "undefined") {
									$(".mui-input-numbox").val(dt.data.cartNum);
									$(".mui-numbox").attr("name", dt.data.cartNum);
									$(".mui-numbox").attr("cartid", dt.data.cartId);
									if(dt.data.cartNum > 0) {
										$(".mui-btn-numbox-minus").removeAttr("disabled");
									} else {
										$(".mui-btn-numbox-minus").attr("disabled", "disabled");
									}
								}else{
									$(".mui-numbox").removeAttr("cartid");
									$(".mui-numbox").attr("name", "0");
									$(".mui-input-numbox").val(0);
									$(".mui-btn-numbox-minus").attr("disabled", "disabled");
								}
							} else {
								console.log("失败！");
							}
						}
					},
					error: function(xhr, type, errorThrown) {
						console.log(xhr);
					}
				});
			};
			//关闭弹窗
			$(document).on('tap', '.icon-guanbi', function() {
				$(".mui-backdrop").remove(); //移除遮罩层
				$(".my-picker").removeClass("active"); //隐藏弹窗
			});
			//分享弹窗
			$(document).on('tap', '.icon-fenxiang', function() {
				$(".share-dalog").show();
			});
			//关闭分享弹窗
			$(document).on('tap', '.share-dalog', function() {
				$(this).hide();
			});
			//获取购物车总数量
			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) {
									$(".cart .mui-badge").text(dt.data).css("display","inline");
								}else{
									$(".cart .mui-badge").text("0").hide();
								}
							} else {
								mui.alert("获取购物车数量失败！");
							}
						}
					},
					error: function(xhr, type, errorThrown) {
						console.log(xhr);
						mui.alert("获取购物车数量失败！网络错误");
					}
				});
			};
			//跳转购物车
			$(document).on('tap', '.cart', function() {
				location.href = 'shopping-cart.html';
			});
			
			//分享			
			function fenxiang(){
				var src = location.href;
								src = "http://s.iamberry.com/soodo/wechat/pro-details.html?colorId="+colorId;
								window.wxFriend = {
										"appId": "",
										"imgUrl": 'http://s.iamberry.com/soodo/wechat/images/indexShare.jpg',
										"link": src,
										"desc": '让你的“笑容停留在18岁”',
										"title": '【soodo上朵】'+productName+"（"+colorName+"）",
										"netError": "您的网络异常，请刷新重试!如多次刷新无效，请向我们反应 ~",
										"shareTimeSuccess": "分享成功",
										"shareTimeCancel": "已取消分享",
										"shareAppSuccess": "分享成功!",
										"shareAppCancel": "已取消分享"
								};
								getConfig();
			}
								
		</script>
	</body>

</html>