Authored by Rock Zhang

Merge branch 'feature/wap323' into 'feature/wap323'

1.有货币页面改造 2.品牌一览页面增加顶部导航。 code review by Zhang Zhen

See merge request !90
@@ -13,6 +13,7 @@ var swiper, @@ -13,6 +13,7 @@ var swiper,
13 $fixTitleBar, 13 $fixTitleBar,
14 $brandList = $('.brand-list'), 14 $brandList = $('.brand-list'),
15 $icon = $('.search-icon'), 15 $icon = $('.search-icon'),
  16 + $genderItem = $('.genderNav li'),
16 hotBrandsSwiper; 17 hotBrandsSwiper;
17 18
18 var searchH = $('.newbrand-search').outerHeight(), 19 var searchH = $('.newbrand-search').outerHeight(),
@@ -177,3 +178,11 @@ if ($('.brand-search-page').length) { @@ -177,3 +178,11 @@ if ($('.brand-search-page').length) {
177 }); 178 });
178 179
179 } 180 }
  181 +
  182 +if ($genderItem.length > 0) {
  183 + $genderItem.on('touchstart', function() {
  184 + $('.genderNav ul .active').removeClass('active');
  185 + $(this).addClass('active');
  186 + window.location.search = 'channel=' + ($(this).data('id') + 1);
  187 + });
  188 +}
@@ -193,4 +193,4 @@ exports.set = function(c) { @@ -193,4 +193,4 @@ exports.set = function(c) {
193 }); 193 });
194 }; 194 };
195 195
196 -require('./maybe-like');  
  196 +require('./maybe-like')();
@@ -4,146 +4,157 @@ @@ -4,146 +4,157 @@
4 * @date: 2015/10/12 4 * @date: 2015/10/12
5 */ 5 */
6 6
7 -var $ = require('jquery'),  
8 - Hammer = require('yoho.hammer'),  
9 - tip = require('../plugin/tip'),  
10 - loading = require('../plugin/loading'),  
11 - lazyLoad = require('yoho.lazyload');  
12 -  
13 -var navHammer,  
14 - winH = $(window).height(),  
15 - $goodList = $('#goods-list'),  
16 - searching = false,  
17 - page = 0,  
18 - gender = null,  
19 - kidsType = $('.mobile-wrap').hasClass('kids-wrap') ? true : false,  
20 - lifestyleType = $('.mobile-wrap').hasClass('lifestyle-wrap') ? true : false,  
21 - num,  
22 - url;  
23 -  
24 -var $curNav,  
25 - index,  
26 - $navList = $('#maybe-like-nav');  
27 -  
28 -//ajax url  
29 -if (kidsType) {  
30 - url = '/product/recom/maylikekids';  
31 -} else if (lifestyleType) {  
32 - url = '/product/recom/maylikelife';  
33 -} else {  
34 - gender = $('.mobile-wrap').hasClass('boys-wrap') ? '1,3' : '2,3',  
35 - url = '/product/recom/maylike?gender=' + gender;  
36 -}  
37 -  
38 -$curNav = $navList.children('.focus');  
39 -  
40 -if (lifestyleType) {  
41 - navHammer = new Hammer($navList[0]);  
42 - navHammer.on('tap', function(e) {  
43 - var $this = $(e.target).closest('li'),  
44 - $goods = $('.goods-list'),  
45 - $content;  
46 -  
47 - e.preventDefault();  
48 - if ($this.hasClass('focus')) {  
49 - return;  
50 - } 7 +module.exports = function(specificGender) {
  8 + var $ = require('jquery'),
  9 + Hammer = require('yoho.hammer'),
  10 + tip = require('../plugin/tip'),
  11 + loading = require('../plugin/loading'),
  12 + lazyLoad = require('yoho.lazyload');
  13 +
  14 + var navHammer,
  15 + winH = $(window).height(),
  16 + $goodList = $('#goods-list'),
  17 + searching = false,
  18 + page = 0,
  19 + gender = null,
  20 + num,
  21 + url;
  22 +
  23 + //The kidsType can be specified by the parameter. Add by @ZhaoBiao
  24 + var kidsType = specificGender === 'kids' || $('.mobile-wrap').hasClass('kids-wrap') ? true : false,
  25 + lifestyleType = specificGender === 'lifestyle' ||
  26 + $('.mobile-wrap').hasClass('lifestyle-wrap') ? true : false;
  27 +
  28 + var $curNav,
  29 + index,
  30 + $navList = $('#maybe-like-nav');
  31 +
  32 + //ajax url
  33 + if (kidsType) {
  34 + url = '/product/recom/maylikekids';
  35 + } else if (lifestyleType) {
  36 + url = '/product/recom/maylikelife';
  37 + } else {
  38 + gender = (specificGender === 'boys' || $('.mobile-wrap').hasClass('boys-wrap')) ?
  39 + '1,3' : '2,3',
  40 + url = '/product/recom/maylike?gender=' + gender;
  41 + }
  42 +
  43 + $curNav = $navList.children('.focus');
51 44
52 - index = $this.index(); 45 + if (lifestyleType) {
  46 + navHammer = new Hammer($navList[0]);
  47 + navHammer.on('tap', function(e) {
  48 + var $this = $(e.target).closest('li'),
  49 + $goods = $('.goods-list'),
  50 + $content;
53 51
54 - $this.addClass('focus');  
55 - $curNav.removeClass('focus'); 52 + e.preventDefault();
  53 + if ($this.hasClass('focus')) {
  54 + return;
  55 + }
56 56
57 - $goods.not('.hide').addClass('hide');  
58 - $content = $goods.eq(index);  
59 - $content.removeClass('hide'); 57 + index = $this.index();
60 58
61 - $curNav = $this; 59 + $this.addClass('focus');
  60 + $curNav.removeClass('focus');
62 61
63 - $(document).trigger('scroll'); //Trigger lazyLoad  
64 - e.srcEvent.stopPropagation();  
65 - });  
66 -} 62 + $goods.not('.hide').addClass('hide');
  63 + $content = $goods.eq(index);
  64 + $content.removeClass('hide');
67 65
68 -loading.init($('.maybe-like')); 66 + $curNav = $this;
69 67
70 -function search() {  
71 - if (searching) {  
72 - return; 68 + $(document).trigger('scroll'); //Trigger lazyLoad
  69 + e.srcEvent.stopPropagation();
  70 + });
73 } 71 }
74 - searching = true;  
75 -  
76 - loading.showLoadingMask();  
77 -  
78 - //num = $goodList.find('.good-info').length;  
79 - $.ajax({  
80 - type: 'GET',  
81 - url: url,  
82 - data: {  
83 - page: page + 1  
84 - },  
85 - success: function(data) {  
86 - if (data === ' ') {  
87 - searching = false;  
88 - loading.hideLoadingMask();  
89 - if (gender) {  
90 - if (gender === '1,3') {  
91 - url = '/boys/bottomBanner';  
92 - } else {  
93 - url = '/girls/bottomBanner';  
94 - }  
95 - $.ajax({  
96 - type: 'GET',  
97 - url: url,  
98 - success: function(data) {  
99 - if (data && data.img) {  
100 - $('#load-more-img').show();  
101 - $('#load-more-img a').attr('href', data.url);  
102 - $('#load-more-img a > img').attr('src', data.img);  
103 - }  
104 - },  
105 - error: function() { 72 +
  73 + loading.init($('.maybe-like'));
  74 +
  75 + function search() {
  76 + if (searching) {
  77 + return;
  78 + }
  79 + searching = true;
  80 +
  81 + loading.showLoadingMask();
  82 +
  83 + //num = $goodList.find('.good-info').length;
  84 + $.ajax({
  85 + type: 'GET',
  86 + url: url,
  87 + data: {
  88 + page: page + 1
  89 + },
  90 + success: function(data) {
  91 + if (data === ' ') {
  92 + searching = false;
  93 + loading.hideLoadingMask();
  94 + if (gender) {
  95 + if (gender === '1,3') {
  96 + url = '/boys/bottomBanner';
  97 + } else {
  98 + url = '/girls/bottomBanner';
106 } 99 }
107 - }); 100 + $.ajax({
  101 + type: 'GET',
  102 + url: url,
  103 + success: function(data) {
  104 + if (data && data.img) {
  105 + $('#load-more-img').show();
  106 + $('#load-more-img a').attr('href', data.url);
  107 + $('#load-more-img a > img').attr('src', data.img);
  108 + }
  109 + },
  110 + error: function() {
  111 + }
  112 + });
108 113
  114 + }
  115 + return;
109 } 116 }
110 - return;  
111 - }  
112 117
113 - num = $goodList.find('.good-info').length; 118 + num = $goodList.find('.good-info').length;
  119 +
  120 + $goodList.append(data);
114 121
115 - $goodList.append(data); 122 + // 2015/10/31 fei.hong: 修复第一页分页不显示图片的问题
  123 + if (num === 0) {
  124 + lazyLoad($goodList.find('.good-info').find('img.lazy'));
  125 + } else {
  126 + lazyLoad($goodList.find('.good-info:gt(' + (num - 1) + ')').find('img.lazy'));
  127 + }
116 128
117 - // 2015/10/31 fei.hong: 修复第一页分页不显示图片的问题  
118 - if (num === 0) {  
119 - lazyLoad($goodList.find('.good-info').find('img.lazy'));  
120 - } else {  
121 - lazyLoad($goodList.find('.good-info:gt(' + (num - 1) + ')').find('img.lazy')); 129 + searching = false;
  130 + loading.hideLoadingMask();
  131 + page++;
  132 + },
  133 + error: function() {
  134 + tip.show('网络断开连接了~');
  135 + searching = false;
  136 + loading.hideLoadingMask();
122 } 137 }
  138 + });
  139 + }
123 140
124 - searching = false;  
125 - loading.hideLoadingMask();  
126 - page++;  
127 - },  
128 - error: function() {  
129 - tip.show('网络断开连接了~');  
130 - searching = false;  
131 - loading.hideLoadingMask();  
132 - } 141 + $('.maybe-like p').on('touchstart', function(e) {
  142 + search();
133 }); 143 });
134 -}  
135 144
136 -$('.maybe-like p').on('touchstart', function(e) {  
137 - search();  
138 -}); 145 + function scrollHandler() {
  146 + if ($(window).scrollTop() + winH >= $(document).height() - 200) {
  147 + search();
  148 + }
  149 + }
139 150
140 -function scrollHandler() {  
141 - if ($(window).scrollTop() + winH >= $(document).height() - 200) { 151 + // 优惠券页面直接加载你可能喜欢。add by @zhaobiao
  152 + if (specificGender) {
142 search(); 153 search();
143 } 154 }
144 -}  
145 155
146 -//srcoll to load more  
147 -$(window).scroll(function() {  
148 - window.requestAnimationFrame(scrollHandler);  
149 -});  
  156 + //srcoll to load more
  157 + $(window).scroll(function() {
  158 + window.requestAnimationFrame(scrollHandler);
  159 + });
  160 +};
  1 +/**
  2 + * 新有货币界面
  3 + * @author: 赵彪<bill.zhao@yoho.cn>
  4 + * @date: 2015/12/30
  5 + */
  6 +
  7 +function getGender() {
  8 + return window.cookie('_Channel');
  9 +}
  10 +
  11 +require('../home/maybe-like')(getGender());
  12 +
@@ -19,3 +19,4 @@ require('./logistic'); @@ -19,3 +19,4 @@ require('./logistic');
19 require('./pay'); 19 require('./pay');
20 require('./personal-details'); 20 require('./personal-details');
21 require('./currency'); 21 require('./currency');
  22 +require('./currency-new');
1 .brand-page { 1 .brand-page {
  2 + .re-pos-search {
  3 + top: 170rem / $pxConvertRem !important;
  4 + }
  5 + .genderNav {
  6 + display: block;
  7 + width: 100%;
  8 + height: 80rem / $pxConvertRem;
  9 + line-height: 80rem / $pxConvertRem;
  10 + overflow: hidden;
  11 + color: #aeaeae;
  12 + z-index: 3;
  13 + position: fixed;
  14 + top: 90rem / $pxConvertRem;
  15 + border-bottom: 1px solid #e1e1e1;
  16 + background-color: #fff;
  17 +
  18 + ul{
  19 + width: 100%;
  20 + height: 90%;
  21 + overflow: hidden;
  22 + li{
  23 + width: 25%;
  24 + height: 100%;
  25 + overflow: hidden;
  26 + float: left;
  27 + text-align: center;
  28 + position: relative;
  29 + font-size: 28rem / $pxConvertRem;
  30 + i{
  31 + width: 100%;
  32 + height: 40%;
  33 + overflow: hidden;
  34 + display: block;
  35 + }
  36 + span:not(.split-border){
  37 + width: 100%;
  38 + height: auto;
  39 + overflow: hidden;
  40 + display: block;
  41 + //line-height: 40rem / $pxConvertRem;
  42 + }
  43 +
  44 + .split-border {
  45 + display: inline-block;
  46 + width: 2px;
  47 + height: 1rem;
  48 + background-color: #e1e1e1;
  49 + position: absolute;
  50 + top: 30%;
  51 + right: 0;
  52 + }
  53 + }
  54 +
  55 + li:last-child {
  56 + .split-border {
  57 + display: none;
  58 + }
  59 + }
  60 +
  61 + li.active {
  62 + color: #444;
  63 + }
  64 + }
  65 + }
2 .newbrand-search { 66 .newbrand-search {
3 width: 93.75%; 67 width: 93.75%;
4 height: 60rem / $pxConvertRem; 68 height: 60rem / $pxConvertRem;
1 {{> layout/header}} 1 {{> layout/header}}
2 <div class="brand-page yoho-page"> 2 <div class="brand-page yoho-page">
3 {{# channel}} 3 {{# channel}}
4 -  
5 - <div class="newbrand-search"> 4 +
  5 + <div class="genderNav">
  6 + <ul>
  7 + {{# channels}}
  8 + <li {{#if active}}class="active"{{/if}} data-id="{{@index}}">
  9 + <span>{{name}}</span>
  10 + <span class="split-border"></span>
  11 + </li>
  12 + {{/channels}}
  13 + </ul>
  14 + </div>
  15 +
  16 + <div class="newbrand-search re-pos-search">
6 <div class="search-box clearfix"> 17 <div class="search-box clearfix">
7 <a href="{{searchUrl}}" > 18 <a href="{{searchUrl}}" >
8 <input type="text" class="search-input" placeholder="查找品牌" readonly="true"> 19 <input type="text" class="search-input" placeholder="查找品牌" readonly="true">
1 {{> layout/header}} 1 {{> layout/header}}
2 <div class="yoho-coin-new-page yoho-page"> 2 <div class="yoho-coin-new-page yoho-page">
3 <div class="coin"> 3 <div class="coin">
  4 + {{# yohoCoin}}
4 <p class="coin-num"> 5 <p class="coin-num">
5 - 7876 6 + {{coinNum}}
6 </p> 7 </p>
7 <p class="info"> 8 <p class="info">
8 <span class="dollar"></span> 9 <span class="dollar"></span>
9 YOHO 10 YOHO
10 </p> 11 </p>
11 - <a href="" class="more">查看明细</a> 12 + <a href="/home/currencyDetail" class="more">查看明细</a>
12 <div class="coin-tip"> 13 <div class="coin-tip">
13 <span class="icon">!</span> 14 <span class="icon">!</span>
14 - 您有300个YOHO币即将于20171231日过期,请尽快使用 15 + {{notice}}
15 </div> 16 </div>
  17 + {{/ yohoCoin}}
16 </div> 18 </div>
17 <div class="banner"> 19 <div class="banner">
18 - <a href=""> 20 + {{#banner}}
  21 + <a href="{{url}}">
19 {{!-- 演示图片 --}} 22 {{!-- 演示图片 --}}
20 - <img src="http://temp.im/640x200" alt=""> 23 + <img src="{{img}}" alt="img">
21 </a> 24 </a>
  25 + {{/banner}}
22 </div> 26 </div>
23 27
24 {{> home/maybe_like}} 28 {{> home/maybe_like}}
@@ -81,7 +81,7 @@ @@ -81,7 +81,7 @@
81 优惠券 81 优惠券
82 <span class="iconfont num">{{coupon_num}} &#xe604;</span> 82 <span class="iconfont num">{{coupon_num}} &#xe604;</span>
83 </a> 83 </a>
84 - <a class="list-item" href="/home/currencyDetail"> 84 + <a class="list-item" href="/home/currency">
85 <span class="iconfont icon">&#xe635;</span> 85 <span class="iconfont icon">&#xe635;</span>
86 YOHO 86 YOHO
87 <span class="iconfont num">{{yoho_coin_num}} &#xe604;</span> 87 <span class="iconfont num">{{yoho_coin_num}} &#xe604;</span>
@@ -334,3 +334,9 @@ @@ -334,3 +334,9 @@
334 seajs.use('js/me/currency'); 334 seajs.use('js/me/currency');
335 </script> 335 </script>
336 {{/if}} 336 {{/if}}
  337 +
  338 +{{#if currencyPage}}
  339 +<script>
  340 + seajs.use('js/me/currency-new');
  341 +</script>
  342 +{{/if}}
@@ -264,8 +264,9 @@ class HomeController extends AbstractAction @@ -264,8 +264,9 @@ class HomeController extends AbstractAction
264 // banenr数据 264 // banenr数据
265 $currency['banner'] = UserModel::getYohoCoinBanner(); 265 $currency['banner'] = UserModel::getYohoCoinBanner();
266 $currency['pageFooter'] = true; 266 $currency['pageFooter'] = true;
  267 + $currency['currencyPage'] = true;
267 268
268 - $this->_view->display('currency', $currency); 269 + $this->_view->display('currency-new', $currency);
269 } 270 }
270 271
271 /** 272 /**
@@ -8,7 +8,7 @@ use Plugin\Helpers; @@ -8,7 +8,7 @@ use Plugin\Helpers;
8 8
9 /** 9 /**
10 * 品牌相关的模板数据模型 10 * 品牌相关的模板数据模型
11 - * 11 + *
12 * @name BrandModel 12 * @name BrandModel
13 * @package Models/Category 13 * @package Models/Category
14 * @copyright yoho.inc 14 * @copyright yoho.inc
@@ -29,7 +29,7 @@ class BrandModel @@ -29,7 +29,7 @@ class BrandModel
29 29
30 /** 30 /**
31 * 根据频道获取品牌一览数据 31 * 根据频道获取品牌一览数据
32 - * 32 + *
33 * @param int $channel 1表示男生频道, 2表示女生频道, 3表示潮童频道, 4表示创意生活频道 33 * @param int $channel 1表示男生频道, 2表示女生频道, 3表示潮童频道, 4表示创意生活频道
34 * @return array 34 * @return array
35 */ 35 */
@@ -40,20 +40,20 @@ class BrandModel @@ -40,20 +40,20 @@ class BrandModel
40 40
41 // 设置品牌一览顶部频道导航 41 // 设置品牌一览顶部频道导航
42 $channels = array( 42 $channels = array(
43 - 1 => array(  
44 - 'name' => 'Boy' 43 + array(
  44 + 'name' => 'Boy'
45 ), 45 ),
46 - 2 => array(  
47 - 'name' => 'Girl' 46 + array(
  47 + 'name' => 'Girl'
48 ), 48 ),
49 - 3 => array(  
50 - 'name' => 'Kid' 49 + array(
  50 + 'name' => 'Kid'
51 ), 51 ),
52 - 4 => array(  
53 - 'name' => 'Lifestyle' 52 + array(
  53 + 'name' => 'Lifestyle'
54 ) 54 )
55 ); 55 );
56 - $channels[$channel]['active'] = true; 56 + $channels[$channel-1]['active'] = true;
57 $result['channels'] = $channels; 57 $result['channels'] = $channels;
58 58
59 /* 根据频道调用接口 */ 59 /* 根据频道调用接口 */
@@ -109,7 +109,7 @@ class BrandModel @@ -109,7 +109,7 @@ class BrandModel
109 109
110 /** 110 /**
111 * 获取搜索的品牌列表 111 * 获取搜索的品牌列表
112 - * 112 + *
113 * @param int $channel 1表示男生频道, 2表示女生频道, 3表示潮童频道, 4表示创意生活频道 113 * @param int $channel 1表示男生频道, 2表示女生频道, 3表示潮童频道, 4表示创意生活频道
114 * @return array 114 * @return array
115 */ 115 */