Authored by 李靖

图片背景,滚动插件,取消驼峰,home新路由,点击关闭头部菜单等

... ... @@ -39,7 +39,7 @@ exports.index = (req, res, next) => {
let params = {
uid: req.user.uid,
udid: require('yoho-md5')(req.ip),
udid: req.sessionID || 'yoho',
contentCode: 'b2b5cde8144aff3073573c3b323344ab',
channel: (req.query.gender && yhchannels[req.query.gender]) ||
(req.cookies._Channel && channels[req.cookies._Channel]) || 1
... ...
'use strict';
const _ = require('lodash');
const camelCase = global.yoho.camelCase;
const utils = '../../../utils';
const resourcesProcess = require(`${utils}/resources-process`);
const helpers = global.yoho.helpers;
... ... @@ -163,9 +162,9 @@ class newHome extends global.yoho.BaseModel {
baseInfo: {},
infoNum: {},
signinUrl: helpers.urlFormat('/signin.html', {
refer: helpers.urlFormat('/home/new-home')
refer: helpers.urlFormat('/home')
}),
referUrl: helpers.urlFormat('/home/new-home'),
referUrl: helpers.urlFormat('/home'),
channel: {
boys: params.channel === 1,
girls: params.channel === 2,
... ... @@ -201,8 +200,6 @@ class newHome extends global.yoho.BaseModel {
resu.content = result[5];
}
resu = camelCase(resu);
return resu;
});
}
... ...
... ... @@ -67,7 +67,7 @@ router.post('/orders/changeAddress', orderDetailController.changeAddress); //
router.post('/orders/sure', auth, orderController.sure); // 确认收货
router.get('/', disableBFCache, homeController.index); // 个人中心首页
// router.get('/', disableBFCache, homeController.index); // 个人中心首页
router.get('/mydetails', auth, disableBFCache, homeController.myDetails); // 个人基本资料页面
// router.get('/grade', auth, homeController.grade); // 会员等级页
... ... @@ -179,5 +179,5 @@ router.get('/return/exchange/refreshDelivery', auth, exchange.refreshDelivery);
router.get('/tide-command', auth, tideCommand.tideCommand); // 设置潮流口令
router.get('/new-home', newHome.index); // 设置潮流口令
router.get('/', newHome.index); // 设置潮流口令
module.exports = router;
... ...
... ... @@ -4,8 +4,8 @@
{{# baseInfo}}
<a href="/home/mydetails">
<div class="left">
<div class="user-avatar" data-avatar="{{image2 headIco mode=2 w=100 h=100 q=90}}"></div>
<div class="level level-{{vipInfo/curLevel}}"></div>
<div class="user-avatar" data-avatar="{{image2 head_ico mode=2 w=100 h=100 q=90}}"></div>
<div class="level level-{{vip_info/cur_level}}"></div>
</div>
<div class="right">
<div class="name eps">{{nickname}}</div>
... ... @@ -70,8 +70,8 @@
<div class="service-item">
<div class="iconfont pic">&#xe634;</div>
<p class="name">待付款</p>
{{#if waitPayNum}}
<div class="val">{{waitPayNum}}</div>
{{#if wait_pay_num}}
<div class="val">{{wait_pay_num}}</div>
{{/if}}
</div>
</a>
... ... @@ -79,8 +79,8 @@
<div class="service-item">
<div class="iconfont pic">&#xe63b;</div>
<p class="name">待发货</p>
{{#if waitCargoNum}}
<div class="val">{{waitCargoNum}}</div>
{{#if wait_cargo_num}}
<div class="val">{{wait_cargo_num}}</div>
{{/if}}
</div>
</a>
... ... @@ -88,26 +88,26 @@
<div class="service-item">
<div class="iconfont pic">&#xe633;</div>
<p class="name">待收货</p>
{{#if sendCargoNum}}
<div class="val">{{sendCargoNum}}</div>
{{#if send_cargo_num}}
<div class="val">{{send_cargo_num}}</div>
{{/if}}
</div>
</a>
<div class="service-item">
<a href="/home/favorite">
<p class="num">{{#if productFavoriteTotal}}{{productFavoriteTotal}}{{else}}0{{/if}}</p>
<p class="num">{{#if product_favorite_total}}{{product_favorite_total}}{{else}}0{{/if}}</p>
<p class="name">商品收藏</p>
</a>
</div>
<div class="service-item">
<a href="/home/favorite?tab=brand">
<p class="num">{{#if brandFavoriteTotal}}{{brandFavoriteTotal}}{{else}}0{{/if}}</p>
<p class="num">{{#if brand_favorite_total}}{{brand_favorite_total}}{{else}}0{{/if}}</p>
<p class="name">品牌收藏</p>
</a>
</div>
<div class="service-item">
<a href="/home/record">
<p class="num">{{#if productBrowse}}{{productBrowse}}{{else}}0{{/if}}</p>
<p class="num">{{#if product_browse}}{{product_browse}}{{else}}0{{/if}}</p>
<p class="name">浏览记录</p>
</a>
</div>
... ... @@ -117,7 +117,7 @@
<div class="pic iconfont">&#xe63a;</div>
<div class="body">
<div class="main eps">优惠券</div>
<div class="value">{{#if couponNum}}{{couponNum}}{{/if}}</div>
<div class="value">{{#if coupon_num}}{{coupon_num}}{{/if}}</div>
<div class="arr iconfont">&#xe604;</div>
</div>
</a>
... ... @@ -125,7 +125,7 @@
<div class="pic iconfont">&#xe732;</div>
<div class="body">
<div class="main eps">有货币</div>
<div class="value">{{#if yohoCoinNum}}{{yohoCoinNum}}{{/if}}</div>
<div class="value">{{#if yoho_coin_num}}{{yoho_coin_num}}{{/if}}</div>
<div class="arr iconfont">&#xe604;</div>
</div>
</a>
... ... @@ -135,7 +135,7 @@
<div class="pic iconfont">&#xe63f;</div>
<div class="body">
<div class="main eps">消息</div>
<div class="value">{{#if inboxTotal}}{{inboxTotal}}条未读{{/if}}</div>
<div class="value">{{#if inbox_total}}{{inbox_total}}条未读{{/if}}</div>
<div class="arr iconfont">&#xe604;</div>
</div>
</a>
... ...
... ... @@ -70,6 +70,7 @@
{{^}}
<div class="homebuttom hide">
{{/ @root.pageChannel}}
<div class="ul-arr"></div>
<ul>
<li>
<a href="{{ indexUrl }}">
... ...
... ... @@ -304,6 +304,17 @@ $('.nav-home').on('touchstart', function() {
$('.homebuttom').toggleClass('hide');
});
// 点击关闭头部菜单
$('.main-wrap').on('click', '*', (e) => {
let $this = $(e.currentTarget);
if (!$this.hasClass('nav-home')) {
$('.homebuttom').addClass('hide');
} else {
return false;
}
});
// 商品列表找相似按钮
$('body').on('touchstart', '.similar-btn', function() {
let $thisP = $(this).parents('.good-info');
... ...
... ... @@ -5,37 +5,40 @@ import Page from 'yoho-page';
import 'common/set-trend-world';
import Swiper from 'yoho-swiper2';
import yoho from 'yoho-app';
import AutoScroll from './new-home/auto-scroll';
class NewHome extends Page {
constructor() {
super();
this.selector = {
$scrollC: $('.scroll-c'),
$scrollWords: $('.scroll-words'),
$userAvatar: $('.user-avatar'),
$codeSet: $('.code-set'),
$resYas: $('.res-c').find('a'),
$trendCode: $('.trend-code')
};
this.time = 6000;
this.containerWidth = 0;
this.innerWidth = 0;
this.moveLength = 0;
this.interval = '';
this.init();
}
init() {
this.autoScroll();
this.defaultPic();
this.bindEvents();
this.swiper();
this.showTrend();
this.autoScroll();
window.reMarginFooter('.footer-tab');
}
autoScroll() {
new AutoScroll(
{
scrollC: $('.scroll-c'), // 内容
scrollWords: $('.scroll-words') // 容器
}
);
}
// 首次进入个人中心,且登陆,且没有设置潮流口令,打开弹框子
showTrend() {
if (yoho.isLogin() && (!this.selector.$trendCode.html()) && !window.cookie('first-trend')) {
... ... @@ -50,7 +53,6 @@ class NewHome extends Page {
bindEvents() {
this.selector.$codeSet.on('click', this.codeSet.bind(this));
this.selector.$resYas.on('click', this.yas.bind(this));
this.selector.$scrollWords.on('DOMNodeInserted', this.chanScroll.bind(this));
}
// 资源位
... ... @@ -113,39 +115,6 @@ class NewHome extends Page {
$('.set-trend-world').show();
return false;
}
// 触发修改滚动
chanScroll() {
this.selector.$scrollWords.stop(true, true);
clearInterval(this.interval);
setTimeout(() => {
this.autoScroll();
}, 500);
}
// 判断滚动
autoScroll() {
this.containerWidth = this.selector.$scrollC.width();
this.innerWidth = this.selector.$scrollWords.width();
this.moveLength = this.innerWidth - this.containerWidth;
if (this.innerWidth > (this.containerWidth + 1)) {
this.goScroll();
this.interval = setInterval(() => {
this.goScroll();
}, this.time);
} else {
clearInterval(this.interval);
}
}
// 滚动
goScroll() {
let $animateObj = this.selector.$scrollWords;
$animateObj.animate({left: `-${this.moveLength}px`}, this.time / 2, 'linear', () => {
$animateObj.animate({left: '0'}, this.time / 2, 'linear');
});
}
}
$(() => {
... ...
import Page from 'yoho-page';
class AutoScroll extends Page {
constructor(data) {
super();
this.selector = {
$scrollC: data.scrollC,
$scrollWords: data.scrollWords
};
this.time = 6000;
this.containerWidth = 0;
this.innerWidth = 0;
this.moveLength = 0;
this.interval = '';
this.init();
}
init() {
this.autoScroll();
this.bindEvents();
}
bindEvents() {
this.selector.$scrollWords.on('DOMNodeInserted', this.chanScroll.bind(this));
}
// 触发修改滚动
chanScroll() {
this.selector.$scrollWords.stop(true, true);
clearInterval(this.interval);
setTimeout(() => {
this.autoScroll();
}, 500);
}
// 判断滚动
autoScroll() {
this.containerWidth = this.selector.$scrollC.width();
this.innerWidth = this.selector.$scrollWords.width();
this.moveLength = this.innerWidth - this.containerWidth;
if (this.innerWidth > (this.containerWidth + 1)) {
this.goScroll();
this.interval = setInterval(() => {
this.goScroll();
}, this.time);
} else {
clearInterval(this.interval);
}
}
// 滚动
goScroll() {
let $animateObj = this.selector.$scrollWords;
$animateObj.animate({left: `-${this.moveLength}px`}, this.time / 2, 'linear', () => {
$animateObj.animate({left: '0'}, this.time / 2, 'linear');
});
}
}
module.exports = AutoScroll;
... ...
... ... @@ -361,7 +361,7 @@
height: 35px;
margin: 0 auto;
background-size: 100% 100%;
background-image: resolve("yohologo02.png");
background-image: resolve("yohobuy-grey.png");
}
}
}
... ...
... ... @@ -202,7 +202,8 @@
padding-top: 17px;
&.boys {
background-image: resolve("common/homebuttom-bg.png");
ul {
background-image: linear-gradient(#434343, #171717);
li {
span {
... ... @@ -211,16 +212,48 @@
}
}
.ul-arr {
background-color: #434343;
}
}
&.girls {
background-image: resolve("common/homebuttom-bg-1.png");
ul {
background-image: linear-gradient(#fc89ad, #e96e94);
}
.ul-arr {
background-color: #fc89ad;
}
}
&.kids {
background-image: resolve("common/homebuttom-bg-2.png");
ul {
background-image: linear-gradient(#7ed3f7, #5fc9f6);
}
.ul-arr {
background-color: #7ed3f7;
}
}
&.life-style {
background-image: resolve("common/homebuttom-bg-3.png");
ul {
background-image: linear-gradient(#5e4a3c, #4c3727);
}
.ul-arr {
background-color: #5e4a3c;
}
}
.ul-arr {
width: 26px;
height: 26px;
position: absolute;
top: 4px;
right: 32px;
transform: rotate(45deg);
}
ul {
... ... @@ -228,6 +261,7 @@
width: 100%;
height: 338px;
padding: 1px 0;
border-radius: 10px;
li {
float: left;
... ...