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

Feature/coupon



See merge request !1331

 {{#result}}
 <section>
     <div class="filter-box">
-        <span class="filter-btn valid active">可用({{usableCouponNumStr}})</span>
-        <span class="filter-btn invalid">不可用({{unusableCouponNumStr}})</span>
+        <span class="filter-btn valid active" data-num="{{usableCouponNumStr}}">可用({{usableCouponNumStr}})</span>
+        <span class="filter-btn invalid" data-num="{{unusableCouponNumStr}}">不可用({{unusableCouponNumStr}})</span>
     </div>
     <div class="exchange-box">
         <input type="text" name="couponCodeInput" placeholder="请输入优惠券码">
         <button id="exchangeCouponBtn" class="exchange-coupon-btn">兑换</button>
     </div>
-    <div class="tip-box">
+    <div class="tip-box{{#if noShowTips}} hide{{/if}}">
         <div class="tips">
             {{{headMsg}}}
         </div>
@@ -21,12 +21,11 @@
             {{#each ./coupons}}
                 <div class="coupon{{#isEqualOr is_selected_support 'N'}} no-support-selected{{/isEqualOr}}" data-code="{{coupon_code}}">
                     <div class="coupon-left{{#isEqualOr is_selected_support 'Y'}}
-                        {{#isEqualOr coupon_type '1'}} coupon-left-activity{{/isEqualOr}}
+                        {{#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}}
                     {{/isEqualOr}}">
                         <p class="value">
-                            {{#isEqualOr coupon_type '1' '3' '6'}}¥{{/isEqualOr}}
                             <span>{{coupon_value_str}}</span>
                         </p>
                         <p class="threshold">{{use_rule}}</p>
@@ -55,12 +54,13 @@
     </div>
     <div class="coupon-list unusable hide">
         {{#unusableCouponsList}}
+            {{#if ./name}}
             <div class="coupon-list-type"><hr><span>{{./name}}</span><hr></div>
+            {{/if}}
             {{#each ./coupons}}
                 <div class="coupon">
-                    <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}}">
+                    <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}}">
                         <p class="value">
-                            {{#isEqualOr coupon_type '1' '3' '6'}}¥{{/isEqualOr}}
                             <span>{{coupon_value_str}}</span>
                         </p>
                         <p class="threshold">{{use_rule}}</p>
@@ -68,7 +68,7 @@
                     <div class="coupon-right">
                         <div class="info">
                             <p class="title">
-                                <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>
+                                <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>
                             <p class="time">{{coupon_validity}}</p>
                             <p class="desc unusable-desc">{{desc}}</p>
                         </div>
@@ -80,7 +80,7 @@
             {{/each}}
             {{/ unusableCouponsList}}
     </div>
-    <div class="use-now">
+    <div class="use-now" id="useNowBox">
         {{#couponPay}}
         <div class="left-info">
             <p>已选择

-<div id="conponDialogWrapper" class="dialog-wrapper">
+<div id="conponDialogWrapper" class="dialog-wrapper conpon-diaalog-wrapper">
     <div class="dialog-box" style="top: 50%; margin-top: -119px;">
         <div class="dialog-header">优惠券使用规则</div>
         <div class="dialog-content">{{{couponPayRule}}}</div>

 <section class="coupon-section" data-code="{{coupon_code}}" data-id="{{coupon_id}}">
     <div class="coupon{{#isEqualOr is_overtime 'Y'}} coupon-overtime{{/isEqualOr}}{{#if is_used}} coupon-used{{/if}}">
-        <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}}">
-            <p class="value">{{#unlessor coupon_type '5'}}¥{{/unlessor}}<span>{{coupon_value_str}}</span></p>
+        <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}}">
+            <p class="value"><span>{{coupon_value_str}}</span></p>
             {{#if use_rule}}
             <p class="threshold">{{use_rule}}</p>
             {{/if}}

@@ -13,6 +13,7 @@ class SelectCouponController extends Page {
         this.useCouponCodeUrl = params.useCouponCodeUrl;
         this.selectCouponCodes = [];
         this.isBuyNowPage = params.isBuyNowPage || false;
+        this.closeTipbyUser = false;
 
         if (this.orderInfo('coupon_code')) {
             this.selectCouponCodes = this.orderInfo('coupon_code').split(',');
@@ -65,7 +66,9 @@ class SelectCouponController extends Page {
             unusableCouponList: resultHtml.find('.unusable'),
             useNowBtn: resultHtml.find('#useNowBtn'),
             exchangeCouponBtn: resultHtml.find('#exchangeCouponBtn'),
-            couponCodeInput: resultHtml.find('input[name=couponCodeInput]')
+            couponCodeInput: resultHtml.find('input[name=couponCodeInput]'),
+            exchangeBox: resultHtml.find('.exchange-box'),
+            useNowBox: resultHtml.find('#useNowBox')
         };
 
         this.view.filterBtn.on('click', this.tabChange.bind(this));
@@ -135,6 +138,8 @@ class SelectCouponController extends Page {
     tabChange(event) {
         let itemClicked = $(event.currentTarget);
 
+        console.log(this.view.useNowBox);
+
         if (itemClicked.hasClass('active')) {
             itemClicked.removeClass('active');
         } else {
@@ -145,9 +150,19 @@ class SelectCouponController extends Page {
         if (itemClicked.hasClass('valid')) {
             this.view.unusableCouponList.addClass('hide');
             this.view.usableCouponList.removeClass('hide');
+            this.view.exchangeBox.removeClass('hide');
+            this.view.useNowBox.removeClass('hide');
         } else {
             this.view.usableCouponList.addClass('hide');
             this.view.unusableCouponList.removeClass('hide');
+            this.view.exchangeBox.addClass('hide');
+            this.view.useNowBox.addClass('hide');
+        }
+
+        if (itemClicked.data('num') === 0) {
+            this.view.tipBox.addClass('hide');
+        } else if (!this.closeTipbyUser) {
+            this.view.tipBox.removeClass('hide');
         }
     }
 
@@ -176,6 +191,7 @@ class SelectCouponController extends Page {
      * 关闭提示框
      */
     closeTip() {
+        this.closeTipbyUser = true;
         this.view.tipBox.hide();
     }
 }

@@ -890,3 +890,9 @@
         }
     }
 }
+
+.conpon-diaalog-wrapper {
+    > .dialog-box > .dialog-content {
+        padding-top: 0;
+    }
+}

@@ -172,6 +172,9 @@ body {
                 font-size: 22px;
                 color: #b0b0b0;
                 position: relative;
+                display: flex;
+                flex-direction: column;
+                align-content: space-between;
 
                 .type-shop {
                     color: #efaf46;
@@ -186,12 +189,13 @@ body {
                 }
 
                 .title {
+                    width: 400px;
                     font-size: 24px;
                     color: #444;
-                    margin-bottom: 40px;
+                    display: -webkit-box;
+                    -webkit-box-orient: vertical;
+                    -webkit-line-clamp: 2;
                     overflow: hidden;
-                    white-space: nowrap;
-                    text-overflow: ellipsis;
                 }
 
                 .time {

@@ -357,7 +357,7 @@ function handleCoupons(params) {
     }
 
     if (validCouponCount && couponData.coupon_count) {
-        showText = `可用${validCouponCount}张 已推荐${couponData.coupon_count}张`;
+        showText = `${validCouponCount}张可用 已推荐${couponData.coupon_count}张`;
         priceText = `-￥${couponData.coupon_amount_str}`;
     }
 
@@ -387,10 +387,13 @@ const couponProcess = conponData => {
     let headMsg = _.replace(_.get(conponData, 'usable_coupon_catalogs.head_msg', []), '\n', '<br>');
     let usableCouponNumStr = '';
     let unusableCouponNumStr = '';
+    let noShowTips = true;
 
     _.forEach(unusableCouponsList, listItem => {
-        if (listItem.coupons) {
+        if (listItem.coupons && listItem.coupons.length) {
             unusableCouponNum += listItem.coupons.length;
+        } else {
+            listItem.name = '';
         }
     });
 
@@ -406,13 +409,18 @@ const couponProcess = conponData => {
         unusableCouponNumStr = unusableCouponNum + '';
     }
 
+    if (!usableCouponNum) {
+        noShowTips = true;
+    }
+
     return {
         usableCouponNumStr,
         unusableCouponNumStr,
         usableCouponsList,
         unusableCouponsList,
         couponPay,
-        headMsg
+        headMsg,
+        noShowTips
     };
 };