liujiankang
/
static


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447
							<!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" />
		<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
		<script>
			//屏蔽分享
//			document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
//				WeixinJSBridge.call('hideOptionMenu');
//			});
		</script>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
				<!--头部搜索框-->
			<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>
					<!--<button type="button" class="mui-btn">净水机</button>
					<button type="button" class="mui-btn">冲奶机</button>
					<button type="button" class="mui-btn">电动牙刷</button>-->
				</div>
				<div class="search-cotainer line-25">
					<p>热门搜索</p>
					<button type="button" class="mui-btn">滤芯</button>
					<button type="button" class="mui-btn">奶粉罐</button>
					<button type="button" class="mui-btn">牙刷头</button>
					<button type="button" class="mui-btn">水箱</button>
					<button type="button" class="mui-btn">接水台</button>
					<button type="button" class="mui-btn">加湿器</button>
				</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">
			<div class="banner-box">
				<!--banner位置-->
			<div class="index-banner" style="display: none;"></div>
			</div>
			<div class="index-title">
				<strong>精选产品</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;">
		        <!--<li class="mui-table-view-cell mui-media mui-col-xs-12">
		            <a>
		                <img class="mui-media-object" src="images/index-1.jpg">
		                <div class="index-pro-tit">[精选] Aiberle美国智能净饮水一体机</div>
		                <p class="mui-text-left">4级ro净化、10s加热、3s出水<span class="f-price">¥2999.00</span></p>
		            </a>
		        </li>
		         <li class="mui-table-view-cell mui-media mui-col-xs-12">
		            <a>
		                <img class="mui-media-object" src="images/index-1.jpg">
		                <div class="index-pro-tit">[精选] Aiberle美国智能净饮水一体机</div>
		                <p class="mui-text-left">4级ro净化、10s加热、3s出水<span class="f-price">¥2999.00</span></p>
		            </a>
		        </li>
		        <li class="mui-table-view-cell mui-media mui-col-xs-6">
		            <a><img class="mui-media-object" src="images/index-2.jpg">
		               <div class="index-pro-tit">[育儿] Aiberle冲奶机</div>
		                <p class="mui-text-left">一键操作、8s冲好一瓶奶x</p>
		                <p class="l-price">¥799.00</p>
		            </a>
		        </li>
		        <li class="mui-table-view-cell mui-media mui-col-xs-6">
		            <a>
		                <img class="mui-media-object" src="images/index-3.jpg">
		                <div class="index-pro-tit">[宝妈] Aiberle电动牙刷</div>
		                <p class="mui-text-left">智慧科技、呵护妈妈口腔</p>
		                <p class="l-price">¥299.00</p>
		            </a>
		        </li>-->
		    </ul>
		    <div class="index-title">
				<strong>产品配件</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">
					<!--<a class="mui-control-item" href="#item1">净水机配件</a>
					<a class="mui-control-item" href="#item2">冲奶机配件</a>
					<a class="mui-control-item" href="#item3">电动牙刷配件</a>-->
				</div>
			</div>
		</div>
<ul id="menu">
	<li><span class="iconfont icon-guanbi"></span></li>
	<!--<li><label><div>净水机</div></label></li>
	<li class="line"><a href="javascript:;"><div>智能净水机</div></a></li>
	<li class="line"><a href="javascript:;"><div>智能净水机配件</div></a></li>
	<li><label><div>冲奶机</div></label></li>
	<li class="line"><a href="javascript:;"><div>智能冲奶机</div></a></li>
	<li class="line"><a href="javascript:;"><div>智能冲奶机配件</div></a></li>
	<li><label><div>电动牙刷</div></label></li>
	<li class="line"><a><div>声波女式电动牙刷</div></a></li>
	<li class="line"><a href="javascript:;"><div>声波女式电动牙刷配件</div></a></li>-->
</ul>
		<!-- 加载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/jquery.autocompleter.js"></script>
		<script src="js/main.js"></script>
		<script>
			// 读取值
			var colors=[];
			var histoty = JSON.parse(localStorage.getItem('search_histoty'));
			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() {
				$.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';
					console.log(this.productColorList[0].colorDiscount)
					li.innerHTML='<a name="'+this.productId+'"><img class="mui-media-object" src="'+this.productParameterImg+'"><div class="index-pro-tit">'+this.productName+'</div><p class="mui-text-left">'+this.productColorDes+'<span class="f-price">¥'+(this.productColorList[0].colorDiscount/100).toFixed(2)+'</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';
					li.innerHTML='<a name="'+this.productId+'"><img class="mui-media-object" src="'+this.productParameterImg+'"><div class="index-pro-tit">'+this.productName+'</div><p class="mui-text-left">'+this.productRemark+'</p><p class="l-price">¥799.00</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});
					$.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});
					});
					//遍历产品配件
					if(this.typeId==4){
						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("获取数据失败！网络错误");
					}
				});
//	$.ajax(base_path + '/wechat/product/selectProductType?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)
//								
//							} 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();
		$(".autocompleter-list").css("height",$(document).height())
	}else{
		$('#search-hot').show();
	}
});
//搜索框失去焦点事件
$('#search').on('blur', function(e) {
	$('#search-hot,.my-btn-cancel').hide();
	$(".icon-caidan").show();
});
//点击后把text赋值到搜索框
$(document).on('tap', '.search-cotainer button', function() {
	$('#search').val($(this).text());
	console.log($(this).text())
	$('#search-hot').hide();
	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));
	location.href='pro-list.html?typeId='+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();
		$(".autocompleter-list").css("height","auto");
	}
});
				$(".loading").hide().css("opacity", "0");
			});
			
			//取消搜索
			$(document).on('tap', '.my-btn-cancel', function() {
				$(this).hide();
				$('#search-hot').hide();
				$('#search').autocompleter("close");
				$(".autocompleter-list").empty().css("height","auto");
				$('.autocompleter-hint').removeClass('autocompleter-hint-show').empty();
				$(".icon-caidan").show();
			});
			//打开菜单
			$(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-details.html?productId='+$(this).attr("name")+"&childTypeId="+$(this).attr("item")
			});
			
		</script>
	</body>

</html>