alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
src/coupon-list/README.md
+1
View File
@@ -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
src/coupon-list/README.zh-CN.md
+1
View File
@@ -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
src/coupon-list/demo/index.vue
+1
View File
@@ -15,6 +15,7 @@
:coupons="coupons"
:chosen-coupon="chosenCoupon"
:disabled-coupons="disabledCoupons"
:show-count="false"
@change="onChange"
@exchange="onExchange"
/>
src/coupon-list/index.js
+18 -7
View File
@@ -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 (
<Button
size="small"
plain
type="danger"
class={bem('exchange')}
text={this.exchangeButtonText || t('exchange')}
@@ -153,10 +157,12 @@ export default createComponent({
render() {
const { coupons, disabledCoupons } = this;
const title = `${this.enabledTitle || t('enable')} (${coupons.length})`;
const disabledTitle = `${this.disabledTitle || t('disabled')} (${
disabledCoupons.length
})`;
const count = this.showCount ? ` (${coupons.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 && (
<Field
@@ -196,7 +202,12 @@ export default createComponent({
<Tab title={disabledTitle}>
<div class={bem('list')} style={this.listStyle}>
{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()}
</div>
@@ -206,7 +217,7 @@ export default createComponent({
return (
<div class={bem()}>
{ExchangeBar}
<Tabs vModel={this.tab} class={bem('tab')} line-width={120}>
<Tabs vModel={this.tab} class={bem('tab')} border={false}>
{CouponTab}
{DisabledCouponTab}
</Tabs>
src/coupon-list/index.less
+14
View File
@@ -7,11 +7,25 @@
&__field {
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 {
height: @coupon-list-exchange-button-height;
font-size: @font-size-lg;
line-height: @coupon-list-exchange-button-height - 2px;
border: 0;
}
&__list {
src/coupon-list/test/__snapshots__/index.spec.js.snap
+57 -37
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__value van-cell__value--alone">
<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 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="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" 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 class="van-tabs__line"></div>
</div>
</div>
@@ -29,7 +29,7 @@ exports[`empty-image prop 1`] = `
<!---->
</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>
`;
@@ -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__value van-cell__value--alone">
<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 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="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" 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 class="van-tabs__line"></div>
</div>
</div>
@@ -73,11 +73,15 @@ exports[`render coupon list 1`] = `
<div class="van-coupon__content">
<div class="van-coupon__head">
<h2 class="van-coupon__amount"></h2>
<p>无使用门槛</p>
<p class="van-coupon__condition">无使用门槛</p>
</div>
<div class="van-coupon__body">
<h2 class="van-coupon__name"></h2>
<p>有效期：2017.03.10 - 2017.12.30</p>
<p class="van-coupon__name"></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>
@@ -85,12 +89,12 @@ exports[`render coupon list 1`] = `
<div class="van-coupon__content">
<div class="van-coupon__head">
<h2 class="van-coupon__amount"><span>¥</span> 1.5</h2>
<p>无使用门槛</p>
<p class="van-coupon__condition">无使用门槛</p>
</div>
<div class="van-coupon__body">
<h2 class="van-coupon__name">name</h2>
<p>有效期：2017.03.10 - 2017.12.30</p>
<div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox van-coupon__corner">
<p class="van-coupon__name">name</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" 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);">
<!----></i></div>
</div>
@@ -102,11 +106,15 @@ exports[`render coupon list 1`] = `
<div class="van-coupon__content">
<div class="van-coupon__head">
<h2 class="van-coupon__amount"><span>¥</span> 1</h2>
<p>无使用门槛</p>
<p class="van-coupon__condition">无使用门槛</p>
</div>
<div class="van-coupon__body">
<h2 class="van-coupon__name">name</h2>
<p>有效期：2017.03.10 - 2017.12.30</p>
<p class="van-coupon__name">name</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>
<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__head">
<h2 class="van-coupon__amount"><span>¥</span> 1.23</h2>
<p>无使用门槛</p>
<p class="van-coupon__condition">无使用门槛</p>
</div>
<div class="van-coupon__body">
<h2 class="van-coupon__name">name</h2>
<p>有效期：2017.03.10 - 2017.12.30</p>
<p class="van-coupon__name">name</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>
<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__head">
<h2 class="van-coupon__amount">8.8折</h2>
<p>满0.5元可用</p>
<p class="van-coupon__condition">满0.5元可用</p>
</div>
<div class="van-coupon__body">
<h2 class="van-coupon__name">name</h2>
<p>有效期：2017.03.10 - 2017.12.30</p>
<p class="van-coupon__name">name</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>
@@ -140,11 +156,15 @@ exports[`render coupon list 1`] = `
<div class="van-coupon__content">
<div class="van-coupon__head">
<h2 class="van-coupon__amount">9折</h2>
<p>满0.5元可用</p>
<p class="van-coupon__condition">满0.5元可用</p>
</div>
<div class="van-coupon__body">
<h2 class="van-coupon__name">name</h2>
<p>有效期：2017.03.10 - 2017.12.30</p>
<p class="van-coupon__name">name</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>
@@ -154,7 +174,7 @@ exports[`render coupon list 1`] = `
<!---->
</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>
`;
@@ -163,11 +183,11 @@ exports[`render disabled coupon 1`] = `
<div class="van-coupon__content">
<div class="van-coupon__head">
<h2 class="van-coupon__amount"><span>¥</span> 1.5</h2>
<p>无使用门槛</p>
<p class="van-coupon__condition">无使用门槛</p>
</div>
<div class="van-coupon__body">
<h2 class="van-coupon__name">name</h2>
<p>有效期：2017.03.10 - 2017.12.30</p>
<p class="van-coupon__name">name</p>
<p class="van-coupon__valid">2017.03.10 - 2017.12.30</p>
</div>
</div>
<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__value van-cell__value--alone">
<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 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="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"><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>
</div>
@@ -207,6 +227,6 @@ exports[`render empty coupon list 1`] = `
</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>
`;