blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-25 02:41:46 +08:00
Code Issues Projects Releases Wiki Activity

feat(CouponList): modify button style (#5368)

Browse Source
This commit is contained in:
rex 2019-12-25 11:12:02 +08:00 committed by neverland
parent 141c0ed2c1
commit 0b6e7ec896
3 changed files with 38 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/coupon-list/index.js
View File

@ -182,7 +182,7 @@ export default createComponent({
const CouponTab = (
<Tab title={title}>
<div class={bem('list')} style={this.listStyle}>
<div class={bem('list', { 'with-bottom': this.showCloseButton })} style={this.listStyle}>
{coupons.map((coupon, index) => (
<Coupon
ref="card"
@ -200,7 +200,7 @@ export default createComponent({
const DisabledCouponTab = (
<Tab title={disabledTitle}>
<div class={bem('list')} style={this.listStyle}>
<div class={bem('list', { 'with-bottom': this.showCloseButton })} style={this.listStyle}>
{disabledCoupons.map(coupon => (
<Coupon
disabled
@ -221,14 +221,18 @@ export default createComponent({
{CouponTab}
{DisabledCouponTab}
</Tabs>
<div class={bem('bottom')}>
<Button
vShow={this.showCloseButton}
size="large"
round
type="danger"
block
class={bem('close')}
text={this.closeButtonText || t('close')}
onClick={onChange(-1)}
/>
</div>
</div>
);
}
});

16
src/coupon-list/index.less
View File

@ -33,13 +33,27 @@
padding: @padding-md 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
&--with-bottom {
padding-bottom: @padding-md + 50px;
}
}
&__close {
&__bottom {
position: absolute;
bottom: 0;
left: 0;
z-index: 999;
box-sizing: border-box;
width: 100%;
padding: 5px @padding-md;
font-weight: @font-weight-bold;
background-color: @white;
}
&__close {
height: 40px;
line-height: 38px;
}
&__empty {

17
src/coupon-list/test/__snapshots__/index.spec.js.snap
View File

@ -19,7 +19,7 @@ exports[`empty-image prop 1`] = `
</div>
<div class="van-tabs__content">
<div role="tabpanel" class="van-tab__pane">
<div class="van-coupon-list__list" style="height: 628px;">
<div class="van-coupon-list__list van-coupon-list__list--with-bottom" style="height: 628px;">
<div class="van-coupon-list__empty"><img src="https://img.yzcdn.com/xxx.png">
<p>暂无优惠券</p>
</div>
@ -29,7 +29,8 @@ 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>
<div class="van-coupon-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-coupon-list__close"><span class="van-button__text">不使用优惠券</span></button></div>
</div>
`;
@ -68,7 +69,7 @@ exports[`render coupon list 1`] = `
</div>
<div class="van-tabs__content">
<div role="tabpanel" class="van-tab__pane">
<div class="van-coupon-list__list" style="height: 628px;">
<div class="van-coupon-list__list van-coupon-list__list--with-bottom" style="height: 628px;">
<div class="van-coupon">
<div class="van-coupon__content">
<div class="van-coupon__head">
@ -174,7 +175,8 @@ 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>
<div class="van-coupon-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-coupon-list__close"><span class="van-button__text">不使用优惠券</span></button></div>
</div>
`;
@ -213,20 +215,21 @@ exports[`render empty coupon list 1`] = `
</div>
<div class="van-tabs__content">
<div role="tabpanel" class="van-tab__pane" style="display: none;">
<div class="van-coupon-list__list" style="height: 628px;">
<div class="van-coupon-list__list van-coupon-list__list--with-bottom" style="height: 628px;">
<div class="van-coupon-list__empty"><img src="https://img.yzcdn.cn/vant/coupon-empty.png">
<p>暂无优惠券</p>
</div>
</div>
</div>
<div role="tabpanel" class="van-tab__pane" style="">
<div class="van-coupon-list__list" style="height: 628px;">
<div class="van-coupon-list__list van-coupon-list__list--with-bottom" style="height: 628px;">
<div class="van-coupon-list__empty"><img src="https://img.yzcdn.cn/vant/coupon-empty.png">
<p>暂无优惠券</p>
</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>
<div class="van-coupon-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-coupon-list__close"><span class="van-button__text">不使用优惠券</span></button></div>
</div>
`;