feat(CouponList): refactor style & add new prop show-count (#5139)

This commit is contained in:
rex 2019-12-03 16:44:16 +08:00 committed by neverland
parent e47208e1a0
commit 158e3b4654
15 changed files with 143 additions and 97 deletions

View File

@ -99,6 +99,7 @@ export default {
| input-placeholder | Input placeholder | *string* | `Coupon code` | - | | input-placeholder | Input placeholder | *string* | `Coupon code` | - |
| currency | Currency symbol | *string* | `¥` | - | | currency | Currency symbol | *string* | `¥` | - |
| empty-image | Placeholder image when list is empty | *string* | `https://img.yzcdn.cn/vant/coupon-empty.png` | - | | 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 ### CouponList Events

View File

@ -101,6 +101,7 @@ export default {
| show-exchange-bar | 是否展示兑换栏 | *boolean* | `true` | - | | show-exchange-bar | 是否展示兑换栏 | *boolean* | `true` | - |
| currency | 货币符号 | *string* | `¥` | - | | currency | 货币符号 | *string* | `¥` | - |
| empty-image | 列表为空时的占位图 | *string* | `https://img.yzcdn.cn/vant/coupon-empty.png` | 2.1.0 | | empty-image | 列表为空时的占位图 | *string* | `https://img.yzcdn.cn/vant/coupon-empty.png` | 2.1.0 |
| show-count | 是否展示可用 / 不可用数量 | *boolean* | `true` | - |
### CouponList Events ### CouponList Events

View File

@ -15,6 +15,7 @@
:coupons="coupons" :coupons="coupons"
:chosen-coupon="chosenCoupon" :chosen-coupon="chosenCoupon"
:disabled-coupons="disabledCoupons" :disabled-coupons="disabledCoupons"
:show-count="false"
@change="onChange" @change="onChange"
@exchange="onExchange" @exchange="onExchange"
/> />

View File

@ -50,6 +50,10 @@ export default createComponent({
type: Boolean, type: Boolean,
default: true default: true
}, },
showCount: {
type: Boolean,
default: true
},
currency: { currency: {
type: String, type: String,
default: '¥' default: '¥'
@ -139,7 +143,7 @@ export default createComponent({
genExchangeButton() { genExchangeButton() {
return ( return (
<Button <Button
size="small" plain
type="danger" type="danger"
class={bem('exchange')} class={bem('exchange')}
text={this.exchangeButtonText || t('exchange')} text={this.exchangeButtonText || t('exchange')}
@ -153,10 +157,12 @@ export default createComponent({
render() { render() {
const { coupons, disabledCoupons } = this; const { coupons, disabledCoupons } = this;
const title = `${this.enabledTitle || t('enable')} (${coupons.length})`;
const disabledTitle = `${this.disabledTitle || t('disabled')} (${ const count = this.showCount ? ` (${coupons.length})` : '';
disabledCoupons.length const title = (this.enabledTitle || t('enable')) + count;
})`;
const disabledCount = this.showCount ? ` (${disabledCoupons.length})` : '';
const disabledTitle = (this.disabledTitle || t('disabled')) + disabledCount;
const ExchangeBar = this.showExchangeBar && ( const ExchangeBar = this.showExchangeBar && (
<Field <Field
@ -196,7 +202,12 @@ export default createComponent({
<Tab title={disabledTitle}> <Tab title={disabledTitle}>
<div class={bem('list')} style={this.listStyle}> <div class={bem('list')} style={this.listStyle}>
{disabledCoupons.map(coupon => ( {disabledCoupons.map(coupon => (
<Coupon disabled key={coupon.id} coupon={coupon} currency={this.currency} /> <Coupon
disabled
key={coupon.id}
coupon={coupon}
currency={this.currency}
/>
))} ))}
{!disabledCoupons.length && this.genEmpty()} {!disabledCoupons.length && this.genEmpty()}
</div> </div>
@ -206,7 +217,7 @@ export default createComponent({
return ( return (
<div class={bem()}> <div class={bem()}>
{ExchangeBar} {ExchangeBar}
<Tabs vModel={this.tab} class={bem('tab')} line-width={120}> <Tabs vModel={this.tab} class={bem('tab')} border={false}>
{CouponTab} {CouponTab}
{DisabledCouponTab} {DisabledCouponTab}
</Tabs> </Tabs>

View File

@ -7,11 +7,25 @@
&__field { &__field {
padding: @coupon-list-field-padding; padding: @coupon-list-field-padding;
.van-field__control {
height: 34px;
padding-left: @padding-sm;
line-height: 34px;
background: @gray-1;
border-radius: 17px;
&::placeholder {
color: @gray-5;
}
}
} }
&__exchange { &__exchange {
height: @coupon-list-exchange-button-height; height: @coupon-list-exchange-button-height;
font-size: @font-size-lg;
line-height: @coupon-list-exchange-button-height - 2px; line-height: @coupon-list-exchange-button-height - 2px;
border: 0;
} }
&__list { &__list {

View File

@ -5,15 +5,15 @@ exports[`empty-image prop 1`] = `
<div class="van-cell van-cell--borderless van-field van-coupon-list__field"> <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-cell__value van-cell__value--alone">
<div class="van-field__body"><input type="text" placeholder="请输入优惠码" class="van-field__control"> <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--small van-button--disabled van-coupon-list__exchange"><span class="van-button__text">兑换</span></button></div> <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> </div>
</div> </div>
</div> </div>
<div class="van-tabs van-tabs--line van-coupon-list__tab"> <div class="van-tabs van-tabs--line van-coupon-list__tab">
<div class="van-tabs__wrap van-hairline--top-bottom"> <div class="van-tabs__wrap">
<div role="tablist" class="van-tabs__nav van-tabs__nav--line"> <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">可使优惠券 (0)</span></div> <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">可用 (0)</span></div>
<div role="tab" class="van-tab"><span class="van-ellipsis">不可使优惠券 (0)</span></div> <div role="tab" class="van-tab"><span class="van-ellipsis">不可用 (0)</span></div>
<div class="van-tabs__line"></div> <div class="van-tabs__line"></div>
</div> </div>
</div> </div>
@ -29,7 +29,7 @@ exports[`empty-image prop 1`] = `
<!----> <!---->
</div> </div>
</div> </div>
</div><button class="van-button van-button--default van-button--large van-coupon-list__close"><span class="van-button__text">不使用优惠</span></button> </div><button class="van-button van-button--default van-button--large van-coupon-list__close"><span class="van-button__text">不使用优惠</span></button>
</div> </div>
`; `;
@ -54,15 +54,15 @@ exports[`render coupon list 1`] = `
<div class="van-cell van-cell--borderless van-field van-coupon-list__field"> <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-cell__value van-cell__value--alone">
<div class="van-field__body"><input type="text" placeholder="请输入优惠码" class="van-field__control"> <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--small van-button--disabled van-coupon-list__exchange"><span class="van-button__text">兑换</span></button></div> <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> </div>
</div> </div>
</div> </div>
<div class="van-tabs van-tabs--line van-coupon-list__tab"> <div class="van-tabs van-tabs--line van-coupon-list__tab">
<div class="van-tabs__wrap van-hairline--top-bottom"> <div class="van-tabs__wrap">
<div role="tablist" class="van-tabs__nav van-tabs__nav--line"> <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">可使优惠券 (6)</span></div> <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">可用 (6)</span></div>
<div role="tab" class="van-tab"><span class="van-ellipsis">不可使优惠券 (2)</span></div> <div role="tab" class="van-tab"><span class="van-ellipsis">不可用 (2)</span></div>
<div class="van-tabs__line"></div> <div class="van-tabs__line"></div>
</div> </div>
</div> </div>
@ -73,11 +73,15 @@ exports[`render coupon list 1`] = `
<div class="van-coupon__content"> <div class="van-coupon__content">
<div class="van-coupon__head"> <div class="van-coupon__head">
<h2 class="van-coupon__amount"></h2> <h2 class="van-coupon__amount"></h2>
<p>无使用门槛</p> <p class="van-coupon__condition">无使用门槛</p>
</div> </div>
<div class="van-coupon__body"> <div class="van-coupon__body">
<h2 class="van-coupon__name"></h2> <p class="van-coupon__name"></p>
<p>有效期2017.03.10 - 2017.12.30</p> <p class="van-coupon__valid">2017.03.10 - 2017.12.30</p>
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox van-coupon__corner" size="18">
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
<!----></i></div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -85,12 +89,12 @@ exports[`render coupon list 1`] = `
<div class="van-coupon__content"> <div class="van-coupon__content">
<div class="van-coupon__head"> <div class="van-coupon__head">
<h2 class="van-coupon__amount"><span>¥</span> 1.5</h2> <h2 class="van-coupon__amount"><span>¥</span> 1.5</h2>
<p>无使用门槛</p> <p class="van-coupon__condition">无使用门槛</p>
</div> </div>
<div class="van-coupon__body"> <div class="van-coupon__body">
<h2 class="van-coupon__name">name</h2> <p class="van-coupon__name">name</p>
<p>有效期:2017.03.10 - 2017.12.30</p> <p class="van-coupon__valid">2017.03.10 - 2017.12.30</p>
<div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox van-coupon__corner"> <div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox van-coupon__corner" size="18">
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success" style="border-color: #ee0a24; background-color: rgb(238, 10, 36);"> <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success" style="border-color: #ee0a24; background-color: rgb(238, 10, 36);">
<!----></i></div> <!----></i></div>
</div> </div>
@ -102,11 +106,15 @@ exports[`render coupon list 1`] = `
<div class="van-coupon__content"> <div class="van-coupon__content">
<div class="van-coupon__head"> <div class="van-coupon__head">
<h2 class="van-coupon__amount"><span>¥</span> 1</h2> <h2 class="van-coupon__amount"><span>¥</span> 1</h2>
<p>无使用门槛</p> <p class="van-coupon__condition">无使用门槛</p>
</div> </div>
<div class="van-coupon__body"> <div class="van-coupon__body">
<h2 class="van-coupon__name">name</h2> <p class="van-coupon__name">name</p>
<p>有效期2017.03.10 - 2017.12.30</p> <p class="van-coupon__valid">2017.03.10 - 2017.12.30</p>
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox van-coupon__corner" size="18">
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
<!----></i></div>
</div>
</div> </div>
</div> </div>
<p class="van-coupon__description">description</p> <p class="van-coupon__description">description</p>
@ -115,11 +123,15 @@ exports[`render coupon list 1`] = `
<div class="van-coupon__content"> <div class="van-coupon__content">
<div class="van-coupon__head"> <div class="van-coupon__head">
<h2 class="van-coupon__amount"><span>¥</span> 1.23</h2> <h2 class="van-coupon__amount"><span>¥</span> 1.23</h2>
<p>无使用门槛</p> <p class="van-coupon__condition">无使用门槛</p>
</div> </div>
<div class="van-coupon__body"> <div class="van-coupon__body">
<h2 class="van-coupon__name">name</h2> <p class="van-coupon__name">name</p>
<p>有效期2017.03.10 - 2017.12.30</p> <p class="van-coupon__valid">2017.03.10 - 2017.12.30</p>
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox van-coupon__corner" size="18">
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
<!----></i></div>
</div>
</div> </div>
</div> </div>
<p class="van-coupon__description">description</p> <p class="van-coupon__description">description</p>
@ -128,11 +140,15 @@ exports[`render coupon list 1`] = `
<div class="van-coupon__content"> <div class="van-coupon__content">
<div class="van-coupon__head"> <div class="van-coupon__head">
<h2 class="van-coupon__amount">8.8折</h2> <h2 class="van-coupon__amount">8.8折</h2>
<p>满0.5元可用</p> <p class="van-coupon__condition">满0.5元可用</p>
</div> </div>
<div class="van-coupon__body"> <div class="van-coupon__body">
<h2 class="van-coupon__name">name</h2> <p class="van-coupon__name">name</p>
<p>有效期2017.03.10 - 2017.12.30</p> <p class="van-coupon__valid">2017.03.10 - 2017.12.30</p>
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox van-coupon__corner" size="18">
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
<!----></i></div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -140,11 +156,15 @@ exports[`render coupon list 1`] = `
<div class="van-coupon__content"> <div class="van-coupon__content">
<div class="van-coupon__head"> <div class="van-coupon__head">
<h2 class="van-coupon__amount">9折</h2> <h2 class="van-coupon__amount">9折</h2>
<p>满0.5元可用</p> <p class="van-coupon__condition">满0.5元可用</p>
</div> </div>
<div class="van-coupon__body"> <div class="van-coupon__body">
<h2 class="van-coupon__name">name</h2> <p class="van-coupon__name">name</p>
<p>有效期2017.03.10 - 2017.12.30</p> <p class="van-coupon__valid">2017.03.10 - 2017.12.30</p>
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox van-coupon__corner" size="18">
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
<!----></i></div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -154,7 +174,7 @@ exports[`render coupon list 1`] = `
<!----> <!---->
</div> </div>
</div> </div>
</div><button class="van-button van-button--default van-button--large van-coupon-list__close"><span class="van-button__text">不使用优惠</span></button> </div><button class="van-button van-button--default van-button--large van-coupon-list__close"><span class="van-button__text">不使用优惠</span></button>
</div> </div>
`; `;
@ -163,11 +183,11 @@ exports[`render disabled coupon 1`] = `
<div class="van-coupon__content"> <div class="van-coupon__content">
<div class="van-coupon__head"> <div class="van-coupon__head">
<h2 class="van-coupon__amount"><span>¥</span> 1.5</h2> <h2 class="van-coupon__amount"><span>¥</span> 1.5</h2>
<p>无使用门槛</p> <p class="van-coupon__condition">无使用门槛</p>
</div> </div>
<div class="van-coupon__body"> <div class="van-coupon__body">
<h2 class="van-coupon__name">name</h2> <p class="van-coupon__name">name</p>
<p>有效期:2017.03.10 - 2017.12.30</p> <p class="van-coupon__valid">2017.03.10 - 2017.12.30</p>
</div> </div>
</div> </div>
<p class="van-coupon__description">reason</p> <p class="van-coupon__description">reason</p>
@ -179,15 +199,15 @@ exports[`render empty coupon list 1`] = `
<div class="van-cell van-cell--borderless van-field van-coupon-list__field"> <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-cell__value van-cell__value--alone">
<div class="van-field__body"><input type="text" placeholder="请输入优惠码" class="van-field__control"> <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--small van-button--disabled van-coupon-list__exchange"><span class="van-button__text">兑换</span></button></div> <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> </div>
</div> </div>
</div> </div>
<div class="van-tabs van-tabs--line van-coupon-list__tab"> <div class="van-tabs van-tabs--line van-coupon-list__tab">
<div class="van-tabs__wrap van-hairline--top-bottom"> <div class="van-tabs__wrap">
<div role="tablist" class="van-tabs__nav van-tabs__nav--line"> <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
<div role="tab" class="van-tab"><span class="van-ellipsis">可使优惠券 (0)</span></div> <div role="tab" class="van-tab"><span class="van-ellipsis">可用 (0)</span></div>
<div role="tab" class="van-tab van-tab--active" aria-selected="true"><span class="van-ellipsis">不可使优惠券 (0)</span></div> <div role="tab" class="van-tab van-tab--active" aria-selected="true"><span class="van-ellipsis">不可用 (0)</span></div>
<div class="van-tabs__line"></div> <div class="van-tabs__line"></div>
</div> </div>
</div> </div>
@ -207,6 +227,6 @@ exports[`render empty coupon list 1`] = `
</div> </div>
</div> </div>
</div> </div>
</div><button class="van-button van-button--default van-button--large van-coupon-list__close"><span class="van-button__text">不使用优惠</span></button> </div><button class="van-button van-button--default van-button--large van-coupon-list__close"><span class="van-button__text">不使用优惠</span></button>
</div> </div>
`; `;

View File

@ -34,7 +34,7 @@ export default createComponent({
computed: { computed: {
validPeriod() { validPeriod() {
const { startAt, endAt } = this.coupon; const { startAt, endAt } = this.coupon;
return `${t('valid')}${getDate(startAt)} - ${getDate(endAt)}`; return `${getDate(startAt)} - ${getDate(endAt)}`;
}, },
faceAmount() { faceAmount() {
@ -70,13 +70,13 @@ export default createComponent({
<div class={bem('content')}> <div class={bem('content')}>
<div class={bem('head')}> <div class={bem('head')}>
<h2 class={bem('amount')} domPropsInnerHTML={this.faceAmount} /> <h2 class={bem('amount')} domPropsInnerHTML={this.faceAmount} />
<p>{this.coupon.condition || this.conditionMessage}</p> <p class={bem('condition')}>{this.coupon.condition || this.conditionMessage}</p>
</div> </div>
<div class={bem('body')}> <div class={bem('body')}>
<h2 class={bem('name')}>{coupon.name}</h2> <p class={bem('name')}>{coupon.name}</p>
<p>{this.validPeriod}</p> <p class={bem('valid')}>{this.validPeriod}</p>
{this.chosen && ( {!this.disabled && (
<Checkbox value={true} class={bem('corner')} checked-color={RED} /> <Checkbox value={this.chosen} class={bem('corner')} size={18} checked-color={RED} />
)} )}
</div> </div>
</div> </div>

View File

@ -14,45 +14,36 @@
&__content { &__content {
display: flex; display: flex;
align-items: center;
box-sizing: border-box; box-sizing: border-box;
height: @coupon-content-height; min-height: @coupon-content-height;
padding: @coupon-content-padding; padding: @coupon-content-padding;
} color: @gray-8;
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;
} }
&__head { &__head {
position: relative; position: relative;
min-width: @coupon-head-width; min-width: @coupon-head-width;
padding-right: @padding-xs; padding: 0 @padding-xs;
color: @coupon-amount-color;
p { text-align: center;
white-space: pre-wrap;
} }
&__amount,
&__condition,
&__name,
&__valid {
.ellipsis();
} }
&__amount { &__amount {
color: @coupon-amount-color; margin-bottom: 6px;
font-weight: @font-weight-bold;
font-size: @coupon-amount-font-size; font-size: @coupon-amount-font-size;
.ellipsis();
span { span {
font-weight: normal;
font-size: @coupon-currency-font-size; font-size: @coupon-currency-font-size;
&:not(:empty) { &:not(:empty) {
@ -61,6 +52,12 @@
} }
} }
&__condition {
font-size: @font-size-sm;
line-height: 16px;
white-space: pre-wrap;
}
&__body { &__body {
position: relative; position: relative;
flex: 1; flex: 1;
@ -68,17 +65,26 @@
} }
&__name { &__name {
margin-bottom: 10px;
font-weight: bold;
font-size: @coupon-name-font-size; font-size: @coupon-name-font-size;
line-height: 20px;
}
&__valid {
font-size: @font-size-sm;
} }
&__corner { &__corner {
position: absolute; position: absolute;
top: @padding-md; top: 0;
right: @padding-md; right: @padding-md;
bottom: 0;
} }
&__description { &__description {
padding: @coupon-description-padding; padding: @coupon-description-padding;
font-size: @font-size-sm;
background-color: @coupon-description-background-color; background-color: @coupon-description-background-color;
border-top: 1px dashed @coupon-description-border-color; border-top: 1px dashed @coupon-description-border-color;
} }
@ -92,10 +98,8 @@
height: @coupon-content-height - 10px; height: @coupon-content-height - 10px;
} }
p, .van-coupon__head {
h2, color: inherit;
span {
color: @coupon-disabled-text-color;
} }
} }
} }

View File

@ -29,7 +29,6 @@ export default {
label: 'Total' label: 'Total'
}, },
vanCoupon: { vanCoupon: {
valid: 'Valid',
unlimited: 'Unlimited', unlimited: 'Unlimited',
discount: (discount: number) => `${discount * 10}% off`, discount: (discount: number) => `${discount * 10}% off`,
condition: (condition: number) => `At least ${condition}` condition: (condition: number) => `At least ${condition}`

View File

@ -29,7 +29,6 @@ export default {
label: 'Total' label: 'Total'
}, },
vanCoupon: { vanCoupon: {
valid: 'Valido',
unlimited: 'Ilimitado', unlimited: 'Ilimitado',
discount: (discount: number) => `${discount * 10}% de descuento`, discount: (discount: number) => `${discount * 10}% de descuento`,
condition: (condition: number) => `Al menos ${condition}` condition: (condition: number) => `Al menos ${condition}`

View File

@ -29,7 +29,6 @@ export default {
label: 'Toplam:' label: 'Toplam:'
}, },
vanCoupon: { vanCoupon: {
valid: 'Geçerli',
unlimited: 'Sınırsız', unlimited: 'Sınırsız',
discount: (discount: number) => `%${discount * 10} indirim`, discount: (discount: number) => `%${discount * 10} indirim`,
condition: (condition: number) => `En az ${condition}` condition: (condition: number) => `En az ${condition}`

View File

@ -29,7 +29,6 @@ export default {
label: '合计:' label: '合计:'
}, },
vanCoupon: { vanCoupon: {
valid: '有效期',
unlimited: '无使用门槛', unlimited: '无使用门槛',
discount: (discount: number) => `${discount}`, discount: (discount: number) => `${discount}`,
condition: (condition: number) => `${condition}元可用` condition: (condition: number) => `${condition}元可用`
@ -42,9 +41,9 @@ export default {
vanCouponList: { vanCouponList: {
empty: '暂无优惠券', empty: '暂无优惠券',
exchange: '兑换', exchange: '兑换',
close: '不使用优惠', close: '不使用优惠',
enable: '可使优惠券', enable: '可用',
disabled: '不可使优惠券', disabled: '不可用',
placeholder: '请输入优惠码' placeholder: '请输入优惠码'
}, },
vanAddressEdit: { vanAddressEdit: {

View File

@ -29,7 +29,6 @@ export default {
label: '合計:' label: '合計:'
}, },
vanCoupon: { vanCoupon: {
valid: '有效期',
unlimited: '無使用門檻', unlimited: '無使用門檻',
discount: (discount: number) => `${discount}`, discount: (discount: number) => `${discount}`,
condition: (condition: number) => `滿${condition}元可用` condition: (condition: number) => `滿${condition}元可用`

View File

@ -29,7 +29,6 @@ export default {
label: '合計:' label: '合計:'
}, },
vanCoupon: { vanCoupon: {
valid: '有效期限',
unlimited: '無使用門檻', unlimited: '無使用門檻',
discount: (discount: number) => `${discount}`, discount: (discount: number) => `${discount}`,
condition: (condition: number) => `滿${condition}元可用` condition: (condition: number) => `滿${condition}元可用`

View File

@ -231,20 +231,20 @@
// Coupon // Coupon
@coupon-margin: 0 @padding-md @padding-md; @coupon-margin: 0 @padding-md @padding-md;
@coupon-content-height: 100px; @coupon-content-height: 84px;
@coupon-content-padding: @padding-lg 0 0 @padding-md; @coupon-content-padding: 14px 0;
@coupon-background-color: @white; @coupon-background-color: @white;
@coupon-active-background-color: @active-color; @coupon-active-background-color: @active-color;
@coupon-border-radius: @border-radius-md; @coupon-border-radius: @border-radius-md;
@coupon-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1); @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-color: @red;
@coupon-amount-font-size: 24px; @coupon-amount-font-size: 30px;
@coupon-currency-font-size: 50%; @coupon-currency-font-size: 40%;
@coupon-name-font-size: @font-size-lg; @coupon-name-font-size: @font-size-md;
@coupon-disabled-text-color: @gray-6; @coupon-disabled-text-color: @gray-6;
@coupon-description-padding: @padding-xs @padding-md; @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; @coupon-description-border-color: @border-color;
// CouponCell // CouponCell
@ -252,7 +252,7 @@
// CouponList // CouponList
@coupon-list-background-color: @background-color; @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-exchange-button-height: 32px;
@coupon-list-empty-image-size: 200px; @coupon-list-empty-image-size: 200px;
@coupon-list-empty-tip-color: @gray-6; @coupon-list-empty-tip-color: @gray-6;