fe / YOHOBUYWAP · Commits

Go to a project

Authored by Rock Zhang
Commit 594d0f63677ff7012bcc1a43da0aa6e5d5e3745f 2 parents 28d9d19e 272653a5

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

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

See merge request !90
Inline Side-by-side
Showing 12 changed files with 157 additions and 38 deletions
@@ -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,40 +4,45 @@ @@ -4,40 +4,45 @@
4 * @date: 2015/10/12 4 * @date: 2015/10/12
5 */ 5 */
6 6
7 -var $ = require('jquery'), 7 +module.exports = function(specificGender) {
  8 + var $ = require('jquery'),
8 Hammer = require('yoho.hammer'), 9 Hammer = require('yoho.hammer'),
9 tip = require('../plugin/tip'), 10 tip = require('../plugin/tip'),
10 loading = require('../plugin/loading'), 11 loading = require('../plugin/loading'),
11 lazyLoad = require('yoho.lazyload'); 12 lazyLoad = require('yoho.lazyload');
12 13
13 -var navHammer, 14 + var navHammer,
14 winH = $(window).height(), 15 winH = $(window).height(),
15 $goodList = $('#goods-list'), 16 $goodList = $('#goods-list'),
16 searching = false, 17 searching = false,
17 page = 0, 18 page = 0,
18 gender = null, 19 gender = null,
19 - kidsType = $('.mobile-wrap').hasClass('kids-wrap') ? true : false,  
20 - lifestyleType = $('.mobile-wrap').hasClass('lifestyle-wrap') ? true : false,  
21 num, 20 num,
22 url; 21 url;
23 22
24 -var $curNav, 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,
25 index, 29 index,
26 $navList = $('#maybe-like-nav'); 30 $navList = $('#maybe-like-nav');
27 31
28 -//ajax url  
29 -if (kidsType) { 32 + //ajax url
  33 + if (kidsType) {
30 url = '/product/recom/maylikekids'; 34 url = '/product/recom/maylikekids';
31 -} else if (lifestyleType) { 35 + } else if (lifestyleType) {
32 url = '/product/recom/maylikelife'; 36 url = '/product/recom/maylikelife';
33 -} else {  
34 - gender = $('.mobile-wrap').hasClass('boys-wrap') ? '1,3' : '2,3', 37 + } else {
  38 + gender = (specificGender === 'boys' || $('.mobile-wrap').hasClass('boys-wrap')) ?
  39 + '1,3' : '2,3',
35 url = '/product/recom/maylike?gender=' + gender; 40 url = '/product/recom/maylike?gender=' + gender;
36 -} 41 + }
37 42
38 -$curNav = $navList.children('.focus'); 43 + $curNav = $navList.children('.focus');
39 44
40 -if (lifestyleType) { 45 + if (lifestyleType) {
41 navHammer = new Hammer($navList[0]); 46 navHammer = new Hammer($navList[0]);
42 navHammer.on('tap', function(e) { 47 navHammer.on('tap', function(e) {
43 var $this = $(e.target).closest('li'), 48 var $this = $(e.target).closest('li'),
@@ -63,11 +68,11 @@ if (lifestyleType) { @@ -63,11 +68,11 @@ if (lifestyleType) {
63 $(document).trigger('scroll'); //Trigger lazyLoad 68 $(document).trigger('scroll'); //Trigger lazyLoad
64 e.srcEvent.stopPropagation(); 69 e.srcEvent.stopPropagation();
65 }); 70 });
66 -} 71 + }
67 72
68 -loading.init($('.maybe-like')); 73 + loading.init($('.maybe-like'));
69 74
70 -function search() { 75 + function search() {
71 if (searching) { 76 if (searching) {
72 return; 77 return;
73 } 78 }
@@ -131,19 +136,25 @@ function search() { @@ -131,19 +136,25 @@ function search() {
131 loading.hideLoadingMask(); 136 loading.hideLoadingMask();
132 } 137 }
133 }); 138 });
134 -} 139 + }
135 140
136 -$('.maybe-like p').on('touchstart', function(e) { 141 + $('.maybe-like p').on('touchstart', function(e) {
137 search(); 142 search();
138 -}); 143 + });
139 144
140 -function scrollHandler() { 145 + function scrollHandler() {
141 if ($(window).scrollTop() + winH >= $(document).height() - 200) { 146 if ($(window).scrollTop() + winH >= $(document).height() - 200) {
142 search(); 147 search();
143 } 148 }
144 -} 149 + }
145 150
146 -//srcoll to load more  
147 -$(window).scroll(function() { 151 + // 优惠券页面直接加载你可能喜欢。add by @zhaobiao
  152 + if (specificGender) {
  153 + search();
  154 + }
  155 +
  156 + //srcoll to load more
  157 + $(window).scroll(function() {
148 window.requestAnimationFrame(scrollHandler); 158 window.requestAnimationFrame(scrollHandler);
149 -});  
  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;
@@ -2,7 +2,18 @@ @@ -2,7 +2,18 @@
2 <div class="brand-page yoho-page"> 2 <div class="brand-page yoho-page">
3 {{# channel}} 3 {{# channel}}
4 4
5 - <div class="newbrand-search"> 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币即将于2017年12月31日过期，请尽快使用 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 /**
@@ -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( 43 + array(
44 'name' => 'Boy' 44 'name' => 'Boy'
45 ), 45 ),
46 - 2 => array( 46 + array(
47 'name' => 'Girl' 47 'name' => 'Girl'
48 ), 48 ),
49 - 3 => array( 49 + array(
50 'name' => 'Kid' 50 'name' => 'Kid'
51 ), 51 ),
52 - 4 => array( 52 + array(
53 'name' => 'Lifestyle' 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 /* 根据频道调用接口 */