Merge branch 'feature/wap323' into 'feature/wap323'
1.有货币页面改造 2.品牌一览页面增加顶部导航。 code review by Zhang Zhen See merge request !90
Showing
12 changed files
with
262 additions
and
143 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 | +} |
@@ -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 | +}; |
static/js/me/currency-new.js
0 → 100644
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币即将于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}} </span> | 82 | <span class="iconfont num">{{coupon_num}} </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"></span> | 85 | <span class="iconfont icon"></span> |
86 | YOHO 币 | 86 | YOHO 币 |
87 | <span class="iconfont num">{{yoho_coin_num}} </span> | 87 | <span class="iconfont num">{{yoho_coin_num}} </span> |
@@ -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 | */ |
-
Please register or login to post a comment