mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-24 18:36:51 +08:00
feat(CouponList): refactor style & add new prop show-count (#5139)
This commit is contained in:
parent
e47208e1a0
commit
158e3b4654
@ -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
|
||||||
|
|
||||||
|
@ -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
|
||||||
|
|
||||||
|
@ -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"
|
||||||
/>
|
/>
|
||||||
|
@ -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>
|
||||||
|
@ -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 {
|
||||||
|
@ -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>
|
||||||
`;
|
`;
|
||||||
|
@ -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>
|
||||||
|
@ -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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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}`
|
||||||
|
@ -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}`
|
||||||
|
@ -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}`
|
||||||
|
@ -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: {
|
||||||
|
@ -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}元可用`
|
||||||
|
@ -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}元可用`
|
||||||
|
@ -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;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user