|
|
@@ -1,461 +1,460 @@
|
|
|
-<!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.productChoicenessIm + '"><div class="index-pro-tit">' + 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';
|
|
|
- li.innerHTML = '<a name="' + this.productId + '"><img class="mui-media-object" src="' + this.productChoicenessIm + '"><div class="index-pro-tit">' + this.productName + '</div><p class="mui-text-left">' + this.productRemark + '</p><p class="l-price">¥' + 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));
|
|
|
- console.log("999999999999")
|
|
|
- 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();
|
|
|
- });
|
|
|
- //打开菜单
|
|
|
- $(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");
|
|
|
- });
|
|
|
- </script>
|
|
|
- </body>
|
|
|
-
|
|
|
+<!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.productChoicenessIm + '"><div class="index-pro-tit">' + 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';
|
|
|
+ li.innerHTML = '<a name="' + this.productId + '"><img class="mui-media-object" src="' + this.productChoicenessIm + '"><div class="index-pro-tit">' + this.productName + '</div><p class="mui-text-left">' + this.productRemark + '</p><p class="l-price">¥' + 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));
|
|
|
+ console.log("999999999999")
|
|
|
+ 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();
|
|
|
+ });
|
|
|
+ //打开菜单
|
|
|
+ $(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");
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+ </body>
|
|
|
+
|
|
|
</html>
|
