fe / yohobuywap-node · Commits

Go to a project

Authored by lijing
Commit b90f2dd6e1684ed9c60e5dbe5f9742312173357a 1 parent be91c941

前端开发完成

Inline Side-by-side
Showing 11 changed files with 457 additions and 122 deletions
... ... @@ -23,7 +23,22 @@ exports.index = (req, res, next) => {
};
req.ctx(gradeNewModel).index(params).then(result => {
console.log(result);
res.render('grade-new/index', Object.assign(responseData, result));
}).catch(next);
};
exports.grow = (req, res) => {
let responseData = {
module: 'home',
page: 'grade-new',
pageHeader: headerModel.setNav({
navTitle: '成长记录'
}),
title: '成长记录',
width750: true,
localCss: true,
pageFooter: true
};
res.render('grade-new/grow', responseData);
};
... ...
... ... @@ -144,5 +144,6 @@ router.get('/getaddress.json', addressController.newGetAddress); // TODO 璅⊥
router.get('/logistic', auth, orderDetailController.logistic); // 查看物流页面
router.get('/gradeNew/index', auth, gradeNew.index); // 会员等级
router.get('/gradeNew/grow', auth, gradeNew.grow); // 成长记录
module.exports = router;
... ...
<div class="grade-new-c">
<div class="tab">
<span class="active">成长值明细</span>
<span>成长记录</span>
</div>
<div class="tab-item">
<div class="ul-detail">
<div class="li-item">
<div class="text">
<p>登录</p>
<p>2017-04-27</p>
</div>
<div class="num">+7</div>
</div>
<div class="li-item">
<div class="text">
<p>登录</p>
<p>2017-04-27</p>
</div>
<div class="num">+7</div>
</div>
<div class="li-item">
<div class="text">
<p>登录</p>
<p>2017-04-27</p>
</div>
<div class="num">+7</div>
</div>
<div class="li-item">
<div class="text">
<p>登录</p>
<p>2017-04-27</p>
</div>
<div class="num">+7</div>
</div>
<div class="li-item">
<div class="text">
<p>登录</p>
<p>2017-04-27</p>
</div>
<div class="num">+7</div>
</div>
<div class="li-item">
<div class="text">
<p>登录</p>
<p>2017-04-27</p>
</div>
<div class="num">+7</div>
</div>
</div>
</div>
<div class="tab-item hide">
<div class="ul-detail">
<div class="li-item">
<div class="title">金卡升级为白金</div>
<div class="date">2017-04-20</div>
</div>
<div class="li-item">
<div class="title">金卡升级为白金</div>
<div class="date">2017-04-20</div>
</div>
<div class="li-item">
<div class="title">金卡升级为白金</div>
<div class="date">2017-04-20</div>
</div>
<div class="li-item">
<div class="title">金卡升级为白金</div>
<div class="date">2017-04-20</div>
</div>
<div class="li-item">
<div class="title">金卡升级为白金</div>
<div class="date">2017-04-20</div>
</div>
</div>
</div>
</div>
... ...
... ... @@ -3,136 +3,157 @@
<span class="active">我的等级</span>
<span>我的权益</span>
</div>
<a class="big-top">
成长值进度
<span class="iconfont">&#xe604;</span>
<span class="s-title">成长值记录</span>
</a>
<div class="user-info clearfix">
<div class="base clearfix">
{{# vipGrade}}
<div class="pic" style="background-image:url('http://172.16.6.52:5001/img/home/index/user-avatar.png')">
<div class="level-pic" style="background-image:url('http://172.16.6.52:5001/img/home/index/user-avatar.png')"></div>
</div>
<div class="intro">
<div class="name">{{name}}，您好！</div>
<div class="level">
<span class="now">我的成长值：<span class="val">2250</span> </span>
<span class="next">下次升级还需：<span class="val">2750</span></span>
<div class="tab-item">
<a class="big-top" href="//m.yohobuy.com/home/gradeNew/grow">
成长值进度
<span class="iconfont">&#xe604;</span>
<span class="s-title">成长值记录</span>
</a>
<div class="user-info clearfix">
<div class="base clearfix">
{{# vipGrade}}
<div class="pic" style="background-image:url('http://172.16.6.52:5001/img/home/index/user-avatar.png')">
{{#if vip0}}
<div class="level-pic vip-0"></div>
{{else if vip1}}
<div class="level-pic vip-1"></div>
{{else if vip2}}
<div class="level-pic vip-2"></div>
{{else if vip3}}
<div class="level-pic vip-3"></div>
{{/if}}
</div>
<div class="intro">
<div class="name">{{name}}，您好！</div>
<div class="level">
<span class="now">我的成长值：<span class="val">2250</span> </span>
<span class="next">下次升级还需：<span class="val">2750</span></span>
</div>
</div>
{{/ vipGrade}}
</div>
{{/ vipGrade}}
</div>
<div class="level-process clearfix">
<div class="line-c">
<div class="line"></div>
<div class="point">
<div class="point-item">
<div class="level-text">
<p>普通会员</p>
<p>0</p>
<div class="level-process clearfix">
<div class="line-c">
<div class="line"></div>
<div class="point">
<div class="point-item">
<div class="level-text">
<p>普通会员</p>
<p>0</p>
</div>
</div>
</div>
<div class="point-item">
<div class="level-text">
<p>银卡会员</p>
<p>800</p>
<div class="point-item">
<div class="level-text">
<p>银卡会员</p>
<p>800</p>
</div>
</div>
</div>
<div class="point-item">
<div class="level-text">
<p>金卡会员</p>
<p>3000</p>
<div class="point-item">
<div class="level-text">
<p>金卡会员</p>
<p>3000</p>
</div>
</div>
</div>
<div class="point-item">
<div class="level-text">
<p>白金会员</p>
<p>7000</p>
<div class="point-item">
<div class="level-text">
<p>白金会员</p>
<p>7000</p>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="big-top">
会员等级介绍
<span class="iconfont">&#xe604;</span>
<span class="s-title">了解等级规则</span>
</a>
<div class="content">
<p>1.注册成功即为普通会员，各会员等级均按照历史累计有效的成长值升降级，会员等级越高可享受会员权益越多。</p>
<p>2.成长值为有货会员通过购物、评价、登录等获得经验累积值。</p>
<p>3.会员升级后，会员等级有效期一年。每365天进行累计成长值扣减，扣减后的成长值不满足当前级别条件的，直接降级至对应成长值级别。</p>
<p>自成为银卡之日开始，365天内未继续晋级更高级别，则在366天扣减当前级别所需成长值，扣减值为400</p>
<p>自成为金卡之日开始，365天内未继续晋级更高级别，则在366天扣减当前级别所需成长值，扣减值为1500</p>
<p>自成为白金卡之日开始，365天内未继续晋级更高级别，则在366天扣减当前级别所需成长值，扣减值为3500</p>
</div>
<div class="big-top">
成长值获取方法
</div>
<div class="table-c">
<table>
<tr>
<th>场景</th>
<th>获取规则</th>
<th>成长数值</th>
</tr>
<tr>
<td>购物</td>
<td>
按商品实际付款金额1元累计1个
<br />
成长值订单完成后奖励</td>
<td>
等于实际
<br />
付款金额
</td>
</tr>
<tr>
<td>
月度购买
<br />
次数
</td>
<td>
自然月内达到1个购物天数
<br />
且订单已完成
</td>
<td>20</td>
</tr>
<tr>
<td>完善资料</td>
<td>完善个人资料</td>
<td>50</td>
</tr>
<tr>
<td>
手机邮箱
<br />
验证
</td>
<td>完成手机邮箱双验证</td>
<td>20</td>
</tr>
<tr>
<td>VIP登录</td>
<td>VIP每日登录2个成长值</td>
<td>2</td>
</tr>
<tr>
<td>评价</td>
<td>
评价成功且审核通过10个成长值
<br />
一个商品仅限一次
</td>
<td>10</td>
</tr>
</table>
<p>扣除成长值的情况：</p>
<p>发生退货或删除评价，扣除当时获得的成长值。</p>
</div>
</div>
<a class="big-top">
会员等级介绍
<span class="iconfont">&#xe604;</span>
<span class="s-title">了解等级规则</span>
</a>
<div class="content">
<p>1.注册成功即为普通会员，各会员等级均按照历史累计有效的成长值升降级，会员等级越高可享受会员权益越多。</p>
<p>2.成长值为有货会员通过购物、评价、登录等获得经验累积值。</p>
<p>3.会员升级后，会员等级有效期一年。每365天进行累计成长值扣减，扣减后的成长值不满足当前级别条件的，直接降级至对应成长值级别。</p>
<p>自成为银卡之日开始，365天内未继续晋级更高级别，则在366天扣减当前级别所需成长值，扣减值为400</p>
<p>自成为金卡之日开始，365天内未继续晋级更高级别，则在366天扣减当前级别所需成长值，扣减值为1500</p>
<p>自成为白金卡之日开始，365天内未继续晋级更高级别，则在366天扣减当前级别所需成长值，扣减值为3500</p>
</div>
<div class="big-top">
成长值获取方法
</div>
<div class="table-c">
<table>
<tr>
<th>场景</th>
<th>获取规则</th>
<th>成长数值</th>
</tr>
<tr>
<td>购物</td>
<td>
按商品实际付款金额1元累计1个
<br />
成长值订单完成后奖励</td>
<td>
等于实际
<br />
付款金额
</td>
</tr>
<tr>
<td>
月度购买
<br />
次数
</td>
<td>
自然月内达到1个购物天数
<br />
且订单已完成
</td>
<td>20</td>
</tr>
<tr>
<td>完善资料</td>
<td>完善个人资料</td>
<td>50</td>
</tr>
<tr>
<td>
手机邮箱
<br />
验证
</td>
<td>完成手机邮箱双验证</td>
<td>20</td>
</tr>
<tr>
<td>VIP登录</td>
<td>VIP每日登录2个成长值</td>
<td>2</td>
</tr>
<tr>
<td>评价</td>
<td>
评价成功且审核通过10个成长值
<br />
一个商品仅限一次
</td>
<td>10</td>
</tr>
</table>
<p>扣除成长值的情况：</p>
<p>发生退货或删除评价，扣除当时获得的成长值。</p>
<div class="tab-item hide">
{{# vipGrade}}
<div class="vip-privilege-page">
{{> vip-grade/privilege}}
</div>
<a class="big-top" href="{{allUrl}}">
查看全部VIP特权
<span class="iconfont">&#xe604;</span>
</a>
{{/ vipGrade}}
</div>
</div>
... ...
... ... @@ -10,4 +10,4 @@
</div>
</div>
{{> chat/chat-gm}}
</div>
\ No newline at end of file
</div>
... ...
{
"name": "m-yohobuy-node",
"version": "5.7.0",
"private": true,
"description": "A New Yohobuy Project With Express",
"repository": {
"type": "git",
"url": "http://git.dev.yoho.cn/web/yohobuywap-node.git"
},
"scripts": {
"start": "NODE_ENV=\"production\" node app.js",
"dev": "nodemon -e js,hbs -i public/ app.js",
"static": "webpack-dev-server --config ./public/build/webpack.dev.config.js",
"build": "webpack --config ./public/build/webpack.prod.config.js",
"debug": "DEBUG=\"express:*\" nodemon -e js,hbs -i public/ app.js",
"lint-js": "eslint -c .eslintrc --cache .",
"lint-css": "stylelint --syntax scss --cache --config .stylelintrc 'public/scss/**/*.css'",
"lint-vue-js": "eslint -c .eslintrc --cache public/vue",
"lint-vue-css": "stylelint --syntax scss --extract --cache --config .stylelintrc 'public/scss/**/*.vue'",
"lint-all": "node lint-all.js",
"precommit": "node lint-commit.js"
},
"license": "MIT",
"dependencies": {
"bluebird": "^3.4.7",
"body-parser": "^1.16.1",
"captchapng": "0.0.1",
"cheerio": "^0.22.0",
"client-sessions": "^0.8.0",
"compression": "^1.6.2",
"connect-memcached": "^0.2.0",
"connect-multiparty": "^2.0.0",
"cookie-parser": "^1.4.3",
"express": "^4.14.1",
"feed": "^1.0.2",
"geetest": "^4.1.1",
"lodash": "^4.17.4",
"memory-cache": "^0.1.6",
"moment": "^2.18.1",
"oneapm": "^2.0.0",
"passport": "^0.3.2",
"passport-local": "^1.0.0",
"passport-qq": "0.0.3",
"passport-sina": "^0.1.0",
"passport-strategy": "^1.0.0",
"passport-weixin": "^0.1.0",
"request": "^2.81.0",
"request-promise": "^3.0.0",
"uuid": "^3.0.1",
"xml2js": "^0.4.17",
"yoho-express-session": "^2.0.0",
"yoho-md5": "^2.0.0",
"yoho-node-lib": "=0.2.25",
"yoho-zookeeper": "^1.0.8"
},
"devDependencies": {
"autoprefixer": "^6.7.4",
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-polyfill": "^6.23.0",
"babel-preset-env": "^1.4.0",
"css-loader": "^0.28.0",
"cssnano": "^3.10.0",
"eslint": "^3.19.0",
"eslint-config-yoho": "^1.0.1",
"eslint-loader": "^1.7.1",
"eslint-plugin-html": "^2.0.1",
"extract-text-webpack-plugin": "^2.1.0",
"handlebars-loader": "^1.5.0",
"happypack": "^3.0.3",
"husky": "^0.13.3",
"nodemon": "^1.11.0",
"postcss-assets": "^4.0.1",
"postcss-calc": "^5.3.1",
"postcss-center": "^1.0.0",
"postcss-clearfix": "^1.0.0",
"postcss-crip": "^2.0.1",
"postcss-import": "^9.1.0",
"postcss-loader": "^1.3.1",
"postcss-position": "^0.5.0",
"postcss-pxtorem": "^4.0.0",
"postcss-scss": "^0.4.1",
"postcss-short": "^3.0.3",
"postcss-sprites": "^4.2.1",
"postcss-use": "^2.3.0",
"precss": "^1.4.0",
"shelljs": "^0.7.6",
"style-loader": "^0.16.1",
"stylelint": "^7.10.1",
"stylelint-config-yoho": "^1.2.8",
"stylelint-formatter-table": "^1.0.2",
"stylelint-processor-html": "^1.0.0",
"stylelint-webpack-plugin": "^0.7.0",
"vue": "^2.2.6",
"vue-loader": "^11.3.4",
"vue-template-compiler": "^2.2.6",
"webpack": "^2.4.1",
"webpack-dev-server": "^2.4.4",
"webpack-uglify-parallel": "^0.1.3",
"yoho-cookie": "^1.2.0",
"yoho-fastclick": "^1.0.6",
"yoho-hammer": "^2.0.7",
"yoho-iscroll": "^5.2.0",
"yoho-jquery": "^2.2.4",
"yoho-jquery-lazyload": "^1.9.10",
"yoho-jquery-qrcode": "^0.14.0",
"yoho-mlellipsis": "0.0.3",
"yoho-qs": "^1.0.1",
"yoho-swiper": "^3.3.1",
"yoho-swiper2": "0.0.5"
}
}
\ No newline at end of file
... ...
... ... @@ -12,7 +12,10 @@ class TabView extends View {
let $this = $(e.currentTarget);
if (!$this.hasClass('active')) {
let $index = $this.index();
$this.addClass('active').siblings('span').removeClass('active');
$('.tab-item:eq(' + $index + ')').removeClass('hide').siblings('.tab-item').addClass('hide');
}
}
}
... ...
.grade-new-c {
background-color: #f0f0f0;
padding-bottom: 30px;
.tab {
height: 80px;
... ... @@ -70,6 +71,18 @@
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 {
... ... @@ -167,6 +180,7 @@
.table-c {
width: 100%;
background-color: #fff;
padding-bottom: 30px;
table {
width: 100%;
... ... @@ -195,4 +209,97 @@
margin-top: 20px;
}
}
.vip-privilege-page {
background-color: #fff;
padding: 0 30px;
}
.privilege-list {
margin-top: 20px;
background: #fff;
.icon {
float: left;
display: block;
width: 70px;
height: 70px;
margin: 25px 0;
}
li {
clear: both;
&:last-child {
p {
border-bottom: 0;
}
}
}
p {
font-size: 28px;
margin-left: 100px;
padding: 25px 0;
border-bottom: solid 1px #e5e5e5;
min-height: 70px;
}
span {
display: block;
color: #b0b0b0;
font-size: 22px;
}
}
.ul-detail {
margin-top: 20px;
.li-item {
height: 120px;
background-color: #fff;
border-bottom: solid 1px #e5e5e5;
padding: 20px 30px;
line-height: 80px;
}
.text {
width: 600px;
float: left;
p:first-child {
line-height: 40px;
font-size: 28px;
color: #444;
}
p:last-child {
line-height: 40px;
font-size: 25px;
color: #b0b0b0;
}
}
.num {
width: 90px;
float: left;
text-align: right;
line-height: 80px;
font-size: 24px;
}
.title {
float: left;
width: 500px;
font-size: 28px;
color: #444;
}
.date {
width: 190px;
font-size: 28px;
color: #444;
float: right;
}
}
}
... ...