Browse Source

aiberle 年假发货

wangxiaoming 6 years ago
parent
commit
8fe7bcd3e3
1 changed files with 132 additions and 126 deletions
  1. 132 126
      aiberle/index.html

+ 132 - 126
aiberle/index.html

@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html>
-
 	<head>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
@@ -10,13 +9,16 @@
 		<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" >
+			<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>
@@ -25,19 +27,7 @@
 			<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">
@@ -58,74 +48,36 @@
 				<span class="mui-tab-label">我的</span>
 			</a>
 		</footer>
-		<div class="mui-content" style="padding-top: 10px;"> 
+		<div class="mui-content" style="padding-top: 10px;">
 			<div class="banner-box">
-				<!--banner位置-->
 				<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>
+				<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;">
-				<!--<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" 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>
+				<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">
-					<!--<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 -->
+		<!--春节放假通知-->
+		<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>
@@ -135,15 +87,17 @@
 			// 读取值
 			var colors = [];
 			var histoty = JSON.parse(localStorage.getItem('search_histoty'));
-			console.log(histoty)
-			if(histoty != null) {
+			var clickdate = JSON.parse(localStorage.getItem('clickdate'));
+			//console.log(histoty)
+			if (histoty != null) {
 				var str = histoty.text;
-				for(i = 0; i < str.length; i++) {
+				for (i = 0; i < str.length; i++) {
 					var childTypeId = ''
-					if(typeof(str[i].childTypeId) != "undefined") {
+					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>');
+					$("#history").append('<button type="button" class="mui-btn" name="' + str[i].id + '" typeid="' + str[i].typeId +
+						'" ' + childTypeId + '>' + str[i].label + '</button>');
 				}
 			}
 
@@ -180,6 +134,24 @@
 			//	"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',
@@ -191,30 +163,38 @@
 					timeout: 15000,
 					success: function(dt) {
 						//判断一下
-						if(dt.isRedirect) {
+						if (dt.isRedirect) {
 							location.href = dt.redirectURL;
 						} else {
 							console.log(dt)
-							if(dt.status) {
+							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>';
+									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>';
+										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>'
+									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");
+								$(
+									"<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');
@@ -228,10 +208,13 @@
 								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';
+									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>';
+									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);
 									}
 								});
@@ -241,8 +224,13 @@
 								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>';
+									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);
 									}
 								});
@@ -258,24 +246,25 @@
 										"id": colors.length + 1,
 										"typeId": this.typeId,
 										"label": this.typeName,
-										"url":"1"
+										"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"
-											});
+
+										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) {
+									if (this.typeId == 5) {
 										console.log(this.childTypeList)
 										var peijian = document.body.querySelector("#index-pro-items");
 										peijian.innerHTML = '';
@@ -331,49 +320,49 @@
 					window.scrollTo(0, 0, 500);
 					$(".icon-caidan").hide();
 					$('.my-btn-cancel').show();
-					if($(this).val().length > 0) {
+					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-hot").css("height", $(document.body).height()).show();
+						$("body").css("overflow", "hidden");
 					}
 				});
 				//搜索框失去焦点事件
 				$('#search').on('blur', function(e) {
-					setTimeout(function(){
+					setTimeout(function() {
 						$('#search-hot,.my-btn-cancel').hide();
-						$("body").css("overflow","auto");
+						$("body").css("overflow", "auto");
 						$(".icon-caidan").show();
-					},700);
-					
+					}, 700);
+
 				});
 				//点击后把text赋值到搜索框
 				$(document).on('tap', '#history button', function() {
 					$('#search').val($(this).text());
 					console.log($(this).text())
 					$('#search-hot').hide();
-					$("body").css("overflow","auto");
+					$("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") {
+					if (typeof($(this).attr("childtypeId")) != "undefined") {
 						parameter["childTypeId"] = $(this).attr("childtypeid");
 					}
 					search(parameter);
 				});
 				//搜索框本地缓存
 				function search(selected) {
-					if(!window.localStorage) {
+					if (!window.localStorage) {
 						mui.alert("您的浏览器不支持localStorage");
 					} else {
 						//自定义json数据
 						var obj = {},
 							searchobj = {};
-						if(histoty != null) {
+						if (histoty != null) {
 							var str = histoty.text;
-							if(str.length > 2) {
+							if (str.length > 2) {
 								str.splice(2, 1)
 							}
 							str.splice(0, 0, selected)
@@ -398,12 +387,12 @@
 				}
 				//监听搜索框值改变事件
 				$('#search').on('input', function(e) {
-					if($(this).val().length > 0) {
+					if ($(this).val().length > 0) {
 						$('#search-hot').hide();
 						$(".autocompleter-list").css("height", $(document).height());
 					} else {
 						$('#search-hot').show();
-						$("body").css("overflow","hidden");
+						$("body").css("overflow", "hidden");
 						$(".autocompleter-list").css("height", "auto");
 					}
 				});
@@ -414,7 +403,7 @@
 			$(document).on('tap', '.my-btn-cancel', function() {
 				$(this).hide();
 				$('#search-hot').hide();
-				$("body").css("overflow","auto");
+				$("body").css("overflow", "auto");
 				$('#search').autocompleter("close");
 				$(".autocompleter-list").empty().css("height", "auto");
 				$('.autocompleter-hint').removeClass('autocompleter-hint-show').empty();
@@ -437,21 +426,38 @@
 			});
 			//产品详情-配件
 			$(document).on('tap', '#index-pro-items>.mui-control-item', function() {
-				location.href = 'pro-list.html?productId=' +$(this).attr("name")+'&childTypeId='+$(this).attr("item");
+				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);
 			});
-	//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");
-	});	
 		</script>
 	</body>
-
-</html>
+</html>