fe / YOHOBUYWAP · Commits

Go to a project

Authored by xuqi
Commit 2d25dce0e83c1e4605909573b165c391b695aedf 2 parents 887aefa6 a2098f3b

Merge branch 'feature/web' of http://git.dev.yoho.cn/web/yohobuy into feature/web

Inline Side-by-side
Showing 17 changed files with 367 additions and 101 deletions
@@ -10,7 +10,7 @@ @@ -10,7 +10,7 @@
10 {{# bigSlide}} 10 {{# bigSlide}}
11 <li> 11 <li>
12 <a href="{{href}}"> 12 <a href="{{href}}">
13 - <img src="{{img}}" alt=""> 13 + <img class="lazy" data-original="{{img}}" alt="">
14 </a> 14 </a>
15 </li> 15 </li>
16 {{/ bigSlide}} 16 {{/ bigSlide}}
@@ -333,6 +333,10 @@ @@ -333,6 +333,10 @@
333 {{#each goods}} 333 {{#each goods}}
334 {{> product/good}} 334 {{> product/good}}
335 {{/each}} 335 {{/each}}
  336 + <div class="good-item-wrapper">
  337 + <div class="good-info-main"></div>
  338 + <div class="good-select-color"></div>
  339 + </div>
336 </div> 340 </div>
337 {{/ products}} 341 {{/ products}}
338 </div> 342 </div>
@@ -5,6 +5,6 @@ @@ -5,6 +5,6 @@
5 5
6 </ul> 6 </ul>
7 <div class="loading"> 7 <div class="loading">
8 - <p>Loading...</p> 8 + <a>Loading...</a>
9 </div> 9 </div>
10 </div> 10 </div>
1 -<div class="good-info {{#if goodListLast}}good-list-{{goodListLast}}{{/if}}" data-skn="{{skn}}"> 1 +<div class="good-info" data-skn="{{skn}}">
2 <div class="tag-container clearfix"> 2 <div class="tag-container clearfix">
3 {{# tags}} 3 {{# tags}}
4 {{# isNew}} 4 {{# isNew}}
@@ -33,7 +33,7 @@ @@ -33,7 +33,7 @@
33 {{/ isFew}} 33 {{/ isFew}}
34 34
35 {{#if showColBtn}} 35 {{#if showColBtn}}
36 - <span class="col-btn iconfont{{#if coled}} coled{{/if}}"></span> 36 + <span class="col-btn iconfont{{#if coled}} coled{{/if}}">&#xe616;</span>
37 {{/if}} 37 {{/if}}
38 </div> 38 </div>
39 <div class="good-detail-text"> 39 <div class="good-detail-text">
@@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" > 2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
3 <svg xmlns="http://www.w3.org/2000/svg"> 3 <svg xmlns="http://www.w3.org/2000/svg">
4 <metadata> 4 <metadata>
5 -Created by FontForge 20120731 at Tue Dec 1 11:00:27 2015 5 +Created by FontForge 20120731 at Wed Dec 2 17:34:20 2015
6 By Ads 6 By Ads
7 </metadata> 7 </metadata>
8 <defs> 8 <defs>
@@ -16,10 +16,10 @@ Created by FontForge 20120731 at Tue Dec 1 11:00:27 2015 @@ -16,10 +16,10 @@ Created by FontForge 20120731 at Tue Dec 1 11:00:27 2015
16 ascent="896" 16 ascent="896"
17 descent="-128" 17 descent="-128"
18 x-height="792" 18 x-height="792"
19 - bbox="0 -214 1024 864" 19 + bbox="0 -214 1172.1 864"
20 underline-thickness="50" 20 underline-thickness="50"
21 underline-position="-100" 21 underline-position="-100"
22 - unicode-range="U+0078-E615" 22 + unicode-range="U+0078-E616"
23 /> 23 />
24 <missing-glyph horiz-adv-x="374" 24 <missing-glyph horiz-adv-x="374"
25 d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" /> 25 d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
@@ -81,5 +81,8 @@ d="M877 812h-730q-61 0 -104 -43t-43 -104v-730q0 -61 43 -104t104 -43h730q61 0 104 @@ -81,5 +81,8 @@ d="M877 812h-730q-61 0 -104 -43t-43 -104v-730q0 -61 43 -104t104 -43h730q61 0 104
81 d="M160 996zM865 247q0 -18 -13 -31l-308 -308q-13 -13 -31 -13t-31 13l-309 308q-13 13 -13 31t13.5 31t30.5 13h617q18 0 31 -13t13 -31zM865 511q0 -18 -13 -31t-31 -13h-617q-18 0 -31 13t-13 31t13 31l309 309q13 13 31 13t31 -13l308 -309q13 -13 13 -31z" /> 81 d="M160 996zM865 247q0 -18 -13 -31l-308 -308q-13 -13 -31 -13t-31 13l-309 308q-13 13 -13 31t13.5 31t30.5 13h617q18 0 31 -13t13 -31zM865 511q0 -18 -13 -31t-31 -13h-617q-18 0 -31 13t-13 31t13 31l309 309q13 13 31 13t31 -13l308 -309q13 -13 13 -31z" />
82 <glyph glyph-name="uniE615" unicode="&#xe615;" 82 <glyph glyph-name="uniE615" unicode="&#xe615;"
83 d="M704 569l-41 39l-343 -320l343 -320l41 39l-301 281z" /> 83 d="M704 569l-41 39l-343 -320l343 -320l41 39l-301 281z" />
  84 + <glyph glyph-name="uniE616" unicode="&#xe616;" horiz-adv-x="1173"
  85 +d="M586 588q-64 150 -188 203q-114 47 -222 -7q-112 -56 -155 -192q-20 -67 -21 -144q0 -41 9 -78.5t24 -66.5t39 -57.5t47 -48.5t55.5 -43t56.5 -38t58.5 -35.5t53.5 -33.5q63 -42 118 -94.5t86.5 -95t39.5 -69.5q4 19 25.5 50t53.5 66t75 74t88 71q21 15 53.5 35.5t58 36
  86 +t57 38t55 43t47 48t39 56.5t25 66.5t8.5 78.5q0 75 -19.5 138t-52.5 105.5t-76.5 70.5t-91 37.5t-98 1t-96 -34.5t-85.5 -72.5t-67 -108.5z" />
84 </font> 87 </font>
85 </defs></svg> 88 </defs></svg>
@@ -69,7 +69,7 @@ infiniteLoad.prototype.init = function() { @@ -69,7 +69,7 @@ infiniteLoad.prototype.init = function() {
69 69
70 function __loadMore() { 70 function __loadMore() {
71 71
72 - if (p.isload && g.__directionCalculation()) { 72 + if (p.isrun && p.isload && g.__directionCalculation()) {
73 p.isload = false; 73 p.isload = false;
74 p.index++; 74 p.index++;
75 g.exect('after', p); 75 g.exect('after', p);
@@ -89,6 +89,13 @@ infiniteLoad.prototype.emit = function() { @@ -89,6 +89,13 @@ infiniteLoad.prototype.emit = function() {
89 p.isload = true; 89 p.isload = true;
90 }; 90 };
91 91
  92 +infiniteLoad.prototype.stop = function() {
  93 + var p = this.options;
  94 +
  95 + p.isrun = false;
  96 + p.isload = false;
  97 +};
  98 +
92 infiniteLoad.prototype.__directionCalculation = function() { 99 infiniteLoad.prototype.__directionCalculation = function() {
93 var p = this.options; 100 var p = this.options;
94 101
1 -var $ = require('yoho.jquery'); 1 +var $ = require('yoho.jquery'),
  2 + lazyLoad = require('yoho.lazyload');
2 3
3 (function($) { 4 (function($) {
4 var LinkageSlider = function(element, options) { 5 var LinkageSlider = function(element, options) {
@@ -64,6 +65,11 @@ var $ = require('yoho.jquery'); @@ -64,6 +65,11 @@ var $ = require('yoho.jquery');
64 this._slideShow(); 65 this._slideShow();
65 }, 66 },
66 _slideShow: function() { 67 _slideShow: function() {
  68 + var $img = this.bigItem.eq(this.index).find('img.lazy');
  69 +
  70 + if ($img.attr('src') !== $img.data('original')) {
  71 + lazyLoad($img.trigger('appear'));
  72 + }
67 this.smallItem.eq(this.index).addClass('focus').siblings().removeClass('focus'); 73 this.smallItem.eq(this.index).addClass('focus').siblings().removeClass('focus');
68 this.bigItem.eq(this.index).fadeIn().siblings().fadeOut(); 74 this.bigItem.eq(this.index).fadeIn().siblings().fadeOut();
69 }, 75 },
@@ -6,7 +6,7 @@ var InfiniteLoad = require('../common/infinite-load'); @@ -6,7 +6,7 @@ var InfiniteLoad = require('../common/infinite-load');
6 6
7 (function($) { 7 (function($) {
8 var $container = $('div.commodity ul'); 8 var $container = $('div.commodity ul');
9 - var $load = $('.loading'); 9 + var $load = $('.loading a');
10 var load = new InfiniteLoad({ 10 var load = new InfiniteLoad({
11 offset: { 11 offset: {
12 height: function() { 12 height: function() {
@@ -40,7 +40,8 @@ var InfiniteLoad = require('../common/infinite-load'); @@ -40,7 +40,8 @@ var InfiniteLoad = require('../common/infinite-load');
40 load.emit(); 40 load.emit();
41 } else { 41 } else {
42 42
43 - $load.html('END'); 43 + load.stop();
  44 + $load.html('查看更多');
44 } 45 }
45 }, 46 },
46 error: function() { 47 error: function() {
@@ -12,7 +12,7 @@ require('../common/linkage-slider'); @@ -12,7 +12,7 @@ require('../common/linkage-slider');
12 require('../common/slider2'); 12 require('../common/slider2');
13 require('../common/new-arrivls'); 13 require('../common/new-arrivls');
14 14
15 -lazyLoad(); 15 +lazyLoad($('img.lazy'));
16 $('.slide-container').linkageSlider(); 16 $('.slide-container').linkageSlider();
17 $('.img-brand').slider2(); 17 $('.img-brand').slider2();
18 18
@@ -25,6 +25,16 @@ $.ajax({ @@ -25,6 +25,16 @@ $.ajax({
25 var brandTpl, 25 var brandTpl,
26 brandHtml; 26 brandHtml;
27 27
  28 + function brandShow(hidePage, showPage) {
  29 + lazyLoad($('li[data-page=' + showPage + ']').find('img.lazy').trigger('appear'));
  30 + $('.logo-brand').find('li[data-page=' + hidePage + ']').find('img').fadeOut('normal', function() {
  31 + $('.logo-brand').find('li').hide();
  32 +
  33 + $('.logo-brand').find('li[data-page=' + showPage + ']').show().find('img').fadeIn();
  34 + });
  35 +
  36 + }
  37 +
28 Handlebars.registerHelper('brandList', function(items, options) { 38 Handlebars.registerHelper('brandList', function(items, options) {
29 var out = '<ul>', 39 var out = '<ul>',
30 i = 0, 40 i = 0,
@@ -56,10 +66,11 @@ $.ajax({ @@ -56,10 +66,11 @@ $.ajax({
56 66
57 }); 67 });
58 brandHtml = '\{{#brandList logoBrand}}' + 68 brandHtml = '\{{#brandList logoBrand}}' +
59 - '<a href="\{{href}}"><img src="\{{img}}" alt=""></a>' + 69 + '<a href="\{{href}}"><img class="lazy" data-original="\{{img}}" alt=""></a>' +
60 '\{{/brandList}}'; 70 '\{{/brandList}}';
61 brandTpl = Handlebars.compile(brandHtml); 71 brandTpl = Handlebars.compile(brandHtml);
62 $('.logo-brand').html(brandTpl(data)); 72 $('.logo-brand').html(brandTpl(data));
  73 + lazyLoad($('.logo-brand').find('img.lazy'));
63 74
64 //品牌翻页 75 //品牌翻页
65 $('.logo-brand').on('click', '.next', function() { 76 $('.logo-brand').on('click', '.next', function() {
@@ -72,10 +83,7 @@ $.ajax({ @@ -72,10 +83,7 @@ $.ajax({
72 } else { 83 } else {
73 nextPage = page + 1; 84 nextPage = page + 1;
74 } 85 }
75 - $('.logo-brand').find('li[data-page=' + page + ']').find('img').fadeOut('normal', function() {  
76 - $('.logo-brand').find('li').hide();  
77 - $('.logo-brand').find('li[data-page=' + nextPage + ']').show().find('img').fadeIn();  
78 - }); 86 + brandShow(page, nextPage);
79 }); 87 });
80 88
81 $('.logo-brand').on('click', '.prev', function() { 89 $('.logo-brand').on('click', '.prev', function() {
@@ -88,11 +96,7 @@ $.ajax({ @@ -88,11 +96,7 @@ $.ajax({
88 } else { 96 } else {
89 prevPage = page - 1; 97 prevPage = page - 1;
90 } 98 }
91 -  
92 - $('.logo-brand').find('li[data-page=' + page + ']').find('img').fadeOut('normal', function() {  
93 - $('.logo-brand').find('li').hide();  
94 - $('.logo-brand').find('li[data-page=' + prevPage + ']').show().find('img').fadeIn();  
95 - }); 99 + brandShow(page, prevPage);
96 }); 100 });
97 } 101 }
98 }); 102 });
@@ -26,7 +26,10 @@ var $brandMoreTxt, $brandMoreIcon; @@ -26,7 +26,10 @@ var $brandMoreTxt, $brandMoreIcon;
26 26
27 //商品相关变量 27 //商品相关变量
28 var $goodsContainer = $('.goods-container'), 28 var $goodsContainer = $('.goods-container'),
29 - $goodItem = $goodsContainer.find('.good-info'); 29 + $goodItem = $goodsContainer.find('.good-info'),
  30 + $goodItemWrapper = $goodsContainer.find('.good-item-wrapper'),
  31 + $goodInfoMain = $goodsContainer.find('.good-info-main'),
  32 + $goodSelectColor = $goodsContainer.find('.good-select-color');
30 33
31 //价格相关变量 34 //价格相关变量
32 var $udPrice = $('.ud-price-range'), 35 var $udPrice = $('.ud-price-range'),
@@ -328,10 +331,46 @@ $('.senior-sub').on('click', '.multi-select', function() { @@ -328,10 +331,46 @@ $('.senior-sub').on('click', '.multi-select', function() {
328 * Added by wangchenglong at 2015/12/1 331 * Added by wangchenglong at 2015/12/1
329 */ 332 */
330 333
  334 +// 构造html
  335 +function createColorList(data) {
  336 + var colorListStr = '',
  337 + len = data.length,
  338 + row = 4, //每列ul放4个li
  339 + col = Math.ceil(len / row), //需要几**列**ul
  340 + i,
  341 + j,
  342 + index,
  343 + ulNum = 0;
  344 +
  345 + for (i = 0; i < col; i++) {
  346 + colorListStr += '<ul>';
  347 + for (j = 0; j < row; j++) {
  348 + index = i * row + j;
  349 + if (index === len) {
  350 + break;
  351 + }
  352 + colorListStr +=
  353 + '<li>' +
  354 + '<a href="' + data[i * row + j].url + '">' +
  355 + '<img src="' + data[i * row + j].src + '" />' +
  356 + '</a>' +
  357 + '</li>';
  358 +
  359 + if (j === row - 1) {
  360 + colorListStr += '</ul>';
  361 + ulNum++;
  362 + }
  363 + }
  364 + }
  365 + if (ulNum < col) {
  366 + colorListStr += '</ul>';
  367 + }
  368 + return colorListStr;
  369 +}
  370 +
331 //todo 371 //todo
332 -$goodItem.hover(function() { 372 +$goodItem.mouseenter(function() {
333 var $cloneStr, 373 var $cloneStr,
334 - $goodItemWrapper,  
335 activeIndex, 374 activeIndex,
336 X, 375 X,
337 left, 376 left,
@@ -343,29 +382,42 @@ $goodItem.hover(function() { @@ -343,29 +382,42 @@ $goodItem.hover(function() {
343 itemMr = 10, 382 itemMr = 10,
344 itemMb = 35; 383 itemMb = 35;
345 384
346 - $('.good-item-wrapper').remove();  
347 -  
348 activeIndex = $(this).index() + 1; 385 activeIndex = $(this).index() + 1;
349 386
350 X = (activeIndex % colNum) === 0 ? colNum : activeIndex % colNum; 387 X = (activeIndex % colNum) === 0 ? colNum : activeIndex % colNum;
351 Y = Math.ceil(activeIndex / colNum); 388 Y = Math.ceil(activeIndex / colNum);
352 left = (X - 1) * (itemW + itemMr) + 15 - 21; 389 left = (X - 1) * (itemW + itemMr) + 15 - 21;
353 - top = (Y - 1) * (itemH + itemMb) - 19; 390 + top = (Y - 1) * (itemH + itemMb) + 25 - 19;
354 391
355 $cloneStr = $(this).clone(); 392 $cloneStr = $(this).clone();
356 - $goodItemWrapper =  
357 - '<div class="good-item-wrapper" style="left:' + left + 'px;top:' + top + 'px;position:absolute;">' +  
358 - '<div class="good-select-color">' +  
359 - '</div>' +  
360 - '</div>';  
361 -  
362 393
  394 + $goodInfoMain.html('');
  395 + $goodSelectColor.html('');
  396 + $goodItemWrapper.css({
  397 + display: 'none'
  398 + });
  399 + $.ajax({
  400 + type: 'GET',
  401 + url: '/product/index/productColor',
  402 + dataType: 'json'
  403 + }).then(function(data) {
  404 +
  405 + $goodInfoMain.append($cloneStr);
  406 + $goodSelectColor.append($(createColorList(data)));
  407 + });
363 408
364 - $goodsContainer.append($goodItemWrapper);  
365 -  
366 - $('.good-item-wrapper').prepend($cloneStr); 409 + $goodItemWrapper.css({
  410 + left: left,
  411 + top: top,
  412 + display: 'inline-block'
  413 + });
367 414
368 -}, function() { 415 +});
369 416
370 - //todo 417 +$goodItemWrapper.mouseleave(function() {
  418 + $goodInfoMain.html('');
  419 + $goodSelectColor.html('');
  420 + $goodItemWrapper.css({
  421 + display: 'none'
  422 + });
371 }); 423 });
@@ -342,6 +342,7 @@ @@ -342,6 +342,7 @@
342 342
343 .commodity{ 343 .commodity{
344 margin-left: -10px; 344 margin-left: -10px;
  345 + margin-bottom:80px;
345 position: relative; 346 position: relative;
346 li{ 347 li{
347 float: left; 348 float: left;
@@ -383,10 +384,8 @@ @@ -383,10 +384,8 @@
383 position: absolute; 384 position: absolute;
384 bottom: 0; 385 bottom: 0;
385 width: 100%; 386 width: 100%;
386 - p{  
387 - text-align: center;  
388 - font-size: 20px;  
389 - } 387 + text-align: center;
  388 + font-size: 20px;
390 } 389 }
391 } 390 }
392 391
@@ -287,17 +287,50 @@ @@ -287,17 +287,50 @@
287 } 287 }
288 288
289 /*商品列表 289 /*商品列表
290 - *added by wangchenglong at 2015.12.1 290 + *Added by wangchenglong at 2015/12/1
291 */ 291 */
292 .goods-container { 292 .goods-container {
293 height: auto; 293 height: auto;
294 - padding: 0 15px;  
295 - margin-top: 25px; 294 + padding: 25px 15px 0 15px;
  295 + overflow: hidden;
296 position: relative; 296 position: relative;
  297 + width: 1150px + 10px;
297 298
298 - /*测试*/  
299 - width: 1150px; 299 + //标签
  300 + .tag-container {
  301 + font-size: 12px;
  302 + height: 22px;
  303 + line-height: 22px;
  304 +
  305 + .good-tag {
  306 + padding: 0 7px;
  307 + display: block;
  308 + float: left;
  309 + margin-right: 3px;
  310 +
  311 + &:nth-last-of-type(1) {
  312 + margin-right: 0;
  313 + }
  314 +
  315 + @each $tag, $tagColor, $tagBackground in (new-tag, #fff, #78dc7d),
  316 + (renew-tag, #fff, #78dc7e),
  317 + (new-festival-tag, #fff, #000000),
  318 + (yep-tag, #fff, #ff565b),
  319 + (ymp-tag, #fff, #ff565b),
  320 + (sale-tag, #fff, #ff565b) {
  321 + &.#{$tag} {
  322 + color: $tagColor;
  323 + background: $tagBackground;
  324 + }
  325 + }
  326 + &.limit-tag {
  327 + color: #4e4e4e;
  328 + border: 1px solid #4e4e4e;
  329 + }
  330 + }
  331 + }
300 332
  333 + //商品列表
301 .good-info { 334 .good-info {
302 height: 400px; //todo 335 height: 400px; //todo
303 margin-bottom: 35px; 336 margin-bottom: 35px;
@@ -305,45 +338,11 @@ @@ -305,45 +338,11 @@
305 margin-right: 10px; 338 margin-right: 10px;
306 float: left; 339 float: left;
307 340
308 - &.good-list-five {  
309 - margin-right: 0;  
310 - }  
311 -  
312 - /*标签*/  
313 - .tag-container {  
314 - font-size: 12px;  
315 - height: 22px;  
316 - line-height: 22px;  
317 -  
318 - .good-tag {  
319 - padding: 0 7px;  
320 - display: block;  
321 - float: left;  
322 - margin-right: 3px;  
323 -  
324 - &:nth-last-of-type(1) {  
325 - margin-right: 0;  
326 - }  
327 -  
328 - &.new-tag {  
329 - background: #78dc7d;  
330 - color: #fff;  
331 - }  
332 - &.yep-tag, .sale-tag {  
333 - background: #ff565b;  
334 - color: #fff;  
335 - }  
336 - &.limit-tag {  
337 - color: #4e4e4e;  
338 - border: 1px solid #4e4e4e;  
339 - }  
340 - }  
341 - }  
342 -  
343 - /*图片*/ 341 + //图片
344 .good-detail-img { 342 .good-detail-img {
345 width: 100%; 343 width: 100%;
346 height: 300px; 344 height: 300px;
  345 + position: relative;
347 346
348 .good-thumb, img.lazy { 347 .good-thumb, img.lazy {
349 display: block; 348 display: block;
@@ -351,9 +350,21 @@ @@ -351,9 +350,21 @@
351 width: 100%; 350 width: 100%;
352 height: 100%; 351 height: 100%;
353 } 352 }
  353 + .few-tag {
  354 + width: 100%;
  355 + position: absolute;
  356 + left: 0;
  357 + height: 16px;
  358 + line-height: 16px;
  359 + background: #ffac5b;
  360 + color: #fff;
  361 + font-size: 12px;
  362 + text-align: center;
  363 + bottom: 0;
  364 + }
354 } 365 }
355 366
356 - /*文本*/ 367 + //文本
357 .good-detail-text { 368 .good-detail-text {
358 color: #222; 369 color: #222;
359 font-size: 12px; 370 font-size: 12px;
@@ -369,17 +380,129 @@ @@ -369,17 +380,129 @@
369 margin-top: 10px; 380 margin-top: 10px;
370 } 381 }
371 } 382 }
  383 +
  384 + .col-btn {
  385 + position: absolute;
  386 + top: 15px;
  387 + right: 15px;
  388 + color: #ccc;
  389 + font-size: 12px;
  390 + display: none;
  391 + }
372 } 392 }
373 393
374 - /*弹层*/ 394 + //弹层
375 .good-item-wrapper { 395 .good-item-wrapper {
376 - border: 1px solid red; 396 + border: 1px solid #dddddd;
377 padding-left: 20px; 397 padding-left: 20px;
378 padding-top: 18px; 398 padding-top: 18px;
  399 + padding-right: 20px;
  400 + position: absolute;
  401 + background: #fff;
  402 + display: none;
  403 +
  404 + .good-info-main{
  405 + float: left;
  406 +
  407 + .col-btn {
  408 + display: block;
  409 +
  410 + &:hover {
  411 + color: #f95b4f;
  412 + cursor: pointer;
  413 + }
  414 + }
  415 + }
  416 +
  417 + .good-select-color {
  418 + float: left;
  419 + margin-top: 22px;
  420 +
  421 + ul {
  422 + display: block;
  423 + float: left;
  424 + margin-left: 15px;
  425 + }
  426 +
  427 + li {
  428 + width: 50px;
  429 + margin-bottom: 15px;
  430 +
  431 + a, img {
  432 + display: block;
  433 + overflow: hidden;
  434 + width: 100%;
  435 + }
  436 + }
  437 + }
  438 +
  439 + .good-info {
  440 + margin-right: 10px;
  441 + }
379 } 442 }
380 - }  
381 - /*商品列表end*/  
382 443
  444 + //每行六个商品
  445 + &.six-per-line {
  446 + .good-info {
  447 + height: 400px; //todo
  448 + margin-bottom: 35px;
  449 + width: 222px;
  450 +
  451 + //图片
  452 + .good-detail-img {
  453 + width: 100%;
  454 + height: 300px;
  455 + position: relative;
  456 +
  457 + .good-thumb, img.lazy {
  458 + display: block;
  459 + overflow: hidden;
  460 + width: 100%;
  461 + height: 100%;
  462 + }
  463 + .few-tag {
  464 + width: 100%;
  465 + position: absolute;
  466 + left: 0;
  467 + height: 16px;
  468 + line-height: 16px;
  469 + background: #ffac5b;
  470 + color: #fff;
  471 + font-size: 12px;
  472 + text-align: center;
  473 + bottom: 0;
  474 + }
  475 + }
  476 +
  477 + //文本
  478 + .good-detail-text {
  479 + color: #222;
  480 + font-size: 12px;
  481 + text-align: center;
  482 +
  483 + > a {
  484 + margin-top: 16px;
  485 + line-height: 1.5;
  486 + display: block;
  487 + }
  488 +
  489 + > .price {
  490 + margin-top: 10px;
  491 + }
  492 + }
  493 +
  494 + .col-btn {
  495 + position: absolute;
  496 + top: 15px;
  497 + right: 15px;
  498 + color: #ccc;
  499 + font-size: 12px;
  500 + display: none;
  501 + }
  502 + }
  503 + }
  504 + }
  505 + //商品列表END
383 .opt-banner { 506 .opt-banner {
384 height: 48px; 507 height: 48px;
385 background: #f5f7f6; 508 background: #f5f7f6;
@@ -274,6 +274,30 @@ class BoysController extends AbstractAction @@ -274,6 +274,30 @@ class BoysController extends AbstractAction
274 array( 274 array(
275 'href' => '/?gender=1,3', 275 'href' => '/?gender=1,3',
276 'img' => 'http://img12.static.yhbimg.com/taobaocms/2015/11/27/09/02a4f1c10e1e81574520e5c0239741a076.jpg' 276 'img' => 'http://img12.static.yhbimg.com/taobaocms/2015/11/27/09/02a4f1c10e1e81574520e5c0239741a076.jpg'
  277 + ),
  278 + array(
  279 + 'href' => '/?gender=1,3',
  280 + 'img' => 'http://img10.static.yhbimg.com/taobaocms/2015/11/26/12/01c3b99f554ad50d9e5a9900719715c94c.jpg'
  281 + ),
  282 + array(
  283 + 'href' => '/?gender=1,3',
  284 + 'img' => 'http://img12.static.yhbimg.com/taobaocms/2015/11/27/09/02a4f1c10e1e81574520e5c0239741a076.jpg'
  285 + ),
  286 + array(
  287 + 'href' => '/?gender=1,3',
  288 + 'img' => 'http://img10.static.yhbimg.com/taobaocms/2015/11/26/12/01c3b99f554ad50d9e5a9900719715c94c.jpg'
  289 + ),
  290 + array(
  291 + 'href' => '/?gender=1,3',
  292 + 'img' => 'http://img12.static.yhbimg.com/taobaocms/2015/11/27/09/02a4f1c10e1e81574520e5c0239741a076.jpg'
  293 + ),
  294 + array(
  295 + 'href' => '/?gender=1,3',
  296 + 'img' => 'http://img10.static.yhbimg.com/taobaocms/2015/11/26/12/01c3b99f554ad50d9e5a9900719715c94c.jpg'
  297 + ),
  298 + array(
  299 + 'href' => '/?gender=1,3',
  300 + 'img' => 'http://img12.static.yhbimg.com/taobaocms/2015/11/27/09/02a4f1c10e1e81574520e5c0239741a076.jpg'
277 ) 301 )
278 ), 302 ),
279 'smallSlide' => array( 303 'smallSlide' => array(
@@ -284,6 +308,30 @@ class BoysController extends AbstractAction @@ -284,6 +308,30 @@ class BoysController extends AbstractAction
284 array( 308 array(
285 'href' => 'http://sale.yohobuy.com/?specialsale_id=13&gender=1,3', 309 'href' => 'http://sale.yohobuy.com/?specialsale_id=13&gender=1,3',
286 'img' => 'http://img10.static.yhbimg.com/taobaocms/2015/11/27/09/015b6a29ee526edeaacd13f4a7c81475f0.jpg?imageMogr2/thumbnail/138x54/extent/138x54/background/d2hpdGU=/position/center/quality/90' 310 'img' => 'http://img10.static.yhbimg.com/taobaocms/2015/11/27/09/015b6a29ee526edeaacd13f4a7c81475f0.jpg?imageMogr2/thumbnail/138x54/extent/138x54/background/d2hpdGU=/position/center/quality/90'
  311 + ),
  312 + array(
  313 + 'href' => 'http://sale.yohobuy.com/?specialsale_id=13&gender=1,3',
  314 + 'img' => 'http://img13.static.yhbimg.com/taobaocms/2015/11/26/12/024a810cfa89d67569c6c3bacedba8869a.jpg?imageMogr2/thumbnail/138x54/extent/138x54/background/d2hpdGU=/position/center/quality/90'
  315 + ),
  316 + array(
  317 + 'href' => 'http://sale.yohobuy.com/?specialsale_id=13&gender=1,3',
  318 + 'img' => 'http://img10.static.yhbimg.com/taobaocms/2015/11/27/09/015b6a29ee526edeaacd13f4a7c81475f0.jpg?imageMogr2/thumbnail/138x54/extent/138x54/background/d2hpdGU=/position/center/quality/90'
  319 + ),
  320 + array(
  321 + 'href' => 'http://sale.yohobuy.com/?specialsale_id=13&gender=1,3',
  322 + 'img' => 'http://img13.static.yhbimg.com/taobaocms/2015/11/26/12/024a810cfa89d67569c6c3bacedba8869a.jpg?imageMogr2/thumbnail/138x54/extent/138x54/background/d2hpdGU=/position/center/quality/90'
  323 + ),
  324 + array(
  325 + 'href' => 'http://sale.yohobuy.com/?specialsale_id=13&gender=1,3',
  326 + 'img' => 'http://img10.static.yhbimg.com/taobaocms/2015/11/27/09/015b6a29ee526edeaacd13f4a7c81475f0.jpg?imageMogr2/thumbnail/138x54/extent/138x54/background/d2hpdGU=/position/center/quality/90'
  327 + ),
  328 + array(
  329 + 'href' => 'http://sale.yohobuy.com/?specialsale_id=13&gender=1,3',
  330 + 'img' => 'http://img13.static.yhbimg.com/taobaocms/2015/11/26/12/024a810cfa89d67569c6c3bacedba8869a.jpg?imageMogr2/thumbnail/138x54/extent/138x54/background/d2hpdGU=/position/center/quality/90'
  331 + ),
  332 + array(
  333 + 'href' => 'http://sale.yohobuy.com/?specialsale_id=13&gender=1,3',
  334 + 'img' => 'http://img10.static.yhbimg.com/taobaocms/2015/11/27/09/015b6a29ee526edeaacd13f4a7c81475f0.jpg?imageMogr2/thumbnail/138x54/extent/138x54/background/d2hpdGU=/position/center/quality/90'
287 ) 335 )
288 ) 336 )
289 ) 337 )
@@ -443,8 +491,8 @@ class BoysController extends AbstractAction @@ -443,8 +491,8 @@ class BoysController extends AbstractAction
443 /** 491 /**
444 * 男装首页 新品上架 接口数据 492 * 男装首页 新品上架 接口数据
445 * 493 *
446 - * @param int $pageIndex 当前页数  
447 - * @param int $pageCount 一页显示个数 494 + * @param int pageIndex 当前页数
  495 + * @param int pageCount 一页显示个数
448 * @param string flag 类型(男装/女装等,用于区分) 496 * @param string flag 类型(男装/女装等,用于区分)
449 * @return json 497 * @return json
450 */ 498 */
@@ -457,6 +505,10 @@ class BoysController extends AbstractAction @@ -457,6 +505,10 @@ class BoysController extends AbstractAction
457 if (!$this->isAjax()) { 505 if (!$this->isAjax()) {
458 break; 506 break;
459 } 507 }
  508 + $pageIndex = $this->post('pageIndex');
  509 + if($pageIndex>=3){
  510 + break;
  511 + }
460 512
461 $result=array( 513 $result=array(
462 'code'=>200, 514 'code'=>200,
@@ -322,7 +322,7 @@ class IndexController extends AbstractAction @@ -322,7 +322,7 @@ class IndexController extends AbstractAction
322 'thumb' => 'http://img12.static.yhbimg.com/goodsimg/2015/11/22/03/02c17af44dc23aa5a62d61cb59a05380bc.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90', 322 'thumb' => 'http://img12.static.yhbimg.com/goodsimg/2015/11/22/03/02c17af44dc23aa5a62d61cb59a05380bc.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
323 'name' => 'adidas Originals FORUM 中帮拼色休闲板鞋', 323 'name' => 'adidas Originals FORUM 中帮拼色休闲板鞋',
324 'salePrice' => '899', 324 'salePrice' => '899',
325 - 'goodListLast' => false 325 + 'isFew' => true
326 ), 326 ),
327 1 => array( 327 1 => array(
328 'tags' => array( 328 'tags' => array(
@@ -333,7 +333,7 @@ class IndexController extends AbstractAction @@ -333,7 +333,7 @@ class IndexController extends AbstractAction
333 'thumb' => 'http://img12.static.yhbimg.com/goodsimg/2015/11/22/03/02c17af44dc23aa5a62d61cb59a05380bc.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90', 333 'thumb' => 'http://img12.static.yhbimg.com/goodsimg/2015/11/22/03/02c17af44dc23aa5a62d61cb59a05380bc.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
334 'name' => 'adidas Originals FORUM 中帮拼色休闲板鞋', 334 'name' => 'adidas Originals FORUM 中帮拼色休闲板鞋',
335 'salePrice' => '899', 335 'salePrice' => '899',
336 - 'goodListLast' => false 336 + 'showColBtn' => true
337 ), 337 ),
338 2 => array( 338 2 => array(
339 'tags' => array( 339 'tags' => array(
@@ -343,15 +343,13 @@ class IndexController extends AbstractAction @@ -343,15 +343,13 @@ class IndexController extends AbstractAction
343 'url' => 'http://adidas.yohobuy.com/?gender=1,3', 343 'url' => 'http://adidas.yohobuy.com/?gender=1,3',
344 'thumb' => 'http://img12.static.yhbimg.com/goodsimg/2015/11/22/03/02c17af44dc23aa5a62d61cb59a05380bc.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90', 344 'thumb' => 'http://img12.static.yhbimg.com/goodsimg/2015/11/22/03/02c17af44dc23aa5a62d61cb59a05380bc.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
345 'name' => 'adidas Originals FORUM 中帮拼色休闲板鞋', 345 'name' => 'adidas Originals FORUM 中帮拼色休闲板鞋',
346 - 'salePrice' => '899',  
347 - 'goodListLast' => false 346 + 'salePrice' => '899'
348 ), 347 ),
349 3 => array( 348 3 => array(
350 'url' => 'http://adidas.yohobuy.com/?gender=1,3', 349 'url' => 'http://adidas.yohobuy.com/?gender=1,3',
351 'thumb' => 'http://img12.static.yhbimg.com/goodsimg/2015/11/22/03/02c17af44dc23aa5a62d61cb59a05380bc.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90', 350 'thumb' => 'http://img12.static.yhbimg.com/goodsimg/2015/11/22/03/02c17af44dc23aa5a62d61cb59a05380bc.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
352 'name' => 'adidas Originals FORUM 中帮拼色休闲板鞋', 351 'name' => 'adidas Originals FORUM 中帮拼色休闲板鞋',
353 - 'salePrice' => '899',  
354 - 'goodListLast' => false 352 + 'salePrice' => '899'
355 ), 353 ),
356 4 => array( 354 4 => array(
357 'tags' => array( 355 'tags' => array(
@@ -361,8 +359,7 @@ class IndexController extends AbstractAction @@ -361,8 +359,7 @@ class IndexController extends AbstractAction
361 'url' => 'http://adidas.yohobuy.com/?gender=1,3', 359 'url' => 'http://adidas.yohobuy.com/?gender=1,3',
362 'thumb' => 'http://img12.static.yhbimg.com/goodsimg/2015/11/22/03/02c17af44dc23aa5a62d61cb59a05380bc.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90', 360 'thumb' => 'http://img12.static.yhbimg.com/goodsimg/2015/11/22/03/02c17af44dc23aa5a62d61cb59a05380bc.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
363 'name' => 'adidas Originals FORUM 中帮拼色休闲板鞋', 361 'name' => 'adidas Originals FORUM 中帮拼色休闲板鞋',
364 - 'salePrice' => '899',  
365 - 'goodListLast' => 'five' 362 + 'salePrice' => '899'
366 ), 363 ),
367 5 => array( 364 5 => array(
368 'tags' => array( 365 'tags' => array(
@@ -372,11 +369,29 @@ class IndexController extends AbstractAction @@ -372,11 +369,29 @@ class IndexController extends AbstractAction
372 'url' => 'http://adidas.yohobuy.com/?gender=1,3', 369 'url' => 'http://adidas.yohobuy.com/?gender=1,3',
373 'thumb' => 'http://img12.static.yhbimg.com/goodsimg/2015/11/22/03/02c17af44dc23aa5a62d61cb59a05380bc.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90', 370 'thumb' => 'http://img12.static.yhbimg.com/goodsimg/2015/11/22/03/02c17af44dc23aa5a62d61cb59a05380bc.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
374 'name' => 'adidas Originals FORUM 中帮拼色休闲板鞋', 371 'name' => 'adidas Originals FORUM 中帮拼色休闲板鞋',
375 - 'salePrice' => '899',  
376 - 'goodListLast' => false 372 + 'salePrice' => '899'
377 ) 373 )
378 ) 374 )
379 ); 375 );
380 $this->_view->display('list', $data); 376 $this->_view->display('list', $data);
381 } 377 }
  378 +
  379 + /*
  380 + * 获取商品颜色
  381 + */
  382 + public function productColorAction()
  383 + {
  384 + $data = array(
  385 + array(
  386 + 'url' => 'http://item.yohobuy.com/product/pro_187471_252595/NIKEAIRMAX90ESSENTIAL537384126.html',
  387 + 'src' => 'http://img12.static.yhbimg.com/goodsimg/2015/09/24/09/028738fa8afcf5031733bcdfa83e397f0f.jpg?imageMogr2/thumbnail/75x100/extent/75x100/background/d2hpdGU=/position/center/quality/90'
  388 + ),
  389 + array(
  390 + 'url' => 'http://item.yohobuy.com/product/pro_187471_252595/NIKEAIRMAX90ESSENTIAL537384126.html',
  391 + 'src' => 'http://img12.static.yhbimg.com/goodsimg/2015/09/24/09/028738fa8afcf5031733bcdfa83e397f0f.jpg?imageMogr2/thumbnail/75x100/extent/75x100/background/d2hpdGU=/position/center/quality/90'
  392 + ),
  393 + );
  394 +
  395 + $this->echoJson($data);
  396 + }
382 } 397 }