liujiankang
/
static


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464
							<!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>Aiberle官方商城</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>
			.year-dalog{background:url(images/year-dalog.png) center center no-repeat rgba(0,0,0,.7);background-size: 80% auto; position: fixed;left: 0;top: 0;right: 0;bottom: 0;width: 100%; height: 100%;z-index: 99;display: none;-webkit-transform: translateY(-100%);transform: translateY(-100%); -webkit-transition: .5s;transition: .5s;}
			.year-dalog.active{-webkit-transform: translateY(0%);transform: translateY(0%);}
			.year-dalog img{width: 100%;}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav" style="display: none;">
			<div class="search-cotainer">
				<div class="mui-input-row mui-search">
					<input id="search" name="search" class="my-search-ipt" type="text" placeholder='大家都在搜"净水机"'>
				</div>
				<span class="iconfont icon-caidan"></span>
				<span class="my-btn-cancel">取消</span>
			</div>
			<div id="search-hot" style="display: none;">
				<div class="search-cotainer line-25" id="history">
					<p>历史搜索</p>
				</div>
			</div>
		</header>
		<footer class="mui-bar mui-bar-tab" id="footer-bar-tab">
			<a class="mui-tab-item mui-active">
				<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" style="padding-top: 10px;">
			<div class="banner-box">
				<div class="index-banner" style="display: none;"></div>
			</div>
			<div class="index-title" style="margin-top: 20px;">
				<strong style="font-size: 16px;">精选产品</strong><span class="mui-pull-right go_pro_list">
					<font>More</font><span class="mui-icon mui-icon-arrowright"></span>
				</span>
			</div>
			<ul class="mui-table-view mui-grid-view my-view-no" id="index-pro-list" style="padding-bottom: 0;">
			</ul>
			<div class="index-title" style="margin-top: 20px;">
				<strong style="font-size: 16px;">产品配件</strong><span class="mui-pull-right go_pro_list" pos="bottom">
					<font>More</font><span class="mui-icon mui-icon-arrowright"></span>
				</span>
			</div>
			<div style="margin:8px 14px 30px 14px;">
				<div id="index-pro-items" class="mui-segmented-control">
				</div>
			</div>
		</div>
		<ul id="menu">
			<li><span class="iconfont icon-guanbi"></span></li>
		</ul>
		<div class="loading covers">
			<div class="loading-bj"></div>
			<p>正在加载...</p>
		</div>
		<!--春节放假通知-->
		<div class="year-dalog"></div>
		<script src="js/mui.min.js"></script>
		<script src="js/jquery-2.1.1.min.js"></script>
		<script src="js/jquery.autocompleter.js"></script>
		<script src="js/main.js"></script>
		<script src="js/wechat-utils-1.0.js"></script>
		<script>
			// 读取值
			var colors = [];
			var histoty = JSON.parse(localStorage.getItem('search_histoty'));
			var clickdate = JSON.parse(localStorage.getItem('clickdate'));
			//console.log(histoty)
			if (histoty != null) {
				var str = histoty.text;
				for (i = 0; i < str.length; i++) {
					var childTypeId = ''
					if (typeof(str[i].childTypeId) != "undefined") {
						childTypeId = 'childTypeid=' + str[i].childTypeId;
					}
					$("#history").append('<button type="button" class="mui-btn" name="' + str[i].id + '" typeid="' + str[i].typeId +
						'" ' + childTypeId + '>' + str[i].label + '</button>');
				}
			}

			/**
			 *搜索框自动补全参数
			 */
			//var colors = [{
			//	"id": "1",
			//	"label": "冲奶机"
			//}, {
			//	"id": "2",
			//	"label": "净水机"
			//}, {
			//	"id": "3",
			//	"label": "电动牙刷"
			//}, {
			//	"id": "4",
			//	"name":"lvxin",
			//	"label": "滤芯"
			//}, {
			//	"id": "5",
			//	"label": "奶粉罐"
			//}, {
			//	"id": "6",
			//	"label": "牙刷头"
			//}, {
			//	"id": "7",
			//	"label": "水箱"
			//}, {
			//	"id": "8",
			//	"label": "接水台"
			//}, {
			//	"id": "9",
			//	"label": "加湿器"
			//}];
			mui.ready(function() {
				var d = new Date().getTime(); //当前时间戳
				//弹窗提示时间为1月18日-2月13日
				if (d > 1547740800000 && d < 1550073599000) {
					if (!window.localStorage) {
						mui.alert("您的浏览器不支持localStorage");
					} else {
						if (clickdate != null) {
							var oldDate = new Date(clickdate.text).getDay();
							//如果本地存储的getDay比当前时间的getDay大则显示弹窗
							if (new Date().getDay() > oldDate) {
								$(".year-dalog").addClass("active").show();
							}
						} else {
							//本地没有存储时间也显示弹窗
							$(".year-dalog").addClass("active").show();
						}
					}
				}
				$.ajax(base_path + '/wechat/indexData?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 {
							console.log(dt)
							if (dt.status) {
								//遍历banner
								var bannerstr = "",
									dian = "";
								var banner_data = dt.data.banners;
								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].bannerImageCheckOutUrl + '"><img src="' + (banner_data[banner_data.length -
												1].bannerImageUrl) + '"></a></div><div class="mui-slider-item mui-active"><a href="' + this.bannerImageCheckOutUrl +
											'"><img src="' + (this.bannerImageUrl) + '"></a></div>';
										dian += '<div class="mui-indicator mui-active"></div>'
									} else {
										bannerstr += '<div class="mui-slider-item"><a href="' + this.bannerImageCheckOutUrl + '"><img src="' +
											(this.bannerImageUrl) + '"></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="' + banner_data[0].bannerImageCheckOutUrl +
											'"><img src="' + (banner_data[0].bannerImageUrl) + '"></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(".index-banner");

								//初始化banner自动轮播（interval:0为不自动轮播）单位ms
								var banner = mui('#slider');
								banner.slider({
									interval: 5000
								});

								//遍历精选置顶产品（100%宽度）
								var jingxuan1 = dt.data.selectProductTopper;
								var table = document.body.querySelector("#index-pro-list");
								mui(jingxuan1).each(function(index) {
									var li = document.createElement('li');
									li.className = 'mui-table-view-cell mui-media mui-col-xs-12';
									li.style.margin = '0px 0px 7px 0px';
									//console.log(this.productColorList[0].colorDiscount)
									if (this.productColorList != null && this.productColorList.length > 0) {
										li.innerHTML = '<a name="' + this.productId + '"><img class="mui-media-object" src="' + this.productChoicenessIm +
											'"><div class="index-pro-tit" style="margin-top: 10px;" >' + this.productName +
											'</div><p class="mui-text-left">' + this.productColorDes + '<span class="f-price">¥' + accDiv(this.productColorList[
												0].colorDiscount, 100) + '</span></p></a>';
										table.appendChild(li);
									}
								});

								//遍历精选产品（50%宽度）
								var jingxuan2 = dt.data.selectProduct;
								mui(jingxuan2).each(function(index) {
									var li = document.createElement('li');
									li.className = 'mui-table-view-cell mui-media mui-col-xs-6';
									if (this.productColorList != null && this.productColorList.length > 0) {
										li.innerHTML = '<a name="' + this.productId +
											'"><img class="mui-media-object" style="background-color: #f9f7f8;border-radius: 5px;" src="' + this.productChoicenessIm +
											'"><div class="index-pro-tit" style="margin-top: 10px;">' + this.productName +
											'</div><p class="mui-text-left">' + this.productColorDes +
											'</p><p class="l-price" style="margin-top: 5px;">¥' + accDiv(this.productColorList[0].colorDiscount,
												100) + '</p></a>';
										table.appendChild(li);
									}
								});

								//遍历菜单
								var caidanData = dt.data.productTypeList;
								var caidan = document.body.querySelector("#menu");
								mui(caidanData).each(function(index) {
									var li = document.createElement("li");
									li.innerHTML = '<label name="' + this.typeId + '"><div>' + this.typeName + '</div></label>';
									caidan.appendChild(li);
									colors.push({
										"id": colors.length + 1,
										"typeId": this.typeId,
										"label": this.typeName,
										"url": "1"
									});
									$.each(this.childTypeList, function() {

										var li = document.createElement("li");
										li.className = 'line';
										li.innerHTML = '<a name="' + this.typeId + '" item="' + this.childTypeId + '"><div>' + this.childTypeName +
											'</div></a>';
										caidan.appendChild(li);
										colors.push({
											"id": colors.length + 1,
											"typeId": this.typeId,
											"label": this.childTypeName,
											"childTypeId": this.childTypeId,
											"url": "1"
										});
									});
									//遍历产品配件
									if (this.typeId == 5) {
										console.log(this.childTypeList)
										var peijian = document.body.querySelector("#index-pro-items");
										peijian.innerHTML = '';
										$.each(this.childTypeList, function() {
											var a = document.createElement("a");
											a.className = 'mui-control-item';
											a.setAttribute("name", this.typeId);
											a.setAttribute("item", this.childTypeId);
											a.innerHTML = this.childTypeName;
											peijian.appendChild(a);
										});
									}
								});
								console.log(colors)
								//绑定搜索框自动补全
								$('#search').autocompleter({
									// marker for autocomplete matches
									highlightMatches: true,

									// object to local or url to remote search
									source: colors,

									// custom template 对应 自动补全参数
									template: '<span>{{ label }}</span>',

									// show hint
									hint: true,

									// abort source if empty field
									empty: false,

									// max results
									limit: 10,
									callback: function(value, index, selected) {
										//selected 包含 (id,label)
										console.log(selected)
										search(selected);
									}
								});
							} else {
								mui.alert("获取数据失败！");
							}
						}
					},
					error: function(xhr, type, errorThrown) {
						console.log(xhr);
						mui.alert("获取数据失败！网络错误");
					}
				});

				//搜索框焦点事件
				$('#search').on('focus', function(e) {
					window.scrollTo(0, 0, 500);
					$(".icon-caidan").hide();
					$('.my-btn-cancel').show();
					if ($(this).val().length > 0) {
						$('#search-hot').hide(500);
						$(".autocompleter-list").css("height", $(document).height())
					} else {
						$("#search-hot").css("height", $(document.body).height()).show();
						$("body").css("overflow", "hidden");
					}
				});
				//搜索框失去焦点事件
				$('#search').on('blur', function(e) {
					setTimeout(function() {
						$('#search-hot,.my-btn-cancel').hide();
						$("body").css("overflow", "auto");
						$(".icon-caidan").show();
					}, 700);

				});
				//点击后把text赋值到搜索框
				$(document).on('tap', '#history button', function() {
					$('#search').val($(this).text());
					console.log($(this).text())
					$('#search-hot').hide();
					$("body").css("overflow", "auto");
					var parameter = {};
					parameter["id"] = $(this).attr("name");
					parameter["label"] = $(this).text();
					parameter["typeId"] = $(this).attr("typeid");
					if (typeof($(this).attr("childtypeId")) != "undefined") {
						parameter["childTypeId"] = $(this).attr("childtypeid");
					}
					search(parameter);
				});
				//搜索框本地缓存
				function search(selected) {
					if (!window.localStorage) {
						mui.alert("您的浏览器不支持localStorage");
					} else {
						//自定义json数据
						var obj = {},
							searchobj = {};
						if (histoty != null) {
							var str = histoty.text;
							if (str.length > 2) {
								str.splice(2, 1)
							}
							str.splice(0, 0, selected)
							obj = {
								text: str
							}
						} else {
							obj = {
								text: [selected]
							};
						}
						searchobj = {
							text: [selected]
						}
						//json格式化插入    
						localStorage.setItem('search_histoty', JSON.stringify(obj));
						sessionStorage.setItem('search_data', JSON.stringify(searchobj));
						mui.openWindow({
							url: 'pro-list.html?productId=' + selected.typeId
						});
					}
				}
				//监听搜索框值改变事件
				$('#search').on('input', function(e) {
					if ($(this).val().length > 0) {
						$('#search-hot').hide();
						$(".autocompleter-list").css("height", $(document).height());
					} else {
						$('#search-hot').show();
						$("body").css("overflow", "hidden");
						$(".autocompleter-list").css("height", "auto");
					}
				});
				$(".loading").hide().css("opacity", "0");
			});

			//取消搜索
			$(document).on('tap', '.my-btn-cancel', function() {
				$(this).hide();
				$('#search-hot').hide();
				$("body").css("overflow", "auto");
				$('#search').autocompleter("close");
				$(".autocompleter-list").empty().css("height", "auto");
				$('.autocompleter-hint').removeClass('autocompleter-hint-show').empty();
				$(".icon-caidan").show();
				$('#search').blur();
			});
			//打开菜单
			$(document).on('tap', '.icon-caidan', function() {
				$("#menu").css("height", $(window).height());
				$("#menu>li").addClass("active");
			});
			//关闭菜单
			$(document).on('tap', '.icon-guanbi', function() {
				$("#menu>li").removeClass("active");
				$("#menu").css("height", "0px");
			});
			//精选产品详情
			$(document).on('tap', '#index-pro-list .mui-table-view-cell>a', function() {
				location.href = 'pro-details.html?productId=' + $(this).attr("name")
			});
			//产品详情-配件
			$(document).on('tap', '#index-pro-items>.mui-control-item', function() {
				location.href = 'pro-list.html?productId=' + $(this).attr("name") + '&childTypeId=' + $(this).attr("item");
			});
			//more更多产品		
			$(document).on('tap', '.go_pro_list', function() {
				if (typeof($(this).attr("pos")) != "undefined") {
					location.href = "pro-list.html?productId=5";
				} else {
					location.href = "pro-list.html";
				}
			});
			//菜单跳转
			$(document).on('tap', '#menu>.line>a', function() {
				location.href = 'pro-list.html?productId=' + $(this).attr("name") + '&childTypeId=' + $(this).attr("item");
			});
			//春节放假通知弹窗点击事件
			$(document).on('tap', '.year-dalog', function() {
				if (!window.localStorage) {
					mui.alert("您的浏览器不支持localStorage");
				} else {
					//自定义json数据
					var obj = {};
					obj = {
						text: new Date().getTime()
					};
					//json格式化插入    点击时间
					localStorage.setItem('clickdate', JSON.stringify(obj));
				}
				$(".year-dalog").removeClass("active");
				setTimeout(function() {
					$(".year-dalog").hide();
				}, 500);
			});
		</script>
	</body>
</html>