diff --git a/src/coupon-list/README.md b/src/coupon-list/README.md index cf8917223..7704d3791 100644 --- a/src/coupon-list/README.md +++ b/src/coupon-list/README.md @@ -99,6 +99,7 @@ export default { | input-placeholder | Input placeholder | *string* | `Coupon code` | - | | currency | Currency symbol | *string* | `¥` | - | | empty-image | Placeholder image when list is empty | *string* | `https://img.yzcdn.cn/vant/coupon-empty.png` | - | +| show-count | Whether to show coupon count in tab title | *boolean* | `true` | - | ### CouponList Events diff --git a/src/coupon-list/README.zh-CN.md b/src/coupon-list/README.zh-CN.md index fbe67b782..f8dd8bc9b 100644 --- a/src/coupon-list/README.zh-CN.md +++ b/src/coupon-list/README.zh-CN.md @@ -101,6 +101,7 @@ export default { | show-exchange-bar | 是否展示兑换栏 | *boolean* | `true` | - | | currency | 货币符号 | *string* | `¥` | - | | empty-image | 列表为空时的占位图 | *string* | `https://img.yzcdn.cn/vant/coupon-empty.png` | 2.1.0 | +| show-count | 是否展示可用 / 不可用数量 | *boolean* | `true` | - | ### CouponList Events diff --git a/src/coupon-list/demo/index.vue b/src/coupon-list/demo/index.vue index 0bcceb5d9..2d9e0d96b 100644 --- a/src/coupon-list/demo/index.vue +++ b/src/coupon-list/demo/index.vue @@ -15,6 +15,7 @@ :coupons="coupons" :chosen-coupon="chosenCoupon" :disabled-coupons="disabledCoupons" + :show-count="false" @change="onChange" @exchange="onExchange" /> diff --git a/src/coupon-list/index.js b/src/coupon-list/index.js index 138fe8d37..97ed343e2 100644 --- a/src/coupon-list/index.js +++ b/src/coupon-list/index.js @@ -50,6 +50,10 @@ export default createComponent({ type: Boolean, default: true }, + showCount: { + type: Boolean, + default: true + }, currency: { type: String, default: '¥' @@ -139,7 +143,7 @@ export default createComponent({ genExchangeButton() { return ( +
-
+
- - + +
@@ -29,7 +29,7 @@ exports[`empty-image prop 1`] = `
- + `; @@ -54,15 +54,15 @@ exports[`render coupon list 1`] = `
-
+
-
+
- - + +
@@ -73,11 +73,15 @@ exports[`render coupon list 1`] = `

-

无使用门槛

+

无使用门槛

-

-

有效期：2017.03.10 - 2017.12.30

+

+

2017.03.10 - 2017.12.30

+
@@ -85,12 +89,12 @@ exports[`render coupon list 1`] = `

¥ 1.5

-

无使用门槛

+

无使用门槛

-

name

-

有效期：2017.03.10 - 2017.12.30

- @@ -140,11 +156,15 @@ exports[`render coupon list 1`] = `

9折

-

满0.5元可用

+

满0.5元可用

-

name

-

有效期：2017.03.10 - 2017.12.30

+

name

+

2017.03.10 - 2017.12.30

+
@@ -154,7 +174,7 @@ exports[`render coupon list 1`] = `
- + `; @@ -163,11 +183,11 @@ exports[`render disabled coupon 1`] = `

¥ 1.5

-

无使用门槛

+

无使用门槛

-

name

-

有效期：2017.03.10 - 2017.12.30

+

name

+

2017.03.10 - 2017.12.30

reason

@@ -179,15 +199,15 @@ exports[`render empty coupon list 1`] = `
-
+
-
+
- - + +
@@ -207,6 +227,6 @@ exports[`render empty coupon list 1`] = `
- + `; diff --git a/src/coupon/index.js b/src/coupon/index.js index 9d07b560e..f8fc8081f 100644 --- a/src/coupon/index.js +++ b/src/coupon/index.js @@ -34,7 +34,7 @@ export default createComponent({ computed: { validPeriod() { const { startAt, endAt } = this.coupon; - return `${t('valid')}：${getDate(startAt)} - ${getDate(endAt)}`; + return `${getDate(startAt)} - ${getDate(endAt)}`; }, faceAmount() { @@ -70,13 +70,13 @@ export default createComponent({

-

{this.coupon.condition || this.conditionMessage}

+

{this.coupon.condition || this.conditionMessage}

-

{coupon.name}

-

{this.validPeriod}

- {this.chosen && ( - +

{coupon.name}

+

{this.validPeriod}

+ {!this.disabled && ( + )}
diff --git a/src/coupon/index.less b/src/coupon/index.less index 63441440b..5b08170af 100644 --- a/src/coupon/index.less +++ b/src/coupon/index.less @@ -14,45 +14,36 @@ &__content { display: flex; + align-items: center; box-sizing: border-box; - height: @coupon-content-height; + min-height: @coupon-content-height; padding: @coupon-content-padding; - } - - p, - h2 { - margin: 0; - - .ellipsis(); - } - - h2 { - height: 34px; - font-weight: @font-weight-bold; - line-height: 34px; - } - - p { - color: @gray-6; - font-size: @font-size-sm; - line-height: 16px; + color: @gray-8; } &__head { position: relative; min-width: @coupon-head-width; - padding-right: @padding-xs; + padding: 0 @padding-xs; + color: @coupon-amount-color; + text-align: center; + } - p { - white-space: pre-wrap; - } + &__amount, + &__condition, + &__name, + &__valid { + .ellipsis(); } &__amount { - color: @coupon-amount-color; + margin-bottom: 6px; + font-weight: @font-weight-bold; font-size: @coupon-amount-font-size; + .ellipsis(); span { + font-weight: normal; font-size: @coupon-currency-font-size; &:not(:empty) { @@ -61,6 +52,12 @@ } } + &__condition { + font-size: @font-size-sm; + line-height: 16px; + white-space: pre-wrap; + } + &__body { position: relative; flex: 1; @@ -68,17 +65,26 @@ } &__name { + margin-bottom: 10px; + font-weight: bold; font-size: @coupon-name-font-size; + line-height: 20px; + } + + &__valid { + font-size: @font-size-sm; } &__corner { position: absolute; - top: @padding-md; + top: 0; right: @padding-md; + bottom: 0; } &__description { padding: @coupon-description-padding; + font-size: @font-size-sm; background-color: @coupon-description-background-color; border-top: 1px dashed @coupon-description-border-color; } @@ -92,10 +98,8 @@ height: @coupon-content-height - 10px; } - p, - h2, - span { - color: @coupon-disabled-text-color; + .van-coupon__head { + color: inherit; } } } diff --git a/src/locale/lang/en-US.ts b/src/locale/lang/en-US.ts index fa0f096f7..9b9b4f1ec 100644 --- a/src/locale/lang/en-US.ts +++ b/src/locale/lang/en-US.ts @@ -29,7 +29,6 @@ export default { label: 'Total：' }, vanCoupon: { - valid: 'Valid', unlimited: 'Unlimited', discount: (discount: number) => `${discount * 10}% off`, condition: (condition: number) => `At least ${condition}` diff --git a/src/locale/lang/es-ES.ts b/src/locale/lang/es-ES.ts index 9f5bf0c8d..1f889836e 100644 --- a/src/locale/lang/es-ES.ts +++ b/src/locale/lang/es-ES.ts @@ -29,7 +29,6 @@ export default { label: 'Total：' }, vanCoupon: { - valid: 'Valido', unlimited: 'Ilimitado', discount: (discount: number) => `${discount * 10}% de descuento`, condition: (condition: number) => `Al menos ${condition}` diff --git a/src/locale/lang/tr-TR.ts b/src/locale/lang/tr-TR.ts index 09b29a7f1..815bc4660 100644 --- a/src/locale/lang/tr-TR.ts +++ b/src/locale/lang/tr-TR.ts @@ -29,7 +29,6 @@ export default { label: 'Toplam:' }, vanCoupon: { - valid: 'Geçerli', unlimited: 'Sınırsız', discount: (discount: number) => `%${discount * 10} indirim`, condition: (condition: number) => `En az ${condition}` diff --git a/src/locale/lang/zh-CN.ts b/src/locale/lang/zh-CN.ts index 08b4d5779..15b555f75 100644 --- a/src/locale/lang/zh-CN.ts +++ b/src/locale/lang/zh-CN.ts @@ -29,7 +29,6 @@ export default { label: '合计：' }, vanCoupon: { - valid: '有效期', unlimited: '无使用门槛', discount: (discount: number) => `${discount}折`, condition: (condition: number) => `满${condition}元可用` @@ -42,9 +41,9 @@ export default { vanCouponList: { empty: '暂无优惠券', exchange: '兑换', - close: '不使用优惠', - enable: '可使用优惠券', - disabled: '不可使用优惠券', + close: '不使用优惠券', + enable: '可用', + disabled: '不可用', placeholder: '请输入优惠码' }, vanAddressEdit: { diff --git a/src/locale/lang/zh-HK.ts b/src/locale/lang/zh-HK.ts index 094ced3e5..8da5efd65 100644 --- a/src/locale/lang/zh-HK.ts +++ b/src/locale/lang/zh-HK.ts @@ -29,7 +29,6 @@ export default { label: '合計：' }, vanCoupon: { - valid: '有效期', unlimited: '無使用門檻', discount: (discount: number) => `${discount}折`, condition: (condition: number) => `滿${condition}元可用` diff --git a/src/locale/lang/zh-TW.ts b/src/locale/lang/zh-TW.ts index f33dacd8c..3efc98a0b 100644 --- a/src/locale/lang/zh-TW.ts +++ b/src/locale/lang/zh-TW.ts @@ -29,7 +29,6 @@ export default { label: '合計：' }, vanCoupon: { - valid: '有效期限', unlimited: '無使用門檻', discount: (discount: number) => `${discount}折`, condition: (condition: number) => `滿${condition}元可用` diff --git a/src/style/var.less b/src/style/var.less index 1172ad8aa..fc6ba8556 100644 --- a/src/style/var.less +++ b/src/style/var.less @@ -231,20 +231,20 @@ // Coupon @coupon-margin: 0 @padding-md @padding-md; -@coupon-content-height: 100px; -@coupon-content-padding: @padding-lg 0 0 @padding-md; +@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-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1); -@coupon-head-width: 85px; +@coupon-head-width: 96px; @coupon-amount-color: @red; -@coupon-amount-font-size: 24px; -@coupon-currency-font-size: 50%; -@coupon-name-font-size: @font-size-lg; +@coupon-amount-font-size: 30px; +@coupon-currency-font-size: 40%; +@coupon-name-font-size: @font-size-md; @coupon-disabled-text-color: @gray-6; @coupon-description-padding: @padding-xs @padding-md; -@coupon-description-background-color: @background-color-light; +@coupon-description-background-color: @white; @coupon-description-border-color: @border-color; // CouponCell @@ -252,7 +252,7 @@ // CouponList @coupon-list-background-color: @background-color; -@coupon-list-field-padding: @padding-xs @padding-md; +@coupon-list-field-padding: 5px 0 5px @padding-md; @coupon-list-exchange-button-height: 32px; @coupon-list-empty-image-size: 200px; @coupon-list-empty-tip-color: @gray-6;