fe / yoho-blk · Commits

Go to a project

Authored by zhangxiaoru
Commit 9f50b162a9ef67593a0817f108768b3c07c3e403 1 parent 545951c4

brand node

Inline Side-by-side
Showing 8 changed files with 296 additions and 205 deletions
@@ -5,207 +5,189 @@ @@ -5,207 +5,189 @@
5 */ 5 */
6 6
7 'use strict'; 7 'use strict';
8 - 8 +const brand = require('../models/brand');
9 9
10 const index = (req, res) => { 10 const index = (req, res) => {
11 - res.display('index', {  
12 - module: 'brand',  
13 - page: 'index',  
14 - title: '品牌',  
15 - brand: {  
16 - nav: [  
17 - {  
18 - link: '//guang.yohobuy.com/index/index?type=0',  
19 - pathTitle: '首页',  
20 - name: 'MEN首页'  
21 - },  
22 - {  
23 - link: '/',  
24 - pathTitle: '品牌',  
25 - name: 'Brand品牌'  
26 - }  
27 - ],  
28 - tabs: [  
29 - {  
30 - url: '#',  
31 - name: '',  
32 - src: '#'  
33 - },  
34 - {  
35 - url: '#',  
36 - name: '',  
37 - src: '#'  
38 - },  
39 - {  
40 - url: '#',  
41 - name: '',  
42 - src: '#'  
43 - }  
44 - ],  
45 - navigation: [  
46 - {  
47 - name: 'A'  
48 - },  
49 - {  
50 - name: 'B'  
51 - },  
52 - {  
53 - name: 'C'  
54 - },  
55 - {  
56 - name: 'D'  
57 - },  
58 - {  
59 - name: 'E'  
60 - },  
61 - {  
62 - name: 'F'  
63 - },  
64 - {  
65 - name: 'G'  
66 - }  
67 - ],  
68 - category: [  
69 - {  
70 - key: 'A',  
71 - brandList: [  
72 - {  
73 - key: 'A',  
74 - href: '#',  
75 - name: 'edhwke'  
76 - },  
77 - {  
78 - key: 'A',  
79 - href: '#',  
80 - name: 'edhwke'  
81 - },  
82 - {  
83 - key: 'A',  
84 - href: '#',  
85 - name: 'edhwke'  
86 - },  
87 - {  
88 - key: 'A',  
89 - href: '#',  
90 - name: 'edhwke'  
91 - },  
92 - {  
93 - key: 'A',  
94 - href: '#',  
95 - name: 'edhwke'  
96 - },  
97 - {  
98 - key: 'A',  
99 - href: '#',  
100 - name: 'edhwke'  
101 - }  
102 - ]  
103 - },  
104 - {  
105 - key: 'B',  
106 - brandList: [  
107 - {  
108 - key: 'A',  
109 - href: '#',  
110 - name: 'edhwke'  
111 - },  
112 - {  
113 - key: 'A',  
114 - href: '#',  
115 - name: 'edhwke'  
116 - },  
117 - {  
118 - key: 'A',  
119 - href: '#',  
120 - name: 'edhwke'  
121 - },  
122 - {  
123 - key: 'A',  
124 - href: '#',  
125 - name: 'edhwke'  
126 - },  
127 - {  
128 - key: 'A',  
129 - href: '#',  
130 - name: 'edhwke'  
131 - },  
132 - {  
133 - key: 'A',  
134 - href: '#',  
135 - name: 'edhwke'  
136 - }  
137 - ]  
138 - },  
139 - {  
140 - key: 'C',  
141 - brandList: [  
142 - {  
143 - key: 'A',  
144 - href: '#',  
145 - name: 'edhwke'  
146 - },  
147 - {  
148 - key: 'A',  
149 - href: '#',  
150 - name: 'edhwke'  
151 - },  
152 - {  
153 - key: 'A',  
154 - href: '#',  
155 - name: 'edhwke'  
156 - },  
157 - {  
158 - key: 'A',  
159 - href: '#',  
160 - name: 'edhwke'  
161 - },  
162 - {  
163 - key: 'A',  
164 - href: '#',  
165 - name: 'edhwke'  
166 - },  
167 - {  
168 - key: 'A',  
169 - href: '#',  
170 - name: 'edhwke'  
171 - }  
172 - ]  
173 - },  
174 - {  
175 - key: 'D',  
176 - brandList: [  
177 - {  
178 - key: 'A',  
179 - href: '#',  
180 - name: 'edhwke'  
181 - },  
182 - {  
183 - key: 'A',  
184 - href: '#',  
185 - name: 'edhwke'  
186 - },  
187 - {  
188 - key: 'A',  
189 - href: '#',  
190 - name: 'edhwke'  
191 - },  
192 - {  
193 - key: 'A',  
194 - href: '#',  
195 - name: 'edhwke'  
196 - }  
197 - ]  
198 - }  
199 - ]  
200 11
201 - }, 12 + brand.getListData().then((result) => {
  13 + res.display('index', {
  14 + module: 'brand',
  15 + page: 'index',
  16 + title: '品牌',
  17 + brand: {
  18 + nav: [
  19 + {
  20 + link: '//guang.yohobuy.com/index/index?type=0',
  21 + pathTitle: '首页',
  22 + name: 'MEN首页'
  23 + },
  24 + {
  25 + link: '/',
  26 + pathTitle: '品牌',
  27 + name: 'Brand品牌'
  28 + }
  29 + ],
  30 + tabs: [
  31 + {
  32 + url: '#',
  33 + name: '',
  34 + src: '#'
  35 + },
  36 + {
  37 + url: '#',
  38 + name: '',
  39 + src: '#'
  40 + },
  41 + {
  42 + url: '#',
  43 + name: '',
  44 + src: '#'
  45 + }
  46 + ],
  47 + // navigation: result,
  48 + category: result
  49 + // category: [
  50 + // {
  51 + // key: 'A',
  52 + // brandList: [
  53 + // {
  54 + // key: 'A',
  55 + // href: '#',
  56 + // name: 'edhwke'
  57 + // },
  58 + // {
  59 + // key: 'A',
  60 + // href: '#',
  61 + // name: 'edhwke'
  62 + // },
  63 + // {
  64 + // key: 'A',
  65 + // href: '#',
  66 + // name: 'edhwke'
  67 + // },
  68 + // {
  69 + // key: 'A',
  70 + // href: '#',
  71 + // name: 'edhwke'
  72 + // },
  73 + // {
  74 + // key: 'A',
  75 + // href: '#',
  76 + // name: 'edhwke'
  77 + // },
  78 + // {
  79 + // key: 'A',
  80 + // href: '#',
  81 + // name: 'edhwke'
  82 + // }
  83 + // ]
  84 + // },
  85 + // {
  86 + // key: 'B',
  87 + // brandList: [
  88 + // {
  89 + // key: 'A',
  90 + // href: '#',
  91 + // name: 'edhwke'
  92 + // },
  93 + // {
  94 + // key: 'A',
  95 + // href: '#',
  96 + // name: 'edhwke'
  97 + // },
  98 + // {
  99 + // key: 'A',
  100 + // href: '#',
  101 + // name: 'edhwke'
  102 + // },
  103 + // {
  104 + // key: 'A',
  105 + // href: '#',
  106 + // name: 'edhwke'
  107 + // },
  108 + // {
  109 + // key: 'A',
  110 + // href: '#',
  111 + // name: 'edhwke'
  112 + // },
  113 + // {
  114 + // key: 'A',
  115 + // href: '#',
  116 + // name: 'edhwke'
  117 + // }
  118 + // ]
  119 + // },
  120 + // {
  121 + // key: 'C',
  122 + // brandList: [
  123 + // {
  124 + // key: 'A',
  125 + // href: '#',
  126 + // name: 'edhwke'
  127 + // },
  128 + // {
  129 + // key: 'A',
  130 + // href: '#',
  131 + // name: 'edhwke'
  132 + // },
  133 + // {
  134 + // key: 'A',
  135 + // href: '#',
  136 + // name: 'edhwke'
  137 + // },
  138 + // {
  139 + // key: 'A',
  140 + // href: '#',
  141 + // name: 'edhwke'
  142 + // },
  143 + // {
  144 + // key: 'A',
  145 + // href: '#',
  146 + // name: 'edhwke'
  147 + // },
  148 + // {
  149 + // key: 'A',
  150 + // href: '#',
  151 + // name: 'edhwke'
  152 + // }
  153 + // ]
  154 + // },
  155 + // {
  156 + // key: 'D',
  157 + // brandList: [
  158 + // {
  159 + // key: 'A',
  160 + // href: '#',
  161 + // name: 'edhwke'
  162 + // },
  163 + // {
  164 + // key: 'A',
  165 + // href: '#',
  166 + // name: 'edhwke'
  167 + // },
  168 + // {
  169 + // key: 'A',
  170 + // href: '#',
  171 + // name: 'edhwke'
  172 + // },
  173 + // {
  174 + // key: 'A',
  175 + // href: '#',
  176 + // name: 'edhwke'
  177 + // }
  178 + // ]
  179 + // }
  180 + // ]
  181 +
  182 + },
202 183
203 - helpers: {  
204 - // import component, path depends on your project  
205 - pagination: require('../../../doraemon/components/pagination/pagination').createPagination  
206 - } 184 + helpers: {
  185 + // import component, path depends on your project
  186 + pagination: require('../../../doraemon/components/pagination/pagination').createPagination
  187 + }
  188 + });
207 }); 189 });
208 -}; 190 +}
209 191
210 module.exports = { 192 module.exports = {
211 index // 组件demo页 193 index // 组件demo页
1 'use strict'; 1 'use strict';
  2 +
  3 +const serviceAPI = global.yoho.ServiceAPI;
  4 +const api = global.yoho.API;
  5 +const camelCase = global.yoho.camelCase;
  6 +const _ = require('lodash');
  7 +
  8 +const _processListData = (list) => {
  9 + let category = {
  10 + key: '',
  11 + brands: []
  12 + };
  13 +
  14 + let listData = [];
  15 +
  16 + list = list || [];
  17 + list = camelCase(list);
  18 +
  19 + _.forEach(list.data, function(value, index) {
  20 +
  21 + _.forEach(value, function(obj) {
  22 + obj.brandIco = `//img13.static.yhbimg.com/brandLogo/${obj.brandIco}?imageView2/3/w/{width}/h/{height}`;
  23 +
  24 + if (!_.isNaN(+index)) {
  25 + category.key = '0-9';
  26 + category.brands.push(obj);
  27 + }
  28 + });
  29 +
  30 + if (_.isNaN(+index)) {
  31 + listData.push(
  32 + {
  33 + key: index,
  34 + brands: value
  35 + }
  36 + )
  37 + }
  38 + console.log(value)
  39 + });
  40 +
  41 + listData.push(category);
  42 +
  43 + return listData;
  44 +};
  45 +
  46 +const getListData = () => {
  47 + return api.get('', {
  48 + method: 'app.brand.newBrandList'
  49 + }).then((result) => {
  50 + if (result && result.code === 200) {
  51 + return _processListData(result);
  52 + } else {
  53 + logger.error('品牌页数据返回 code 不是 200');
  54 + return {};
  55 + }
  56 + });
  57 +};
  58 +
  59 +module.exports = {
  60 + getListData: getListData
  61 +};
@@ -18,8 +18,8 @@ @@ -18,8 +18,8 @@
18 18
19 <div class="brands-category"> 19 <div class="brands-category">
20 <div class="category-nav"> 20 <div class="category-nav">
21 - {{#each navigation}}  
22 - <a href="#{{name}}">{{name}}</a> 21 + {{#each category}}
  22 + <a href="#{{key}}">{{key}}</a>
23 {{/each}} 23 {{/each}}
24 </div> 24 </div>
25 </div> 25 </div>
@@ -3,11 +3,11 @@ @@ -3,11 +3,11 @@
3 <dt>{{key}}</dt> 3 <dt>{{key}}</dt>
4 <dd> 4 <dd>
5 <ul class="clearfix"> 5 <ul class="clearfix">
6 - {{#each brandList}} 6 + {{#each brands}}
7 <li> 7 <li>
8 <a data-key="{{key}}" href="{{href}}" target="_blank"> 8 <a data-key="{{key}}" href="{{href}}" target="_blank">
9 - <img class="lazy" data-original="{{href}}">  
10 - <span>{{name}}</span> 9 + <img class="lazy" data-original="{{image brandIco 270 190}}">
  10 + <span>{{brandName}}</span>
11 </a> 11 </a>
12 </li> 12 </li>
13 {{/each}} 13 {{/each}}
@@ -41,6 +41,7 @@ const _processListData = (list) => { @@ -41,6 +41,7 @@ const _processListData = (list) => {
41 41
42 return data; 42 return data;
43 }); 43 });
  44 + console.log(artList)
44 45
45 return artList; 46 return artList;
46 }; 47 };
@@ -16,5 +16,5 @@ module.exports = app => { @@ -16,5 +16,5 @@ module.exports = app => {
16 app.use('/me', require('./apps/me')); // 个人中心 16 app.use('/me', require('./apps/me')); // 个人中心
17 app.use('/editorial', require('./apps/editorial')); // 资讯 17 app.use('/editorial', require('./apps/editorial')); // 资讯
18 app.use('/product', require('./apps/product')); 18 app.use('/product', require('./apps/product'));
19 - app.use('/brand', require('./apps/brand')); // 资讯 19 + app.use('/brand', require('./apps/brand')); // 品牌
20 }; 20 };
  1 +/**
  2 + * 品牌页
  3 + * @author: zxr<xiaoru.zhang@yoho.cn>
  4 + * @date: 2016/07/09
  5 + */
  6 +
  7 +var $ = require('yoho-jquery'),
  8 + lazyLoad = require('yoho-jquery-lazyload');
  9 +
  10 +var $list = $('.brands-list'),
  11 + $gory = $('.brands-category'),
  12 + $category = $gory.find('a'),
  13 + categoryHeight = $category.height(),
  14 + categoryTop = $category.offset() ? $category.offset().top : 0;
  15 +
  16 +require('../common/header');
  17 +require('../common/return-top');
  18 +
  19 +lazyLoad($('.brands-list img.lazy'));
  20 +
  21 +// 品牌类别滚动事件
  22 +$(window).scroll(function() {
  23 + if ($(this).scrollTop() >= categoryTop) {
  24 + $gory.addClass('category-fix');
  25 + } else {
  26 + $gory.removeClass('category-fix');
  27 + }
  28 +});
  29 +
  30 +
  31 +// 点击字母，页面滚动到相关区域
  32 +$category.click(function() {
  33 + var name = $(this).attr('href').split('#')[1],
  34 + targetTop = $list.find('[name=' + name + ']').offset().top - categoryHeight;
  35 +
  36 + $('.category-nav').find('a').css('color', '#222');
  37 + $(this).css('color', '#379ed6');
  38 +
  39 + if (!$gory.hasClass('category-fix')) {
  40 + targetTop -= categoryHeight;
  41 + }
  42 +
  43 + $('html,body').animate({
  44 + scrollTop: targetTop
  45 + }, 200);
  46 + return false;
  47 +});
@@ -4,6 +4,7 @@ @@ -4,6 +4,7 @@
4 .brands-tabs { 4 .brands-tabs {
5 position: relative; 5 position: relative;
6 margin-bottom: 20px; 6 margin-bottom: 20px;
  7 + overflow: hidden;
7 8
8 a { 9 a {
9 display: block; 10 display: block;
@@ -60,8 +61,7 @@ @@ -60,8 +61,7 @@
60 .category-nav { 61 .category-nav {
61 border-top: 1px solid #eee; 62 border-top: 1px solid #eee;
62 border-bottom: 1px solid #eee; 63 border-bottom: 1px solid #eee;
63 - padding-left: 16px;  
64 - width: 100%; 64 + width: 1150px;
65 height: 44px; 65 height: 44px;
66 line-height: 44px; 66 line-height: 44px;
67 font-size: 12px; 67 font-size: 12px;
@@ -72,13 +72,14 @@ @@ -72,13 +72,14 @@
72 72
73 a { 73 a {
74 display: inline-block; 74 display: inline-block;
75 - padding: 0 7px; 75 + padding-left: 29px;
76 text-align: center; 76 text-align: center;
77 color: #222; 77 color: #222;
78 cursor: pointer; 78 cursor: pointer;
79 } 79 }
80 } 80 }
81 81
  82 +
82 .brands-list { 83 .brands-list {
83 84
84 dt { 85 dt {