diff --git a/src/coupon-list/index.js b/src/coupon-list/index.js
index 4cae999f8..20e7d9fd9 100644
--- a/src/coupon-list/index.js
+++ b/src/coupon-list/index.js
@@ -165,17 +165,17 @@ export default createComponent({
     const disabledTitle = (this.disabledTitle || t('disabled')) + disabledCount;
 
     const ExchangeBar = this.showExchangeBar && (
-      <Field
-        vModel={this.currentCode}
-        clearable
-        border={false}
-        class={bem('field')}
-        placeholder={this.inputPlaceholder || t('placeholder')}
-        maxlength="20"
-        scopedSlots={{
-          button: this.genExchangeButton
-        }}
-      />
+      <div class={bem('exchange-bar')}>
+        <Field
+          vModel={this.currentCode}
+          clearable
+          border={false}
+          class={bem('field')}
+          placeholder={this.inputPlaceholder || t('placeholder')}
+          maxlength="20"
+        />
+        {this.genExchangeButton()}
+      </div>
     );
 
     const onChange = index => () => this.$emit('change', index);
diff --git a/src/coupon-list/index.less b/src/coupon-list/index.less
index a1905e6dd..140b6bc1b 100644
--- a/src/coupon-list/index.less
+++ b/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;
 
diff --git a/src/coupon-list/test/__snapshots__/index.spec.js.snap b/src/coupon-list/test/__snapshots__/index.spec.js.snap
index b6fb1631a..bc7338623 100644
--- a/src/coupon-list/test/__snapshots__/index.spec.js.snap
+++ b/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-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__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 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>
       </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-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__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 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>
       </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-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__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 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>
       </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">
diff --git a/src/style/var.less b/src/style/var.less
index 58318f983..bc527b3ad 100644
--- a/src/style/var.less
+++ b/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;