[new feature] CouponList: add enabled-title、disabled-title props (#3578)

youzan · Jun 20, 2019 · 1f3c2fa · 1f3c2fa
1 parent 8761669
commit 1f3c2fa
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 15 deletions.
diff --git a/packages/coupon-list/en-US.md b/packages/coupon-list/en-US.md
@@ -86,7 +86,9 @@ export default {
 | v-model | Current exchange code | `String` | - |
 | chosen-coupon | Index of chosen coupon | `Number` | `-1` |
 | coupons | Coupon list | `Array` | `[]` |
-| disabled-coupons | Disabled voupon list | `Array` | `[]` |
+| disabled-coupons | Disabled coupon list | `Array` | `[]` |
+| enabled-title | Title of coupon list | `String` | `Available` | - |
+| disabled-title | Title of disabled coupon list | `String` | `Unavailable` | - |
 | 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` |

diff --git a/packages/coupon-list/index.js b/packages/coupon-list/index.js
@@ -19,6 +19,8 @@ export default sfc({
     disabledCoupons: Array,
     closeButtonText: String,
     inputPlaceholder: String,
+    enabledTitle: String,
+    disabledTitle: String,
     exchangeButtonText: String,
     exchangeButtonLoading: Boolean,
     exchangeButtonDisabled: Boolean,
@@ -66,14 +68,6 @@ export default sfc({
       );
     },
 
-    title() {
-      return `${t('enable')} (${this.coupons.length})`;
-    },
-
-    disabledTitle() {
-      return `${t('disabled')} (${this.disabledCoupons.length})`;
-    },
-
     listStyle() {
       return {
         height: this.winHeight - (this.showExchangeBar ? 140 : 94) + 'px'
@@ -150,6 +144,12 @@ export default sfc({
   },
 
   render(h) {
+    const { coupons, disabledCoupons } = this;
+    const title = `${this.enabledTitle || t('enable')} (${coupons.length})`;
+    const disabledTitle = `${this.disabledTitle || t('disabled')} (${
+      disabledCoupons.length
+    })`;
+
     const ExchangeBar = this.showExchangeBar && (
       <Field
         vModel={this.currentCode}
@@ -167,9 +167,9 @@ export default sfc({
     const onChange = index => () => this.$emit('change', index);
 
     const CouponTab = (
-      <Tab title={this.title}>
+      <Tab title={title}>
         <div class={bem('list')} style={this.listStyle}>
-          {this.coupons.map((coupon, index) => (
+          {coupons.map((coupon, index) => (
             <Coupon
               ref="card"
               key={coupon.id}
@@ -179,18 +179,18 @@ export default sfc({
               nativeOnClick={onChange(index)}
             />
           ))}
-          {!this.coupons.length && this.renderEmpty()}
+          {!coupons.length && this.renderEmpty()}
         </div>
       </Tab>
     );
 
     const DisabledCouponTab = (
-      <Tab title={this.disabledTitle}>
+      <Tab title={disabledTitle}>
         <div class={bem('list')} style={this.listStyle}>
-          {this.disabledCoupons.map(coupon => (
+          {disabledCoupons.map(coupon => (
             <Coupon disabled key={coupon.id} coupon={coupon} currency={this.currency} />
           ))}
-          {!this.disabledCoupons.length && this.renderEmpty()}
+          {!disabledCoupons.length && this.renderEmpty()}
         </div>
       </Tab>
     );

diff --git a/packages/coupon-list/zh-CN.md b/packages/coupon-list/zh-CN.md
@@ -87,6 +87,8 @@ export default {
 | chosen-coupon | 当前选中优惠券的索引 | `Number` | `-1` | - |
 | coupons | 可用优惠券列表 | `Array` | `[]` | - |
 | disabled-coupons | 不可用优惠券列表 | `Array` | `[]` | - |
+| enabled-title | 可用优惠券列表标题 | `String` | `可使用优惠券` | - |
+| disabled-title | 不可用优惠券列表标题 | `String` | `不可使用优惠券` | - |
 | exchange-button-text | 兑换按钮文字 | `String` | `兑换` | - |
 | exchange-button-loading | 是否显示兑换按钮加载动画 | `Boolean` | `false` | - |
 | exchange-button-disabled | 是否禁用兑换按钮 | `Boolean` | `false` | - |