[Improvement] CouponList: add exchangeMinLength prop (#556)

docs/markdown/en-US/coupon.md

@@ -84,6 +84,7 @@ export default {
 | disabled-coupons | Disabled voupon list | `Array` | `[]` | - |
 | exchange-button-text | Exchange button text | `String` | `Exchange` | - |
 | exchange-button-disabled | Whether to disable exchange button | `Boolean` | `false` | - |
+| exchange-min-length | Min length to enable exchange button | `Number` | `1` | - |
 | displayed-coupon-index | Index of displayed coupon | `Number` | - | - |
 | close-button-text | Close button text | `String` | `Close` | - |
 | disabled-list-title | Disabled list title | `String` | `Unavailable` | - |

docs/markdown/zh-CN/coupon.md

@@ -85,6 +85,7 @@ export default {
 | disabled-doupons | 不可用优惠券列表 | `Array` | `[]` | - |
 | exchange-button-text | 兑换按钮文字 | `String` | `兑换` | - |
 | exchange-button-disabled | 是否禁用兑换按钮 | `Boolean` | `false` | - |
+| exchange-min-length | 兑换码最小长度 | `Number` | `1` | - |
 | displayed-coupon-index | 滚动至特定优惠券位置 | `Number` | - | - |
 | show-close-button | 是否显示列表底部按钮 | `Boolean` | `true` | - |
 | close-button-text | 列表底部按钮文字 | `String` | `不使用优惠` | - |

packages/coupon-list/index.vue

@@ -11,11 +11,10 @@
         size="small"
         type="danger"
         class="van-coupon-list__exchange"
-        :disabled="exchangeButtonDisabled || !exchangeCode.length"
+        :text="exchangeButtonText || $t('exchange')"
+        :disabled="buttonDisabled"
         @click="onClickExchangeButton"
-      >
-        {{ exchangeButtonText || $t('exchange') }}
-      </van-button>
+      />
     </cell-group>
     <div class="van-coupon-list__list" :class="{ 'van-coupon-list--with-exchange': showExchangeBar }" ref="list">
       <coupon-item
@@ -40,11 +39,10 @@
     </div>
     <div
       v-show="showCloseButton"
+      v-text="closeButtonText || $t('close')"
       class="van-coupon-list__close van-hairline--top"
       @click="onClickNotUse"
-    >
-      {{ closeButtonText || $t('close') }}
-    </div>
+    />
   </div>
 </template>
 
@@ -74,6 +72,11 @@ export default create({
     inputPlaceholder: String,
     disabledListTitle: String,
     exchangeButtonText: String,
+    exchangeButtonDisabled: Boolean,
+    exchangeMinLength: {
+      type: Number,
+      default: 1
+    },
     chosenCoupon: {
       type: Number,
       default: -1
@@ -86,10 +89,6 @@ export default create({
       type: Array,
       default: () => []
     },
-    exchangeButtonDisabled: {
-      type: Boolean,
-      default: false
-    },
     displayedCouponIndex: {
       type: Number,
       default: -1
@@ -104,18 +103,24 @@ export default create({
     }
   },
 
-  watch: {
-    displayedCouponIndex(val) {
-      this.scrollToShowCoupon(val);
-    }
-  },
-
   data() {
     return {
       exchangeCode: ''
     };
   },
 
+  computed: {
+    buttonDisabled() {
+      return this.exchangeButtonDisabled || this.exchangeCode.length < this.exchangeMinLength;
+    }
+  },
+
+  watch: {
+    displayedCouponIndex(val) {
+      this.scrollToShowCoupon(val);
+    }
+  },
+
   mounted() {
     this.scrollToShowCoupon(this.displayedCouponIndex);
   },