feat(CouponList): modify button style (#5368)

src/coupon-list/index.js

@@ -182,7 +182,7 @@ export default createComponent({
 
     const CouponTab = (
       <Tab title={title}>
-        <div class={bem('list')} style={this.listStyle}>
+        <div class={bem('list', { 'with-bottom': this.showCloseButton })} style={this.listStyle}>
           {coupons.map((coupon, index) => (
             <Coupon
               ref="card"
@@ -200,7 +200,7 @@ export default createComponent({
 
     const DisabledCouponTab = (
       <Tab title={disabledTitle}>
-        <div class={bem('list')} style={this.listStyle}>
+        <div class={bem('list', { 'with-bottom': this.showCloseButton })} style={this.listStyle}>
           {disabledCoupons.map(coupon => (
             <Coupon
               disabled
@@ -221,13 +221,17 @@ export default createComponent({
           {CouponTab}
           {DisabledCouponTab}
         </Tabs>
-        <Button
+        <div class={bem('bottom')}>
-          vShow={this.showCloseButton}
+          <Button
-          size="large"
+            vShow={this.showCloseButton}
-          class={bem('close')}
+            round
-          text={this.closeButtonText || t('close')}
+            type="danger"
-          onClick={onChange(-1)}
+            block
-        />
+            class={bem('close')}
+            text={this.closeButtonText || t('close')}
+            onClick={onChange(-1)}
+          />
+        </div>
       </div>
     );
   }

src/coupon-list/index.less

@@ -33,13 +33,27 @@
     padding: @padding-md 0;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
+
+    &--with-bottom {
+      padding-bottom: @padding-md + 50px;
+    }
   }
 
-  &__close {
+  &__bottom {
     position: absolute;
     bottom: 0;
     left: 0;
+    z-index: 999;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 5px @padding-md;
     font-weight: @font-weight-bold;
+    background-color: @white;
+  }
+
+  &__close {
+    height: 40px;
+    line-height: 38px;
   }
 
   &__empty {

src/coupon-list/test/__snapshots__/index.spec.js.snap

@@ -19,7 +19,7 @@ exports[`empty-image prop 1`] = `
     </div>
     <div class="van-tabs__content">
       <div role="tabpanel" class="van-tab__pane">
-        <div class="van-coupon-list__list" style="height: 628px;">
+        <div class="van-coupon-list__list van-coupon-list__list--with-bottom" style="height: 628px;">
           <div class="van-coupon-list__empty"><img src="https://img.yzcdn.com/xxx.png">
             <p>暂无优惠券</p>
           </div>
@@ -29,7 +29,8 @@ exports[`empty-image prop 1`] = `
         <!---->
       </div>
     </div>
-  </div><button class="van-button van-button--default van-button--large van-coupon-list__close"><span class="van-button__text">不使用优惠券</span></button>
+  </div>
+  <div class="van-coupon-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-coupon-list__close"><span class="van-button__text">不使用优惠券</span></button></div>
 </div>
 `;
 
@@ -68,7 +69,7 @@ exports[`render coupon list 1`] = `
     </div>
     <div class="van-tabs__content">
       <div role="tabpanel" class="van-tab__pane">
-        <div class="van-coupon-list__list" style="height: 628px;">
+        <div class="van-coupon-list__list van-coupon-list__list--with-bottom" style="height: 628px;">
           <div class="van-coupon">
             <div class="van-coupon__content">
               <div class="van-coupon__head">
@@ -174,7 +175,8 @@ exports[`render coupon list 1`] = `
         <!---->
       </div>
     </div>
-  </div><button class="van-button van-button--default van-button--large van-coupon-list__close"><span class="van-button__text">不使用优惠券</span></button>
+  </div>
+  <div class="van-coupon-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-coupon-list__close"><span class="van-button__text">不使用优惠券</span></button></div>
 </div>
 `;
 
@@ -213,20 +215,21 @@ exports[`render empty coupon list 1`] = `
     </div>
     <div class="van-tabs__content">
       <div role="tabpanel" class="van-tab__pane" style="display: none;">
-        <div class="van-coupon-list__list" style="height: 628px;">
+        <div class="van-coupon-list__list van-coupon-list__list--with-bottom" style="height: 628px;">
           <div class="van-coupon-list__empty"><img src="https://img.yzcdn.cn/vant/coupon-empty.png">
             <p>暂无优惠券</p>
           </div>
         </div>
       </div>
       <div role="tabpanel" class="van-tab__pane" style="">
-        <div class="van-coupon-list__list" style="height: 628px;">
+        <div class="van-coupon-list__list van-coupon-list__list--with-bottom" style="height: 628px;">
           <div class="van-coupon-list__empty"><img src="https://img.yzcdn.cn/vant/coupon-empty.png">
             <p>暂无优惠券</p>
           </div>
         </div>
       </div>
     </div>
-  </div><button class="van-button van-button--default van-button--large van-coupon-list__close"><span class="van-button__text">不使用优惠券</span></button>
+  </div>
+  <div class="van-coupon-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-coupon-list__close"><span class="van-button__text">不使用优惠券</span></button></div>
 </div>
 `;