fe / yohobuywap-node · Commits

Go to a project

Authored by zhangxiaoru
Commit 85cd2b80596f1c6e6e0df5d512c6d002cbe5ac91 1 parent f21175d9

权益弹窗

Inline Side-by-side
Showing 9 changed files with 612 additions and 21 deletions
... ... @@ -17,6 +17,14 @@ exports.familyIndex = (req, res, next) => {
}).catch(next);
};
exports.familyVip = (req, res, next) => {
// let uid = req.user.uid;
req.ctx(family).familyVip().then(result => {
res.json(result);
}).catch(next);
};
exports.coinDetail = (req, res) => {
let responseData = {
module: 'home',
... ...
... ... @@ -64,9 +64,9 @@ class familyModel extends global.yoho.BaseModel {
{
uid: null,
iconUrl: 'http://img12.static.yhbimg.com/article/2017/08/23/10/02412723632a13bd6ad1eef8fe580095a5.png?imageView/{mode}/w/{width}/h/{height}',
sourceName: 'yoho',
sourceName: 'yohobuy',
source: 1,
login: false
login: true
},
{
uid: null,
... ... @@ -126,6 +126,233 @@ class familyModel extends global.yoho.BaseModel {
return appList;
}
/**
*查询各个体系成长等级信息及等级特权
*/
_getVipInfo() {
let result = {
code: 200,
data: {
mars: {
vipLevelList: [
{
growthValue: 100,
level: 0,
levelImg: "http://img01.yohomars.com/mars/2017/01/24/d1f9cb68a1e7aae4a1a6c4eeca7b1b0e.png?imageView/{mode}/w/{width}/h/{height}",
marsPointDiscount: 100
},
{
growthValue: 400,
level: 1,
levelImg: "http://img01.yohomars.com/mars/2017/01/24/5336ef84190a715bd221fca50a9e9e3d.png?imageView/{mode}/w/{width}/h/{height}",
marsPointDiscount: 100
},
{
growthValue: 1000,
level: 2,
levelImg: "http://img01.yohomars.com/mars/2017/01/24/1027321fcaf5311ab21963f925ecb0dd.png?imageView/{mode}/w/{width}/h/{height}",
marsPointDiscount: 95,
privilege: "mars points 9.5折兑换"
},
{
growthValue: 2000,
level: 3,
levelImg: "http://img01.yohomars.com/mars/2017/01/24/e4512e2c5e78140170bf4967c4368645.png?imageView/{mode}/w/{width}/h/{height}",
marsPointDiscount: 90,
privilege: "mars points 9折兑换"
},
{
growthValue: 5000,
level: 4,
levelImg: "http://img01.yohomars.com/mars/2017/01/24/312d0b334370eb8a9711065d489451ca.png?imageView/{mode}/w/{width}/h/{height}",
marsPointDiscount: 85,
privilege: "mars points 8.5折兑换"
},
{
growthVaue: 10000,
level: 5,
levelImg: "http://img01.yohomars.com/mars/2017/01/24/148be1f69f64ebc1872c43b5b4b7e620.png?imageView/{mode}/w/{width}/h/{height}",
marsPointDiscount: 80,
privilege: "mars points 8折兑换"
}
]
},
yohobuy: {
privilegeList: [
{
description: "在原折扣基础上享受VIP折上折",
id: 1,
pic: "http://static.yohobuy.com/images/app/icon_2x_zhekou.png",
title: "银卡会员购物9.5折"
},
{
description: "在原折扣基础上享受VIP折上折",
id: 2,
pic: "http://static.yohobuy.com/images/app/icon_2x_zhekou.png",
title: "金卡会员购物9.0折"
},
{
description: "在原折扣基础上享受VIP折上折",
id: 3,
pic: "http://static.yohobuy.com/images/app/icon_2x_zhekou.png",
title: "白金卡会员购物8.8折"
},
{
description: "年度级的sale促销活动中，VIP会员可以享受优先购买权",
id: 4,
pic: "http://static.yohobuy.com/images/app/icon_2x_niandu.png",
title: "年度活动优惠"
},
{
description: "白金卡会员的订单将采用最快速度进行免费配送，金卡会员的订单免费配送",
id: 5,
pic: "http://static.yohobuy.com/images/app/icon_2x_kssd.png",
title: "快速送达"
},
{
description: "浏览《YOHO!潮流志》、《YOHO!GIRL》电子版，最新最权威的潮流资讯尽在掌握！",
id: 6,
pic: "http://static.yohobuy.com/images/app/icon_2x_zzzy.png",
title: "电子杂志赠阅"
},
{
description: "赠送生日优惠券",
id: 8,
pic: "http://static.yohobuy.com/images/app/icon_2x_sryh.png",
title: "生日特惠"
},
{
description: "获取大量潮流新品及优惠活动的信息",
id: 9,
pic: "http://static.yohobuy.com/images/app/icon_2x_yhxx.png",
title: "优惠信息"
},
{
description: "参加\"VIP会员限定\"活动",
id: 10,
pic: "http://static.yohobuy.com/images/app/icon_2x_vip.png",
title: "VIP活动优惠"
}
],
vipLevelLis: [
{
growthValue: 0,
level: 0,
name: "普通会员",
privilege: ""
},
{
growthValue: 600,
level: 1,
name: "银卡会员",
privilege: "1,4,10,6,8,9"
},
{
growthValue: 2000,
level: 2,
name: "金卡会员",
privilege: "2,4,10,5,6,8,9"
},
{
growthValue: 5000,
level: 3,
name: "白金会员",
privilege: "3,4,10,5,6,8,9"
}
]
}
}
};
return result.data;
}
/**
*查询当前用户各个体系成长等级信息及等级特权
*/
_getUserVipInfo() {
let result = {
data: {
mars: {
growthValue: 2000,
level: 4,
nextLevel: 5,
privilege: "mars points 8.5折兑换",
valueToNextLevel: 3000
},
yohobuy: {
growthValue: 1500,
level: 1,
name: "银卡会员",
nextLevel: 2,
valueToNextLevel: 500,
privilege: [
{
description: "在原折扣基础上享受VIP折上折",
id: 1,
pic: "http://static.yohobuy.com/images/app/icon_2x_zhekou.png",
title: "银卡会员购物9.5折"
},
{
description: "年度级的sale促销活动中，VIP会员可以享受优先购买权",
id: 4,
pic: "http://static.yohobuy.com/images/app/icon_2x_niandu.png",
title: "年度活动优惠"
},
{
description: "浏览《YOHO!潮流志》、《YOHO!GIRL》电子版，最新最权威的潮流资讯尽在掌握！",
id: 6,
pic: "http://static.yohobuy.com/images/app/icon_2x_zzzy.png",
title: "电子杂志赠阅"
},
{
description: "赠送生日优惠券",
id: 8,
pic: "http://static.yohobuy.com/images/app/icon_2x_sryh.png",
title: "生日特惠"
},
{
description: "获取大量潮流新品及优惠活动的信息",
id: 9,
pic: "http://static.yohobuy.com/images/app/icon_2x_yhxx.png",
title: "优惠信息"
},
{
description: "参加\"VIP会员限定\"活动",
id: 10,
pic: "http://static.yohobuy.com/images/app/icon_2x_vip.png",
title: "VIP活动优惠"
}
]
}
}
};
return result.data;
}
/**
*各个app的会员信息
*/
familyVip() {
return Promise.all([
this._getVipInfo(),
this._getUserVipInfo()
]).then((result) => {
_.forEach(result[1], function(val, key) {
_.forEach(result[0], function(data, index) {
if (index === key) {
val = _.assign(val, {
vipLevelLis: data.vipLevelLis
});
}
});
});
return result[1];
});
}
familyIndex(uid) {
return Promise.all([
this._userData(uid),
... ... @@ -151,6 +378,10 @@ class familyModel extends global.yoho.BaseModel {
familyIndexData.appList = result[2];
}
// if (result[3]) {
// familyIndexData.vipDetail = result[3];
// }
return familyIndexData;
});
}
... ...
... ... @@ -178,6 +178,7 @@ router.post('/return/exchange/cancel-apply', auth, exchange.cancelApply); // AJA
router.get('/tide-command', auth, tideCommand.tideCommand); // 设置潮流口令
router.get('/family', auth, family.familyIndex); // family首页
router.get('/family/vipDetailData', auth, family.familyVip); // 获取VIP信息
router.get('/family/coinDetail', auth, family.coinDetail); // 积分详情页
router.get('/family/coinDetail/getCoinData', auth, family.getCoinData); // 筛选积分详情
router.get('/family/userInfo', auth, family.userInfo); // family个人信息页
... ...
... ... @@ -37,7 +37,7 @@
<div class="title">会员等级及权益</div>
<div class="grade-content">
{{# appList}}
<div class="content-item" data-login="{{login}}">
<div class="content-item" data-login="{{login}}" data-name="{{sourceName}}">
<img class="item-tag" src="{{image iconUrl 140 140}}">
<span class="name">{{sourceName}}</span>
<span class="level">黄金</span>
... ... @@ -60,16 +60,6 @@
</div>
</div>
</div>
<div class="dia-c"></div>
{{/ familyIndexData}}
<div class="vip-detail">
<div class="back"></div>
<div class="detail-content">
<div class="banner">
</div>
<div class="main">
</div>
</div>
</div>
</div>
... ...
<div class="vip-detail">
<div class="close"></div>
<div class="back"></div>
<div class="detail-content">
<div class="banner">
</div>
<div class="main">
<div class="user-info clearfix{{#if noUid}} hide{{/if}}">
<div class="base clearfix">
<div class="pic"{{#if headIco}} style="background-image:url({{image headIco 125 125}})"{{/if}}>
<div class="level-pic vip-{{level}}"></div>
</div>
<div class="intro">
<div class="name"><span></span>您好！</div>
<div class="level">
<span class="now">我的成长值：<span class="val">{{growthValue}}</span></span>
{{#if valueToNextLevel}}
<span class="next">下次升级还需：<span class="val">{{valueToNextLevel}}</span></span>
{{/if}}
</div>
</div>
</div>
<div class="level-process yoho-level clearfix">
<div class="line-c">
<div class="line"{{#if percent}} style="width:{{percent}}%"{{/if}}></div>
<div class="point">
{{# vipLevelLis}}
<div class="point-item">
<div class="level-text">
<p>{{name}}</p>
<p>{{growthValue}}</p>
</div>
</div>
{{/ vipLevelLis}}
</div>
</div>
</div>
</div>
<div class="privilege-list">
<div class="privilege-title">
<b></b>
当前可享受特权
<a class="more">更多</a>
</div>
{{# privilege}}
<a class="privilege-item">
<img class="icon" src="{{pic}}">
<p>
{{title}}
<span>{{description}}</span>
</p>
</a>
{{/ privilege}}
{{# privilegeCro}}
<div class="level-item">
<img class="item-ico" src="{{image iconUrl 125 125}}">
<span class="le-name">{{sourceName}}发的我客来福侧那我可掉入了</span>
<span class="state">已开启</span>
</div>
{{/ privilegeCro}}
</div>
</div>
</div>
</div>
\ No newline at end of file
... ...
... ... @@ -4,6 +4,7 @@ import Page from 'yoho-page';
import tip from 'plugin/tip';
import yoho from 'yoho-app';
import integral from 'home/integral-paradise.hbs';
import vipDetailInfo from 'home/vip-detail.hbs';
const echarts = require('echarts/lib/echarts');
... ... @@ -14,6 +15,7 @@ class FamilyIndex extends Page {
super();
this.selector = {
$diaC: $('.dia-c'),
$userAvatar: $('.user-avatar'),
$codeSet: $('.code-set'),
$invition: $('.invition'),
... ... @@ -21,13 +23,19 @@ class FamilyIndex extends Page {
$textarea: $('textarea'),
integralCh: echarts.init(document.getElementById('charts')),
chartWidth: $('.charts').width(),
$integralContent: $('.integral-content')
$integralContent: $('.integral-content'),
$contentItem: $('.content-item'),
$close: $('.close'),
$userName: $('.user-name')
};
this.view = {
integral
integral,
vipDetailInfo
};
this.vipInfo;
this.init();
}
... ... @@ -35,12 +43,15 @@ class FamilyIndex extends Page {
this.headIco();
this.integralCharts();
this.bindEvents();
this.viewVipInfo();
}
bindEvents() {
this.selector.$codeSet.on('click', this.setTrendPop.bind(this));
this.selector.$textarea.on('blur', this.saveTrendWord.bind(this));
this.selector.integralCh.on('click', this.jump.bind(this));
this.selector.$contentItem.on('click', this.showVipInfo.bind(this));
this.selector.$diaC.on('click', this.selector.$close, this.hideVipInfo.bind(this));
}
// 头像
... ... @@ -85,6 +96,18 @@ class FamilyIndex extends Page {
});
}
// 查看VIP信息
viewVipInfo() {
this.ajax({
type: 'GET',
url: location.protocol + '//m.yohobuy.com/home/family/vipDetailData'
}).then(result => {
this.vipInfo = result;
}).catch(() => {
tip.show('服务异常，请稍后重试');
});
}
// 设置潮流口令
setTrendPop() {
this.selector.$invition.hide();
... ... @@ -121,6 +144,36 @@ class FamilyIndex extends Page {
jump(params) {
yoho.goH5(`${location.protocol}//m.yohobuy.com/home/family/coinDetail?plateType=${params.data.plateType}`);
}
// 点击APP图标显示会员信息
showVipInfo(e) {
let $this = $(e.currentTarget);
let appType = $this.data('name').toLowerCase();
let isLogin = $this.data('login');
if (isLogin) {
if (this.vipInfo[appType]) {
this.selector.$diaC.append(this.view.vipDetailInfo(this.vipInfo[appType]));
} else {
this.viewVipInfo();
this.selector.$diaC.append(this.view.vipDetailInfo(this.vipInfo[appType]));
}
if (this.selector.$userAvatar.data('avatar')) {
$('.base .pic').css('background-image', 'url(' + this.selector.$userAvatar.data('avatar') + ')');
}
if (this.selector.$userName.text() !== '') {
$('.intro .name span').text($('.user-name').text() + '，');
}
}
}
// 点击关闭会员信息弹框
hideVipInfo() {
$('.vip-detail').remove();
}
}
$(() => {
... ...
... ... @@ -199,11 +199,6 @@
overflow: hidden;
position: relative;
canvas {
width: 100% !important;
height: 100% !important;
}
.charts {
float: left;
}
... ... @@ -288,6 +283,18 @@
height: 100%;
z-index: 5;
.close {
height: 50px;
width: 50px;
background-image: resolve("home/family/close.png");
background-size: 100%;
background-repeat: no-repeat;
position: relative;
top: 150px;
right: -668px;
z-index: 6;
}
.back {
width: 100%;
height: 100%;
... ... @@ -309,11 +316,247 @@
left: 50%;
margin-top: 180px;
margin-left: -315px;
height: 950px;
overflow-y: scroll;
overflow-x: hidden;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.banner {
width: 100%;
height: 200px;
}
.user-info {
padding: 34px 40px 115px;
background-color: #fff;
border-bottom: solid 1px #e5e5e5;
.base {
.pic {
width: 120px;
height: 120px;
float: left;
background-size: 100% 100%;
background-position: center;
border-radius: 50%;
border: 1px solid #eee;
position: relative;
background-image: resolve("home/index/user-avatar.png");
.level-pic {
width: 82px;
height: 36px;
background-size: 100% 100%;
position: absolute;
bottom: -18px;
left: 50%;
margin-left: -41px;
}
.vip-3 {
background-image: url("/home/grade-new/vip-3.png");
}
.vip-2 {
background-image: url("/home/grade-new/vip-2.png");
}
.vip-1 {
background-image: url("/home/grade-new/vip-1.png");
}
}
.intro {
padding: 0 0 15px 30px;
float: left;
width: 400px;
}
.name {
color: #000;
font-size: 30px;
line-height: 60px;
}
.level {
font-size: 24px;
line-height: 32px;
color: #000;
}
.now {
float: left;
}
.next {
float: left;
}
}
.level-process {
padding: 0 10px;
.line-c {
width: 530px;
height: 4px;
background-color: #f0f0f0;
margin: 50px auto 0;
position: relative;
}
.line {
width: 470px;
height: 100%;
max-width: 100%;
background-color: #444;
}
.point {
width: 490px;
position: absolute;
top: -9px;
left: -2px;
}
.point-item {
width: 23px;
height: 23px;
background-image: resolve("home/family/point.png");
background-size: 100%;
background-repeat: no-repeat;
float: left;
position: relative;
}
.point-item:last-child {
margin-right: 0;
}
.level-text {
width: 120px;
position: absolute;
top: 29px;
left: 50%;
margin-left: -60px;
font-size: 24px;
text-align: center;
line-height: 40px;
}
}
.yoho-level {
padding: 0 30px;
.line-c {
width: 490px;
}
.point-item {
margin-right: 132px;
}
}
}
.privilege-list {
.privilege-title {
height: 70px;
line-height: 70px;
font-size: 24px;
border-bottom: 1px solid #e5e5e5;
display: inline-block;
width: 100%;
color: #000;
padding-left: 40px;
b {
display: block;
width: 10px;
height: 10px;
background-color: #000;
float: left;
margin-top: 30px;
margin-right: 10px;
}
.more {
float: right;
margin-right: 47px;
}
}
.icon {
float: left;
display: block;
width: 1.75rem;
height: 1.75rem;
}
.privilege-item {
width: 690px;
clear: both;
float: left;
padding: 25px 0;
border-bottom: solid 1px #e5e5e5;
position: relative;
margin-left: 40px;
&:last-child {
border-bottom: 0;
}
.iconfont {
float: right;
line-height: 70px;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
right: -10px;
}
}
p {
font-size: 28px;
margin-left: 30px;
min-height: 70px;
width: 480px;
float: left;
}
span {
display: block;
color: #b0b0b0;
font-size: 22px;
}
.level-item {
width: 210px;
text-align: center;
float: left;
margin-bottom: 50px;
.item-ico {
width: 125px;
height: 125px;
border-radius: 50%;
overflow: hidden;
margin-top: 30px;
margin-bottom: 20px;
}
.le-name {
font-size: 28px;
line-height: 36px;
color: #000;
}
.state {
font-size: 24px;
color: #b0b0b0;
margin-top: 10px;
}
}
}
}
}
... ...