Authored by 郭成尧

Merge branch 'feature/coupon' into 'release/180420'

Feature/coupon



See merge request !1331
1 {{#result}} 1 {{#result}}
2 <section> 2 <section>
3 <div class="filter-box"> 3 <div class="filter-box">
4 - <span class="filter-btn valid active">可用({{usableCouponNumStr}})</span>  
5 - <span class="filter-btn invalid">不可用({{unusableCouponNumStr}})</span> 4 + <span class="filter-btn valid active" data-num="{{usableCouponNumStr}}">可用({{usableCouponNumStr}})</span>
  5 + <span class="filter-btn invalid" data-num="{{unusableCouponNumStr}}">不可用({{unusableCouponNumStr}})</span>
6 </div> 6 </div>
7 <div class="exchange-box"> 7 <div class="exchange-box">
8 <input type="text" name="couponCodeInput" placeholder="请输入优惠券码"> 8 <input type="text" name="couponCodeInput" placeholder="请输入优惠券码">
9 <button id="exchangeCouponBtn" class="exchange-coupon-btn">兑换</button> 9 <button id="exchangeCouponBtn" class="exchange-coupon-btn">兑换</button>
10 </div> 10 </div>
11 - <div class="tip-box"> 11 + <div class="tip-box{{#if noShowTips}} hide{{/if}}">
12 <div class="tips"> 12 <div class="tips">
13 {{{headMsg}}} 13 {{{headMsg}}}
14 </div> 14 </div>
@@ -21,12 +21,11 @@ @@ -21,12 +21,11 @@
21 {{#each ./coupons}} 21 {{#each ./coupons}}
22 <div class="coupon{{#isEqualOr is_selected_support 'N'}} no-support-selected{{/isEqualOr}}" data-code="{{coupon_code}}"> 22 <div class="coupon{{#isEqualOr is_selected_support 'N'}} no-support-selected{{/isEqualOr}}" data-code="{{coupon_code}}">
23 <div class="coupon-left{{#isEqualOr is_selected_support 'Y'}} 23 <div class="coupon-left{{#isEqualOr is_selected_support 'Y'}}
24 - {{#isEqualOr coupon_type '1'}} coupon-left-activity{{/isEqualOr}} 24 + {{#isEqualOr coupon_type '1' '3' '8'}} coupon-left-activity{{/isEqualOr}}
25 {{#isEqualOr coupon_type '5'}} coupon-left-freight{{/isEqualOr}} 25 {{#isEqualOr coupon_type '5'}} coupon-left-freight{{/isEqualOr}}
26 {{#isEqualOr coupon_type '6'}} coupon-left-shop{{/isEqualOr}} 26 {{#isEqualOr coupon_type '6'}} coupon-left-shop{{/isEqualOr}}
27 {{/isEqualOr}}"> 27 {{/isEqualOr}}">
28 <p class="value"> 28 <p class="value">
29 - {{#isEqualOr coupon_type '1' '3' '6'}}¥{{/isEqualOr}}  
30 <span>{{coupon_value_str}}</span> 29 <span>{{coupon_value_str}}</span>
31 </p> 30 </p>
32 <p class="threshold">{{use_rule}}</p> 31 <p class="threshold">{{use_rule}}</p>
@@ -55,12 +54,13 @@ @@ -55,12 +54,13 @@
55 </div> 54 </div>
56 <div class="coupon-list unusable hide"> 55 <div class="coupon-list unusable hide">
57 {{#unusableCouponsList}} 56 {{#unusableCouponsList}}
  57 + {{#if ./name}}
58 <div class="coupon-list-type"><hr><span>{{./name}}</span><hr></div> 58 <div class="coupon-list-type"><hr><span>{{./name}}</span><hr></div>
  59 + {{/if}}
59 {{#each ./coupons}} 60 {{#each ./coupons}}
60 <div class="coupon"> 61 <div class="coupon">
61 - <div class="coupon-left{{#isEqualOr coupon_type '1' '3'}} coupon-left-activity{{/isEqualOr}}{{#isEqualOr coupon_type '5'}} coupon-left-freight{{/isEqualOr}}{{#isEqualOr coupon_type '6'}} coupon-left-shop{{/isEqualOr}}"> 62 + <div class="coupon-left{{#isEqualOr coupon_type '1' '3' '8'}} coupon-left-activity{{/isEqualOr}}{{#isEqualOr coupon_type '5'}} coupon-left-freight{{/isEqualOr}}{{#isEqualOr coupon_type '6'}} coupon-left-shop{{/isEqualOr}}">
62 <p class="value"> 63 <p class="value">
63 - {{#isEqualOr coupon_type '1' '3' '6'}}¥{{/isEqualOr}}  
64 <span>{{coupon_value_str}}</span> 64 <span>{{coupon_value_str}}</span>
65 </p> 65 </p>
66 <p class="threshold">{{use_rule}}</p> 66 <p class="threshold">{{use_rule}}</p>
@@ -68,7 +68,7 @@ @@ -68,7 +68,7 @@
68 <div class="coupon-right"> 68 <div class="coupon-right">
69 <div class="info"> 69 <div class="info">
70 <p class="title"> 70 <p class="title">
71 - <span class="{{#isEqualOr coupon_type '1' '3'}} type-activity{{/isEqualOr}}{{#isEqualOr coupon_type '5'}} type-freight{{/isEqualOr}}{{#isEqualOr coupon_type '6'}} type-shop{{/isEqualOr}}">[{{catalog_name}}]</span> {{coupon_name}}</p> 71 + <span class="{{#isEqualOr coupon_type '1' '3' '8'}} type-activity{{/isEqualOr}}{{#isEqualOr coupon_type '5'}} type-freight{{/isEqualOr}}{{#isEqualOr coupon_type '6'}} type-shop{{/isEqualOr}}">[{{catalog_name}}]</span> {{coupon_name}}</p>
72 <p class="time">{{coupon_validity}}</p> 72 <p class="time">{{coupon_validity}}</p>
73 <p class="desc unusable-desc">{{desc}}</p> 73 <p class="desc unusable-desc">{{desc}}</p>
74 </div> 74 </div>
@@ -80,7 +80,7 @@ @@ -80,7 +80,7 @@
80 {{/each}} 80 {{/each}}
81 {{/ unusableCouponsList}} 81 {{/ unusableCouponsList}}
82 </div> 82 </div>
83 - <div class="use-now"> 83 + <div class="use-now" id="useNowBox">
84 {{#couponPay}} 84 {{#couponPay}}
85 <div class="left-info"> 85 <div class="left-info">
86 <p>已选择 86 <p>已选择
1 -<div id="conponDialogWrapper" class="dialog-wrapper"> 1 +<div id="conponDialogWrapper" class="dialog-wrapper conpon-diaalog-wrapper">
2 <div class="dialog-box" style="top: 50%; margin-top: -119px;"> 2 <div class="dialog-box" style="top: 50%; margin-top: -119px;">
3 <div class="dialog-header">优惠券使用规则</div> 3 <div class="dialog-header">优惠券使用规则</div>
4 <div class="dialog-content">{{{couponPayRule}}}</div> 4 <div class="dialog-content">{{{couponPayRule}}}</div>
1 <section class="coupon-section" data-code="{{coupon_code}}" data-id="{{coupon_id}}"> 1 <section class="coupon-section" data-code="{{coupon_code}}" data-id="{{coupon_id}}">
2 <div class="coupon{{#isEqualOr is_overtime 'Y'}} coupon-overtime{{/isEqualOr}}{{#if is_used}} coupon-used{{/if}}"> 2 <div class="coupon{{#isEqualOr is_overtime 'Y'}} coupon-overtime{{/isEqualOr}}{{#if is_used}} coupon-used{{/if}}">
3 - <div class="coupon-left{{#unless usedOrOvertime}}{{#isEqualOr coupon_type '1' '3'}} coupon-left-activity{{/isEqualOr}}{{#isEqualOr coupon_type '5'}} coupon-left-freight{{/isEqualOr}}{{#isEqualOr coupon_type '6'}} coupon-left-shop{{/isEqualOr}}{{/unless}}">  
4 - <p class="value">{{#unlessor coupon_type '5'}}¥{{/unlessor}}<span>{{coupon_value_str}}</span></p> 3 + <div class="coupon-left{{#unless usedOrOvertime}}{{#isEqualOr coupon_type '1' '3' '8'}} coupon-left-activity{{/isEqualOr}}{{#isEqualOr coupon_type '5'}} coupon-left-freight{{/isEqualOr}}{{#isEqualOr coupon_type '6'}} coupon-left-shop{{/isEqualOr}}{{/unless}}">
  4 + <p class="value"><span>{{coupon_value_str}}</span></p>
5 {{#if use_rule}} 5 {{#if use_rule}}
6 <p class="threshold">{{use_rule}}</p> 6 <p class="threshold">{{use_rule}}</p>
7 {{/if}} 7 {{/if}}
@@ -13,6 +13,7 @@ class SelectCouponController extends Page { @@ -13,6 +13,7 @@ class SelectCouponController extends Page {
13 this.useCouponCodeUrl = params.useCouponCodeUrl; 13 this.useCouponCodeUrl = params.useCouponCodeUrl;
14 this.selectCouponCodes = []; 14 this.selectCouponCodes = [];
15 this.isBuyNowPage = params.isBuyNowPage || false; 15 this.isBuyNowPage = params.isBuyNowPage || false;
  16 + this.closeTipbyUser = false;
16 17
17 if (this.orderInfo('coupon_code')) { 18 if (this.orderInfo('coupon_code')) {
18 this.selectCouponCodes = this.orderInfo('coupon_code').split(','); 19 this.selectCouponCodes = this.orderInfo('coupon_code').split(',');
@@ -65,7 +66,9 @@ class SelectCouponController extends Page { @@ -65,7 +66,9 @@ class SelectCouponController extends Page {
65 unusableCouponList: resultHtml.find('.unusable'), 66 unusableCouponList: resultHtml.find('.unusable'),
66 useNowBtn: resultHtml.find('#useNowBtn'), 67 useNowBtn: resultHtml.find('#useNowBtn'),
67 exchangeCouponBtn: resultHtml.find('#exchangeCouponBtn'), 68 exchangeCouponBtn: resultHtml.find('#exchangeCouponBtn'),
68 - couponCodeInput: resultHtml.find('input[name=couponCodeInput]') 69 + couponCodeInput: resultHtml.find('input[name=couponCodeInput]'),
  70 + exchangeBox: resultHtml.find('.exchange-box'),
  71 + useNowBox: resultHtml.find('#useNowBox')
69 }; 72 };
70 73
71 this.view.filterBtn.on('click', this.tabChange.bind(this)); 74 this.view.filterBtn.on('click', this.tabChange.bind(this));
@@ -135,6 +138,8 @@ class SelectCouponController extends Page { @@ -135,6 +138,8 @@ class SelectCouponController extends Page {
135 tabChange(event) { 138 tabChange(event) {
136 let itemClicked = $(event.currentTarget); 139 let itemClicked = $(event.currentTarget);
137 140
  141 + console.log(this.view.useNowBox);
  142 +
138 if (itemClicked.hasClass('active')) { 143 if (itemClicked.hasClass('active')) {
139 itemClicked.removeClass('active'); 144 itemClicked.removeClass('active');
140 } else { 145 } else {
@@ -145,9 +150,19 @@ class SelectCouponController extends Page { @@ -145,9 +150,19 @@ class SelectCouponController extends Page {
145 if (itemClicked.hasClass('valid')) { 150 if (itemClicked.hasClass('valid')) {
146 this.view.unusableCouponList.addClass('hide'); 151 this.view.unusableCouponList.addClass('hide');
147 this.view.usableCouponList.removeClass('hide'); 152 this.view.usableCouponList.removeClass('hide');
  153 + this.view.exchangeBox.removeClass('hide');
  154 + this.view.useNowBox.removeClass('hide');
148 } else { 155 } else {
149 this.view.usableCouponList.addClass('hide'); 156 this.view.usableCouponList.addClass('hide');
150 this.view.unusableCouponList.removeClass('hide'); 157 this.view.unusableCouponList.removeClass('hide');
  158 + this.view.exchangeBox.addClass('hide');
  159 + this.view.useNowBox.addClass('hide');
  160 + }
  161 +
  162 + if (itemClicked.data('num') === 0) {
  163 + this.view.tipBox.addClass('hide');
  164 + } else if (!this.closeTipbyUser) {
  165 + this.view.tipBox.removeClass('hide');
151 } 166 }
152 } 167 }
153 168
@@ -176,6 +191,7 @@ class SelectCouponController extends Page { @@ -176,6 +191,7 @@ class SelectCouponController extends Page {
176 * 关闭提示框 191 * 关闭提示框
177 */ 192 */
178 closeTip() { 193 closeTip() {
  194 + this.closeTipbyUser = true;
179 this.view.tipBox.hide(); 195 this.view.tipBox.hide();
180 } 196 }
181 } 197 }
@@ -890,3 +890,9 @@ @@ -890,3 +890,9 @@
890 } 890 }
891 } 891 }
892 } 892 }
  893 +
  894 +.conpon-diaalog-wrapper {
  895 + > .dialog-box > .dialog-content {
  896 + padding-top: 0;
  897 + }
  898 +}
@@ -172,6 +172,9 @@ body { @@ -172,6 +172,9 @@ body {
172 font-size: 22px; 172 font-size: 22px;
173 color: #b0b0b0; 173 color: #b0b0b0;
174 position: relative; 174 position: relative;
  175 + display: flex;
  176 + flex-direction: column;
  177 + align-content: space-between;
175 178
176 .type-shop { 179 .type-shop {
177 color: #efaf46; 180 color: #efaf46;
@@ -186,12 +189,13 @@ body { @@ -186,12 +189,13 @@ body {
186 } 189 }
187 190
188 .title { 191 .title {
  192 + width: 400px;
189 font-size: 24px; 193 font-size: 24px;
190 color: #444; 194 color: #444;
191 - margin-bottom: 40px; 195 + display: -webkit-box;
  196 + -webkit-box-orient: vertical;
  197 + -webkit-line-clamp: 2;
192 overflow: hidden; 198 overflow: hidden;
193 - white-space: nowrap;  
194 - text-overflow: ellipsis;  
195 } 199 }
196 200
197 .time { 201 .time {
@@ -357,7 +357,7 @@ function handleCoupons(params) { @@ -357,7 +357,7 @@ function handleCoupons(params) {
357 } 357 }
358 358
359 if (validCouponCount && couponData.coupon_count) { 359 if (validCouponCount && couponData.coupon_count) {
360 - showText = `可用${validCouponCount} 已推荐${couponData.coupon_count}张`; 360 + showText = `${validCouponCount}张可用 已推荐${couponData.coupon_count}张`;
361 priceText = `-${couponData.coupon_amount_str}`; 361 priceText = `-${couponData.coupon_amount_str}`;
362 } 362 }
363 363
@@ -387,10 +387,13 @@ const couponProcess = conponData => { @@ -387,10 +387,13 @@ const couponProcess = conponData => {
387 let headMsg = _.replace(_.get(conponData, 'usable_coupon_catalogs.head_msg', []), '\n', '<br>'); 387 let headMsg = _.replace(_.get(conponData, 'usable_coupon_catalogs.head_msg', []), '\n', '<br>');
388 let usableCouponNumStr = ''; 388 let usableCouponNumStr = '';
389 let unusableCouponNumStr = ''; 389 let unusableCouponNumStr = '';
  390 + let noShowTips = true;
390 391
391 _.forEach(unusableCouponsList, listItem => { 392 _.forEach(unusableCouponsList, listItem => {
392 - if (listItem.coupons) { 393 + if (listItem.coupons && listItem.coupons.length) {
393 unusableCouponNum += listItem.coupons.length; 394 unusableCouponNum += listItem.coupons.length;
  395 + } else {
  396 + listItem.name = '';
394 } 397 }
395 }); 398 });
396 399
@@ -406,13 +409,18 @@ const couponProcess = conponData => { @@ -406,13 +409,18 @@ const couponProcess = conponData => {
406 unusableCouponNumStr = unusableCouponNum + ''; 409 unusableCouponNumStr = unusableCouponNum + '';
407 } 410 }
408 411
  412 + if (!usableCouponNum) {
  413 + noShowTips = true;
  414 + }
  415 +
409 return { 416 return {
410 usableCouponNumStr, 417 usableCouponNumStr,
411 unusableCouponNumStr, 418 unusableCouponNumStr,
412 usableCouponsList, 419 usableCouponsList,
413 unusableCouponsList, 420 unusableCouponsList,
414 couponPay, 421 couponPay,
415 - headMsg 422 + headMsg,
  423 + noShowTips
416 }; 424 };
417 }; 425 };
418 426