Authored by yyq

page cache updata header by cookie

@@ -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;