page cache updata header by cookie
Showing
4 changed files
with
84 additions
and
33 deletions
@@ -52,10 +52,13 @@ const getNavBar = (data, type) => { | @@ -52,10 +52,13 @@ const getNavBar = (data, type) => { | ||
52 | let obj = {}; | 52 | let obj = {}; |
53 | let lowEn = _.camelCase(item.sort_name_en).toLowerCase(); | 53 | let lowEn = _.camelCase(item.sort_name_en).toLowerCase(); |
54 | 54 | ||
55 | - obj.link = item.sort_url; | ||
56 | - obj.cn = item.sort_name; | ||
57 | - obj.en = item.sort_name_en; | ||
58 | - obj.isNewPage = item.is_new_page === 'Y' ? true : false; | 55 | + Object.assign(obj, { |
56 | + type: lowEn, | ||
57 | + link: item.sort_url, | ||
58 | + cn: item.sort_name, | ||
59 | + en: item.sort_name_en, | ||
60 | + isNewPage: item.is_new_page === 'Y' | ||
61 | + }); | ||
59 | 62 | ||
60 | if (type === lowEn) { | 63 | if (type === lowEn) { |
61 | obj.active = true; | 64 | obj.active = true; |
@@ -135,30 +138,38 @@ const getThirdNav = (data) => { | @@ -135,30 +138,38 @@ const getThirdNav = (data) => { | ||
135 | * @param {String} type 频道类型 | 138 | * @param {String} type 频道类型 |
136 | * @return {array} 子菜单数组 | 139 | * @return {array} 子菜单数组 |
137 | */ | 140 | */ |
138 | -const getSubNav = (data, type) => { | ||
139 | - let subNav = []; | 141 | +const getSubNavGroup = (data, type) => { |
142 | + let subNavGroup = []; | ||
140 | 143 | ||
141 | _.forEach(data, it => { | 144 | _.forEach(data, it => { |
142 | - if (type === _.camelCase(it.sort_name_en).toLowerCase()) { | ||
143 | - _.forEach(it.sub, item => { | ||
144 | - let obj = {}; | ||
145 | - | ||
146 | - obj.link = item.sort_url; | ||
147 | - obj.name = item.sort_name; | ||
148 | - obj.isHot = item.is_hot === 'Y' ? true : false; | ||
149 | - obj.isNew = item.is_new === 'Y' ? true : false; | ||
150 | - | ||
151 | - if (item.sub) { | ||
152 | - obj.thirdNav = getThirdNav(item.sub); | ||
153 | - obj.imgCode = item.content_code; | ||
154 | - } | ||
155 | - | ||
156 | - subNav.push(obj); | ||
157 | - }); | ||
158 | - } | 145 | + let subNav = []; |
146 | + | ||
147 | + _.forEach(it.sub, item => { | ||
148 | + let obj = {}; | ||
149 | + | ||
150 | + obj.link = item.sort_url; | ||
151 | + obj.name = item.sort_name; | ||
152 | + obj.isHot = item.is_hot === 'Y' ? true : false; | ||
153 | + obj.isNew = item.is_new === 'Y' ? true : false; | ||
154 | + | ||
155 | + if (item.sub) { | ||
156 | + obj.thirdNav = getThirdNav(item.sub); | ||
157 | + obj.imgCode = item.content_code; | ||
158 | + } | ||
159 | + | ||
160 | + subNav.push(obj); | ||
161 | + }); | ||
162 | + | ||
163 | + let lowEn = _.camelCase(it.sort_name_en).toLowerCase(); | ||
164 | + | ||
165 | + subNavGroup.push({ | ||
166 | + subType: lowEn, | ||
167 | + subNav: subNav, | ||
168 | + active: lowEn === type | ||
169 | + }); | ||
159 | }); | 170 | }); |
160 | 171 | ||
161 | - return subNav; | 172 | + return subNavGroup; |
162 | }; | 173 | }; |
163 | 174 | ||
164 | 175 | ||
@@ -174,7 +185,7 @@ const setHeaderData = (resData, type) => ( | @@ -174,7 +185,7 @@ const setHeaderData = (resData, type) => ( | ||
174 | headType: type, | 185 | headType: type, |
175 | yohoGroup: getMenuData(), | 186 | yohoGroup: getMenuData(), |
176 | navbars: resData ? getNavBar(resData, type) : [], | 187 | navbars: resData ? getNavBar(resData, type) : [], |
177 | - subNav: resData ? getSubNav(resData, type) : [] | 188 | + subNavGroup: resData ? getSubNavGroup(resData, type) : [] |
178 | } | 189 | } |
179 | ); | 190 | ); |
180 | 191 |
1 | {{# headerData}} | 1 | {{# headerData}} |
2 | - <div class="yoho-header {{headType}}"> | 2 | + <div id="yoho-header" class="yoho-header {{headType}}" data-type="{{headType}}"> |
3 | <div class="tool-wrapper clearfix"> | 3 | <div class="tool-wrapper clearfix"> |
4 | <div class="center-content"> | 4 | <div class="center-content"> |
5 | <div class="yoho-group-map left"> | 5 | <div class="yoho-group-map left"> |
@@ -66,7 +66,7 @@ | @@ -66,7 +66,7 @@ | ||
66 | <div class="main-logo"><a href="//www.yohobuy.com/" class="main-link"></a></div> | 66 | <div class="main-logo"><a href="//www.yohobuy.com/" class="main-link"></a></div> |
67 | <ul class="main-nav-list"> | 67 | <ul class="main-nav-list"> |
68 | {{# navbars}} | 68 | {{# navbars}} |
69 | - <li {{#if active}} class="cure"{{/if}}{{#if ico}} style="background: url({{image ico 54 32}}) no-repeat center center"{{/if}}> | 69 | + <li class="{{type}}{{#if active}} cure{{/if}}" {{#if ico}} style="background: url({{image ico 54 32}}) no-repeat center center"{{/if}}> |
70 | {{#if ico}} | 70 | {{#if ico}} |
71 | <a href="{{link}}"{{#if isNewPage}} target="_blank"{{/if}} class="menu-ico"></a> | 71 | <a href="{{link}}"{{#if isNewPage}} target="_blank"{{/if}} class="menu-ico"></a> |
72 | {{^}} | 72 | {{^}} |
@@ -108,7 +108,8 @@ | @@ -108,7 +108,8 @@ | ||
108 | </div> | 108 | </div> |
109 | <div class="nav-wrapper clearfix"> | 109 | <div class="nav-wrapper clearfix"> |
110 | <div class="center-content"> | 110 | <div class="center-content"> |
111 | - <ul class="sub-nav-list"> | 111 | + {{# subNavGroup}} |
112 | + <ul class="sub-nav-list {{subType}}{{#if active}} cure{{/if}}"> | ||
112 | {{# subNav}} | 113 | {{# subNav}} |
113 | <li {{#if thirdNav}}class="contain-third"{{/if}}> | 114 | <li {{#if thirdNav}}class="contain-third"{{/if}}> |
114 | <a href="{{link}}">{{name}} | 115 | <a href="{{link}}">{{name}} |
@@ -141,6 +142,7 @@ | @@ -141,6 +142,7 @@ | ||
141 | </li> | 142 | </li> |
142 | {{/ subNav}} | 143 | {{/ subNav}} |
143 | </ul> | 144 | </ul> |
145 | + {{/ subNavGroup}} | ||
144 | </div> | 146 | </div> |
145 | </div> | 147 | </div> |
146 | </div> | 148 | </div> |
@@ -18,7 +18,7 @@ var $head = $('.head-wrapper'), | @@ -18,7 +18,7 @@ var $head = $('.head-wrapper'), | ||
18 | $goodsNum = $goCart.find('.goods-num-tip'), | 18 | $goodsNum = $goCart.find('.goods-num-tip'), |
19 | $miniCart = $head.find('.mini-cart-wrapper'); | 19 | $miniCart = $head.find('.mini-cart-wrapper'); |
20 | 20 | ||
21 | -var $subNav = $('.sub-nav-list .contain-third'); | 21 | +var $subNav = $('.sub-nav-list.cure .contain-third'); |
22 | 22 | ||
23 | var thirdLineNum = 9, | 23 | var thirdLineNum = 9, |
24 | delayer, | 24 | delayer, |
@@ -481,7 +481,38 @@ function isSupportCss3Animation() { | @@ -481,7 +481,38 @@ function isSupportCss3Animation() { | ||
481 | return false; | 481 | return false; |
482 | } | 482 | } |
483 | } | 483 | } |
484 | +} | ||
485 | + | ||
486 | +// 处理pageCache频道显示异常问题 | ||
487 | +function syncPageChannel() { | ||
488 | + var $header = $('#yoho-header'), | ||
489 | + $navs; | ||
490 | + var channel = window.cookie('_Channel') || 'girls', | ||
491 | + type; | ||
492 | + | ||
493 | + // 过滤频道页 | ||
494 | + if ($('.home-page').length) { | ||
495 | + return; | ||
496 | + } | ||
497 | + | ||
498 | + if ($header && $header.length) { | ||
499 | + $navs = $header.find('.' + channel); | ||
500 | + type = $header.data('type'); | ||
484 | 501 | ||
502 | + if (channel === type || !$navs.length) { | ||
503 | + return; | ||
504 | + } | ||
505 | + | ||
506 | + // 更新频道菜单选中状态 | ||
507 | + $navs.siblings('.cure').removeClass('cure'); | ||
508 | + $navs.addClass('cure'); | ||
509 | + | ||
510 | + // 更新频道颜色 | ||
511 | + $header.attr('class', 'yoho-header ' + channel); | ||
512 | + | ||
513 | + // 更新三级菜单jq对象 | ||
514 | + $subNav = $('.sub-nav-list.cure .contain-third'); | ||
515 | + } | ||
485 | } | 516 | } |
486 | 517 | ||
487 | if (isSupportCss3Animation()) { | 518 | if (isSupportCss3Animation()) { |
@@ -490,6 +521,7 @@ if (isSupportCss3Animation()) { | @@ -490,6 +521,7 @@ if (isSupportCss3Animation()) { | ||
490 | } else { | 521 | } else { |
491 | window.setTimeout(fadeAnimate, 3000); | 522 | window.setTimeout(fadeAnimate, 3000); |
492 | } | 523 | } |
524 | +syncPageChannel(); | ||
493 | getBannerAndNotice(); // 获取头部banner | 525 | getBannerAndNotice(); // 获取头部banner |
494 | syncLoginInfo(); // 同步登陆信息 | 526 | syncLoginInfo(); // 同步登陆信息 |
495 | formatThirdMenu(); // 格式化三级菜单 | 527 | formatThirdMenu(); // 格式化三级菜单 |
@@ -90,10 +90,10 @@ | @@ -90,10 +90,10 @@ | ||
90 | 90 | ||
91 | a { | 91 | a { |
92 | color: #8e8e8e; | 92 | color: #8e8e8e; |
93 | - | ||
94 | - span { | ||
95 | - color: #d0021b; | ||
96 | - } | 93 | + } |
94 | + | ||
95 | + a > span { | ||
96 | + color: #d0021b; | ||
97 | } | 97 | } |
98 | } | 98 | } |
99 | 99 | ||
@@ -602,6 +602,12 @@ | @@ -602,6 +602,12 @@ | ||
602 | position: relative; | 602 | position: relative; |
603 | 603 | ||
604 | .sub-nav-list { | 604 | .sub-nav-list { |
605 | + display: none; | ||
606 | + | ||
607 | + &.cure { | ||
608 | + display: block; | ||
609 | + } | ||
610 | + | ||
605 | li { | 611 | li { |
606 | line-height: 40px; | 612 | line-height: 40px; |
607 | padding-right: 46px; | 613 | padding-right: 46px; |
-
Please register or login to post a comment