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) => { @@ -394,3 +394,24 @@ exports.brandCoupon = (req, res) => {
394 return res.json(coupons); 394 return res.json(coupons);
395 }); 395 });
396 }; 396 };
  397 +
  398 +/**
  399 + * [获取商品 品牌券]
  400 + */
  401 +exports.getCoupon = (req, res, next) => {
  402 + const uid = req.user.uid;
  403 + const couponId = +req.body.couponId;
  404 +
  405 + if (!couponId) {
  406 + return res.json({
  407 + code: 400,
  408 + message: '优惠券不存在'
  409 + });
  410 + }
  411 +
  412 + return couponModel.getCoupon(uid, couponId)
  413 + .then(data => {
  414 + return res.json(data);
  415 + })
  416 + .catch(next);
  417 +};
@@ -16,3 +16,17 @@ exports.queryProdPageCoupons = (uid, skn, brandId) => { @@ -16,3 +16,17 @@ exports.queryProdPageCoupons = (uid, skn, brandId) => {
16 16
17 return api.get('', param, {cache: true}); 17 return api.get('', param, {cache: true});
18 }; 18 };
  19 +
  20 +/**
  21 + * [用户领券]
  22 + * doc: http://git.yoho.cn/yoho-documents/api-interfaces/blob/master/促销/promotion.md
  23 + */
  24 +exports.getCoupons = (uid, couponId) => {
  25 + const param = {
  26 + method: 'app.promotion.getCoupon',
  27 + uid,
  28 + couponId
  29 + };
  30 +
  31 + return api.post('', param);
  32 +};
@@ -66,6 +66,7 @@ router.post('/detail/info', detail.getUser, detail.indexData); // 商å“è¯¦æƒ…é¡ @@ -66,6 +66,7 @@ router.post('/detail/info', detail.getUser, detail.indexData); // 商å“详情é¡
66 router.post('/detail/consultsubmit', auth, detail.consultsubmit); // 商品咨询提交接口 66 router.post('/detail/consultsubmit', auth, detail.consultsubmit); // 商品咨询提交接口
67 67
68 router.get('/detail/coupon.json', detail.brandCoupon); // 品牌券 68 router.get('/detail/coupon.json', detail.brandCoupon); // 品牌券
  69 +router.post('/detail/coupon/save.json', auth, detail.getCoupon); // 获得 品牌券
69 70
70 router.get('/recom/maylike', recom.mayLike);// 你可能喜欢 71 router.get('/recom/maylike', recom.mayLike);// 你可能喜欢
71 router.get('/recom/maylikekids', recom.mayLikeKids); // 潮童你可能喜欢 72 router.get('/recom/maylikekids', recom.mayLikeKids); // 潮童你可能喜欢
1 -{{！ 商品详情--品牌券 抽屉dom}} 1 +{{! 商品详情--品牌券 抽屉dom}}
2 <div class="coupon-drawer"> 2 <div class="coupon-drawer">
3 - <div class="title">领取优惠券</div>  
4 - <div class="body">  
5 - <ul class="coupon-list">  
6 - {{#each coupons}}  
7 - <li class="coupon">  
8 - <div class="pull-right">  
9 - <button type="button">立刻领取</button>  
10 - </div>  
11 - <div class="coupon-intro">  
12 - <div class="coupon-price">¥ 200</div>  
13 - <div class="coupon-desc">issz品牌优惠券满499减120</div>  
14 - <div class="coupon-time">使用期限: 2016.10.21 ~ 2016.10.22</div>  
15 - </div>  
16 - </li>  
17 - {{/each}}  
18 - </ul> 3 + <div class="coupon-drawer-dialog">
  4 + <div class="title">领取优惠券</div>
  5 + <div class="body">
  6 + <ul class="coupon-list">
  7 + {{#each coupons}}
  8 + <li class="coupon" data-coupon="{{couponId}}">
  9 + <div class="pull-right">
  10 + {{#valid acquireStatus}}
  11 + <button type="button" class="coupon-btn coupon-btn-valid">立刻领取</button>
  12 + {{else}}
  13 + <button type="button" class="coupon-btn">已领取</button>
  14 + {{/valid}}
  15 + </div>
  16 + <div class="coupon-intro">
  17 + <div class="coupon-price">¥ {{amount}}</div>
  18 + <div class="coupon-desc">{{couponName}}</div>
  19 + <div class="coupon-time">使用期限: {{lifeTime}}</div>
  20 + </div>
  21 + </li>
  22 + {{/each}}
  23 + </ul>
  24 + </div>
19 </div> 25 </div>
  26 + <div class="coupon-drawer-mask"></div>
20 </div> 27 </div>
  1 +/**
  2 + * 当 acquireStatus 为1 时，即优惠券可以领取
  3 + */
  4 +module.exports = (conditional, options) => {
  5 + if (conditional === 1) {
  6 + return options.fn(this);
  7 + } else {
  8 + return options.inverse(this);
  9 + }
  10 +};
@@ -3,39 +3,9 @@ @@ -3,39 +3,9 @@
3 /** 3 /**
4 * 商品详情: 品牌券 4 * 商品详情: 品牌券
5 */ 5 */
6 -/* eslint-disable */  
7 -var mock_data = [{  
8 - "couponName": "有效期20161017未到，10*2",  
9 - "amount": 10,  
10 - "acquireStatus": 3,  
11 - "createTime": 1476358043,  
12 - "startTime": 1476633600,  
13 - "lifeTime": "2016.10.17-2016.10.28",  
14 - "endTime": 1477584000,  
15 - "couponId": 14200  
16 -}, {  
17 - "couponName": "有效的nike券",  
18 - "amount": 22,  
19 - "acquireStatus": 3,  
20 - "createTime": 1475152374,  
21 - "startTime": 1474992000,  
22 - "lifeTime": "2016.09.28-2016.11.17",  
23 - "endTime": 1479312000,  
24 - "couponId": 14144  
25 -}, {  
26 - "couponName": "有效期内优惠券15*3倍",  
27 - "amount": 15,  
28 - "acquireStatus": 3,  
29 - "createTime": 1476358258,  
30 - "startTime": 1476115200,  
31 - "lifeTime": "2016.10.11-2016.11.18",  
32 - "endTime": 1479398400,  
33 - "couponId": 14202  
34 -}];  
35 -/* eslint-enable */  
36 -  
37 var tip = require('plugin/tip'); 6 var tip = require('plugin/tip');
38 var $ = require('yoho-jquery'); 7 var $ = require('yoho-jquery');
  8 +var $body = $(document.body);
39 9
40 var brandCoupon = { 10 var brandCoupon = {
41 skn: null, 11 skn: null,
@@ -57,11 +27,9 @@ var brandCoupon = { @@ -57,11 +27,9 @@ var brandCoupon = {
57 27
58 this.fetchCoupons(this.skn, this.brandId) 28 this.fetchCoupons(this.skn, this.brandId)
59 .done(function(data) { 29 .done(function(data) {
60 - data = mock_data;  
61 -  
62 if (data.length) { 30 if (data.length) {
63 - self.domInit();  
64 self.render(data); 31 self.render(data);
  32 + self.domInit();
65 self.bindEvents(); 33 self.bindEvents();
66 } 34 }
67 }) 35 })
@@ -69,22 +37,26 @@ var brandCoupon = { @@ -69,22 +37,26 @@ var brandCoupon = {
69 }, 37 },
70 38
71 domInit: function() { 39 domInit: function() {
72 - this.$entry = $('.brand-coupon');  
73 -  
74 - this.$entry.removeClass('hide'); 40 + this.$entry = $('.brand-coupon').removeClass('hide');
75 }, 41 },
76 42
77 bindEvents: function() { 43 bindEvents: function() {
78 var self = this; 44 var self = this;
79 45
80 this.$entry.on('click', function() { 46 this.$entry.on('click', function() {
81 - self.$couponDrawer.addClass('open'); 47 + self.toggleDrawer(true);
82 }); 48 });
  49 +
  50 + this.$couponDrawer
  51 + .on('click', '.coupon-drawer-mask', $.proxy(this.toggleDrawer, this, false))
  52 + .on('click', '.coupon-btn-valid', $.proxy(this.saveCouponHandler, this));
83 }, 53 },
84 54
85 render: function(data) { 55 render: function(data) {
86 - this.$couponDrawer = $(this.template(data));  
87 - this.$couponDrawer.appendTo('body'); 56 + this.$couponDrawer = $(this.template({
  57 + coupons: data
  58 + }));
  59 + this.$couponDrawer.appendTo('.good-detail-page');
88 60
89 return this; 61 return this;
90 }, 62 },
@@ -97,9 +69,34 @@ var brandCoupon = { @@ -97,9 +69,34 @@ var brandCoupon = {
97 }); 69 });
98 }, 70 },
99 71
  72 + saveCoupon: function(couponId, callback) {
  73 + $.post('/product/detail/coupon/save.json', {
  74 + couponId: couponId
  75 + }).done(function(res) {
  76 + tip.show(res.message);
  77 +
  78 + if (res.code === 200) {
  79 + callback(); // eslint-disable-line
  80 + }
  81 + });
  82 + },
  83 +
100 // 收藏 品牌券 84 // 收藏 品牌券
101 - saveCoupons: function() { 85 + saveCouponHandler: function(event) {
  86 + var $btn = $(event.target);
  87 + var couponId = $btn.closest('.coupon').data('coupon');
  88 +
  89 + this.saveCoupon(couponId, function() {
  90 + $btn.prop('disabled', true)
  91 + .text('已领取');
  92 + });
  93 +
  94 + event.stopPropagation();
  95 + },
102 96
  97 + toggleDrawer: function(bool) {
  98 + this.$couponDrawer.toggleClass('open', bool);
  99 + $body.toggleClass('coupon-drawer-open', bool);
103 } 100 }
104 }; 101 };
105 102
@@ -4,10 +4,105 @@ @@ -4,10 +4,105 @@
4 4
5 .good-detail-page { 5 .good-detail-page {
6 .coupon-drawer { 6 .coupon-drawer {
  7 + &.open .coupon-drawer-mask {
  8 + display: block;
  9 + }
7 10
  11 + &.open .coupon-drawer-dialog {
  12 + bottom: 0;
  13 + }
8 } 14 }
9 15
10 - .coupon-list { 16 + .coupon-drawer-mask {
  17 + display: none;
  18 + position: fixed;
  19 + top: 0;
  20 + right: 0;
  21 + bottom: 0;
  22 + left: 0;
  23 + z-index: 10;
  24 + background-color: rgba(0, 0, 0, 0.6);
  25 + }
  26 +
  27 + .coupon-drawer-dialog {
  28 + position: fixed;
  29 + right: 0;
  30 + bottom: -100%;
  31 + left: 0;
  32 + z-index: 11;
  33 + transition: all .3s;
  34 + background-color: #fff;
  35 +
  36 + .title {
  37 + text-align: center;
  38 + font-size: 28px;
  39 + line-height: 88px;
  40 + border-bottom: 1px solid #e0e0e0;
  41 + }
  42 +
  43 + .body {
  44 + height: 540px;
  45 + border-bottom: 20px solid #fff;
  46 + overflow: auto;
  47 + }
  48 + }
  49 +
  50 + /*-------------------------------------*\
  51 + .coupon 单个优惠券
  52 + \*-------------------------------------*/
  53 + .coupon {
  54 + min-height: 165px;
  55 + margin-left: 30px;
  56 + margin-right: 30px;
  57 + padding-top: 30px;
  58 + padding-bottom: 15px;
  59 + border-bottom: 1px solid #e0e0e0;
  60 +
  61 + &:last-of-type {
  62 + border-bottom: none;
  63 + }
  64 + }
  65 +
  66 + .coupon-btn {
  67 + min-width: 130px;
  68 + height: 55px;
  69 + font-size: 28px;
  70 + background-color: #fff;
  71 + border-radius: 8px;
  72 + margin-top: 20px;
  73 + padding: 0;
  74 +
  75 + color: #b0b0b0;
  76 + border: 1px solid #b0b0b0;
  77 + }
  78 +
  79 + .coupon-btn-valid {
  80 + color: #d0021b;
  81 + border-color: #d0021b;
  82 + }
  83 +
  84 + .coupon-intro {
  85 + overflow: hidden;
  86 + padding-right: 15px;
  87 + }
11 88
  89 + .coupon-price {
  90 + font-size: 52px;
  91 + line-height: 1;
  92 + color: #d0021b;
12 } 93 }
  94 +
  95 + .coupon-desc {
  96 + font-size: 26px;
  97 + color: #444;
  98 + }
  99 +
  100 + .coupon-time {
  101 + font-size: 18px;
  102 + color: #b0b0b0;
  103 + }
  104 +}
  105 +
  106 +body.coupon-drawer-open {
  107 + overflow: hidden;
13 } 108 }