fe / yohobuywap-node · Commits

Go to a project

Authored by 郭成尧
Commit c33c2805c65c552f293381300be5876fa91896a9 1 parent cf067106

user-coupons-list

Inline Side-by-side
Showing 5 changed files with 149 additions and 74 deletions
  1 +const co = Promise.coroutine;
  2 +const _ = require('lodash');
1 const headerModel = require('../../../doraemon/models/header'); // 头部model 3 const headerModel = require('../../../doraemon/models/header'); // 头部model
2 const CouponNewModel = require('../models/coupon-new'); 4 const CouponNewModel = require('../models/coupon-new');
3 5
4 class CouponNew { 6 class CouponNew {
5 - page(req, res) {  
6 - res.render('coupons/page', {  
7 - module: 'home',  
8 - page: 'coupon-new',  
9 - localCss: true,  
10 - width750: true,  
11 - pageHeader: headerModel.setNav({  
12 - navTitle: '优惠券',  
13 - myConponPageNavBtn: true,  
14 - navBtn: false  
15 - })  
16 - }); 7 + page(req, res, next) {
  8 + let uid = req.user.uid;
  9 +
  10 + co(function* () {
  11 + let [couponsApi, couponNumApi] = yield Promise.all([
  12 + req.ctx(CouponNewModel).couponGet({ uid }),
  13 + req.ctx(CouponNewModel).getCouponNums({ uid })
  14 + ]);
  15 + let pageData = _.get(couponsApi, 'data', {});
  16 + let couponNum = _.get(couponNumApi, 'data', {});
  17 +
  18 + res.render('coupons/page', {
  19 + module: 'home',
  20 + page: 'coupon-new',
  21 + localCss: true,
  22 + width750: true,
  23 + pageData,
  24 + couponNum,
  25 + pageHeader: headerModel.setNav({
  26 + navTitle: '优惠券',
  27 + myConponPageNavBtn: true,
  28 + navBtn: false
  29 + })
  30 + });
  31 +
  32 + })().catch(next);
17 } 33 }
18 34
19 /** 35 /**
20 * 优惠券数据 36 * 优惠券数据
21 */ 37 */
22 coupons(req, res, next) { 38 coupons(req, res, next) {
23 - req.ctx(CouponNewModel).couponData({  
24 - method: 'app.coupons.li',  
25 - uid: req.user.uid,  
26 - status: parseInt(req.body.status || 0, 10),  
27 - page: parseInt(req.body.page || 1, 10),  
28 - limit: 10,  
29 - }).then(result => {  
30 - res.json(result);  
31 - }).catch(next); 39 + let uid = req.user.uid;
  40 + let type = req.body.type;
  41 + let filter = req.body.filter;
  42 + let page = req.body.page;
  43 +
  44 + co(function* () {
  45 + let coupons = yield req.ctx(CouponNewModel).couponData({
  46 + uid, type, filter, page
  47 + });
  48 +
  49 + res.json(coupons);
  50 + })().catch(next);
32 } 51 }
33 } 52 }
34 53
1 -const helpers = global.yoho.helpers;  
2 -  
3 class CouponNewModel extends global.yoho.BaseModel { 1 class CouponNewModel extends global.yoho.BaseModel {
4 constructor(ctx) { 2 constructor(ctx) {
5 super(ctx); 3 super(ctx);
6 } 4 }
7 5
8 - couponData(params) {  
9 - return this.get({data: params}).then(result => {  
10 -  
11 - if (result && result.data && result.data.couponList) {  
12 - let status0 = params.status === 0;  
13 - let status1 = params.status === 1;  
14 -  
15 - return result.data.couponList.map(function(elem) {  
16 - delete elem.id;  
17 -  
18 - if (status0) {  
19 - elem.bestowLink = helpers.urlFormat('/product/index/index',  
20 - {  
21 - coupon_id: elem.couponId,  
22 - coupon_code: elem.couponCode,  
23 - title: '优惠活动商品',  
24 - intro_text: `以下商品可使用【${elem.couponDetailInfomation}】优惠券`  
25 - }  
26 - );  
27 - } else if (status1) {  
28 - delete elem.overState;  
29 - elem.employbg = true;  
30 - }  
31 - return elem;  
32 - }); 6 + /**
  7 + * 优惠券数据
  8 + */
  9 + couponGet(params) {
  10 + return this.get({
  11 + data: {
  12 + method: 'app.coupons.get',
  13 + uid: params.uid,
  14 + type: params.type || 'notuse',
  15 + filter: params.filter || 0,
  16 + limit: 20,
  17 + page: params.page || 1
33 } 18 }
  19 + });
  20 + }
34 21
35 - return []; 22 + /**
  23 + * 优惠券数量
  24 + */
  25 + getCouponNums(params) {
  26 + return this.get({
  27 + data: {
  28 + method: 'app.coupons.getCouponNums',
  29 + uid: params.uid
  30 + }
36 }); 31 });
37 } 32 }
38 } 33 }
1 <div class="coupon-new-page"> 1 <div class="coupon-new-page">
2 <div class="filter-box"> 2 <div class="filter-box">
3 - <span class="no-used">  
4 - <span class="filter-btn active">未使用(99+)</span> 3 + <span class="filter-btn-box">
  4 + <span class="filter-btn no-used active">未使用({{couponNum.notuse}}+)</span>
5 <span class="iconfont icon-down show-filter-btn"></span> 5 <span class="iconfont icon-down show-filter-btn"></span>
6 </span> 6 </span>
7 - <span class="used">  
8 - <span class="filter-btn">已使用（8）</span> 7 + <span class="filter-btn-box">
  8 + <span class="filter-btn used">已使用（{{couponNum.use}}）</span>
9 </span> 9 </span>
10 - <span class="invalid">  
11 - <span class="filter-btn">已失效（15）</span> 10 + <span class="filter-btn-box">
  11 + <span class="filter-btn invalid">已失效（{{couponNum.overtime}}）</span>
12 </span> 12 </span>
13 </div> 13 </div>
14 <div class="filter-item hide"> 14 <div class="filter-item hide">
15 - <button>全部</button>  
16 - <button>店铺券</button>  
17 - <button>活动券</button>  
18 - <button>运费券</button> 15 + {{#pageData.filters}}
  16 + <button data-id="{{filter_id}}">{{filter_name}}</button>
  17 + {{/ pageData.filters}}
19 </div> 18 </div>
20 <div class="exchange-box"> 19 <div class="exchange-box">
21 <input type="text" placeholder="请输入优惠券码"> 20 <input type="text" placeholder="请输入优惠券码">
22 <button>兑换</button> 21 <button>兑换</button>
23 </div> 22 </div>
24 <div class="coupon-list" id="couponList"> 23 <div class="coupon-list" id="couponList">
25 - <section class="coupon-section"> 24 + {{#pageData.couponList}}
  25 + <section class="coupon-section" data-code="{{coupon_code}}" data-id="{{coupon_id}}">
26 <div class="coupon"> 26 <div class="coupon">
27 <div class="coupon-left"> 27 <div class="coupon-left">
28 - <p class="value">¥<span>100</span></p> 28 + <p class="value">¥<span>{{coupon_value}}</span></p>
29 <p class="threshold">满499可用</p> 29 <p class="threshold">满499可用</p>
30 </div> 30 </div>
31 <div class="coupon-right"> 31 <div class="coupon-right">
32 - <p class="title"><span class="type-shop">[店铺券]</span> Adidas Origins店铺使用</p> 32 + <p class="title"><span class="type-shop">[{{catalog_name}}]</span> {{coupon_name}}</p>
33 <p class="time">2018.1.12-2018.5.20</p> 33 <p class="time">2018.1.12-2018.5.20</p>
34 <p> 34 <p>
35 <span class="show-intro-btn">使用说明</span> 35 <span class="show-intro-btn">使用说明</span>
@@ -41,10 +41,12 @@ @@ -41,10 +41,12 @@
41 <span class="top-tip"></span> 41 <span class="top-tip"></span>
42 </div> 42 </div>
43 <ul class="coupon-intro hide"> 43 <ul class="coupon-intro hide">
44 - <li>全场通用，特例商品暂不支持使用优惠券</li>  
45 - <li>可以与其他类型叠加使用，同店铺只能使用一张，不同店铺真的可 以叠加使用。</li> 44 + {{#pageData.couponList.notes}}
  45 + <li>{{.}}</li>
  46 + {{/ pageData.couponList.notes}}
46 </ul> 47 </ul>
47 </section> 48 </section>
  49 + {{/ pageData.couponList}}
48 <section class="coupon-section"> 50 <section class="coupon-section">
49 <div class="coupon invalid-coupon"> 51 <div class="coupon invalid-coupon">
50 <div class="coupon-left"> 52 <div class="coupon-left">
@@ -6,6 +6,11 @@ class ConponController extends Page { @@ -6,6 +6,11 @@ class ConponController extends Page {
6 constructor() { 6 constructor() {
7 super(); 7 super();
8 8
  9 + this.status = 0;
  10 + this.couponType = 'notuse';
  11 + this.couponFilter = 0;
  12 + this.page = 1;
  13 +
9 this.view = { 14 this.view = {
10 filterBtn: $('.filter-btn'), 15 filterBtn: $('.filter-btn'),
11 filterItem: $('.filter-item'), 16 filterItem: $('.filter-item'),
@@ -15,7 +20,31 @@ class ConponController extends Page { @@ -15,7 +20,31 @@ class ConponController extends Page {
15 20
16 this.view.filterBtn.on('click', this.tapChange.bind(this)); 21 this.view.filterBtn.on('click', this.tapChange.bind(this));
17 this.view.showFilterBtn.on('click', this.showFilter.bind(this)); 22 this.view.showFilterBtn.on('click', this.showFilter.bind(this));
18 - this.renderCoupons(); 23 + this.view.filterItem.on('click', 'button', this.filterCoupons.bind(this));
  24 +
  25 + // this.renderCoupons();
  26 + }
  27 +
  28 + /**
  29 + * 筛选优惠券
  30 + */
  31 + filterCoupons(evt) {
  32 + let currentTarget = $(evt.currentTarget);
  33 +
  34 + this.view.filterItem.find('button').removeClass('active');
  35 + currentTarget.addClass('active');
  36 +
  37 + if (currentTarget.hasClass('all')) {
  38 + console.log('all');
  39 + } else if (currentTarget.hasClass('shop')) {
  40 + console.log('shop');
  41 + } else if (currentTarget.hasClass('activity')) {
  42 + console.log('activity');
  43 + } else if (currentTarget.hasClass('freight')) {
  44 + console.log('freight');
  45 + } else {
  46 + console.log('error');
  47 + }
19 } 48 }
20 49
21 /** 50 /**
@@ -39,8 +68,9 @@ class ConponController extends Page { @@ -39,8 +68,9 @@ class ConponController extends Page {
39 url: '/home/coupons.json', 68 url: '/home/coupons.json',
40 dataType: 'json', 69 dataType: 'json',
41 data: { 70 data: {
42 - status: 0,  
43 - page: 1 71 + type: this.couponType,
  72 + filter: this.couponFilter,
  73 + page: this.page
44 }, 74 },
45 }); 75 });
46 } 76 }
@@ -51,6 +81,16 @@ class ConponController extends Page { @@ -51,6 +81,16 @@ class ConponController extends Page {
51 tapChange(event) { 81 tapChange(event) {
52 let itemClicked = $(event.currentTarget); 82 let itemClicked = $(event.currentTarget);
53 83
  84 + if (itemClicked.hasClass('no-used')) {
  85 + this.status = 0;
  86 + } else if (itemClicked.hasClass('used')) {
  87 + this.status = 1;
  88 + } else if (itemClicked.hasClass('invalid')) {
  89 + this.status = 2;
  90 + }
  91 +
  92 + this.renderCoupons();
  93 +
54 if (itemClicked.hasClass('active')) { 94 if (itemClicked.hasClass('active')) {
55 itemClicked.removeClass('active'); 95 itemClicked.removeClass('active');
56 } else { 96 } else {
@@ -2,27 +2,37 @@ body { @@ -2,27 +2,37 @@ body {
2 background-color: #f0f0f0; 2 background-color: #f0f0f0;
3 } 3 }
4 4
  5 +.yoho-header {
  6 + position: fixed;
  7 + top: 0;
  8 + left: 0;
  9 +}
  10 +
5 .coupon-new-page { 11 .coupon-new-page {
  12 + padding-top: 194px;
  13 +
6 .filter-box { 14 .filter-box {
  15 + width: 100%;
7 height: 88px; 16 height: 88px;
8 display: flex; 17 display: flex;
9 padding: 14px 0; 18 padding: 14px 0;
10 box-shadow: 0 0 16px 0 #eee; 19 box-shadow: 0 0 16px 0 #eee;
11 background-color: #fff; 20 background-color: #fff;
12 - position: relative; 21 + position: fixed;
  22 + top: 106px;
  23 + left: 0;
  24 + z-index: 2;
13 25
14 - .no-used,  
15 - .used,  
16 - .invalid { 26 + .filter-btn-box {
17 flex: 1; 27 flex: 1;
18 line-height: 60px; 28 line-height: 60px;
19 text-align: center; 29 text-align: center;
20 color: #b0b0b0; 30 color: #b0b0b0;
  31 + border-right: 1px solid #e0e0e0;
21 } 32 }
22 33
23 - .no-used,  
24 - .used {  
25 - border-right: 1px solid #e0e0e0; 34 + .filter-btn-box:last-child {
  35 + border-right: none;
26 } 36 }
27 37
28 .show-filter-btn, 38 .show-filter-btn,
@@ -38,6 +48,10 @@ body { @@ -38,6 +48,10 @@ body {
38 justify-content: space-around; 48 justify-content: space-around;
39 align-items: center; 49 align-items: center;
40 background-color: #fff; 50 background-color: #fff;
  51 + position: fixed;
  52 + top: 192px;
  53 + left: 0;
  54 + z-index: 2;
41 55
42 button { 56 button {
43 width: 150px; 57 width: 150px;
@@ -47,6 +61,11 @@ body { @@ -47,6 +61,11 @@ body {
47 font-size: 28px; 61 font-size: 28px;
48 border: 1px solid #e0e0e0; 62 border: 1px solid #e0e0e0;
49 border-radius: 4px; 63 border-radius: 4px;
  64 +
  65 + &.active {
  66 + background-color: #444;
  67 + color: #fff;
  68 + }
50 } 69 }
51 } 70 }
52 71