下单流程 增加优惠券页面

+var $ = require('jquery'),
+    Handlebars = require('yoho.handlebars'),
+    ellipsis = require('mlellipsis'),
+    loading = require('../plugin/loading'),
+    tip = require('../plugin/tip');
+
+var page = 1,
+    canGetCoupon = true,
+    isGetData;
+
+var conponTmpl = Handlebars.compile($('#tmpl-coupon').html()),
+    conponNotAvaliableTmpl = Handlebars.compile($('#tmpl-coupon-not-avaliable').html());
+
+ellipsis.init();
+
+function getCouponDate() {
+    if (!canGetCoupon) {
+        return;
+    }
+
+    if (isGetData) {
+        return;
+    }
+
+    loading.showLoadingMask();
+    page += 1;
+    isGetData = true;
+
+    $.ajax({
+        type: 'POST',
+        url: '/home/couponData',
+        dataType: 'html',
+        data: {
+            statuss: status,
+            page: page
+        }
+    }).then(function(coupons) {
+        var notAvailableCoupons = [];
+
+        // 后端需要返回一个 coupons 列表，如下
+        // notAvailable 表示不可用的优惠券
+        coupons = [{
+            money: '99',
+            coupon_name: '满XX-减去吴悠右腿有益于有2222',
+            couponValidity: '20150129-20150430',
+            coupon_id: '22222'
+        }, {
+            money: '99',
+            coupon_name: '满XX-减去吴悠右腿有益于有2222',
+            couponValidity: '20150129-20150430',
+            coupon_id: '2222233'
+        }, {
+            money: '99',
+            coupon_name: 'NONO满XX-减去吴悠右腿有益于有2222',
+            couponValidity: '20150129-20150430',
+            coupon_id: '2222233',
+            notAvailable: 1
+        }];
+
+        // coupons 是个列表，如果不是列表，可能是服务器错误，这次翻页加载不算
+        if (!$.isArray(coupons)) {
+            page--;
+            return;
+        }
+
+        // 每页10张，当不足10张时，说明已经加载完
+        if (coupons.length < 10) {
+            canGetCoupon = false;
+        }
+
+        // 第一页张数为 0 ，显示优惠券为空
+        if (!coupons.length && page === 2) {
+            $('.select-coupon-page').html($('#tmpl-no-coupon').html());
+            return;
+        }
+
+        // 把不可用的优惠券分离出来
+        $.each(coupons, function(i, coupon) {
+            if (coupon.notAvailable) {
+                notAvailableCoupons.push(coupon);
+            }
+        })
+
+        if (notAvailableCoupons.length) {
+            $('.not-avaliable-coupon-line').show();
+        }
+        $('#coupon-list').append(conponTmpl({
+            coupons: coupons
+        }));
+        $('#coupon-list-not').append(conponNotAvaliableTmpl({
+            notAvailableCoupons: notAvailableCoupons
+        }));
+        window.rePosFooter();
+    }).fail(function() {
+        page -= 1;
+        tip.show('加载优惠券失败');
+    }).always(function() {
+        isGetData = false;
+        loading.hideLoadingMask();
+    });
+}
+
+getCouponDate();
+
+$(window).scroll(function() {
+    if ($(window).scrollTop() + $(window).height() > $('body').height() * 0.9) {
+        getCouponDate();
+    }
+});

-.employ{
+.my-coupon-page {
+    .employ{
     	width: 100%;
     	width: 100%;
     	height: 90rem / $pxConvertRem;
     	height: 90rem / $pxConvertRem;
 
 
@@ -22,16 +23,17 @@
     			color: #444444;
     			color: #444444;
     		}
     		}
     	}
     	}
-}
-#employ{
+    }
+    .coupon-list{
     	width:100%;
     	width:100%;
     	height: auto;
     	height: auto;
     	overflow:hidden;
     	overflow:hidden;
     	.employ-main{
     	.employ-main{
+            display: block;
     		width: 90.625%;
     		width: 90.625%;
     		height: 180rem / $pxConvertRem;
     		height: 180rem / $pxConvertRem;
     		overflow: hidden;
     		overflow: hidden;
-		margin: 20rem / $pxConvertRem auto;
+    		margin: 30rem / $pxConvertRem auto;
     		background-image: image-url('me/employ/employ.jpg');
     		background-image: image-url('me/employ/employ.jpg');
     		background-position: top center;
     		background-position: top center;
     		background-repeat:no-repeat;
     		background-repeat:no-repeat;
@@ -53,7 +55,7 @@
     			float: left;
     			float: left;
     			&:first-of-type{
     			&:first-of-type{
     				margin-top: 0.75rem;
     				margin-top: 0.75rem;
-				font-size: 18px;
+    				font-size: 16px;
     				height: auto;
     				height: auto;
     				min-height: 42px;
     				min-height: 42px;
     				display: -webkit-box;
     				display: -webkit-box;
@@ -115,7 +117,8 @@
     		}
     		}
     	}
     	}
 
 
-}
-.none{
+    }
+    .none{
     	display: none;
     	display: none;
+    }
 }
 }

-@import "good", "chose-panel", "gift-advance-good", "order-ensure";
+@import "good", "chose-panel", "gift-advance-good", "order-ensure", "select-coupon";
 
 
 
 
 .icon-checkbox:before { content: "\e61c"; }
 .icon-checkbox:before { content: "\e61c"; }

@@ -85,6 +85,10 @@
             height: 90rem / $pxConvertRem;
             height: 90rem / $pxConvertRem;
             line-height: 90rem / $pxConvertRem;
             line-height: 90rem / $pxConvertRem;
             border-bottom: 1px solid #f7f7f7;
             border-bottom: 1px solid #f7f7f7;
+
+            a {
+                display: block;
+            }
         }
         }
 
 
         .coupon-count {
         .coupon-count {

+.select-coupon-page {
+    margin-top: pxToRem(30px);
+    margin-bottom: pxToRem(30px);
+
+    .coupon-list {
+        .employ-main:first-child {
+            margin-top: 0;
+        }
+        .employ-main:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    %line {
+        content: '';
+        position: absolute;
+        top: 50%;
+        border-top: 1px solid #b0b0b0;
+        width: pxToRem(120px);
+        height: 0;
+    }
+
+    .not-avaliable-coupon-line {
+        position: relative;
+        margin-top: pxToRem(30px);
+        margin-bottom: pxToRem(30px);
+        font-size: pxToRem(14px);
+        line-height: 2;
+        color: #b0b0b0;
+        text-align: center;
+
+        &:before {
+            @extend %line;
+            left: pxToRem(60px);
+        }
+
+        &:after {
+            @extend %line;
+            right: pxToRem(60px);
+        }
+    }
+
+    .not-avaliable {
+        -webkit-filter: grayscale(100%);
+    }
+}

 {{> layout/header}}
 {{> layout/header}}
-<div class="yoho-page">
+<div class="yoho-page my-coupon-page">
 	<div class="employ">
 	<div class="employ">
 		<span class="active">未使用</span>
 		<span class="active">未使用</span>
 		<span>已使用</span>
 		<span>已使用</span>
 	</div>
 	</div>
-	<div id="employ"></div>
+	<div id="employ" class="coupon-list"></div>
 </div>
 </div>
 {{> layout/footer}}
 {{> layout/footer}}

@@ -43,7 +43,8 @@
             <ul class="sale-invoice">
             <ul class="sale-invoice">
                 {{# coupon}}
                 {{# coupon}}
                     <li class="coupon">
                     <li class="coupon">
-                        <a href="{{url}}">
+                        <a href="/shoppingCart/selectCoupon">
+                        <!-- <a href="{{url}}"> -->
                             <span class="title">优惠券</span>
                             <span class="title">优惠券</span>
                             {{#if count}}
                             {{#if count}}
                                 <span class="coupon-count">
                                 <span class="coupon-count">

+{{> layout/header}}
+<div class="yoho-page select-coupon-page my-coupon-page">
+    <div id="coupon-list" class="coupon-list"></div>
+    <div class="not-avaliable-coupon-line hide">不可使用的优惠券</div>
+    <div id="coupon-list-not" class="coupon-list"></div>
+</div>
+<script id="tmpl-coupon" type="text/tmpl">
+\{{#coupons}}
+    \{{^ notAvailable}}
+    <a class="employ-main" href="/shoppingCart/orderEnsure?coupon_id={{ coupon_id}}">
+        <span>\{{ money}}</span>
+        <p class="coupon-name">\{{ coupon_name}}</p>
+        <p>有效期：\{{ couponValidity}}</p>
+    </a>
+    \{{/ notAvailable}}
+\{{/coupons}}
+</script>
+<script id="tmpl-coupon-not-avaliable" type="text/tmpl">
+\{{# notAvailableCoupons}}
+    <div class="employ-main not-avaliable">
+        <span>\{{ money}}</span>
+        <p class="coupon-name">\{{ coupon_name}}</p>
+        <p>有效期：\{{ couponValidity}}</p>
+    </div>
+\{{/ notAvailableCoupons}}
+</script>
+<script id="tmpl-no-coupon" type="text/tmpl">
+<div class="coupon-list">
+    <div class="null">
+        <i></i>
+        <p>您还没有优惠券!</p>
+    </div>
+</div>
+</script>
+{{> layout/footer}}

@@ -218,6 +218,11 @@
     seajs.use('js/shopping-cart/order-ensure');
     seajs.use('js/shopping-cart/order-ensure');
 </script>
 </script>
 {{/if}}
 {{/if}}
+{{#if selectCouponPage}}
+<script>
+    seajs.use('js/shopping-cart/select-coupon');
+</script>
+{{/if}}
 {{!-- 个人中心 --}}
 {{!-- 个人中心 --}}
 {{#if myIndexPage}}
 {{#if myIndexPage}}
 <script>
 <script>

@@ -218,6 +218,10 @@ class ShoppingCartController extends AbstractAction
         $this->_view->display('order-ensure', $data);
         $this->_view->display('order-ensure', $data);
     }
     }
 
 
+    /**
+     * 下单流程 选择地址
+     */
+
     public function selectAddressAction() {
     public function selectAddressAction() {
         // 设置网站标题
         // 设置网站标题
         $this->setTitle('选择地址');
         $this->setTitle('选择地址');
@@ -235,6 +239,26 @@ class ShoppingCartController extends AbstractAction
     }
     }
 
 
     /**
     /**
+     * 下单流程 选择优惠券
+     */
+
+    public function selectCouponAction() {
+        // 设置网站标题
+        $this->setTitle('选择优惠券');
+        $this->setNavHeader('选择优惠券', Helpers::url('/shoppingCart/orderEnsure'));
+
+        $uid = $this->_uid;
+        $address = UserModel::getAddressData($uid);
+
+        $this->_view->display('select-coupon', array(
+            'selectCouponPage' => true,
+            'pageFooter' => true,
+            'address' => $address
+        ));
+
+    }
+
+    /**
      * 读取chose-panel内容
      * 读取chose-panel内容
      */
      */
     public function tplAction()
     public function tplAction()