图片背景,滚动插件,取消驼峰,home新路由,点击关闭头部菜单等
Showing
15 changed files
with
148 additions
and
72 deletions
@@ -39,7 +39,7 @@ exports.index = (req, res, next) => { | @@ -39,7 +39,7 @@ exports.index = (req, res, next) => { | ||
39 | 39 | ||
40 | let params = { | 40 | let params = { |
41 | uid: req.user.uid, | 41 | uid: req.user.uid, |
42 | - udid: require('yoho-md5')(req.ip), | 42 | + udid: req.sessionID || 'yoho', |
43 | contentCode: 'b2b5cde8144aff3073573c3b323344ab', | 43 | contentCode: 'b2b5cde8144aff3073573c3b323344ab', |
44 | channel: (req.query.gender && yhchannels[req.query.gender]) || | 44 | channel: (req.query.gender && yhchannels[req.query.gender]) || |
45 | (req.cookies._Channel && channels[req.cookies._Channel]) || 1 | 45 | (req.cookies._Channel && channels[req.cookies._Channel]) || 1 |
1 | 'use strict'; | 1 | 'use strict'; |
2 | 2 | ||
3 | const _ = require('lodash'); | 3 | const _ = require('lodash'); |
4 | -const camelCase = global.yoho.camelCase; | ||
5 | const utils = '../../../utils'; | 4 | const utils = '../../../utils'; |
6 | const resourcesProcess = require(`${utils}/resources-process`); | 5 | const resourcesProcess = require(`${utils}/resources-process`); |
7 | const helpers = global.yoho.helpers; | 6 | const helpers = global.yoho.helpers; |
@@ -163,9 +162,9 @@ class newHome extends global.yoho.BaseModel { | @@ -163,9 +162,9 @@ class newHome extends global.yoho.BaseModel { | ||
163 | baseInfo: {}, | 162 | baseInfo: {}, |
164 | infoNum: {}, | 163 | infoNum: {}, |
165 | signinUrl: helpers.urlFormat('/signin.html', { | 164 | signinUrl: helpers.urlFormat('/signin.html', { |
166 | - refer: helpers.urlFormat('/home/new-home') | 165 | + refer: helpers.urlFormat('/home') |
167 | }), | 166 | }), |
168 | - referUrl: helpers.urlFormat('/home/new-home'), | 167 | + referUrl: helpers.urlFormat('/home'), |
169 | channel: { | 168 | channel: { |
170 | boys: params.channel === 1, | 169 | boys: params.channel === 1, |
171 | girls: params.channel === 2, | 170 | girls: params.channel === 2, |
@@ -201,8 +200,6 @@ class newHome extends global.yoho.BaseModel { | @@ -201,8 +200,6 @@ class newHome extends global.yoho.BaseModel { | ||
201 | resu.content = result[5]; | 200 | resu.content = result[5]; |
202 | } | 201 | } |
203 | 202 | ||
204 | - resu = camelCase(resu); | ||
205 | - | ||
206 | return resu; | 203 | return resu; |
207 | }); | 204 | }); |
208 | } | 205 | } |
@@ -67,7 +67,7 @@ router.post('/orders/changeAddress', orderDetailController.changeAddress); // | @@ -67,7 +67,7 @@ router.post('/orders/changeAddress', orderDetailController.changeAddress); // | ||
67 | router.post('/orders/sure', auth, orderController.sure); // 确认收货 | 67 | router.post('/orders/sure', auth, orderController.sure); // 确认收货 |
68 | 68 | ||
69 | 69 | ||
70 | -router.get('/', disableBFCache, homeController.index); // 个人中心首页 | 70 | +// router.get('/', disableBFCache, homeController.index); // 个人中心首页 |
71 | router.get('/mydetails', auth, disableBFCache, homeController.myDetails); // 个人基本资料页面 | 71 | router.get('/mydetails', auth, disableBFCache, homeController.myDetails); // 个人基本资料页面 |
72 | 72 | ||
73 | // router.get('/grade', auth, homeController.grade); // 会员等级页 | 73 | // router.get('/grade', auth, homeController.grade); // 会员等级页 |
@@ -179,5 +179,5 @@ router.get('/return/exchange/refreshDelivery', auth, exchange.refreshDelivery); | @@ -179,5 +179,5 @@ router.get('/return/exchange/refreshDelivery', auth, exchange.refreshDelivery); | ||
179 | 179 | ||
180 | router.get('/tide-command', auth, tideCommand.tideCommand); // 设置潮流口令 | 180 | router.get('/tide-command', auth, tideCommand.tideCommand); // 设置潮流口令 |
181 | 181 | ||
182 | -router.get('/new-home', newHome.index); // 设置潮流口令 | 182 | +router.get('/', newHome.index); // 设置潮流口令 |
183 | module.exports = router; | 183 | module.exports = router; |
@@ -4,8 +4,8 @@ | @@ -4,8 +4,8 @@ | ||
4 | {{# baseInfo}} | 4 | {{# baseInfo}} |
5 | <a href="/home/mydetails"> | 5 | <a href="/home/mydetails"> |
6 | <div class="left"> | 6 | <div class="left"> |
7 | - <div class="user-avatar" data-avatar="{{image2 headIco mode=2 w=100 h=100 q=90}}"></div> | ||
8 | - <div class="level level-{{vipInfo/curLevel}}"></div> | 7 | + <div class="user-avatar" data-avatar="{{image2 head_ico mode=2 w=100 h=100 q=90}}"></div> |
8 | + <div class="level level-{{vip_info/cur_level}}"></div> | ||
9 | </div> | 9 | </div> |
10 | <div class="right"> | 10 | <div class="right"> |
11 | <div class="name eps">{{nickname}}</div> | 11 | <div class="name eps">{{nickname}}</div> |
@@ -70,8 +70,8 @@ | @@ -70,8 +70,8 @@ | ||
70 | <div class="service-item"> | 70 | <div class="service-item"> |
71 | <div class="iconfont pic"></div> | 71 | <div class="iconfont pic"></div> |
72 | <p class="name">待付款</p> | 72 | <p class="name">待付款</p> |
73 | - {{#if waitPayNum}} | ||
74 | - <div class="val">{{waitPayNum}}</div> | 73 | + {{#if wait_pay_num}} |
74 | + <div class="val">{{wait_pay_num}}</div> | ||
75 | {{/if}} | 75 | {{/if}} |
76 | </div> | 76 | </div> |
77 | </a> | 77 | </a> |
@@ -79,8 +79,8 @@ | @@ -79,8 +79,8 @@ | ||
79 | <div class="service-item"> | 79 | <div class="service-item"> |
80 | <div class="iconfont pic"></div> | 80 | <div class="iconfont pic"></div> |
81 | <p class="name">待发货</p> | 81 | <p class="name">待发货</p> |
82 | - {{#if waitCargoNum}} | ||
83 | - <div class="val">{{waitCargoNum}}</div> | 82 | + {{#if wait_cargo_num}} |
83 | + <div class="val">{{wait_cargo_num}}</div> | ||
84 | {{/if}} | 84 | {{/if}} |
85 | </div> | 85 | </div> |
86 | </a> | 86 | </a> |
@@ -88,26 +88,26 @@ | @@ -88,26 +88,26 @@ | ||
88 | <div class="service-item"> | 88 | <div class="service-item"> |
89 | <div class="iconfont pic"></div> | 89 | <div class="iconfont pic"></div> |
90 | <p class="name">待收货</p> | 90 | <p class="name">待收货</p> |
91 | - {{#if sendCargoNum}} | ||
92 | - <div class="val">{{sendCargoNum}}</div> | 91 | + {{#if send_cargo_num}} |
92 | + <div class="val">{{send_cargo_num}}</div> | ||
93 | {{/if}} | 93 | {{/if}} |
94 | </div> | 94 | </div> |
95 | </a> | 95 | </a> |
96 | <div class="service-item"> | 96 | <div class="service-item"> |
97 | <a href="/home/favorite"> | 97 | <a href="/home/favorite"> |
98 | - <p class="num">{{#if productFavoriteTotal}}{{productFavoriteTotal}}{{else}}0{{/if}}</p> | 98 | + <p class="num">{{#if product_favorite_total}}{{product_favorite_total}}{{else}}0{{/if}}</p> |
99 | <p class="name">商品收藏</p> | 99 | <p class="name">商品收藏</p> |
100 | </a> | 100 | </a> |
101 | </div> | 101 | </div> |
102 | <div class="service-item"> | 102 | <div class="service-item"> |
103 | <a href="/home/favorite?tab=brand"> | 103 | <a href="/home/favorite?tab=brand"> |
104 | - <p class="num">{{#if brandFavoriteTotal}}{{brandFavoriteTotal}}{{else}}0{{/if}}</p> | 104 | + <p class="num">{{#if brand_favorite_total}}{{brand_favorite_total}}{{else}}0{{/if}}</p> |
105 | <p class="name">品牌收藏</p> | 105 | <p class="name">品牌收藏</p> |
106 | </a> | 106 | </a> |
107 | </div> | 107 | </div> |
108 | <div class="service-item"> | 108 | <div class="service-item"> |
109 | <a href="/home/record"> | 109 | <a href="/home/record"> |
110 | - <p class="num">{{#if productBrowse}}{{productBrowse}}{{else}}0{{/if}}</p> | 110 | + <p class="num">{{#if product_browse}}{{product_browse}}{{else}}0{{/if}}</p> |
111 | <p class="name">浏览记录</p> | 111 | <p class="name">浏览记录</p> |
112 | </a> | 112 | </a> |
113 | </div> | 113 | </div> |
@@ -117,7 +117,7 @@ | @@ -117,7 +117,7 @@ | ||
117 | <div class="pic iconfont"></div> | 117 | <div class="pic iconfont"></div> |
118 | <div class="body"> | 118 | <div class="body"> |
119 | <div class="main eps">优惠券</div> | 119 | <div class="main eps">优惠券</div> |
120 | - <div class="value">{{#if couponNum}}{{couponNum}}张{{/if}}</div> | 120 | + <div class="value">{{#if coupon_num}}{{coupon_num}}张{{/if}}</div> |
121 | <div class="arr iconfont"></div> | 121 | <div class="arr iconfont"></div> |
122 | </div> | 122 | </div> |
123 | </a> | 123 | </a> |
@@ -125,7 +125,7 @@ | @@ -125,7 +125,7 @@ | ||
125 | <div class="pic iconfont"></div> | 125 | <div class="pic iconfont"></div> |
126 | <div class="body"> | 126 | <div class="body"> |
127 | <div class="main eps">有货币</div> | 127 | <div class="main eps">有货币</div> |
128 | - <div class="value">{{#if yohoCoinNum}}{{yohoCoinNum}}个{{/if}}</div> | 128 | + <div class="value">{{#if yoho_coin_num}}{{yoho_coin_num}}个{{/if}}</div> |
129 | <div class="arr iconfont"></div> | 129 | <div class="arr iconfont"></div> |
130 | </div> | 130 | </div> |
131 | </a> | 131 | </a> |
@@ -135,7 +135,7 @@ | @@ -135,7 +135,7 @@ | ||
135 | <div class="pic iconfont"></div> | 135 | <div class="pic iconfont"></div> |
136 | <div class="body"> | 136 | <div class="body"> |
137 | <div class="main eps">消息</div> | 137 | <div class="main eps">消息</div> |
138 | - <div class="value">{{#if inboxTotal}}{{inboxTotal}}条未读{{/if}}</div> | 138 | + <div class="value">{{#if inbox_total}}{{inbox_total}}条未读{{/if}}</div> |
139 | <div class="arr iconfont"></div> | 139 | <div class="arr iconfont"></div> |
140 | </div> | 140 | </div> |
141 | </a> | 141 | </a> |
2.4 KB
2.31 KB
2.37 KB
public/img/common/homebuttom-bg.png
deleted
100755 → 0
2.28 KB
public/img/yohobuy-grey.png
0 → 100644
7.16 KB
@@ -304,6 +304,17 @@ $('.nav-home').on('touchstart', function() { | @@ -304,6 +304,17 @@ $('.nav-home').on('touchstart', function() { | ||
304 | $('.homebuttom').toggleClass('hide'); | 304 | $('.homebuttom').toggleClass('hide'); |
305 | }); | 305 | }); |
306 | 306 | ||
307 | +// 点击关闭头部菜单 | ||
308 | +$('.main-wrap').on('click', '*', (e) => { | ||
309 | + let $this = $(e.currentTarget); | ||
310 | + | ||
311 | + if (!$this.hasClass('nav-home')) { | ||
312 | + $('.homebuttom').addClass('hide'); | ||
313 | + } else { | ||
314 | + return false; | ||
315 | + } | ||
316 | +}); | ||
317 | + | ||
307 | // 商品列表找相似按钮 | 318 | // 商品列表找相似按钮 |
308 | $('body').on('touchstart', '.similar-btn', function() { | 319 | $('body').on('touchstart', '.similar-btn', function() { |
309 | let $thisP = $(this).parents('.good-info'); | 320 | let $thisP = $(this).parents('.good-info'); |
@@ -5,37 +5,40 @@ import Page from 'yoho-page'; | @@ -5,37 +5,40 @@ import Page from 'yoho-page'; | ||
5 | import 'common/set-trend-world'; | 5 | import 'common/set-trend-world'; |
6 | import Swiper from 'yoho-swiper2'; | 6 | import Swiper from 'yoho-swiper2'; |
7 | import yoho from 'yoho-app'; | 7 | import yoho from 'yoho-app'; |
8 | +import AutoScroll from './new-home/auto-scroll'; | ||
8 | 9 | ||
9 | class NewHome extends Page { | 10 | class NewHome extends Page { |
10 | constructor() { | 11 | constructor() { |
11 | super(); | 12 | super(); |
12 | 13 | ||
13 | this.selector = { | 14 | this.selector = { |
14 | - $scrollC: $('.scroll-c'), | ||
15 | - $scrollWords: $('.scroll-words'), | ||
16 | $userAvatar: $('.user-avatar'), | 15 | $userAvatar: $('.user-avatar'), |
17 | $codeSet: $('.code-set'), | 16 | $codeSet: $('.code-set'), |
18 | $resYas: $('.res-c').find('a'), | 17 | $resYas: $('.res-c').find('a'), |
19 | $trendCode: $('.trend-code') | 18 | $trendCode: $('.trend-code') |
20 | }; | 19 | }; |
21 | 20 | ||
22 | - this.time = 6000; | ||
23 | - this.containerWidth = 0; | ||
24 | - this.innerWidth = 0; | ||
25 | - this.moveLength = 0; | ||
26 | - this.interval = ''; | ||
27 | this.init(); | 21 | this.init(); |
28 | } | 22 | } |
29 | 23 | ||
30 | init() { | 24 | init() { |
31 | - this.autoScroll(); | ||
32 | this.defaultPic(); | 25 | this.defaultPic(); |
33 | this.bindEvents(); | 26 | this.bindEvents(); |
34 | this.swiper(); | 27 | this.swiper(); |
35 | this.showTrend(); | 28 | this.showTrend(); |
29 | + this.autoScroll(); | ||
36 | window.reMarginFooter('.footer-tab'); | 30 | window.reMarginFooter('.footer-tab'); |
37 | } | 31 | } |
38 | 32 | ||
33 | + autoScroll() { | ||
34 | + new AutoScroll( | ||
35 | + { | ||
36 | + scrollC: $('.scroll-c'), // 内容 | ||
37 | + scrollWords: $('.scroll-words') // 容器 | ||
38 | + } | ||
39 | + ); | ||
40 | + } | ||
41 | + | ||
39 | // 首次进入个人中心,且登陆,且没有设置潮流口令,打开弹框子 | 42 | // 首次进入个人中心,且登陆,且没有设置潮流口令,打开弹框子 |
40 | showTrend() { | 43 | showTrend() { |
41 | if (yoho.isLogin() && (!this.selector.$trendCode.html()) && !window.cookie('first-trend')) { | 44 | if (yoho.isLogin() && (!this.selector.$trendCode.html()) && !window.cookie('first-trend')) { |
@@ -50,7 +53,6 @@ class NewHome extends Page { | @@ -50,7 +53,6 @@ class NewHome extends Page { | ||
50 | bindEvents() { | 53 | bindEvents() { |
51 | this.selector.$codeSet.on('click', this.codeSet.bind(this)); | 54 | this.selector.$codeSet.on('click', this.codeSet.bind(this)); |
52 | this.selector.$resYas.on('click', this.yas.bind(this)); | 55 | this.selector.$resYas.on('click', this.yas.bind(this)); |
53 | - this.selector.$scrollWords.on('DOMNodeInserted', this.chanScroll.bind(this)); | ||
54 | } | 56 | } |
55 | 57 | ||
56 | // 资源位 | 58 | // 资源位 |
@@ -113,39 +115,6 @@ class NewHome extends Page { | @@ -113,39 +115,6 @@ class NewHome extends Page { | ||
113 | $('.set-trend-world').show(); | 115 | $('.set-trend-world').show(); |
114 | return false; | 116 | return false; |
115 | } | 117 | } |
116 | - | ||
117 | - // 触发修改滚动 | ||
118 | - chanScroll() { | ||
119 | - this.selector.$scrollWords.stop(true, true); | ||
120 | - clearInterval(this.interval); | ||
121 | - setTimeout(() => { | ||
122 | - this.autoScroll(); | ||
123 | - }, 500); | ||
124 | - } | ||
125 | - | ||
126 | - // 判断滚动 | ||
127 | - autoScroll() { | ||
128 | - this.containerWidth = this.selector.$scrollC.width(); | ||
129 | - this.innerWidth = this.selector.$scrollWords.width(); | ||
130 | - this.moveLength = this.innerWidth - this.containerWidth; | ||
131 | - if (this.innerWidth > (this.containerWidth + 1)) { | ||
132 | - this.goScroll(); | ||
133 | - this.interval = setInterval(() => { | ||
134 | - this.goScroll(); | ||
135 | - }, this.time); | ||
136 | - } else { | ||
137 | - clearInterval(this.interval); | ||
138 | - } | ||
139 | - } | ||
140 | - | ||
141 | - // 滚动 | ||
142 | - goScroll() { | ||
143 | - let $animateObj = this.selector.$scrollWords; | ||
144 | - | ||
145 | - $animateObj.animate({left: `-${this.moveLength}px`}, this.time / 2, 'linear', () => { | ||
146 | - $animateObj.animate({left: '0'}, this.time / 2, 'linear'); | ||
147 | - }); | ||
148 | - } | ||
149 | } | 118 | } |
150 | 119 | ||
151 | $(() => { | 120 | $(() => { |
public/js/home/new-home/auto-scroll.js
0 → 100644
1 | +import Page from 'yoho-page'; | ||
2 | + | ||
3 | +class AutoScroll extends Page { | ||
4 | + constructor(data) { | ||
5 | + super(); | ||
6 | + | ||
7 | + this.selector = { | ||
8 | + $scrollC: data.scrollC, | ||
9 | + $scrollWords: data.scrollWords | ||
10 | + }; | ||
11 | + | ||
12 | + this.time = 6000; | ||
13 | + this.containerWidth = 0; | ||
14 | + this.innerWidth = 0; | ||
15 | + this.moveLength = 0; | ||
16 | + this.interval = ''; | ||
17 | + this.init(); | ||
18 | + } | ||
19 | + | ||
20 | + init() { | ||
21 | + this.autoScroll(); | ||
22 | + this.bindEvents(); | ||
23 | + } | ||
24 | + | ||
25 | + | ||
26 | + bindEvents() { | ||
27 | + this.selector.$scrollWords.on('DOMNodeInserted', this.chanScroll.bind(this)); | ||
28 | + } | ||
29 | + | ||
30 | + // 触发修改滚动 | ||
31 | + chanScroll() { | ||
32 | + this.selector.$scrollWords.stop(true, true); | ||
33 | + clearInterval(this.interval); | ||
34 | + setTimeout(() => { | ||
35 | + this.autoScroll(); | ||
36 | + }, 500); | ||
37 | + } | ||
38 | + | ||
39 | + // 判断滚动 | ||
40 | + autoScroll() { | ||
41 | + this.containerWidth = this.selector.$scrollC.width(); | ||
42 | + this.innerWidth = this.selector.$scrollWords.width(); | ||
43 | + this.moveLength = this.innerWidth - this.containerWidth; | ||
44 | + if (this.innerWidth > (this.containerWidth + 1)) { | ||
45 | + this.goScroll(); | ||
46 | + this.interval = setInterval(() => { | ||
47 | + this.goScroll(); | ||
48 | + }, this.time); | ||
49 | + } else { | ||
50 | + clearInterval(this.interval); | ||
51 | + } | ||
52 | + } | ||
53 | + | ||
54 | + // 滚动 | ||
55 | + goScroll() { | ||
56 | + let $animateObj = this.selector.$scrollWords; | ||
57 | + | ||
58 | + $animateObj.animate({left: `-${this.moveLength}px`}, this.time / 2, 'linear', () => { | ||
59 | + $animateObj.animate({left: '0'}, this.time / 2, 'linear'); | ||
60 | + }); | ||
61 | + } | ||
62 | +} | ||
63 | + | ||
64 | +module.exports = AutoScroll; |
@@ -361,7 +361,7 @@ | @@ -361,7 +361,7 @@ | ||
361 | height: 35px; | 361 | height: 35px; |
362 | margin: 0 auto; | 362 | margin: 0 auto; |
363 | background-size: 100% 100%; | 363 | background-size: 100% 100%; |
364 | - background-image: resolve("yohologo02.png"); | 364 | + background-image: resolve("yohobuy-grey.png"); |
365 | } | 365 | } |
366 | } | 366 | } |
367 | } | 367 | } |
@@ -202,25 +202,58 @@ | @@ -202,25 +202,58 @@ | ||
202 | padding-top: 17px; | 202 | padding-top: 17px; |
203 | 203 | ||
204 | &.boys { | 204 | &.boys { |
205 | - background-image: resolve("common/homebuttom-bg.png"); | 205 | + ul { |
206 | + background-image: linear-gradient(#434343, #171717); | ||
206 | 207 | ||
207 | - li { | ||
208 | - span { | ||
209 | - border-bottom: solid 1px #444; | 208 | + li { |
209 | + span { | ||
210 | + border-bottom: solid 1px #444; | ||
211 | + } | ||
210 | } | 212 | } |
211 | } | 213 | } |
214 | + | ||
215 | + .ul-arr { | ||
216 | + background-color: #434343; | ||
217 | + } | ||
212 | } | 218 | } |
213 | 219 | ||
214 | &.girls { | 220 | &.girls { |
215 | - background-image: resolve("common/homebuttom-bg-1.png"); | 221 | + ul { |
222 | + background-image: linear-gradient(#fc89ad, #e96e94); | ||
223 | + } | ||
224 | + | ||
225 | + .ul-arr { | ||
226 | + background-color: #fc89ad; | ||
227 | + } | ||
216 | } | 228 | } |
217 | 229 | ||
218 | &.kids { | 230 | &.kids { |
219 | - background-image: resolve("common/homebuttom-bg-2.png"); | 231 | + ul { |
232 | + background-image: linear-gradient(#7ed3f7, #5fc9f6); | ||
233 | + } | ||
234 | + | ||
235 | + .ul-arr { | ||
236 | + background-color: #7ed3f7; | ||
237 | + } | ||
220 | } | 238 | } |
221 | 239 | ||
222 | &.life-style { | 240 | &.life-style { |
223 | - background-image: resolve("common/homebuttom-bg-3.png"); | 241 | + ul { |
242 | + background-image: linear-gradient(#5e4a3c, #4c3727); | ||
243 | + } | ||
244 | + | ||
245 | + .ul-arr { | ||
246 | + background-color: #5e4a3c; | ||
247 | + } | ||
248 | + } | ||
249 | + | ||
250 | + .ul-arr { | ||
251 | + width: 26px; | ||
252 | + height: 26px; | ||
253 | + position: absolute; | ||
254 | + top: 4px; | ||
255 | + right: 32px; | ||
256 | + transform: rotate(45deg); | ||
224 | } | 257 | } |
225 | 258 | ||
226 | ul { | 259 | ul { |
@@ -228,6 +261,7 @@ | @@ -228,6 +261,7 @@ | ||
228 | width: 100%; | 261 | width: 100%; |
229 | height: 338px; | 262 | height: 338px; |
230 | padding: 1px 0; | 263 | padding: 1px 0; |
264 | + border-radius: 10px; | ||
231 | 265 | ||
232 | li { | 266 | li { |
233 | float: left; | 267 | float: left; |
-
Please register or login to post a comment