<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="expires" content="0">
<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">
<meta name="format-detection" content="telphone=no, email=no" />
<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%;}
div{color: #000000;}
</style>
<script>
var start = new Date(2020,1-1,3,00,00,00);
var end = new Date(2020,1-1,6,23,59,59);
var d = new Date().getTime(); //当前时间戳
if (d > start && d <= end) {
location.href = "20200103.html?dates="+new Date().getTime();
}
</script>
</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 id="" style="display: block;margin-top: 25px;;">
<img style="width: 100%;" src="https://s.iamberry.com/common/image/product/xpsd.png"/>
</div>
<ul class="mui-table-view mui-grid-view my-view-no" id="index-pro-list2" style="padding-bottom: 0;">
<li class="mui-table-view-cell mui-media mui-col-xs-6"><a name="54">
<img class="mui-media-object" style="background-color: #f9f7f8;border-radius: 5px;" src="https://s.iamberry.com/common/image/product/kdsj.png">
<div class="index-pro-tit" style="margin-top: 10px;">Aiberle口袋热水机</div>
<p class="mui-text-left">小巧便携，3秒即饮</p>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-6"><a name="52">
<img class="mui-media-object" style="background-color: #f9f7f8;border-radius: 5px;" src="https://s.iamberry.com/common/image/product/new_hs.png">
<div class="index-pro-tit" style="margin-top: 10px;">Aiberle净水花洒升级款</div>
<p class="mui-text-left">高效除氯、净水养肤</p>
</li>
</ul>
-->
<!--<div style="background: #e6584f;height: 60px;display: block;margin-top: 25px;">
<div></div>
</div>-->
<div class="go_to_vip"><img src="images/huiyuan_go.png" style="width: 96%; margin-left: 2%; margin-top: 15px; "></div>
<div class="index-title" style="margin-top: 20px;">
<strong style="font-size: 16px; color: #000;">精选产品</strong><span class="mui-pull-right go_pro_list" pos="13">
<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("获取数据失败！网络错误");
}
});
//刷新用户信息
$.ajax(base_path + '/wechat/getUserInfo?dates=' + new Date().getTime(), {
dataType: 'json',
type: 'post',
timeout: 15000,
xhrFields: {
withCredentials: true
},
crossDomain: true,
success: function(dt) {
if(dt.isRedirect) {
location.href = dt.redirectURL;
} else {
console.log("用户信息刷新成功或今日已经刷新");
}
},
error: function(xhr, type, errorThrown) {
console.log(xhr)
}
});
//搜索框焦点事件
$('#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")
});
//精选产品详情2
$(document).on('tap', '#index-pro-list2 .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");
});
//to vip
$(document).on('tap', '.go_to_vip', function() {
location.href = 'vip-equity.html';
});
//more更多产品
$(document).on('tap', '.go_pro_list', function() {
var type = $(this).attr("pos")
if (typeof($(this).attr("pos")) != "undefined") {
location.href = "pro-list.html?productId="+type;
} 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>