fe / yohobuywap-node · Commits

Go to a project

Authored by 毕凯
Commit 6331d8037dd492c6aee1ceb6ea07e3c67d5961fd 2 parents 133b727f 94cf6548

Merge branch 'feature/brandsTree' into 'release/5.4.1' 

品牌字母排序、页面切换定位



See merge request !299
Inline Side-by-side
Showing 4 changed files with 69 additions and 52 deletions
@@ -32,67 +32,56 @@ const handleBrandList = origin => { @@ -32,67 +32,56 @@ const handleBrandList = origin => {
32 indexList: [] 32 indexList: []
33 }; 33 };
34 34
  35 + let keyList = [];
  36 +
35 // 标记是否有数字，有数字先暂存 37 // 标记是否有数字，有数字先暂存
36 let hasNum = false; 38 let hasNum = false;
37 let numTemp = {}; 39 let numTemp = {};
38 40
39 _.forEach(origin, (value, key) => { 41 _.forEach(origin, (value, key) => {
40 - let brands = [];  
41 42
42 if (_.size(value) <= 0) { 43 if (_.size(value) <= 0) {
43 return; 44 return;
44 } 45 }
45 46
  47 + _.forEach(value, function(subValue) {
  48 + subValue.brandUrl = '//m.yohobuy.com/product/index/brand?domain=' + subValue.brand_domain + '&app_type=1';
  49 + subValue.name = subValue.brand_name_en || subValue.brand_name_cn || subValue.brand_name;
  50 + subValue.domain = subValue.brand_domain;
  51 + });
  52 +
46 if (key === '0~9') { 53 if (key === '0~9') {
47 hasNum = true; 54 hasNum = true;
48 numTemp = origin[key]; 55 numTemp = origin[key];
49 } else { 56 } else {
50 - _.forEach(value, (subValue) => {  
51 - brands.push({  
52 - name: subValue.brand_name_en || subValue.brand_name_cn || subValue.brand_name,  
53 - logo: subValue.brand_ico,  
54 - domain: subValue.brand_domain,  
55 - brandUrl: '//m.yohobuy.com/product/index/brand?domain=' + subValue.brand_domain + '&app_type=1'  
56 - }); 57 +
  58 + keyList.push(key);
  59 + }
  60 +
57 }); 61 });
58 62
  63 + keyList.sort();
  64 +
  65 + _.forEach(keyList, function(key) {
  66 + let keyName = key;
  67 +
59 dest.ListData.push({ 68 dest.ListData.push({
60 - index: key,  
61 - brands: brands 69 + index: keyName,
  70 + brands: origin[key]
62 }); 71 });
63 72
64 dest.indexList.push({ 73 dest.indexList.push({
65 - index: key, 74 + index: keyName,
66 name: key === '0~9' ? '0' : key 75 name: key === '0~9' ? '0' : key
67 }); 76 });
68 - }  
69 -  
70 - });  
71 -  
72 - // 商品列表排序一次  
73 - _.sortBy(dest.ListData, o => {  
74 - return o.index.charCodeAt();  
75 - });  
76 -  
77 - // 字母列表排序一次  
78 - _.sortBy(dest.indexList, o => {  
79 - return o.index.charCodeAt();  
80 }); 77 });
81 78
82 // 如果有数字，单独处理 79 // 如果有数字，单独处理
83 if (hasNum) { 80 if (hasNum) {
84 - let brands = [];  
85 81
86 - _.forEach(numTemp, (subValue) => {  
87 - brands.push({  
88 - name: subValue.brand_name_en || subValue.brand_name_cn || subValue.brand_name,  
89 - logo: subValue.brand_ico,  
90 - domain: subValue.brand_domain  
91 - });  
92 - });  
93 dest.ListData.push({ 82 dest.ListData.push({
94 index: '0~9', 83 index: '0~9',
95 - brands: brands 84 + brands: numTemp
96 }); 85 });
97 86
98 dest.indexList.push({ 87 dest.indexList.push({
@@ -167,6 +156,7 @@ const _getBrandListOriginData = (channel) => { @@ -167,6 +156,7 @@ const _getBrandListOriginData = (channel) => {
167 }); 156 });
168 }; 157 };
169 158
  159 +// 全部分类数据
170 const _processCateData = (list, channel, appType) => { 160 const _processCateData = (list, channel, appType) => {
171 let nav = ['MEN男士', 'WOMEN女士']; 161 let nav = ['MEN男士', 'WOMEN女士'];
172 162
@@ -301,8 +291,6 @@ const brandListData = (code, gender) => { @@ -301,8 +291,6 @@ const brandListData = (code, gender) => {
301 }); 291 });
302 }; 292 };
303 293
304 -  
305 -  
306 module.exports = { 294 module.exports = {
307 indexData, 295 indexData,
308 brandListData 296 brandListData
@@ -31,7 +31,7 @@ @@ -31,7 +31,7 @@
31 <div class="brand-box"> 31 <div class="brand-box">
32 <a href="{{brandUrl}}"> 32 <a href="{{brandUrl}}">
33 <div class="brand-logo"> 33 <div class="brand-logo">
34 - <img src="{{image logo 136 136}}"> 34 + <img src="{{image brand_ico 136 136}}">
35 </div> 35 </div>
36 <span class="brand-name"> 36 <span class="brand-name">
37 {{name}} 37 {{name}}
@@ -6,7 +6,14 @@ var categoryHeight = $('.tab-box').height(), @@ -6,7 +6,14 @@ var categoryHeight = $('.tab-box').height(),
6 6
7 var $intercept = $('.no-intercept'), 7 var $intercept = $('.no-intercept'),
8 $list = $('.brand-list-box'), 8 $list = $('.brand-list-box'),
9 - $listBox = $('.list-box'); 9 + $listBox = $('.list-box'),
  10 + $brandContent = $('.brand-content'),
  11 + $tabBox = $('.tab-box'),
  12 + $contentIndex = $('.content-index'),
  13 + $categoryNav = $('.category-nav'),
  14 + $channelTab = $('.channel-tab'),
  15 + $categoryContent = $('.category-content'),
  16 + $brandCha = $('.brand-cha');
10 17
11 require('../common'); 18 require('../common');
12 require('./brand-cate/cate-all'); 19 require('./brand-cate/cate-all');
@@ -48,14 +55,21 @@ function loadData(channel) { @@ -48,14 +55,21 @@ function loadData(channel) {
48 gender: channel 55 gender: channel
49 }, 56 },
50 success: function(data) { 57 success: function(data) {
51 - $('.brand-content').html(data); 58 + $brandContent.html(data);
52 59
53 initialize(); 60 initialize();
  61 +
  62 + $('html,body').animate({
  63 + scrollTop: 0
  64 + }, 100, function() {
  65 + $tabBox.removeClass('fastening');
  66 + $contentIndex.removeClass('distance');
  67 + });
54 } 68 }
55 }); 69 });
56 } 70 }
57 71
58 -$('.brand-cha').find('li').click(function() { 72 +$brandCha.find('li').click(function() {
59 gender = $(this).find('span').text().replace(/[^A-Za-z]+/g, '').toLowerCase(); 73 gender = $(this).find('span').text().replace(/[^A-Za-z]+/g, '').toLowerCase();
60 74
61 $(this).addClass('focus').siblings().removeClass('focus'); 75 $(this).addClass('focus').siblings().removeClass('focus');
@@ -79,15 +93,30 @@ $('.brand-tab').find('li').click(function() { @@ -79,15 +93,30 @@ $('.brand-tab').find('li').click(function() {
79 $(this).addClass('active').siblings().removeClass('active'); 93 $(this).addClass('active').siblings().removeClass('active');
80 94
81 if ($(this).hasClass('brand')) { 95 if ($(this).hasClass('brand')) {
82 - $('.brand-content').removeClass('hide').siblings().addClass('hide');  
83 - $('.channel-tab').removeClass('hide');  
84 - $('.brand-cha').removeClass('hide').siblings().addClass('hide'); 96 + $brandContent.removeClass('hide').siblings().addClass('hide');
  97 + $channelTab.removeClass('hide');
  98 + $brandCha.removeClass('hide').siblings().addClass('hide');
85 } else { 99 } else {
86 - $('.category-content').removeClass('hide').siblings().addClass('hide'); 100 + $categoryContent.removeClass('hide').siblings().addClass('hide');
87 $('.channel-tab').addClass('hide'); 101 $('.channel-tab').addClass('hide');
88 } 102 }
89 103
90 initialize(); 104 initialize();
  105 +
  106 + // 页面切换回到头部
  107 + $('html,body').animate({
  108 + scrollTop: 0
  109 + }, 100, function() {
  110 + if (!$brandContent.hasClass('hide')) {
  111 + $tabBox.removeClass('fastening');
  112 + $contentIndex.removeClass('distance');
  113 + } else {
  114 + $tabBox.removeClass('fastening');
  115 + $categoryNav.removeClass('loca');
  116 + $('.blk-cate-all .content').removeClass('living');
  117 + $contentIndex.removeClass('distance');
  118 + }
  119 + });
91 }); 120 });
92 121
93 if ($listBox.find('li').length <= 0) { 122 if ($listBox.find('li').length <= 0) {
@@ -97,24 +126,24 @@ if ($listBox.find('li').length <= 0) { @@ -97,24 +126,24 @@ if ($listBox.find('li').length <= 0) {
97 $(window).scroll(function() { 126 $(window).scroll(function() {
98 var totalHeight = $('#yoho-header').height() + $('.tab-box').height(); 127 var totalHeight = $('#yoho-header').height() + $('.tab-box').height();
99 128
100 - if (!$('.brand-content').hasClass('hide')) { 129 + if (!$brandContent.hasClass('hide')) {
101 if ($(this).scrollTop() >= $('#yoho-header').height()) { 130 if ($(this).scrollTop() >= $('#yoho-header').height()) {
102 - $('.tab-box').addClass('fastening');  
103 - $('.content-index').addClass('distance'); 131 + $tabBox.addClass('fastening');
  132 + $contentIndex.addClass('distance');
104 $('.list-box').css('top', $('.tab-box').height()); 133 $('.list-box').css('top', $('.tab-box').height());
105 } else { 134 } else {
106 - $('.tab-box').removeClass('fastening');  
107 - $('.content-index').removeClass('distance'); 135 + $tabBox.removeClass('fastening');
  136 + $contentIndex.removeClass('distance');
108 $('.list-box').css('top', totalHeight - $(this).scrollTop()); 137 $('.list-box').css('top', totalHeight - $(this).scrollTop());
109 } 138 }
110 } else { 139 } else {
111 if ($(this).scrollTop() >= $('#yoho-header').height()) { 140 if ($(this).scrollTop() >= $('#yoho-header').height()) {
112 - $('.tab-box').addClass('fastening');  
113 - $('.category-nav').addClass('loca'); 141 + $tabBox.addClass('fastening');
  142 + $categoryNav.addClass('loca');
114 $('.blk-cate-all .content').addClass('living'); 143 $('.blk-cate-all .content').addClass('living');
115 } else { 144 } else {
116 - $('.tab-box').removeClass('fastening');  
117 - $('.category-nav').removeClass('loca'); 145 + $tabBox.removeClass('fastening');
  146 + $categoryNav.removeClass('loca');
118 $('.blk-cate-all .content').removeClass('living'); 147 $('.blk-cate-all .content').removeClass('living');
119 } 148 }
120 } 149 }
@@ -190,7 +190,7 @@ @@ -190,7 +190,7 @@
190 190
191 .list-box { 191 .list-box {
192 position: fixed; 192 position: fixed;
193 - width: 30px; 193 + width: 35px;
194 margin: 0; 194 margin: 0;
195 padding: 6px 0; 195 padding: 6px 0;
196 right: 0; 196 right: 0;