fe / YOHOBUYPC · Commits

Go to a project

Authored by 毕凯
Commit f8c98c9f95a73f962867a862ba3bb56d324904c2 2 parents 1019cf46 a1f32bc0

code review by liangzhifeng

Inline Side-by-side
Showing 12 changed files with 387 additions and 129 deletions
  1 +var $ = require('jquery'),
  2 + Handlebars = require('yoho.handlebars'),
  3 + ellipsis = require('mlellipsis'),
  4 + loading = require('../plugin/loading'),
  5 + tip = require('../plugin/tip');
  6 +
  7 +var page = 1,
  8 + canGetCoupon = true,
  9 + isGetData;
  10 +
  11 +var conponTmpl = Handlebars.compile($('#tmpl-coupon').html()),
  12 + conponNotAvaliableTmpl = Handlebars.compile($('#tmpl-coupon-not-avaliable').html());
  13 +
  14 +ellipsis.init();
  15 +
  16 +function getCouponDate() {
  17 + if (!canGetCoupon) {
  18 + return;
  19 + }
  20 +
  21 + if (isGetData) {
  22 + return;
  23 + }
  24 +
  25 + loading.showLoadingMask();
  26 + page += 1;
  27 + isGetData = true;
  28 +
  29 + $.ajax({
  30 + type: 'POST',
  31 + url: '/home/couponData',
  32 + dataType: 'html',
  33 + data: {
  34 + statuss: status,
  35 + page: page
  36 + }
  37 + }).then(function(coupons) {
  38 + var notAvailableCoupons = [];
  39 +
  40 + // 后端需要返回一个 coupons 列表，如下
  41 + // notAvailable 表示不可用的优惠券
  42 + coupons = [{
  43 + money: '99',
  44 + coupon_name: '满XX-减去吴悠右腿有益于有2222',
  45 + couponValidity: '20150129-20150430',
  46 + coupon_id: '22222'
  47 + }, {
  48 + money: '99',
  49 + coupon_name: '满XX-减去吴悠右腿有益于有2222',
  50 + couponValidity: '20150129-20150430',
  51 + coupon_id: '2222233'
  52 + }, {
  53 + money: '99',
  54 + coupon_name: 'NONO满XX-减去吴悠右腿有益于有2222',
  55 + couponValidity: '20150129-20150430',
  56 + coupon_id: '2222233',
  57 + notAvailable: 1
  58 + }];
  59 +
  60 + // coupons 是个列表，如果不是列表，可能是服务器错误，这次翻页加载不算
  61 + if (!$.isArray(coupons)) {
  62 + page--;
  63 + return;
  64 + }
  65 +
  66 + // 每页10张，当不足10张时，说明已经加载完
  67 + if (coupons.length < 10) {
  68 + canGetCoupon = false;
  69 + }
  70 +
  71 + // 第一页张数为 0 ，显示优惠券为空
  72 + if (!coupons.length && page === 2) {
  73 + $('.select-coupon-page').html($('#tmpl-no-coupon').html());
  74 + return;
  75 + }
  76 +
  77 + // 把不可用的优惠券分离出来
  78 + $.each(coupons, function(i, coupon) {
  79 + if (coupon.notAvailable) {
  80 + notAvailableCoupons.push(coupon);
  81 + }
  82 + });
  83 +
  84 + if (notAvailableCoupons.length) {
  85 + $('.not-avaliable-coupon-line').show();
  86 + }
  87 + $('#coupon-list').append(conponTmpl({
  88 + coupons: coupons
  89 + }));
  90 + $('#coupon-list-not').append(conponNotAvaliableTmpl({
  91 + notAvailableCoupons: notAvailableCoupons
  92 + }));
  93 + window.rePosFooter();
  94 + }).fail(function() {
  95 + page -= 1;
  96 + tip.show('加载优惠券失败');
  97 + }).always(function() {
  98 + isGetData = false;
  99 + loading.hideLoadingMask();
  100 + });
  101 +}
  102 +
  103 +getCouponDate();
  104 +
  105 +$(window).scroll(function() {
  106 + if ($(window).scrollTop() + $(window).height() > $('body').height() * 0.9) {
  107 + getCouponDate();
  108 + }
  109 +});
@@ -2,11 +2,12 @@ @@ -2,11 +2,12 @@
2 width: 100%; 2 width: 100%;
3 background: #f0f0f0; 3 background: #f0f0f0;
4 4
5 - .page-wrap:first-child {  
6 - padding-bottom: pxToRem(10px);  
7 - } 5 + // .page-wrap:first-child {
  6 + // padding-bottom: pxToRem(10px);
  7 + // }
8 8
9 .address-item { 9 .address-item {
  10 + display: block;
10 padding: pxToRem(20px) pxToRem(30px); 11 padding: pxToRem(20px) pxToRem(30px);
11 color: #b0b0b0; 12 color: #b0b0b0;
12 background: #fff; 13 background: #fff;
1 -.employ{  
2 - width: 100%;  
3 - height: 90rem / $pxConvertRem; 1 +.my-coupon-page {
  2 + .employ{
  3 + width: 100%;
  4 + height: 90rem / $pxConvertRem;
4 5
5 - border-bottom:1px solid #e0e0e0;  
6 - position: relative;  
7 - span{  
8 - width: 49%;  
9 - height: 48rem / $pxConvertRem;  
10 - line-height: 48rem / $pxConvertRem;  
11 - overflow: hidden;  
12 - border-right: 2px solid #e0e0e0;  
13 - margin: 21rem / $pxConvertRem 0;  
14 - float: left;  
15 - text-align: center;  
16 - font-size: 48em / $pxConvertRem;  
17 - color: #b0b0b0;  
18 - &:last-of-type{  
19 - border:none;  
20 - }  
21 - &.active{  
22 - color: #444444;  
23 - }  
24 - }  
25 -}  
26 -#employ{  
27 - width:100%;  
28 - height: auto;  
29 - overflow:hidden;  
30 - .employ-main{  
31 - width: 90.625%;  
32 - height: 180rem / $pxConvertRem;  
33 - overflow: hidden;  
34 - margin: 20rem / $pxConvertRem auto;  
35 - background-image: image-url('me/employ/employ.jpg');  
36 - background-position: top center;  
37 - background-repeat:no-repeat;  
38 - background-size: 100% 100%;  
39 - color: #fff;  
40 - position: relative;  
41 - span{  
42 - width: 34.482759%;  
43 - height: 100%;  
44 - float: left;  
45 - text-align: center;  
46 - line-height: 180rem / $pxConvertRem;  
47 - font-size: 50px;  
48 - }  
49 - p{  
50 - width: 59.517241%;  
51 - height: auto;  
52 - margin: 0 3% 16em / $pxConvertRem;  
53 - float: left;  
54 - &:first-of-type{  
55 - margin-top: 0.75rem;  
56 - font-size: 18px;  
57 - height: auto;  
58 - min-height: 42px;  
59 - display: -webkit-box;  
60 - -webkit-line-clamp: 2;  
61 - -webkit-box-orient: vertical; 6 + border-bottom:1px solid #e0e0e0;
  7 + position: relative;
  8 + span{
  9 + width: 49%;
  10 + height: 48rem / $pxConvertRem;
  11 + line-height: 48rem / $pxConvertRem;
  12 + overflow: hidden;
  13 + border-right: 2px solid #e0e0e0;
  14 + margin: 21rem / $pxConvertRem 0;
  15 + float: left;
  16 + text-align: center;
  17 + font-size: 48em / $pxConvertRem;
  18 + color: #b0b0b0;
  19 + &:last-of-type{
  20 + border:none;
  21 + }
  22 + &.active{
  23 + color: #444444;
  24 + }
  25 + }
  26 + }
  27 + .coupon-list{
  28 + width:100%;
  29 + height: auto;
  30 + overflow:hidden;
  31 + .employ-main{
  32 + display: block;
  33 + width: 90.625%;
  34 + height: 180rem / $pxConvertRem;
  35 + overflow: hidden;
  36 + margin: 30rem / $pxConvertRem auto;
  37 + background-image: image-url('me/employ/employ.jpg');
  38 + background-position: top center;
  39 + background-repeat:no-repeat;
  40 + background-size: 100% 100%;
  41 + color: #fff;
  42 + position: relative;
  43 + span{
  44 + width: 34.482759%;
  45 + height: 100%;
  46 + float: left;
  47 + text-align: center;
  48 + line-height: 180rem / $pxConvertRem;
  49 + font-size: 50px;
  50 + }
  51 + p{
  52 + width: 59.517241%;
  53 + height: auto;
  54 + margin: 0 3% 16em / $pxConvertRem;
  55 + float: left;
  56 + &:first-of-type{
  57 + margin-top: 0.75rem;
  58 + font-size: 16px;
  59 + height: auto;
  60 + min-height: 42px;
  61 + display: -webkit-box;
  62 + -webkit-line-clamp: 2;
  63 + -webkit-box-orient: vertical;
  64 + overflow: hidden;
  65 + }
  66 + }
  67 + i{
  68 + width: 100%;
  69 + height: 100%;
  70 + overflow: hidden;
  71 + display: block;
  72 + position: absolute;
  73 + top: 0;
  74 + left: 0;
  75 + background: image-url('me/employ/employsy.png') right top no-repeat;
  76 + background-size:auto 100%;
  77 + }
  78 + }
  79 + .null{
  80 + width: 100%;
  81 + height:auto;
  82 + overflow: hidden;
  83 + position: absolute;
  84 + left: 0;
  85 + top:50%;
  86 + @include transform(translateY(-50%));
  87 + i{
  88 + width: 100%;
  89 + height: 120rem / $pxConvertRem;
  90 + overflow: hidden;
  91 + display: block;
  92 + background: image-url('me/employ/not.png') center top no-repeat;
  93 + background-size:auto 100%;
  94 + }
  95 + p{
  96 + width: 100%;
  97 + height: auto;
  98 + overflow: hidden;
  99 + padding:20rem / $pxConvertRem 0 0;
  100 + font-size: 48em / $pxConvertRem;
  101 + text-align: center;
  102 + color: #444;
  103 + }
  104 + a{
  105 + width: 73.75%;
  106 + height: 80rem / $pxConvertRem;
62 overflow: hidden; 107 overflow: hidden;
63 - }  
64 - }  
65 - i{  
66 - width: 100%;  
67 - height: 100%;  
68 - overflow: hidden;  
69 - display: block;  
70 - position: absolute;  
71 - top: 0;  
72 - left: 0;  
73 - background: image-url('me/employ/employsy.png') right top no-repeat;  
74 - background-size:auto 100%;  
75 - }  
76 - }  
77 - .null{  
78 - width: 100%;  
79 - height:auto;  
80 - overflow: hidden;  
81 - position: absolute;  
82 - left: 0;  
83 - top:50%;  
84 - @include transform(translateY(-50%));  
85 - i{  
86 - width: 100%;  
87 - height: 120rem / $pxConvertRem;  
88 - overflow: hidden;  
89 - display: block;  
90 - background: image-url('me/employ/not.png') center top no-repeat;  
91 - background-size:auto 100%;  
92 - }  
93 - p{  
94 - width: 100%;  
95 - height: auto;  
96 - overflow: hidden;  
97 - padding:20rem / $pxConvertRem 0 0;  
98 - font-size: 48em / $pxConvertRem;  
99 - text-align: center;  
100 - color: #444;  
101 - }  
102 - a{  
103 - width: 73.75%;  
104 - height: 80rem / $pxConvertRem;  
105 - overflow: hidden;  
106 - font-size: 56em / $pxConvertRem;  
107 - line-height: 80rem / $pxConvertRem;  
108 - display: block;  
109 - background: #444444;  
110 - color: #fff;  
111 - text-align: center;  
112 - margin: 60rem / $pxConvertRem auto 0;  
113 - @include border-radius(.2rem); 108 + font-size: 56em / $pxConvertRem;
  109 + line-height: 80rem / $pxConvertRem;
  110 + display: block;
  111 + background: #444444;
  112 + color: #fff;
  113 + text-align: center;
  114 + margin: 60rem / $pxConvertRem auto 0;
  115 + @include border-radius(.2rem);
114 116
115 - }  
116 - } 117 + }
  118 + }
117 119
  120 + }
  121 + .none{
  122 + display: none;
  123 + }
118 } 124 }
119 -.none{  
120 - display: none;  
121 -}  
1 -@import "good", "chose-panel", "gift-advance-good", "order-ensure"; 1 +@import "good", "chose-panel", "gift-advance-good", "order-ensure", "select-coupon";
2 2
3 3
4 .icon-checkbox:before { content: "\e61c"; } 4 .icon-checkbox:before { content: "\e61c"; }
@@ -45,7 +45,7 @@ @@ -45,7 +45,7 @@
45 font-weight: normal; 45 font-weight: normal;
46 } 46 }
47 } 47 }
48 - 48 +
49 .dispatch .title { 49 .dispatch .title {
50 margin-bottom: 10rem / $pxConvertRem; 50 margin-bottom: 10rem / $pxConvertRem;
51 } 51 }
@@ -85,6 +85,10 @@ @@ -85,6 +85,10 @@
85 height: 90rem / $pxConvertRem; 85 height: 90rem / $pxConvertRem;
86 line-height: 90rem / $pxConvertRem; 86 line-height: 90rem / $pxConvertRem;
87 border-bottom: 1px solid #f7f7f7; 87 border-bottom: 1px solid #f7f7f7;
  88 +
  89 + a {
  90 + display: block;
  91 + }
88 } 92 }
89 93
90 .coupon-count { 94 .coupon-count {
@@ -174,4 +178,4 @@ @@ -174,4 +178,4 @@
174 font-size: 32rem / $pxConvertRem; 178 font-size: 32rem / $pxConvertRem;
175 } 179 }
176 } 180 }
177 -}  
  181 +}
  1 +.select-coupon-page {
  2 + margin-top: pxToRem(30px);
  3 + margin-bottom: pxToRem(30px);
  4 +
  5 + .coupon-list {
  6 + .employ-main:first-child {
  7 + margin-top: 0;
  8 + }
  9 + .employ-main:last-child {
  10 + margin-bottom: 0;
  11 + }
  12 + }
  13 +
  14 + %line {
  15 + content: '';
  16 + position: absolute;
  17 + top: 50%;
  18 + border-top: 1px solid #b0b0b0;
  19 + width: pxToRem(120px);
  20 + height: 0;
  21 + }
  22 +
  23 + .not-avaliable-coupon-line {
  24 + position: relative;
  25 + margin-top: pxToRem(30px);
  26 + margin-bottom: pxToRem(30px);
  27 + font-size: pxToRem(14px);
  28 + line-height: 2;
  29 + color: #b0b0b0;
  30 + text-align: center;
  31 +
  32 + &:before {
  33 + @extend %line;
  34 + left: pxToRem(60px);
  35 + }
  36 +
  37 + &:after {
  38 + @extend %line;
  39 + right: pxToRem(60px);
  40 + }
  41 + }
  42 +
  43 + .not-avaliable {
  44 + -webkit-filter: grayscale(100%);
  45 + }
  46 +}
1 {{> layout/header}} 1 {{> layout/header}}
2 -<div class="yoho-page"> 2 +<div class="yoho-page my-coupon-page">
3 <div class="employ"> 3 <div class="employ">
4 <span class="active">未使用</span> 4 <span class="active">未使用</span>
5 <span>已使用</span> 5 <span>已使用</span>
6 </div> 6 </div>
7 - <div id="employ"></div> 7 + <div id="employ" class="coupon-list"></div>
8 </div> 8 </div>
9 -{{> layout/footer}}  
  9 +{{> layout/footer}}
1 {{> layout/header}} 1 {{> layout/header}}
2 <div class="order-ensure-page yoho-page"> 2 <div class="order-ensure-page yoho-page">
3 {{# orderEnsure}} 3 {{# orderEnsure}}
4 - <a class="address-wrap block"> 4 + <a class="address-wrap block" href="/shoppingCart/selectAddress">
5 <p class="infos"> 5 <p class="infos">
6 收货地址 6 收货地址
7 <span class="per-info">{{name}} {{phoneNum}}</span> 7 <span class="per-info">{{name}} {{phoneNum}}</span>
@@ -43,7 +43,8 @@ @@ -43,7 +43,8 @@
43 <ul class="sale-invoice"> 43 <ul class="sale-invoice">
44 {{# coupon}} 44 {{# coupon}}
45 <li class="coupon"> 45 <li class="coupon">
46 - <a href="{{url}}"> 46 + <a href="/shoppingCart/selectCoupon">
  47 + <!-- <a href="{{url}}"> -->
47 <span class="title">优惠券</span> 48 <span class="title">优惠券</span>
48 {{#if count}} 49 {{#if count}}
49 <span class="coupon-count"> 50 <span class="coupon-count">
@@ -120,4 +121,4 @@ @@ -120,4 +121,4 @@
120 </ul> 121 </ul>
121 {{/ orderEnsure}} 122 {{/ orderEnsure}}
122 </div> 123 </div>
123 -{{> layout/footer}}  
  124 +{{> layout/footer}}
  1 +{{> layout/header}}
  2 +<div class="my-address-page select-address-page yoho-page">
  3 + <div class="page-wrap">
  4 + {{# address}}
  5 + <a class="address-item" href="/shoppingCart/orderEnsure?address_id={{address_id}}">
  6 + <span class="name">{{consignee}}</span>
  7 + <span class="tel">{{mobile}}</span>
  8 + <p class="address-info">{{area}} {{address}}</p>
  9 + </a>
  10 + {{/ address}}
  11 + </div>
  12 +</div>
  13 +{{> layout/footer}}
  1 +{{> layout/header}}
  2 +<div class="yoho-page select-coupon-page my-coupon-page">
  3 + <div id="coupon-list" class="coupon-list"></div>
  4 + <div class="not-avaliable-coupon-line hide">不可使用的优惠券</div>
  5 + <div id="coupon-list-not" class="coupon-list"></div>
  6 +</div>
  7 +<script id="tmpl-coupon" type="text/tmpl">
  8 +\{{#coupons}}
  9 + \{{^ notAvailable}}
  10 + <a class="employ-main" href="/shoppingCart/orderEnsure?coupon_id={{ coupon_id}}">
  11 + <span>\{{ money}}</span>
  12 + <p class="coupon-name">\{{ coupon_name}}</p>
  13 + <p>有效期：\{{ couponValidity}}</p>
  14 + </a>
  15 + \{{/ notAvailable}}
  16 +\{{/coupons}}
  17 +</script>
  18 +<script id="tmpl-coupon-not-avaliable" type="text/tmpl">
  19 +\{{# notAvailableCoupons}}
  20 + <div class="employ-main not-avaliable">
  21 + <span>\{{ money}}</span>
  22 + <p class="coupon-name">\{{ coupon_name}}</p>
  23 + <p>有效期：\{{ couponValidity}}</p>
  24 + </div>
  25 +\{{/ notAvailableCoupons}}
  26 +</script>
  27 +<script id="tmpl-no-coupon" type="text/tmpl">
  28 +<div class="coupon-list">
  29 + <div class="null">
  30 + <i></i>
  31 + <p>您还没有优惠券!</p>
  32 + </div>
  33 +</div>
  34 +</script>
  35 +{{> layout/footer}}
@@ -218,6 +218,11 @@ @@ -218,6 +218,11 @@
218 seajs.use('js/shopping-cart/order-ensure'); 218 seajs.use('js/shopping-cart/order-ensure');
219 </script> 219 </script>
220 {{/if}} 220 {{/if}}
  221 +{{#if selectCouponPage}}
  222 +<script>
  223 + seajs.use('js/shopping-cart/select-coupon');
  224 +</script>
  225 +{{/if}}
221 {{!-- 个人中心 --}} 226 {{!-- 个人中心 --}}
222 {{#if myIndexPage}} 227 {{#if myIndexPage}}
223 <script> 228 <script>
@@ -2,6 +2,7 @@ @@ -2,6 +2,7 @@
2 2
3 use Action\AbstractAction; 3 use Action\AbstractAction;
4 use Index\CartModel; 4 use Index\CartModel;
  5 +use Index\UserModel;
5 use Plugin\Helpers; 6 use Plugin\Helpers;
6 7
7 /** 8 /**
@@ -216,7 +217,47 @@ class ShoppingCartController extends AbstractAction @@ -216,7 +217,47 @@ class ShoppingCartController extends AbstractAction
216 217
217 $this->_view->display('order-ensure', $data); 218 $this->_view->display('order-ensure', $data);
218 } 219 }
219 - 220 +
  221 + /**
  222 + * 下单流程 选择地址
  223 + */
  224 +
  225 + public function selectAddressAction() {
  226 + // 设置网站标题
  227 + $this->setTitle('选择地址');
  228 + $this->setNavHeader('选择地址', Helpers::url('/shoppingCart/orderEnsure'));
  229 +
  230 + $uid = $this->_uid;
  231 + $address = UserModel::getAddressData($uid);
  232 +
  233 + $this->_view->display('select-address', array(
  234 + 'selectAddressPage' => true,
  235 + 'pageFooter' => true,
  236 + 'address' => $address
  237 + ));
  238 +
  239 + }
  240 +
  241 + /**
  242 + * 下单流程 选择优惠券
  243 + */
  244 +
  245 + public function selectCouponAction() {
  246 + // 设置网站标题
  247 + $this->setTitle('选择优惠券');
  248 + $this->setNavHeader('选择优惠券', Helpers::url('/shoppingCart/orderEnsure'));
  249 +
  250 + $uid = $this->_uid;
  251 + $address = UserModel::getAddressData($uid);
  252 +
  253 + $this->_view->display('select-coupon', array(
  254 + 'selectCouponPage' => true,
  255 + 'pageFooter' => true,
  256 + 'address' => $address
  257 + ));
  258 +
  259 + }
  260 +
220 /** 261 /**
221 * 读取chose-panel内容 262 * 读取chose-panel内容
222 */ 263 */