[Improvement] CouponList: support v-model & exchangeButtonLoading (#566)

docs/markdown/en-US/coupon.md

@@ -79,10 +79,12 @@ export default {
 
 | Attribute | Description | Type | Default | Accepted Values |
 |-----------|-----------|-----------|-------------|-------------|
+| v-model | Current exchange code | `String` | - | - |
 | chosen-coupon | Index of chosen coupon | `Number` | `-1` | - |
 | coupons | Coupon list | `Array` | `[]` | - |
 | disabled-coupons | Disabled voupon list | `Array` | `[]` | - |
 | exchange-button-text | Exchange button text | `String` | `Exchange` | - |
+| exchange-button-loading | Whether to show loading in exchange button | `Boolean` | `false` | - |
 | 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` | - | - |

docs/markdown/zh-CN/coupon.md

@@ -69,7 +69,7 @@ export default {
 
 ### CouponCell API
 
-| 参数 | 说明 | 类型 | 默认值 | 必须 |
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
 | title | 单元格标题 | `String` | `优惠券码` | - |
 | chosen-coupon | 当前选中优惠券的索引 | `Number` | `-1` | - |
@@ -78,12 +78,14 @@ export default {
 
 ### CouponList API
 
-| 参数 | 说明 | 类型 | 默认值 | 必须 |
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
+| v-model | 当前输入的兑换码 | `String` | - | - |
 | chosen-coupon | 当前选中优惠券的索引 | `Number` | `-1` | - |
 | coupons | 可用优惠券列表 | `Array` | `[]` | - |
 | disabled-doupons | 不可用优惠券列表 | `Array` | `[]` | - |
 | exchange-button-text | 兑换按钮文字 | `String` | `兑换` | - |
+| exchange-button-loading | 是否在兑换按钮上显示加载动画 | `Boolean` | `false` | - |
 | exchange-button-disabled | 是否禁用兑换按钮 | `Boolean` | `false` | - |
 | exchange-min-length | 兑换码最小长度 | `Number` | `1` | - |
 | displayed-coupon-index | 滚动至特定优惠券位置 | `Number` | - | - |

packages/coupon-list/index.vue

@@ -3,7 +3,7 @@
     <cell-group class="van-coupon-list__top" v-if="showExchangeBar">
       <field
         class="van-coupon-list__filed van-hairline--surround"
-        v-model="exchangeCode"
+        v-model="currentCode"
         :placeholder="inputPlaceholder || $t('placeholder')"
         :maxlength="20"
       />
@@ -12,6 +12,7 @@
         type="danger"
         class="van-coupon-list__exchange"
         :text="exchangeButtonText || $t('exchange')"
+        :loading="exchangeButtonLoading"
         :disabled="buttonDisabled"
         @click="onClickExchangeButton"
       />
@@ -23,7 +24,7 @@
         :key="item.id || item.name"
         :data="item"
         :chosen="index === chosenCoupon"
-        @click.native="onClickCoupon(index)"
+        @click.native="$emit('change', index)"
       />
       <h3 v-if="disabledCoupons.length">{{ disabledListTitle || $t('disabled') }}</h3>
       <coupon-item
@@ -41,7 +42,7 @@
       v-show="showCloseButton"
       v-text="closeButtonText || $t('close')"
       class="van-coupon-list__close van-hairline--top"
-      @click="onClickNotUse"
+      @click="$emit('change', -1)"
     />
   </div>
 </template>
@@ -67,11 +68,17 @@ export default create({
     CouponItem
   },
 
+  model: {
+    prop: 'code'
+  },
+
   props: {
+    code: String,
     closeButtonText: String,
     inputPlaceholder: String,
     disabledListTitle: String,
     exchangeButtonText: String,
+    exchangeButtonLoading: Boolean,
     exchangeButtonDisabled: Boolean,
     exchangeMinLength: {
       type: Number,
@@ -105,17 +112,29 @@ export default create({
 
   data() {
     return {
-      exchangeCode: ''
+      currentCode: this.code || ''
     };
   },
 
   computed: {
     buttonDisabled() {
-      return this.exchangeButtonDisabled || this.exchangeCode.length < this.exchangeMinLength;
+      return (
+        !this.exchangeButtonLoading &&
+        (this.exchangeButtonDisabled ||
+          this.currentCode.length < this.exchangeMinLength)
+      );
     }
   },
 
   watch: {
+    code(code) {
+      this.currentCode = code;
+    },
+
+    currentCode(code) {
+      this.$emit('input', code);
+    },
+
     displayedCouponIndex(val) {
       this.scrollToShowCoupon(val);
     }
@@ -126,17 +145,16 @@ export default create({
   },
 
   methods: {
-    onClickNotUse() {
-      this.$emit('change', -1);
-    },
-    onClickCoupon(index) {
-      this.$emit('change', index);
-    },
     onClickExchangeButton() {
-      this.$emit('exchange', this.exchangeCode);
+      this.$emit('exchange', this.currentCode);
-      this.exchangeCode = '';
+
+      // auto clear currentCode when not use v-model
+      if (!this.code) {
+        this.currentCode = '';
+      }
     },
-    // 滚动到特定优惠券的位置
+
+    // scroll to show specific coupon
     scrollToShowCoupon(index) {
       if (index === -1) {
         return;