fe / yohobuywap-node · Commits

Go to a project

Authored by 陈轩
Commit 8fbfd0cf179bf86d750dc8a39e7b8083d59b7560 1 parent addc2cbc

save 商品详情页 品牌券

Inline Side-by-side
Showing 7 changed files with 204 additions and 59 deletions
... ... @@ -394,3 +394,24 @@ exports.brandCoupon = (req, res) => {
return res.json(coupons);
});
};
/**
* [获取商品 品牌券]
*/
exports.getCoupon = (req, res, next) => {
const uid = req.user.uid;
const couponId = +req.body.couponId;
if (!couponId) {
return res.json({
code: 400,
message: '优惠券不存在'
});
}
return couponModel.getCoupon(uid, couponId)
.then(data => {
return res.json(data);
})
.catch(next);
};
... ...
... ... @@ -16,3 +16,17 @@ exports.queryProdPageCoupons = (uid, skn, brandId) => {
return api.get('', param, {cache: true});
};
/**
* [用户领券]
* doc: http://git.yoho.cn/yoho-documents/api-interfaces/blob/master/促销/promotion.md
*/
exports.getCoupons = (uid, couponId) => {
const param = {
method: 'app.promotion.getCoupon',
uid,
couponId
};
return api.post('', param);
};
... ...
... ... @@ -66,6 +66,7 @@ router.post('/detail/info', detail.getUser, detail.indexData); // 商å“详情é¡
router.post('/detail/consultsubmit', auth, detail.consultsubmit); // 商品咨询提交接口
router.get('/detail/coupon.json', detail.brandCoupon); // 品牌券
router.post('/detail/coupon/save.json', auth, detail.getCoupon); // 获得 品牌券
router.get('/recom/maylike', recom.mayLike);// 你可能喜欢
router.get('/recom/maylikekids', recom.mayLikeKids); // 潮童你可能喜欢
... ...
{{！ 商品详情--品牌券 抽屉dom}}
{{! 商品详情--品牌券 抽屉dom}}
<div class="coupon-drawer">
<div class="title">领取优惠券</div>
<div class="body">
<ul class="coupon-list">
{{#each coupons}}
<li class="coupon">
<div class="pull-right">
<button type="button">立刻领取</button>
</div>
<div class="coupon-intro">
<div class="coupon-price">¥ 200</div>
<div class="coupon-desc">issz品牌优惠券满499减120</div>
<div class="coupon-time">使用期限: 2016.10.21 ~ 2016.10.22</div>
</div>
</li>
{{/each}}
</ul>
<div class="coupon-drawer-dialog">
<div class="title">领取优惠券</div>
<div class="body">
<ul class="coupon-list">
{{#each coupons}}
<li class="coupon" data-coupon="{{couponId}}">
<div class="pull-right">
{{#valid acquireStatus}}
<button type="button" class="coupon-btn coupon-btn-valid">立刻领取</button>
{{else}}
<button type="button" class="coupon-btn">已领取</button>
{{/valid}}
</div>
<div class="coupon-intro">
<div class="coupon-price">¥ {{amount}}</div>
<div class="coupon-desc">{{couponName}}</div>
<div class="coupon-time">使用期限: {{lifeTime}}</div>
</div>
</li>
{{/each}}
</ul>
</div>
</div>
<div class="coupon-drawer-mask"></div>
</div>
\ No newline at end of file
... ...
/**
* 当 acquireStatus 为1 时，即优惠券可以领取
*/
module.exports = (conditional, options) => {
if (conditional === 1) {
return options.fn(this);
} else {
return options.inverse(this);
}
};
... ...
... ... @@ -3,39 +3,9 @@
/**
* 商品详情: 品牌券
*/
/* eslint-disable */
var mock_data = [{
"couponName": "有效期20161017未到，10*2",
"amount": 10,
"acquireStatus": 3,
"createTime": 1476358043,
"startTime": 1476633600,
"lifeTime": "2016.10.17-2016.10.28",
"endTime": 1477584000,
"couponId": 14200
}, {
"couponName": "有效的nike券",
"amount": 22,
"acquireStatus": 3,
"createTime": 1475152374,
"startTime": 1474992000,
"lifeTime": "2016.09.28-2016.11.17",
"endTime": 1479312000,
"couponId": 14144
}, {
"couponName": "有效期内优惠券15*3倍",
"amount": 15,
"acquireStatus": 3,
"createTime": 1476358258,
"startTime": 1476115200,
"lifeTime": "2016.10.11-2016.11.18",
"endTime": 1479398400,
"couponId": 14202
}];
/* eslint-enable */
var tip = require('plugin/tip');
var $ = require('yoho-jquery');
var $body = $(document.body);
var brandCoupon = {
skn: null,
... ... @@ -57,11 +27,9 @@ var brandCoupon = {
this.fetchCoupons(this.skn, this.brandId)
.done(function(data) {
data = mock_data;
if (data.length) {
self.domInit();
self.render(data);
self.domInit();
self.bindEvents();
}
})
... ... @@ -69,22 +37,26 @@ var brandCoupon = {
},
domInit: function() {
this.$entry = $('.brand-coupon');
this.$entry.removeClass('hide');
this.$entry = $('.brand-coupon').removeClass('hide');
},
bindEvents: function() {
var self = this;
this.$entry.on('click', function() {
self.$couponDrawer.addClass('open');
self.toggleDrawer(true);
});
this.$couponDrawer
.on('click', '.coupon-drawer-mask', $.proxy(this.toggleDrawer, this, false))
.on('click', '.coupon-btn-valid', $.proxy(this.saveCouponHandler, this));
},
render: function(data) {
this.$couponDrawer = $(this.template(data));
this.$couponDrawer.appendTo('body');
this.$couponDrawer = $(this.template({
coupons: data
}));
this.$couponDrawer.appendTo('.good-detail-page');
return this;
},
... ... @@ -97,9 +69,34 @@ var brandCoupon = {
});
},
saveCoupon: function(couponId, callback) {
$.post('/product/detail/coupon/save.json', {
couponId: couponId
}).done(function(res) {
tip.show(res.message);
if (res.code === 200) {
callback(); // eslint-disable-line
}
});
},
// 收藏 品牌券
saveCoupons: function() {
saveCouponHandler: function(event) {
var $btn = $(event.target);
var couponId = $btn.closest('.coupon').data('coupon');
this.saveCoupon(couponId, function() {
$btn.prop('disabled', true)
.text('已领取');
});
event.stopPropagation();
},
toggleDrawer: function(bool) {
this.$couponDrawer.toggleClass('open', bool);
$body.toggleClass('coupon-drawer-open', bool);
}
};
... ...
... ... @@ -4,10 +4,105 @@
.good-detail-page {
.coupon-drawer {
&.open .coupon-drawer-mask {
display: block;
}
&.open .coupon-drawer-dialog {
bottom: 0;
}
}
.coupon-list {
.coupon-drawer-mask {
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
background-color: rgba(0, 0, 0, 0.6);
}
.coupon-drawer-dialog {
position: fixed;
right: 0;
bottom: -100%;
left: 0;
z-index: 11;
transition: all .3s;
background-color: #fff;
.title {
text-align: center;
font-size: 28px;
line-height: 88px;
border-bottom: 1px solid #e0e0e0;
}
.body {
height: 540px;
border-bottom: 20px solid #fff;
overflow: auto;
}
}
/*-------------------------------------*\
.coupon 单个优惠券
\*-------------------------------------*/
.coupon {
min-height: 165px;
margin-left: 30px;
margin-right: 30px;
padding-top: 30px;
padding-bottom: 15px;
border-bottom: 1px solid #e0e0e0;
&:last-of-type {
border-bottom: none;
}
}
.coupon-btn {
min-width: 130px;
height: 55px;
font-size: 28px;
background-color: #fff;
border-radius: 8px;
margin-top: 20px;
padding: 0;
color: #b0b0b0;
border: 1px solid #b0b0b0;
}
.coupon-btn-valid {
color: #d0021b;
border-color: #d0021b;
}
.coupon-intro {
overflow: hidden;
padding-right: 15px;
}
.coupon-price {
font-size: 52px;
line-height: 1;
color: #d0021b;
}
.coupon-desc {
font-size: 26px;
color: #444;
}
.coupon-time {
font-size: 18px;
color: #b0b0b0;
}
}
body.coupon-drawer-open {
overflow: hidden;
}
\ No newline at end of file
... ...