fe / yohobuywap-node · Commits

Go to a project

Authored by 毕凯
Commit 9621595e5382a10e14c5ee7904c47646cc751d24 2 parents 875d3912 bfb46a34

Merge branch 'feature/storeHomeV1.1' into 'gray' 

Feature/store home v1.1



See merge request !1122
Inline Side-by-side
Showing 24 changed files with 521 additions and 88 deletions
... ... @@ -39,6 +39,7 @@ exports.photography = (req, res, next) => {
title: '个人中心',
width750: true,
localCss: true,
pageFooter: true
};
let params = {
... ... @@ -61,6 +62,7 @@ exports.coffee = (req, res, next) => {
title: '个人中心',
width750: true,
localCss: true,
pageFooter: true
};
let params = {
... ... @@ -83,6 +85,7 @@ exports.green = (req, res, next) => {
title: '个人中心',
width750: true,
localCss: true,
pageFooter: true
};
let params = {
... ...
'use strict';
const _ = require('lodash');
const rightsJson = require('../../../public/js/activity/store-home/rights-detail.json'); // 写死的会员特权
class storeHome extends global.yoho.BaseModel {
constructor(ctx) {
... ... @@ -38,7 +39,7 @@ class storeHome extends global.yoho.BaseModel {
photography: photography,
coffee: coffee,
green: green,
process: this.getProcess(result[0].data.cousume_amount, result[0].data.vip_type)
process: this.getProcess(_.get(result[0], 'data.credit_points'), result[0].data.vip_type)
});
result[0].data.parentsGender = result[0].data.gender === '1' ? '男' : '女';
... ... @@ -61,6 +62,31 @@ class storeHome extends global.yoho.BaseModel {
}
}
let rightsObj = {};
let build = [];
let rightsUrl = '';
let vipLevel = `vip${result[0].data.vip_level}`;
if (photography) {
rightsObj = rightsJson.photography;
rightsUrl = '//mp.weixin.qq.com/s/iSd__pG6tEodktIlPMJgoQ';
}
if (green) {
rightsObj = rightsJson.green;
rightsUrl = '//mp.weixin.qq.com/s/JJgJW77sT9Ur87BR0iWevw';
}
if (coffee) {
rightsObj = rightsJson.coffee;
rightsUrl = '//mp.weixin.qq.com/s/o04mbaNXZ_kmvT2Bvlqg9w';
}
_.forEach(rightsObj, (val, key) => {
if (key === vipLevel) {
build = val;
}
});
result[0].data.rights = build;
result[0].data.rightsUrl = rightsUrl;
result = result[0].data;
}
return result;
... ... @@ -92,7 +118,7 @@ class storeHome extends global.yoho.BaseModel {
_.forEach(result.data.consume_list, val => {
build.push({
amount: val.trade_amount,
amount: val.trade_amount_desc,
date: val.trade_date,
title: val.trade_title
});
... ... @@ -129,13 +155,18 @@ class storeHome extends global.yoho.BaseModel {
switch (type) {
case 1:
if (amount < 0) {
amount = 0;
if (amount <= 0) {
process = 0;
}
if (amount > 0 && amount <= 800) {
process = (amount / 800 * 0.5) * 100;
}
if (amount > 800 && amount < 2000) {
process = ((amount - 800) / 1200 * 0.5 + 0.5) * 100;
}
if (amount > 2000) {
amount = 2000;
if (amount >= 2000) {
process = 100;
}
process = (amount / 2000) * 100;
return process;
case 2:
amount -= 1000;
... ...
... ... @@ -59,6 +59,8 @@ const storeHome = require(`${cRoot}/store-home`);
const couponList = require(`${cRoot}/coupon-list`);
const disableBFCache = require('../../doraemon/middleware/disable-BFCache');
// routers
router.get('/demo', demo.index);
... ... @@ -287,9 +289,9 @@ router.get('/free-mail/list', auth, freeMail.freeMailList); // 免邮券列表
router.get('/free-mail/verify', auth, freeMail.receiveVerify); // 免邮券领取验证
router.get('/free-mail/verifyCoupon', auth, freeMail.receiveCoupon); // 免邮券领取
router.get('/store-home/photography', storeHome.storeAuth, storeHome.photography); // 线下店个人中心-摄影
router.get('/store-home/coffee', storeHome.storeAuth, storeHome.coffee); // 线下店个人中心-咖啡
router.get('/store-home/green', storeHome.storeAuth, storeHome.green); // 线下店个人中心-绿植
router.get('/store-home/photography', disableBFCache, storeHome.storeAuth, storeHome.photography); // 线下店个人中心-摄影
router.get('/store-home/coffee', disableBFCache, storeHome.storeAuth, storeHome.coffee); // 线下店个人中心-咖啡
router.get('/store-home/green', disableBFCache, storeHome.storeAuth, storeHome.green); // 线下店个人中心-绿植
router.get('/store-home/history', storeHome.storeAuth, storeHome.history); // 线下店个人中心-消费明细
router.get('/store-home/ewm', storeHome.storeAuth, storeHome.ewm); // 线下店个人中心-二维码
router.get('/store-home/coupon', storeHome.storeAuth, storeHome.coupon); // 线下店个人中心-优惠券
... ...
<div class="store-home">
{{> store-home/user-info}}
{{> store-home/yoho-family}}
</div>
\ No newline at end of file
... ...
<div class="store-home">
<div class="coupon-list">
{{#if coupons}}
{{# coupons}}
<div class="coupon-item">
<div class="coupon-title eps">{{coupon_name}}</div>
... ... @@ -26,5 +27,11 @@
</div>
</div>
{{/ coupons}}
{{else}}
<div class="no-result">
<div class="pic coupon"></div>
<p>暂无优惠券</p>
</div>
{{/if}}
</div>
</div>
\ No newline at end of file
... ...
<div class="store-home">
{{> store-home/user-info}}
{{> store-home/yoho-family}}
</div>
\ No newline at end of file
... ...
<div class="store-home">
{{#if list}}
<ul class="his-ul">
{{# list}}
<li class="item">
... ... @@ -6,8 +7,14 @@
<p class="name">{{title}}</p>
<p class="time">{{date}}</p>
</div>
<div class="price">¥{{amount}}</div>
<div class="price">{{amount}}</div>
</li>
{{/ list}}
</ul>
{{else}}
<div class="no-result">
<div class="pic history"></div>
<p>暂无消费</p>
</div>
{{/if}}
</div>
\ No newline at end of file
... ...
<div class="store-home">
{{> store-home/user-info}}
<div class="edit-title">编辑宝宝资料</div>
<div class="edit-title clearfix">编辑宝宝资料</div>
<ul class="list">
<li class="list-item">
<span class="title">宝宝昵称</span>
... ... @@ -26,5 +26,4 @@
</div>
</li>
</ul>
{{> store-home/yoho-family}}
</div>
\ No newline at end of file
... ...
... ... @@ -5,28 +5,24 @@
<div class="base-info">
<div class="left">
<div class="user">
<span class="name">{{nick_name}}</span>
<span class="name eps">{{nick_name}}</span>
<span class="vip vip-{{vip_level}}"></span>
</div>
<div class="tel">{{mobile}}</div>
</div>
<div class="right">
<div class="ewm-c">
<a class="ewm" href="//m.yohobuy.com/home/newQrcode"></a>
</div>
<div class="id hide">ID:475247198</div>
{{#if mobile}}
<div class="tel"><span class="tel-icon"></span>{{mobile}}</div>
{{/if}}
<a class="family" href="//m.yohobuy.com/home/family"></a>
</div>
</div>
</div>
<div class="user-info">
<div class="user-info clearfix">
<div class="logo {{#if coffee}}coffee{{/if}} {{#if photography}}photography{{/if}} {{#if green}}green{{/if}}"></div>
<ul class="info-list">
<li>
<div class="left">消费金额</div>
<a class="right"{{#if cousume_amount}} href="//m.yohobuy.com/activity/store-home/history?shopType={{vip_type}}"{{/if}}>¥{{cousume_amount}}
{{#if cousume_amount}}
<a class="right" href="//m.yohobuy.com/activity/store-home/history?shopType={{vip_type}}">¥{{cousume_amount}}
<span class="iconfont">&#xe604;</span>
{{/if}}
</a>
</li>
<li>
... ... @@ -35,57 +31,86 @@
</li>
<li>
<div class="left">我的积分</div>
<div class="right">{{credit_points}}</div>
<div class="right">{{yohoCoin}}</div>
</li>
</ul>
<div class="process-c">
<div class="process-line">
<div style="width: {{process}}%;"></div>
<div class="line" style="width: {{process}}%;"></div>
<div class="growth-line">
<div class="growth-c" style="left: {{process}}%;">
<div class="growth">&nbsp;&nbsp;成长值：{{credit_points}}&nbsp;&nbsp;</div>
<div class="arr"></div>
</div>
</div>
</div>
<ul class="level-c" data-vip="{{vip_level}}">
<li class="disable">
<div class="dot"></div>
<span class="vip vip-1"></span>
<div class="price">¥{{#if coffee}}0{{/if}}{{#if photography}}0{{/if}}{{#if green}}1000{{/if}}</div>
<div class="price">{{#if coffee}}0{{/if}}{{#if photography}}0{{/if}}{{#if green}}1000{{/if}}</div>
</li>
<li class="disable">
<div class="dot"></div>
<span class="vip vip-2"></span>
<div class="price">¥{{#if coffee}}800{{/if}}{{#if photography}}5000{{/if}}{{#if green}}3000{{/if}}</div>
<div class="price">{{#if coffee}}800{{/if}}{{#if photography}}5000{{/if}}{{#if green}}3000{{/if}}</div>
</li>
<li class="disable">
<div class="dot"></div>
<span class="vip vip-3"></span>
<div class="price">¥{{#if coffee}}2000{{/if}}{{#if photography}}10000{{/if}}{{#if green}}5000{{/if}}</div>
<div class="price">{{#if coffee}}2000{{/if}}{{#if photography}}10000{{/if}}{{#if green}}5000{{/if}}</div>
</li>
</ul>
</div>
<ul class="list coupon">
<a href="//m.yohobuy.com/activity/store-home/coupon?shopType={{vip_type}}">
<li class="list-item">
<span class="title">我的优惠券</span>
<span class="iconfont">&#xe604;</span>
<span class="s-title">{{coupons_num}}</span>
</li>
</a>
</div>
<a href="{{rightsUrl}}">
<ul class="list">
<li class="list-item">
<span class="title">我的会员权益</span>
<span class="iconfont">&#xe604;</span>
<span class="s-title">更多</span>
</li>
</ul>
</a>
<a href="{{rightsUrl}}">
<div class="right-c">
<ul>
{{# rights}}
<li>
<div class="pic right-{{type}}"></div>
<p>{{name}}</p>
</li>
{{/ rights}}
</ul>
</div>
<div class="edit-title hide">编辑资料</div>
<ul class="list hide">
<li class="list-item">
<span class="title">昵称</span>
<span class="iconfont">&#xe604;</span>
<span class="s-title">{{nick_name}}</span>
</li>
<li class="list-item">
<span class="title">生日</span>
<span class="iconfont">&#xe604;</span>
<span class="s-title">{{birth_day}}</span>
</li>
<li class="list-item">
<span class="title">性别</span>
<span class="iconfont">&#xe604;</span>
<span class="s-title">{{parentsGender}}</span>
</select>
</li>
</ul>
\ No newline at end of file
</a>
<ul class="list coupon">
<a href="//m.yohobuy.com/activity/store-home/coupon?shopType={{vip_type}}">
<li class="list-item">
<span class="title">我的优惠券</span>
<span class="iconfont">&#xe604;</span>
<span class="s-title">{{coupons_num}}</span>
</li>
</a>
</ul>
<div class="edit-title">编辑资料</div>
<a href="//m.yohobuy.com/home/family/userInfo">
<ul class="list">
<li class="list-item">
<span class="title">昵称</span>
<span class="iconfont">&#xe604;</span>
<span class="s-title">{{nick_name}}</span>
</li>
<li class="list-item">
<span class="title">生日</span>
<span class="iconfont">&#xe604;</span>
<span class="s-title">{{birth_day}}</span>
</li>
<li class="list-item">
<span class="title">性别</span>
<span class="iconfont">&#xe604;</span>
<span class="s-title">{{parentsGender}}</span>
</select>
</li>
</ul>
</a>
\ No newline at end of file
... ...
<ul class="list hide">
<li class="list-item">
<span class="title">YOHO!FAMILY</span>
<span class="iconfont">&#xe604;</span>
<span class="s-title"></span>
</li>
</ul>
\ No newline at end of file
... ... @@ -20,7 +20,7 @@ const domains = {
platformApi: 'http://192.168.102.48:8088/',
store: 'http://192.168.102.47:8080/portal-gateway/wechat/',
extstore: 'http://extstore-test1.yohops.com',
family: 'http://192.168.103.73:8096/uic/',
family: 'http://192.168.102.31:8096/uic/',
yohoNowApi: 'http://yohonow-test.yohops.com:9999/'
};
... ... @@ -233,12 +233,12 @@ if (isProduction) {
imCs: process.env.TEST_IM_CS || 'http://im.yohobuy.com/api',
platformApi: 'http://192.168.102.48:8088/',
extstore: 'http://extstore-test1.yohops.com',
family: 'http://192.168.103.73:8096/uic/',
family: 'http://192.168.102.31:8096/uic/',
yohoNowApi: process.env.YOHO_NOW_API || 'http://yohonow-test.yohops.com:9999/'
},
memcache: {
master: ['192.168.104.15:12111', '192.168.104.29:12111', '192.168.104.32:12111'],
session: ['192.168.104.15:12111', '192.168.104.29:12111', '192.168.104.32:12111'],
master: ['127.0.0.1:12111'],
session: ['127.0.0.1:12111'],
timeout: 100,
reconnect: 5000,
retries: 0
... ...

1.13 KB | W: 0px | H: 0px

15 KB | W: 0px | H: 0px

  • 2-up
  • Swipe
  • Onion skin
... ... @@ -13,6 +13,8 @@ class Photography extends Page {
$gender: $('.s-title.baby-gender'),
$birthday: $('.s-title.baby-birthday'),
$noDate: $('.s-title.modify[type!=date]'),
$growthC: $('.growth-c'),
$growth: $('.growth')
};
this.init();
... ... @@ -23,6 +25,30 @@ class Photography extends Page {
let vipLevel = this.selector.$levelC.data('vip');
this.selector.$levelC.find(`li:lt(${vipLevel})`).removeClass('disable');
this.growthRePosition();
}
growthRePosition() {
let gWidth = this.selector.$growth.width() / 2;
let growthW = this.selector.$growth.width();
this.selector.$growthC.css('width', `${growthW}px`);
this.selector.$growthC.css('margin-left', `-${gWidth}px`);
setTimeout(() => {
let limit = $(window).width() / 750 * 30;
let offset = this.selector.$growthC.offset().left;
let limitRight = $(window).width() - offset - limit - growthW;
let limitLeft = offset - limit;
if (limitRight <= 0) {
// 右边超出
this.selector.$growth.css('margin-left', `${limitRight}px`);
}
if (limitLeft <= 0) {
// 左边超出
this.selector.$growth.css('margin-left', `${-limitLeft}px`);
}
}, 100);
}
bindEvents() {
... ...
{
"photography": {
"vip1": [
{
"name": "免费服务(2)",
"type": 1
},
{
"name": "免费产品(2)",
"type": 5
},
{
"name": "生日礼物(3)",
"type": 4
},
{
"name": "有货会员专享",
"type": 2
},
{
"name": "积分抵扣",
"type": 3
}
],
"vip2": [
{
"name": "免费服务(2)",
"type": 1
},
{
"name": "免费产品(3)",
"type": 5
},
{
"name": "生日礼物(3)",
"type": 4
},
{
"name": "有货会员专享",
"type": 2
},
{
"name": "积分抵扣",
"type": 3
}
],
"vip3": [
{
"name": "免费服务(4)",
"type": 1
},
{
"name": "免费产品(4)",
"type": 5
},
{
"name": "生日礼物(3)",
"type": 4
},
{
"name": "有货会员专享",
"type": 2
},
{
"name": "积分抵扣",
"type": 3
}
]
},
"coffee": {
"vip1": [
{
"name": "乐享 9.5 折",
"type": 1
},
{
"name": "有货会员专享",
"type": 2
},
{
"name": "积分抵扣",
"type": 3
}
],
"vip2": [
{
"name": "乐享 9.0 折",
"type": 1
},
{
"name": "有货会员专享",
"type": 2
},
{
"name": "积分抵扣",
"type": 3
}
],
"vip3": [
{
"name": "乐享 8.5 折",
"type": 1
},
{
"name": "有货会员专享",
"type": 2
},
{
"name": "积分抵扣",
"type": 3
}
]
},
"green": {
"vip0": [
{
"name": "有货会员专享",
"type": 1
},
{
"name": "积分抵扣",
"type": 3
}
],
"vip1": [
{
"name": "乐享 9.5 折",
"type": 1
},
{
"name": "生日福利(3)",
"type": 4
},
{
"name": "有货会员专享",
"type": 2
},
{
"name": "积分抵扣",
"type": 3
}
],
"vip2": [
{
"name": "乐享 9.0 折",
"type": 1
},
{
"name": "生日福利(3)",
"type": 4
},
{
"name": "有货会员专享",
"type": 2
},
{
"name": "积分抵扣",
"type": 3
}
],
"vip3": [
{
"name": "乐享 8.8 折",
"type": 1
},
{
"name": "生日福利(3)",
"type": 4
},
{
"name": "有货会员专享",
"type": 2
},
{
"name": "积分抵扣",
"type": 3
}
]
}
}
\ No newline at end of file
... ...
... ... @@ -3,6 +3,18 @@ html {
background-color: #f0f0f0;
}
.yoho-footer {
margin-bottom: 20px;
}
.copyright {
display: none !important;
}
.back-to-top {
display: none !important;
}
select {
-moz-appearance: none;
-webkit-appearance: none;
... ... @@ -196,42 +208,60 @@ input::-webkit-calendar-picker-indicator {
left: 0;
color: #fff;
width: 100%;
padding-top: 70px;
padding-top: 55px;
line-height: 60px;
.left {
width: 50%;
float: left;
.vip {
float: left;
margin-top: 14px;
}
.user {
font-size: 38px;
line-height: 60px;
height: 60px;
}
.tel {
font-size: 24px;
}
}
.right {
width: 50%;
float: right;
text-align: right;
.ewm {
width: 35px;
height: 35px;
margin-left: 30px;
width: 44px;
height: 44px;
background-image: url("/activity/store-home/ewm.png");
display: inline-block;
vertical-align: middle;
float: left;
margin-top: 7px;
}
.id {
font-size: 24px;
.family {
width: 140px;
height: 140px;
display: block;
position: absolute;
right: 0;
top: 0;
background-image: resolve("activity/store-home/family.png");
background-size: 100% 100%;
}
}
.name {
margin-right: 10px;
height: 60px;
max-width: 350px;
float: left;
}
.tel-icon {
width: 22px;
height: 28px;
background-image: url("/activity/store-home/phone.png");
float: left;
margin-right: 10px;
margin-top: 15px;
}
}
}
... ... @@ -239,7 +269,7 @@ input::-webkit-calendar-picker-indicator {
.user-info {
width: 690px;
background-color: #fff;
margin: -130px auto 0;
margin: -130px auto 30px;
position: relative;
padding-top: 40px;
... ... @@ -289,18 +319,58 @@ input::-webkit-calendar-picker-indicator {
.process-c {
position: relative;
padding-top: 30px;
padding-top: 80px;
clear: both;
.process-line {
width: 578px;
height: 2px;
height: 2PX;
background-color: #e0e0e0;
margin: 0 auto;
div {
.line {
background-color: #000;
height: 100%;
width: 0;
}
.growth-line {
width: 100%;
height: 0;
position: relative;
}
}
.growth-c {
position: absolute;
bottom: 15px;
left: 0;
height: 49px;
.growth {
padding: 8px 0;
background-color: #eaeaea;
color: #000;
font-size: 18px;
border-radius: 10px;
white-space: nowrap;
height: 41px;
line-height: 25px;
position: absolute;
top: 0;
}
.arr {
width: 16px;
height: 16px;
background-color: #eaeaea;
margin: -8px auto 0;
transform: rotate(45deg);
border-radius: 100% 0 0;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -8px;
}
}
... ... @@ -373,6 +443,72 @@ input::-webkit-calendar-picker-indicator {
}
}
.right-c {
height: 166px;
width: 750px;
overflow: hidden;
background-color: #fff;
margin-top: -20px;
border-top: solid 1px #e0e0e0;
margin-bottom: 30px;
ul {
padding: 23px 30px 23px 0;
font-size: 0;
line-height: 0;
white-space: nowrap;
overflow-y: hidden;
overflow-x: scroll;
li {
display: inline-block;
width: 180px;
height: 120px;
background-color: #f3f3f3;
border-radius: 5px;
margin-left: 30px;
padding: 15px 0 5px;
vertical-align: middle;
}
.pic {
width: 50px;
height: 50px;
margin: 0 auto;
}
p {
height: 50px;
font-size: 24px;
color: #444;
width: 180px;
overflow: hidden;
line-height: 50px;
text-align: center;
}
.right-1 {
background-image: url("/activity/store-home/right-1.png");
}
.right-2 {
background-image: url("/activity/store-home/right-2.png");
}
.right-3 {
background-image: url("/activity/store-home/right-3.png");
}
.right-4 {
background-image: url("/activity/store-home/right-4.png");
}
.right-5 {
background-image: url("/activity/store-home/right-5.png");
}
}
}
.his-ul {
padding: 0 25px;
background-color: #fff;
... ... @@ -549,4 +685,30 @@ input::-webkit-calendar-picker-indicator {
}
}
}
.no-result {
.pic {
background-size: 100% 100%;
margin: 350px auto 0;
}
.coupon {
background-image: resolve("activity/store-home/no-coupon.png");
width: 215px;
height: 124px;
}
.history {
background-image: resolve("activity/store-home/no-history.png");
width: 213px;
height: 201px;
}
p {
font-size: 28px;
color: #444;
text-align: center;
line-height: 110px;
}
}
}
... ...