refactor(CouponList): update style (#5501)

src/coupon-list/index.js

@@ -165,6 +165,7 @@ export default createComponent({
     const disabledTitle = (this.disabledTitle || t('disabled')) + disabledCount;
 
     const ExchangeBar = this.showExchangeBar && (
+      <div class={bem('exchange-bar')}>
         <Field
           vModel={this.currentCode}
           clearable
@@ -172,10 +173,9 @@ export default createComponent({
           class={bem('field')}
           placeholder={this.inputPlaceholder || t('placeholder')}
           maxlength="20"
-        scopedSlots={{
-          button: this.genExchangeButton
-        }}
         />
+        {this.genExchangeButton()}
+      </div>
     );
 
     const onChange = index => () => this.$emit('change', index);

src/coupon-list/index.less

@@ -8,7 +8,7 @@
   &__field {
     padding: @coupon-list-field-padding;
 
-    .van-field__control {
+    .van-field__body {
       height: 34px;
       padding-left: @padding-sm;
       line-height: 34px;
@@ -19,18 +19,33 @@
         color: @gray-5;
       }
     }
+
+    .van-field__clear {
+      margin-right: 0;
+    }
+  }
+
+  &__exchange-bar {
+    display: flex;
+    align-items: center;
+    background-color: @white;
   }
 
   &__exchange {
+    flex: none;
     height: @coupon-list-exchange-button-height;
     font-size: @font-size-lg;
     line-height: @coupon-list-exchange-button-height - 2px;
     border: 0;
   }
 
+  .van-tabs__wrap {
+    box-shadow: 0 6px 12px -12px @gray-6;
+  }
+
   &__list {
     box-sizing: border-box;
-    padding: @padding-md 0;
+    padding: @padding-md 0 @padding-lg;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
 

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

@@ -2,12 +2,12 @@
 
 exports[`empty-image prop 1`] = `
 <div class="van-coupon-list">
+  <div class="van-coupon-list__exchange-bar">
     <div class="van-cell van-cell--borderless van-field van-coupon-list__field">
       <div class="van-cell__value van-cell__value--alone">
-      <div class="van-field__body"><input type="text" placeholder="请输入优惠码" class="van-field__control">
+        <div class="van-field__body"><input type="text" placeholder="请输入优惠码" class="van-field__control"></div>
-        <div class="van-field__button"><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange"><span class="van-button__text">兑换</span></button></div>
-      </div>
       </div>
+    </div><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange"><span class="van-button__text">兑换</span></button>
   </div>
   <div class="van-tabs van-tabs--line van-coupon-list__tab">
     <div class="van-tabs__wrap">
@@ -52,12 +52,12 @@ exports[`render coupon cell with coupon 1`] = `
 
 exports[`render coupon list 1`] = `
 <div class="van-coupon-list">
+  <div class="van-coupon-list__exchange-bar">
     <div class="van-cell van-cell--borderless van-field van-coupon-list__field">
       <div class="van-cell__value van-cell__value--alone">
-      <div class="van-field__body"><input type="text" placeholder="请输入优惠码" class="van-field__control">
+        <div class="van-field__body"><input type="text" placeholder="请输入优惠码" class="van-field__control"></div>
-        <div class="van-field__button"><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange"><span class="van-button__text">兑换</span></button></div>
-      </div>
       </div>
+    </div><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange"><span class="van-button__text">兑换</span></button>
   </div>
   <div class="van-tabs van-tabs--line van-coupon-list__tab">
     <div class="van-tabs__wrap">
@@ -198,12 +198,12 @@ exports[`render disabled coupon 1`] = `
 
 exports[`render empty coupon list 1`] = `
 <div class="van-coupon-list">
+  <div class="van-coupon-list__exchange-bar">
     <div class="van-cell van-cell--borderless van-field van-coupon-list__field">
       <div class="van-cell__value van-cell__value--alone">
-      <div class="van-field__body"><input type="text" placeholder="请输入优惠码" class="van-field__control">
+        <div class="van-field__body"><input type="text" placeholder="请输入优惠码" class="van-field__control"></div>
-        <div class="van-field__button"><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange"><span class="van-button__text">兑换</span></button></div>
-      </div>
       </div>
+    </div><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange"><span class="van-button__text">兑换</span></button>
   </div>
   <div class="van-tabs van-tabs--line van-coupon-list__tab">
     <div class="van-tabs__wrap">

src/style/var.less

@@ -258,12 +258,12 @@
 @count-down-line-height: 20px;
 
 // Coupon
-@coupon-margin: 0 @padding-md @padding-md;
+@coupon-margin: 0 @padding-sm @padding-sm;
 @coupon-content-height: 84px;
 @coupon-content-padding: 14px 0;
 @coupon-background-color: @white;
 @coupon-active-background-color: @active-color;
-@coupon-border-radius: @border-radius-md;
+@coupon-border-radius: @border-radius-lg;
 @coupon-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
 @coupon-head-width: 96px;
 @coupon-amount-color: @red;