fe / yohobuywap-node · Commits

Go to a project

Authored by 郝肖肖
Commit 8f17e19fd3fdde61b9cc83f17f7b3ff11b994c6a 1 parent 489afa95

优惠券 分页

Inline Side-by-side
Showing 9 changed files with 221 additions and 112 deletions
@@ -3,7 +3,7 @@ @@ -3,7 +3,7 @@
3 const headerModel = require('../../../doraemon/models/header'), // 头部model 3 const headerModel = require('../../../doraemon/models/header'), // 头部model
4 model = require('../models/coupons'); 4 model = require('../models/coupons');
5 5
6 -// 处理Ajax请求，status为使用状态 6 +// status为使用状态
7 const index = (req, res, next) => { 7 const index = (req, res, next) => {
8 model.couponData({ 8 model.couponData({
9 method: 'app.coupons.li', 9 method: 'app.coupons.li',
@@ -30,6 +30,19 @@ const index = (req, res, next) => { @@ -30,6 +30,19 @@ const index = (req, res, next) => {
30 }).catch(next); 30 }).catch(next);
31 }; 31 };
32 32
  33 +const couponsAjax = (req, res, next) => {
  34 + model.couponData({
  35 + method: 'app.coupons.li',
  36 + uid: req.user.uid,
  37 + status: parseInt(req.body.status || 0, 10),
  38 + page: req.body.page || 1,
  39 + limit: 10,
  40 + }).then(result => {
  41 + res.json(result);
  42 + }).catch(next);
  43 +};
  44 +
33 module.exports = { 45 module.exports = {
34 index, 46 index,
  47 + couponsAjax
35 }; 48 };
1 // 优惠券 by acgpiano 1 // 优惠券 by acgpiano
2 'use strict'; 2 'use strict';
3 3
  4 +const moment = require('moment');
4 const api = global.yoho.API; 5 const api = global.yoho.API;
  6 +const helpers = global.yoho.helpers;
5 7
6 const couponData = (params) => { 8 const couponData = (params) => {
7 return api.get('', params).then(result => { 9 return api.get('', params).then(result => {
8 - if (result && result.data && result.data.info) {  
9 - return result.data.info; 10 + if (result && result.data && result.data.couponList) {
  11 + let times = moment().valueOf() / 1000;
  12 + let expireTime = 3600 * 24 * 3; //即将过期时间3天
  13 + let status0 = params.status === 0;
  14 + let status1 = params.status === 1;
  15 +
  16 + return result.data.couponList.map(function(elem) {
  17 + if (status0) {
  18 + elem.isSoonExpire = (elem.endTime - times) < expireTime;
  19 + elem.bestowLink = helpers.urlFormat('/product/index/index',
  20 + {
  21 + coupon_id: elem.couponId,
  22 + title: '优惠活动商品',
  23 + intro_text: `以下商品可使用【${elem.couponDetailInfomation}】优惠券`
  24 + }
  25 + );
  26 + } else if (status1) {
  27 + elem.employbg = true;
  28 + }
  29 + return elem;
  30 + });
10 } else { 31 } else {
11 - return 0; 32 + return [];
12 } 33 }
13 }); 34 });
14 }; 35 };
@@ -77,6 +77,7 @@ router.post('/favoriteDel', auth, favorite.favoriteDelete);// 取消收藏 @@ -77,6 +77,7 @@ router.post('/favoriteDel', auth, favorite.favoriteDelete);// 取消收藏
77 77
78 // 优惠券 78 // 优惠券
79 router.use('/coupons', auth, coupons.index); 79 router.use('/coupons', auth, coupons.index);
  80 +router.use('/couponsAjax', coupons.couponsAjax);
80 81
81 // 帮助中心 82 // 帮助中心
82 router.get('/help', help.index); 83 router.get('/help', help.index);
@@ -3,57 +3,52 @@ @@ -3,57 +3,52 @@
3 <ul> 3 <ul>
4 <li class="activate">未使用</li> 4 <li class="activate">未使用</li>
5 <li>已使用</li> 5 <li>已使用</li>
6 - <li>已失效</li>  
7 </ul> 6 </ul>
8 </div> 7 </div>
9 8
10 - <div class="coupon-list">  
11 - <div class="coupon-group">  
12 - <div class="coupon-header">VANS专享券满899减200</div>  
13 - <div class="coupon-content">  
14 - <div class="coupon-content-group1">  
15 - <p class="coupon-money">200</p>  
16 - <p>满899可用</p>  
17 - </div>  
18 - <div class="coupon-content-group2">  
19 - <div class="coupon-content-group2-table">  
20 - <div>2016.12.09~2016.12.21<span class="coupon-expire">（即将到期）</span></div>  
21 - <div>  
22 - <div class="left down">详细信息<i class="iconfont"></i></div>  
23 - <div class="right"><span class="btn">立即使用</span></div>  
24 - </div> 9 + {{!--coupon-list start--}}
  10 + <div class="coupon-list coupon-tab1">
  11 + {{#each list}}
  12 + <div class="coupon-group">
  13 + <div class="coupon-header">{{couponDetailInfomation}}</div>
  14 + <div class="coupon-content">
  15 + <div class="coupon-content-group1">
  16 + <p class="coupon-money">{{couponValue}}</p>
  17 + <p>{{rule4ShortName}}</p>
25 </div> 18 </div>
26 - </div>  
27 - </div>  
28 - <div class="coupon-footer hide">  
29 - <p>限品牌：VANS</p>  
30 - <p>特例商品（秒杀、限定、境外、预售等）暂不支持使用优惠券。</p>  
31 - <p>说明：金卡用户专用</p>  
32 - </div>  
33 - </div>  
34 -  
35 - <div class="coupon-group">  
36 - <div class="coupon-header">VANS专享券满899减200</div>  
37 - <div class="coupon-content">  
38 - <div class="coupon-content-group1">  
39 - <p class="coupon-money">200</p>  
40 - <p>满899可用</p>  
41 - </div>  
42 - <div class="coupon-content-group2">  
43 - <div class="coupon-content-group2-table">  
44 - <div>2016.12.09~2016.12.21<span class="coupon-expire">（即将到期）</span></div>  
45 - <div>  
46 - <div class="left up">详细信息<i class="iconfont"></i></div>  
47 - <div class="right"><span class="btn">立即使用</span></div> 19 + <div class="coupon-content-group2">
  20 + <div class="coupon-content-group2-table">
  21 + <div>
  22 + {{couponValidity}}
  23 + {{#if isSoonExpire}}<span class="coupon-soon-expire">（即将到期）</span>{{/if}}
  24 + </div>
  25 + <div>
  26 + <div class="left down info-btn">详细信息<i class="iconfont"></i></div>
  27 + <div class="right">
  28 + {{#if employbg}}
  29 + <span class="employ"></span>
  30 + {{else if bestowLink}}
  31 + <a href="{{bestowLink}}" class="btn">立即使用</a>
  32 + {{/if}}
  33 + </div>
  34 + </div>
48 </div> 35 </div>
49 </div> 36 </div>
50 </div> 37 </div>
  38 + <div class="coupon-footer hide">
  39 + {{#if brandLimit}}
  40 + <p>限品牌：{{brandLimit}}</p>
  41 + {{/if}}
  42 + {{#if sortLimit}}
  43 + <p>限品类：{{sortLimit}}</p>
  44 + {{/if}}
  45 + <p>特例商品（秒杀、限定、境外、预售等）暂不支持使用优惠券。</p>
  46 + <p>说明：金卡用户专用</p>
  47 + </div>
51 </div> 48 </div>
52 - <div class="coupon-footer">  
53 - <p>限品牌：VANS</p>  
54 - <p>特例商品（秒杀、限定、境外、预售等）暂不支持使用优惠券。</p>  
55 - <p>说明：金卡用户专用</p>  
56 - </div>  
57 - </div> 49 + {{/each}}
58 </div> 50 </div>
  51 + {{!--coupon-list end--}}
  52 + <div class="coupon-list coupon-tab2"></div>
  53 + <div class="coupon-list coupon-tab3"></div>
59 </div> 54 </div>
@@ -10,7 +10,7 @@ const isProduction = process.env.NODE_ENV === 'production'; @@ -10,7 +10,7 @@ const isProduction = process.env.NODE_ENV === 'production';
10 const isTest = process.env.NODE_ENV === 'test'; 10 const isTest = process.env.NODE_ENV === 'test';
11 11
12 const domains = { 12 const domains = {
13 - api: 'http://api-test3.yohops.com:9999/', 13 + api: 'http://dev-api.yohops.com:9999/',
14 service: 'http://service-test3.yohops.com:9999/', 14 service: 'http://service-test3.yohops.com:9999/',
15 liveApi: 'http://testapi.live.yohops.com:9999/', 15 liveApi: 'http://testapi.live.yohops.com:9999/',
16 singleApi: 'http://api-test3.yohops.com:9999/', 16 singleApi: 'http://api-test3.yohops.com:9999/',
  1 +{{#each list}}
  2 +<div class="coupon-group">
  3 + <div class="coupon-header">{{couponDetailInfomation}}</div>
  4 + <div class="coupon-content">
  5 + <div class="coupon-content-group1">
  6 + <p class="coupon-money">{{couponValue}}</p>
  7 + <p>{{rule4ShortName}}</p>
  8 + </div>
  9 + <div class="coupon-content-group2">
  10 + <div class="coupon-content-group2-table">
  11 + <div>
  12 + {{couponValidity}}
  13 + {{#if isSoonExpire}}<span class="coupon-soon-expire">（即将到期）</span>{{/if}}
  14 + </div>
  15 + <div>
  16 + <div class="left down info-btn">详细信息<i class="iconfont"></i></div>
  17 + <div class="right">
  18 + {{#if employbg}}
  19 + <span class="employ"></span>
  20 + {{else if bestowLink}}
  21 + <a href="{{bestowLink}}" class="btn">立即使用</a>
  22 + {{/if}}
  23 + </div>
  24 + </div>
  25 + </div>
  26 + </div>
  27 + </div>
  28 + <div class="coupon-footer hide">
  29 + {{#if brandLimit}}
  30 + <p>限品牌：{{brandLimit}}</p>
  31 + {{/if}}
  32 + {{#if sortLimit}}
  33 + <p>限品类：{{sortLimit}}</p>
  34 + {{/if}}
  35 + <p>特例商品（秒杀、限定、境外、预售等）暂不支持使用优惠券。</p>
  36 + <p>说明：金卡用户专用</p>
  37 + </div>
  38 +</div>
  39 +{{/each}}
1 // 不要使用es6 1 // 不要使用es6
2 'use strict'; 2 'use strict';
3 -require('home/coupons.page.css');  
4 -var $ = require('yoho-jquery'),  
5 - fastclick = require('yoho-fastclick'),  
6 - ellipsis = require('yoho-mlellipsis');  
7 3
8 -var $employ = $('#employ'),  
9 - $employ2 = $('#employ2'),  
10 - statu = 0, 4 +var $ = require('yoho-jquery');
  5 +var couponsListHbs = require('home/coupons-list.hbs');
  6 +
  7 +var $couponTab1 = $('.coupon-tab1'),
  8 + $couponTab2 = $('.coupon-tab2'),
  9 + $couponTab3 = $('.coupon-tab3'),
  10 + $couponUl = $('.coupon-tab'),
11 page = 1, 11 page = 1,
12 - dic = {},  
13 - AjaxFlag = 0; // 防止重复请求 12 + indexNum,
  13 + couponFun,
  14 + scrollHandler,
  15 + $tabDom;
14 16
  17 +require('home/coupons.page.css');
15 require('../common'); 18 require('../common');
16 -ellipsis.init();  
17 19
18 -dic[statu + '_' + page] = true;  
19 -fastclick.attach(document.body); 20 +couponFun = function() {
  21 + $tabDom = $couponUl.find('li.activate');
20 22
21 -var couponAJAX = function(statu, page) {  
22 - if (AjaxFlag || dic[statu + '_' + page]) {  
23 - return; 23 + if (!$tabDom) {
  24 + return false;
  25 + }
  26 +
  27 + if ($tabDom.data('AjaxFlag')) {
  28 + return false;
24 } 29 }
25 30
26 - var employDom = statu === 0 ? $employ : $employ2; 31 + $tabDom.data('AjaxFlag', true);
  32 + page = $tabDom.data('page') || 1;
  33 + indexNum = $tabDom.index() * 1;
  34 +
  35 + // 首屏渲染page = 2
  36 + if (indexNum === 0 && !$tabDom.data('page')) {
  37 + page = 2;
  38 + }
27 39
28 - AjaxFlag = 1;  
29 $.ajax({ 40 $.ajax({
30 type: 'POST', 41 type: 'POST',
31 - url: '/home/coupons',  
32 - dataType: 'html', 42 + url: '/home/couponsAjax',
  43 + dataType: 'json',
33 data: { 44 data: {
34 - status: statu, 45 + status: indexNum,
35 page: page 46 page: page
36 }, 47 },
37 success: function(data) { 48 success: function(data) {
38 - dic[statu + '_' + page] = true; // tab切换时，防止频繁请求  
39 - if ($(data).find('.null').html()) {  
40 - if (page === 1) {  
41 - employDom.append($(data).find('.null'));  
42 - }  
43 - AjaxFlag = 1;  
44 - return; 49 + if (data.length <= 0) {
  50 + return false;
45 } 51 }
46 - if (!$(data).find('.employ-main').html()) {  
47 - AjaxFlag = 1;  
48 - return; 52 +
  53 + if (page === 0 && data.length <= 0) {
  54 + return false;
49 } 55 }
50 - employDom.append($(data).find('.employ-main'));  
51 - AjaxFlag = 0;  
52 - }  
53 - });  
54 -};  
55 56
56 -$('.employ span').each(function(index, el) {  
57 - $(el).on('click', function() {  
58 - $('.employ span').removeClass('active').eq(index).addClass('active');  
59 - if (index === 0) {  
60 - $employ.removeClass('hide');  
61 - $employ2.addClass('hide');  
62 - } else {  
63 - $employ.addClass('hide');  
64 - $employ2.removeClass('hide'); 57 + $tabDom.data('page', ++page);
  58 + $tabDom.data('AjaxFlag', false);
  59 +
  60 + switch (indexNum * 1) {
  61 + case 0:
  62 + $couponTab1.append(couponsListHbs({list: data}));
  63 + break;
  64 + case 1:
  65 + $couponTab2.append(couponsListHbs({list: data}));
  66 + break;
  67 + case 2:
  68 + $couponTab3.append(couponsListHbs({list: data}));
  69 + break;
  70 + default: break;
  71 + }
  72 + window.rePosFooter(); // 重新计算底部位置
65 } 73 }
66 - statu = index;  
67 - page = 1;  
68 - AjaxFlag = 0;  
69 - couponAJAX(statu, page);  
70 - window.rePosFooter();  
71 }); 74 });
72 -}); 75 +};
73 76
74 -var scrollHandler = function() { 77 +scrollHandler = function() {
75 if ($(window).scrollTop() + $(window).height() > $('body').height() - 100) { 78 if ($(window).scrollTop() + $(window).height() > $('body').height() - 100) {
76 - page++;  
77 - couponAJAX(statu, page); 79 + couponFun();
78 return; 80 return;
79 } 81 }
80 }; 82 };
@@ -82,3 +84,24 @@ var scrollHandler = function() { @@ -82,3 +84,24 @@ var scrollHandler = function() {
82 $(window).scroll(function() { 84 $(window).scroll(function() {
83 window.requestAnimationFrame(scrollHandler); 85 window.requestAnimationFrame(scrollHandler);
84 }); 86 });
  87 +
  88 +// tab 事件
  89 +$couponUl.on('click', 'li', function() {
  90 + $(this).addClass('activate').siblings().removeClass('activate');
  91 + $('.coupon-list').addClass('hide').eq($(this).index()).removeClass('hide');
  92 + couponFun();
  93 + window.rePosFooter(); // 重新计算底部位置
  94 +});
  95 +
  96 +// 详细信息事件
  97 +$('.coupon-list').on('click', '.info-btn', function() {
  98 + var $this = $(this);
  99 +
  100 + if ($this.hasClass('down')) {
  101 + $this.removeClass('down').addClass('up');
  102 + $this.closest('.coupon-group').find('.coupon-footer').removeClass('hide');
  103 + } else {
  104 + $this.removeClass('up').addClass('down');
  105 + $this.closest('.coupon-group').find('.coupon-footer').addClass('hide');
  106 + }
  107 +});
@@ -11,7 +11,7 @@ @@ -11,7 +11,7 @@
11 11
12 ul li { 12 ul li {
13 float: left; 13 float: left;
14 - width: 33.33%; 14 + width: 50%;
15 15
16 &.activate { 16 &.activate {
17 color: #444; 17 color: #444;
@@ -33,7 +33,9 @@ @@ -33,7 +33,9 @@
33 background-color: #e53333; 33 background-color: #e53333;
34 height: 60px; 34 height: 60px;
35 line-height: 60px; 35 line-height: 60px;
36 - box-shadow: 0 0 10px #eee; 36 + overflow: hidden;
  37 + text-overflow: ellipsis;
  38 + white-space: nowrap;
37 } 39 }
38 40
39 .coupon-content { 41 .coupon-content {
@@ -54,6 +56,7 @@ @@ -54,6 +56,7 @@
54 p { 56 p {
55 width: 200px; 57 width: 200px;
56 overflow: hidden; 58 overflow: hidden;
  59 + min-height: 28px;
57 } 60 }
58 61
59 .coupon-money { 62 .coupon-money {
@@ -73,6 +76,7 @@ @@ -73,6 +76,7 @@
73 display: table; 76 display: table;
74 overflow: hidden; 77 overflow: hidden;
75 height: 100%; 78 height: 100%;
  79 + width: 100%;
76 line-height: 45px; 80 line-height: 45px;
77 } 81 }
78 82
@@ -84,21 +88,23 @@ @@ -84,21 +88,23 @@
84 .left { 88 .left {
85 float: left; 89 float: left;
86 line-height: 45px; 90 line-height: 45px;
  91 + }
87 92
88 - &.down .iconfont:before {  
89 - content: '\e609';  
90 - } 93 + .left.down .iconfont:before {
  94 + font-size: 12px;
  95 + content: "\e609";
  96 + }
91 97
92 - &.up .iconfont:before {  
93 - content: '\e608';  
94 - } 98 + .left.up .iconfont:before {
  99 + font-size: 12px;
  100 + content: "\e608";
95 } 101 }
96 102
97 .right { 103 .right {
98 float: right; 104 float: right;
99 } 105 }
100 106
101 - .coupon-expire { 107 + .coupon-soon-expire {
102 color: #000; 108 color: #000;
103 } 109 }
104 110
@@ -111,6 +117,18 @@ @@ -111,6 +117,18 @@
111 border-radius: 10px; 117 border-radius: 10px;
112 color: #fff; 118 color: #fff;
113 } 119 }
  120 +
  121 + .employ {
  122 + width: 171px;
  123 + height: 146px;
  124 + position: absolute;
  125 + display: block;
  126 + z-index: 2;
  127 + right: 37px;
  128 + margin-top: -90px;
  129 + background-image: resolve("home/employ.png");
  130 + background-size: cover;
  131 + }
114 } 132 }
115 } 133 }
116 134
@@ -121,6 +139,5 @@ @@ -121,6 +139,5 @@
121 border-radius: 10px; 139 border-radius: 10px;
122 border-top: 1px dashed #fff; 140 border-top: 1px dashed #fff;
123 } 141 }
124 -  
125 } 142 }
126 } 143 }