fe / yohobuy-node · Commits

Go to a project

Authored by 杨延青
Commit 5547c0d00fbc68d1d893dac5df4d6f74de60c239 1 parent aeb0d191

header js

Inline Side-by-side
Showing 7 changed files with 340 additions and 13 deletions
... ... @@ -15,8 +15,8 @@ exports.index = (req, res) => {
let data = headerModel.getAllHeaderData(response.data, 'boy');
data.headerData.navbars[0].active = true;
console.log(data.headerData.subNav);
data.module = 'index';
data.page = 'index';
res.render('index', data);
})
... ...
... ... @@ -52,16 +52,20 @@ var header = {
{
link: '#',
name: '服饰',
thirdNav: {
link: '#',
title: '',
imgCode: '9f8af647f35746ba23373d7a66250753',
brandItems: {
thirdNav: [
{
link: '#',
hot: false,
brandName:
title: '',
imgCode: '9f8af647f35746ba23373d7a66250753',
brandItems: [
{
link: '#',
hot: false,
brandName: ''
}
]
}
}
]
},
{
link: '#',
... ...
... ... @@ -102,7 +102,7 @@
<div class="center-content">
<ul class="sub-nav-list">
{{# subNav}}
<li{{#if thirdnav}} class="contain-third"{{/if}}>
<li{{#if thirdNav}} class="contain-third"{{/if}}>
<a href="{{link}}">{{name}}
{{#if isNew}}
<span class="newlogo"></span>
... ...
/**
* 公共头部
* @author: yyq<yanqing.yang@yoho.cn>
* @date: 2016/5/9
*/
/* eslint-disable */
require('yoho-jquery');
var $ = window.$;
// handlebars = require('yoho.handlebars'),
// json2 = require('json2');
var $tool = $('.tool-wrapper'),
$yohoGroup = $tool.find('.yoho-group'),
$loginBox = $('#loginBox');
var $head = $('.head-wrapper'),
$searchForm = $('#search-form'),
$searchSug = $head.find('.search-suggest'),
$goCart = $head.find('.go-cart'),
$goodsNum = $goCart.find('.goods-num-tip'),
$miniCart = $head.find('.mini-cart-wrapper');
var $subNav = $('.sub-nav-list .contain-third');
var apiDomain = $('#api-domain').val(), // 获取登陆状态的地址
apiBanner = 'http://new.yohobuy.com/common/getbanner',
thirdLineNum = 9,
delayer,
centerFn,
loginFn,
cartFn;
$('#api-domain').remove(); // 删除地址信息
// handlebars模板
// centerFn = handlebars.compile($('#simple-account-info-tpl').html());
// loginFn = handlebars.compile($('#header-login-info-tpl').html());
// cartFn = handlebars.compile($('#mini-cart-tpl').html());
// handlebars helper
// handlebars.registerHelper('notzero', function(v1, options) {
// if (v1 !== '0') {
// return options.fn(this);
// } else {
// return options.inverse(this);
// }
// });
// 格式化三级菜单
function formatThirdMenu() {
$subNav.each(function() {
var $thirdList = $(this).find('.hide-list'),
list = [],
i = 0;
if ($thirdList.length) {
$thirdList.children().each(function() {
if (i % thirdLineNum === 0) {
list.push('');
}
list[list.length - 1] += this.outerHTML + '';
i++;
});
for (i = 0; i < 3; i++) {
$thirdList.before('<dl class="category-list">' + list[i] + '</dl>');
}
$thirdList.remove();
}
});
}
// 更新头部登陆信息
function updateLoginInfo(data) {
var info = {
usercenter: 'http://www.yohobuy.com/home?t=' + new Date().getTime(),
nickname: data.profile_name,
signout: 'http://www.yohobuy.com/logout_' + data.token
};
if (data.vip.curVipInfo.curLevel * 1 === 3) {
data.vip3 = true;
}
$tool.find('.simple-user-center').html(centerFn(data));
$loginBox.html(loginFn(info));
}
// 同步sso登录状态
function syncLoginInfo() {
var param = {
return_type: 'jsonp',
method: 'open.passport.get'
};
$.getJSON(apiDomain + '/?callback=?', param, function(jsonData) {
if (jsonData && jsonData.data && jsonData.data.result !== -1) {
updateLoginInfo(jsonData.data.data);
} else {
window.setCookie('_UID', '', {
domain: '.yohobuy.com',
expires: -1
});
}
});
}
// 关键词搜索联想
function searchSuggest(key) {
var param = {
return_type: 'jsonp',
query: key
};
$.getJSON('http://search.yohobuy.com/api/suggest/?callback=?', param, function(jsonData) {
if (jsonData.code === 200) {
if (jsonData.data && jsonData.data.length) {
$searchSug.html(jsonData.data).show();
} else {
$searchSug.hide();
}
}
});
}
// 同步mini购物车数据
function syncCratInfo(strG) {
// var info, total;
//
// if (strG) {
// window.setCookie('_g', strG, {
// path: '/',
// domain: '.yohobuy.com'
// });
// }
// if (window.cookie('_g')) {
// info = json2.parse(window.cookie('_g'));
// total = parseInt(info._nac) + parseInt(info._ac);
// total = total > 0 ? total : 0;
// $goCart.data({
// key: info._k,
// num: total
// });
// $goodsNum.text(total);
// }
}
function loadCartDetail(key) {
// var param = {
// return_type: 'jsonp',
// method: 'open.Shoppingcart.getCartData',
// shopping_key: key
// };
//
// $.getJSON(apiDomain + '/?callback=?', param, function(jsonData) {
// var totalGoods, data;
//
// if (jsonData.code === 200) {
// data = jsonData.data;
// totalGoods = $.merge(data.main_goods, data.advance_goods);
// totalGoods = $.merge(totalGoods, data.outlet_goods);
// totalGoods = $.merge(totalGoods, data.gift_goods);
// totalGoods = $.merge(totalGoods, data.need_pay_gifts);
// if (totalGoods && totalGoods.length) {
// data.totalGoods = totalGoods;
// $miniCart.html(cartFn({
// carData: data
// }));
// } else {
// $miniCart.html('<div class="empty-cart"><h3>您的购物车暂无商品</h3></div>');
// }
// }
// });
}
function delCartGoods(data, callback) {
// var param = {
// return_type: 'jsonp',
// method: 'open.Shoppingcart.delone',
// shopping_key: data.key,
// id: data.id,
// isreduce: data.isreduce
// };
//
// $.getJSON(apiDomain + '/?callback=?', param, function(jsonData) {
// var strG = '';
//
// if (jsonData.code === 200) {
// callback();
// strG = '{"_k":"' + data.key + '","_nac":' + jsonData.data.total_goods_num + ',"_ac":0,"_r":0}';
// syncCratInfo(strG);
// }
// });
}
syncLoginInfo();
formatThirdMenu();
setInterval(syncCratInfo, 2000);
$yohoGroup.hover(function() {
var data = $(this).data();
$(this).text(data.cn);
}, function() {
var data = $(this).data();
$(this).text(data.en);
});
$searchForm.on('keyup', '.search-key', function(e) {
var val = $.trim($(this).val()),
$child = $searchSug.find('li'),
$act = $searchSug.find('.action'),
$focus;
if (e.which > 36 && e.which < 41) {
if (e.which === 38) {
$focus = $act.prev();
if (!$act.length || !$focus.length) {
$focus = $child.eq($child.length - 1);
}
} else if (e.which === 40) {
$focus = $act.next();
if (!$act.length || !$focus.length) {
$focus = $child.eq(0);
}
} else {
return;
}
$child.removeClass('action');
$focus.addClass('action');
$(this).val($focus.find('.searchvalue').text());
} else if (e.which === 13) {
if (val !== '') {
$searchForm.submit();
}
} else {
val = val.replace(new RegExp('\'', 'gm'), ''); // 去掉特殊字符
$(this).val(val);
searchSuggest(val);
}
// http://search.yohobuy.com/api/suggest
// searchSuggest
});
$goCart.hover(function() {
var data, _html = '';
if ($goCart.hasClass('on-hover')) {
return;
}
data = $goCart.data();
if (data && data.num * 1) {
_html = '<div class="loading-cart"><h3>加载中，请稍后</h3></div>';
loadCartDetail(data.key);
} else {
_html = '<div class="empty-cart"><h3>您的购物车暂无商品</h3></div>';
}
$miniCart.html(_html);
$goCart.addClass('on-hover');
}, function() {
$goCart.removeClass('on-hover');
});
$goCart.on('click', '.cart-goods-del', function(e) {
var $dom = $(this),
data = $dom.data(),
callback;
if (data) {
callback = function() {
$dom.closest('.goods-item').remove();
};
data.key = $goCart.data().key;
delCartGoods(data, callback);
}
});
$subNav.on({
mouseenter: function() {
var $thirdNav = $(this).children('.third-nav-wrapper'),
$show = $thirdNav.find('.show-detail'),
param = {};
console.log(34522);
delayer = setTimeout(function() {
$thirdNav.show();
}, 200);
if (!$show.length || $show.hasClass('show')) {
return;
}
param.content_code = $show.data().code;
param.client_type = 'web';
param.width = 174;
param.height = 155;
param._ = new Date();
// $.getJSON(apiBanner + '/?callback=?', param, function(JsonData) {
// if (JsonData.code === 200) {
// $show.addClass('show');
// $show.find('img').attr('src', JsonData.data.src);
// $show.find('a').attr('href', JsonData.data.url);
// $show.find('.title').text(JsonData.data.title);
// }
// });
},
mouseleave: function() {
var $thirdNav = $(this).children('.third-nav-wrapper');
if (delayer) {
clearTimeout(delayer);
}
$thirdNav.hide();
}
});
/* eslint-ensable */
... ...
require('../header');
... ...
... ... @@ -340,10 +340,10 @@
input {
width: 240px;
height: 100%;
border: 1px solid #fff;
border: none;
background: #fff;
box-sizing: border-box;
padding: 6px 0 5px 10px;
padding: 7px 0 7px 10px;
}
.search-btn {
... ...