user-coupons-list

+const co = Promise.coroutine;
+const _ = require('lodash');
 const headerModel = require('../../../doraemon/models/header'); // 头部model
 const CouponNewModel = require('../models/coupon-new');
 
 class CouponNew {
-    page(req, res) {
-        res.render('coupons/page', {
-            module: 'home',
-            page: 'coupon-new',
-            localCss: true,
-            width750: true,
-            pageHeader: headerModel.setNav({
-                navTitle: '优惠券',
-                myConponPageNavBtn: true,
-                navBtn: false
-            })
-        });
+    page(req, res, next) {
+        let uid = req.user.uid;
+
+        co(function* () {
+            let [couponsApi, couponNumApi] = yield Promise.all([
+                req.ctx(CouponNewModel).couponGet({ uid }),
+                req.ctx(CouponNewModel).getCouponNums({ uid })
+            ]);
+            let pageData = _.get(couponsApi, 'data', {});
+            let couponNum = _.get(couponNumApi, 'data', {});
+
+            res.render('coupons/page', {
+                module: 'home',
+                page: 'coupon-new',
+                localCss: true,
+                width750: true,
+                pageData,
+                couponNum,
+                pageHeader: headerModel.setNav({
+                    navTitle: '优惠券',
+                    myConponPageNavBtn: true,
+                    navBtn: false
+                })
+            });
+
+        })().catch(next);
     }
 
     /**
      * 优惠券数据
      */
     coupons(req, res, next) {
-        req.ctx(CouponNewModel).couponData({
-            method: 'app.coupons.li',
-            uid: req.user.uid,
-            status: parseInt(req.body.status || 0, 10),
-            page: parseInt(req.body.page || 1, 10),
-            limit: 10,
-        }).then(result => {
-            res.json(result);
-        }).catch(next);
+        let uid = req.user.uid;
+        let type = req.body.type;
+        let filter = req.body.filter;
+        let page = req.body.page;
+
+        co(function* () {
+            let coupons = yield req.ctx(CouponNewModel).couponData({
+                uid, type, filter, page
+            });
+
+            res.json(coupons);
+        })().catch(next);
     }
 }
 

-const helpers = global.yoho.helpers;
-
 class CouponNewModel extends global.yoho.BaseModel {
     constructor(ctx) {
         super(ctx);
     }
 
-    couponData(params) {
-        return this.get({data: params}).then(result => {
-
-            if (result && result.data && result.data.couponList) {
-                let status0 = params.status === 0;
-                let status1 = params.status === 1;
-
-                return result.data.couponList.map(function(elem) {
-                    delete elem.id;
-
-                    if (status0) {
-                        elem.bestowLink = helpers.urlFormat('/product/index/index',
-                            {
-                                coupon_id: elem.couponId,
-                                coupon_code: elem.couponCode,
-                                title: '优惠活动商品',
-                                intro_text: `以下商品可使用【${elem.couponDetailInfomation}】优惠券`
-                            }
-                        );
-                    } else if (status1) {
-                        delete elem.overState;
-                        elem.employbg = true;
-                    }
-                    return elem;
-                });
+    /**
+     * 优惠券数据
+     */
+    couponGet(params) {
+        return this.get({
+            data: {
+                method: 'app.coupons.get',
+                uid: params.uid,
+                type: params.type || 'notuse',
+                filter: params.filter || 0,
+                limit: 20,
+                page: params.page || 1
             }
+        });
+    }
 
-            return [];
+    /**
+     * 优惠券数量
+     */
+    getCouponNums(params) {
+        return this.get({
+            data: {
+                method: 'app.coupons.getCouponNums',
+                uid: params.uid
+            }
         });
     }
 }

 <div class="coupon-new-page">
     <div class="filter-box">
-        <span class="no-used">
-            <span class="filter-btn active">未使用(99+)</span>
+        <span class="filter-btn-box">
+            <span class="filter-btn no-used active">未使用({{couponNum.notuse}}+)</span>
             <span class="iconfont icon-down show-filter-btn"></span>
         </span>
-        <span class="used">
-            <span class="filter-btn">已使用（8）</span>
+        <span class="filter-btn-box">
+            <span class="filter-btn used">已使用（{{couponNum.use}}）</span>
         </span>
-        <span class="invalid">
-            <span class="filter-btn">已失效（15）</span>
+        <span class="filter-btn-box">
+            <span class="filter-btn invalid">已失效（{{couponNum.overtime}}）</span>
         </span>
     </div>
     <div class="filter-item hide">
-        <button>全部</button>
-        <button>店铺券</button>
-        <button>活动券</button>
-        <button>运费券</button>
+        {{#pageData.filters}}
+            <button data-id="{{filter_id}}">{{filter_name}}</button>
+        {{/ pageData.filters}}
     </div>
     <div class="exchange-box">
         <input type="text" placeholder="请输入优惠券码">
         <button>兑换</button>
     </div>
     <div class="coupon-list" id="couponList">
-        <section class="coupon-section">
+        {{#pageData.couponList}}
+        <section class="coupon-section" data-code="{{coupon_code}}" data-id="{{coupon_id}}">
             <div class="coupon">
                 <div class="coupon-left">
-                    <p class="value">¥<span>100</span></p>
+                    <p class="value">¥<span>{{coupon_value}}</span></p>
                     <p class="threshold">满499可用</p>
                 </div>
                 <div class="coupon-right">
-                    <p class="title"><span class="type-shop">[店铺券]</span> Adidas Origins店铺使用</p>
+                    <p class="title"><span class="type-shop">[{{catalog_name}}]</span> {{coupon_name}}</p>
                     <p class="time">2018.1.12-2018.5.20</p>
                     <p>
                         <span class="show-intro-btn">使用说明</span>
@@ -41,10 +41,12 @@
                 <span class="top-tip"></span>
             </div>
             <ul class="coupon-intro hide">
-                <li>全场通用，特例商品暂不支持使用优惠券</li>
-                <li>可以与其他类型叠加使用，同店铺只能使用一张，不同店铺真的可 以叠加使用。</li>
+                {{#pageData.couponList.notes}}
+                <li>{{.}}</li>
+                {{/ pageData.couponList.notes}}
             </ul>
         </section>
+        {{/ pageData.couponList}}
         <section class="coupon-section">
             <div class="coupon invalid-coupon">
                 <div class="coupon-left">

@@ -6,6 +6,11 @@ class ConponController extends Page {
     constructor() {
         super();
 
+        this.status = 0;
+        this.couponType = 'notuse';
+        this.couponFilter = 0;
+        this.page = 1;
+
         this.view = {
             filterBtn: $('.filter-btn'),
             filterItem: $('.filter-item'),
@@ -15,7 +20,31 @@ class ConponController extends Page {
 
         this.view.filterBtn.on('click', this.tapChange.bind(this));
         this.view.showFilterBtn.on('click', this.showFilter.bind(this));
-        this.renderCoupons();
+        this.view.filterItem.on('click', 'button', this.filterCoupons.bind(this));
+
+        // this.renderCoupons();
+    }
+
+    /**
+     * 筛选优惠券
+     */
+    filterCoupons(evt) {
+        let currentTarget = $(evt.currentTarget);
+
+        this.view.filterItem.find('button').removeClass('active');
+        currentTarget.addClass('active');
+
+        if (currentTarget.hasClass('all')) {
+            console.log('all');
+        } else if (currentTarget.hasClass('shop')) {
+            console.log('shop');
+        } else if (currentTarget.hasClass('activity')) {
+            console.log('activity');
+        } else if (currentTarget.hasClass('freight')) {
+            console.log('freight');
+        } else {
+            console.log('error');
+        }
     }
 
     /**
@@ -39,8 +68,9 @@ class ConponController extends Page {
             url: '/home/coupons.json',
             dataType: 'json',
             data: {
-                status: 0,
-                page: 1
+                type: this.couponType,
+                filter: this.couponFilter,
+                page: this.page
             },
         });
     }
@@ -51,6 +81,16 @@ class ConponController extends Page {
     tapChange(event) {
         let itemClicked = $(event.currentTarget);
 
+        if (itemClicked.hasClass('no-used')) {
+            this.status = 0;
+        } else if (itemClicked.hasClass('used')) {
+            this.status = 1;
+        } else if (itemClicked.hasClass('invalid')) {
+            this.status = 2;
+        }
+
+        this.renderCoupons();
+
         if (itemClicked.hasClass('active')) {
             itemClicked.removeClass('active');
         } else {

@@ -2,27 +2,37 @@ body {
     background-color: #f0f0f0;
 }
 
+.yoho-header {
+    position: fixed;
+    top: 0;
+    left: 0;
+}
+
 .coupon-new-page {
+    padding-top: 194px;
+
     .filter-box {
+        width: 100%;
         height: 88px;
         display: flex;
         padding: 14px 0;
         box-shadow: 0 0 16px 0 #eee;
         background-color: #fff;
-        position: relative;
+        position: fixed;
+        top: 106px;
+        left: 0;
+        z-index: 2;
 
-        .no-used,
-        .used,
-        .invalid {
+        .filter-btn-box {
             flex: 1;
             line-height: 60px;
             text-align: center;
             color: #b0b0b0;
+            border-right: 1px solid #e0e0e0;
         }
 
-        .no-used,
-        .used {
-            border-right: 1px solid #e0e0e0;
+        .filter-btn-box:last-child {
+            border-right: none;
         }
 
         .show-filter-btn,
@@ -38,6 +48,10 @@ body {
         justify-content: space-around;
         align-items: center;
         background-color: #fff;
+        position: fixed;
+        top: 192px;
+        left: 0;
+        z-index: 2;
 
         button {
             width: 150px;
@@ -47,6 +61,11 @@ body {
             font-size: 28px;
             border: 1px solid #e0e0e0;
             border-radius: 4px;
+
+            &.active {
+                background-color: #444;
+                color: #fff;
+            }
         }
     }