fe / yohobuywap-node · Commits

Go to a project

Authored by 李靖
Commit daeb59e693c07b5864cf9858f4d04d61999ab545 1 parent 05749245

积分商城

Inline Side-by-side
Showing 8 changed files with 467 additions and 0 deletions
... ... @@ -91,3 +91,18 @@ exports.modify = (req, res, next) => {
res.json(result);
}).catch(next);
};
exports.coinMall = (req, res) => {
let responseData = {
module: 'home',
page: 'family-coinMall',
pageHeader: headerModel.setNav({
navTitle: '积分商城'
}),
title: 'YOHO！积分商城',
width750: true,
localCss: true
};
res.render('family/coinMall', Object.assign(responseData, ''));
};
... ...
... ... @@ -182,5 +182,6 @@ 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, disableBFCache, family.userInfo); // family个人信息页
router.get('/family/coinMall', auth, family.coinMall); // 积分商城
router.get('/family/modify', auth, family.modify); // family修改个人信息页
module.exports = router;
... ...
<div class="coin-mall-c">
<div class="tab">
<div class="tab-item" id="yohonow">Yoho!Now</div>
<div class="tab-item" id="mars">mars</div>
</div>
<div class="coin">
<span class="coin-pic"></span>
<span>567890</span>
</div>
<div class="btn-c">
<a>如何获取有货币</a>
<a>有货币明细</a>
</div>
<div class="tab-c">
<div class="tab-item-c" id="yohonow-tab">
<div class="act-list">
<div class="act-item">
<div class="pic">
<img src="http://img10.static.yhbimg.com/article/2017/07/26/14/01fd8146b8c9d5589f63f161141c9870d0.png" />
<div class="bg"></div>
<div class="title">有效期:10.11~10.21</div>
<div class="level">Lv.1可兑换</div>
</div>
<div class="info">
<div class="left">
<div class="name">2016 ACT021</div>
<div class="num">
<span class="coin-pic-s"></span>
<span>1000</span>
<span class="old-price">500</span>
<span class="discount">Lv.3会员9折优惠</span>
</div>
<div class="remain">仅剩50份</div>
</div>
<div class="right">
<a class="go-btn">兑换</a>
</div>
</div>
</div>
<div class="act-item">
<div class="pic">
<img src="http://img10.static.yhbimg.com/article/2017/07/26/14/01fd8146b8c9d5589f63f161141c9870d0.png" />
<div class="bg"></div>
<div class="title">有效期:10.11~10.21</div>
<div class="level">Lv.1可兑换</div>
</div>
<div class="info">
<div class="left">
<div class="name">2016 ACT021</div>
<div class="num">
<span class="coin-pic-s"></span>
<span>1000</span>
<span class="old-price">500</span>
<span class="discount">Lv.3会员9折优惠</span>
</div>
<div class="remain">仅剩50份</div>
</div>
<div class="right">
<a class="go-btn">兑换</a>
</div>
</div>
</div>
<div class="act-item">
<div class="pic">
<img src="http://img10.static.yhbimg.com/article/2017/07/26/14/01fd8146b8c9d5589f63f161141c9870d0.png" />
<div class="bg"></div>
<div class="title">有效期:10.11~10.21</div>
<div class="level">Lv.1可兑换</div>
</div>
<div class="info">
<div class="left">
<div class="name">2016 ACT021</div>
<div class="num">
<span class="coin-pic-s"></span>
<span>1000</span>
<span class="old-price">500</span>
<span class="discount">Lv.3会员9折优惠</span>
</div>
<div class="remain">仅剩50份</div>
</div>
<div class="right">
<a class="go-btn">兑换</a>
</div>
</div>
</div>
</div>
</div>
<div class="tab-item-c" id="mars-tab">
<div class="act-list">
<div class="act-item">
<div class="pic">
<img src="http://img10.static.yhbimg.com/article/2017/07/26/14/01fd8146b8c9d5589f63f161141c9870d0.png" />
<div class="bg"></div>
<div class="title">有效期:10.11~10.21</div>
<div class="level">Lv.1可兑换</div>
</div>
<div class="info">
<div class="left">
<div class="name">2016 ACT021</div>
<div class="num">
<span class="coin-pic-s"></span>
<span>1000</span>
<span class="old-price">500</span>
<span class="discount">Lv.3会员9折优惠</span>
</div>
<div class="remain">仅剩50份</div>
</div>
<div class="right">
<a class="go-btn">兑换</a>
</div>
</div>
</div>
<div class="act-item">
<div class="pic">
<img src="http://img10.static.yhbimg.com/article/2017/07/26/14/01fd8146b8c9d5589f63f161141c9870d0.png" />
<div class="bg"></div>
<div class="title">有效期:10.11~10.21</div>
<div class="level">Lv.1可兑换</div>
</div>
<div class="info">
<div class="left">
<div class="name">2016 ACT021</div>
<div class="num">
<span class="coin-pic-s"></span>
<span>1000</span>
<span class="old-price">500</span>
<span class="discount">Lv.3会员9折优惠</span>
</div>
<div class="remain">仅剩50份</div>
</div>
<div class="right">
<a class="go-btn">兑换</a>
</div>
</div>
</div>
<div class="act-item">
<div class="pic">
<img src="http://img10.static.yhbimg.com/article/2017/07/26/14/01fd8146b8c9d5589f63f161141c9870d0.png" />
<div class="bg"></div>
<div class="title">有效期:10.11~10.21</div>
<div class="level">Lv.1可兑换</div>
</div>
<div class="info">
<div class="left">
<div class="name">2016 ACT021</div>
<div class="num">
<span class="coin-pic-s"></span>
<span>1000</span>
<span class="old-price">500</span>
<span class="discount">Lv.3会员9折优惠</span>
</div>
<div class="remain">仅剩50份</div>
</div>
<div class="right">
<a class="go-btn">兑换</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
... ...
import 'home/family-coinMall.page.css';
import $ from 'yoho-jquery';
import Page from 'yoho-page';
class IconMall extends Page {
constructor() {
super();
this.selector = {
$tabItem: $('.tab .tab-item'),
$defaultTabItem: $('.tab .tab-item:first'),
$coinMallC: $('.coin-mall-c')
};
this.init();
}
init() {
this.bindEvents();
this.defaultChosen();
}
bindEvents() {
this.selector.$tabItem.on('click', this.tabItem.bind(this));
}
defaultChosen() {
let defaultId = this.selector.$defaultTabItem.attr('id');
this.selector.$defaultTabItem.addClass('active');
this.selector.$coinMallC.attr('id', defaultId);
}
tabItem(e) {
let $this = $(e.currentTarget);
let $thisId = $this.attr('id');
$(`#${$thisId}-tab`).show().siblings('.tab-item-c').hide();
this.selector.$coinMallC.removeAttr('id');
this.selector.$coinMallC.attr('id', $thisId);
$this.addClass('active').siblings('div').removeClass('active');
}
}
$(() => {
new IconMall();
});
... ...
body,
html {
background-color: #f0f0f0;
}
.coin-mall-c {
.coin-pic {
width: 60px;
height: 60px;
background: resolve("home/family/yoho.png");
display: inline-block;
margin-right: 20px;
background-size: 100% 100%;
}
.coin-pic-s {
width: 34px;
height: 34px;
background: resolve("home/family/yoho-s.png");
display: inline-block;
margin-right: 5px;
background-size: 100% 100%;
}
.tab {
background-color: #fff;
float: left;
.tab-item {
width: 375px;
float: left;
line-height: 100px;
font-size: 30px;
color: #b0b0b0;
text-align: center;
}
.tab-item.active {
color: #000;
}
}
.coin {
background-color: #fff;
font-size: 50px;
text-align: center;
color: #fece02;
line-height: 160px;
height: 160px;
clear: both;
display: flex;
justify-content: center;
align-items: center;
}
.btn-c {
background-color: #fff;
padding: 0 44px 60px;
float: left;
margin-bottom: 20px;
a {
display: block;
width: 270px;
height: 58px;
background-color: #1a1a1a;
color: #fff;
line-height: 58px;
text-align: center;
font-size: 26px;
float: left;
margin: 0 30px;
}
}
.act-list {
clear: both;
.act-item {
margin-bottom: 20px;
.pic {
position: relative;
.bg {
width: 270px;
height: 50px;
line-height: 50px;
background-color: #000;
position: absolute;
top: 0;
right: 0;
opacity: 0.5;
display: none;
}
.title {
font-size: 26px;
width: 270px;
height: 50px;
line-height: 50px;
color: #fff;
position: absolute;
top: 0;
right: 0;
text-align: center;
display: none;
}
.level {
width: 160px;
height: 46px;
line-height: 46px;
text-align: center;
background-color: #000;
color: #fff;
font-size: 26px;
position: absolute;
top: 0;
right: 0;
display: none;
}
}
.info {
padding: 20px 30px;
height: 170px;
background-color: #fff;
.left {
width: 560px;
float: left;
}
.name {
font-size: 30px;
line-height: 50px;
}
.num {
font-size: 30px;
line-height: 50px;
color: #fece02;
display: flex;
align-items: center;
}
.old-price {
color: #b0b0b0;
font-size: 24px;
text-decoration: line-through;
margin-left: 8px;
display: none;
}
.discount {
font-size: 22px;
color: #89b374;
border: solid 1px #89b374;
line-height: 35px;
padding: 0 10px;
margin-left: 10px;
display: none;
}
.remain {
color: #b0b0b0;
font-size: 20px;
line-height: 30px;
}
.right {
width: 130px;
float: right;
}
.go-btn {
width: 130px;
height: 58px;
line-height: 58px;
text-align: center;
color: #fff;
font-size: 28px;
background-color: #000;
display: block;
margin-top: 25px;
}
}
}
}
}
#mars {
.coin {
color: #000;
}
.coin-pic-s {
background-image: resolve("home/family/mars-s.png") !important;
}
.coin-pic {
background-image: resolve("home/family/mars-s.png") !important;
}
.act-item {
.pic {
.level {
display: block !important;
border-radius: 23px 0 0 23px;
}
}
.info {
.num {
color: #000 !important;
}
.old-price {
display: block !important;
}
.discount {
display: block !important;
}
}
}
}
#yohonow {
.act-item {
.pic {
.bg {
display: block !important;
}
.title {
display: block !important;
}
}
}
}
... ...