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

feat(CouponList): update empty image (#10436)

Browse Source 
* feat(CouponList): update empty image

* docs: update axure link
This commit is contained in:
neverland 2022-03-26 11:13:22 +08:00 committed by GitHub
parent d02b0b8eb6
commit 9414c38154
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 58 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/vant/docs/markdown/design.en-US.md
View File

@ -36,7 +36,7 @@ Contains icon library resources.
<img src="https://cdn.jsdelivr.net/npm/@vant/assets/vant-axure-0905.png" style="width: 80%; box-shadow: 0 1px 2px rgba(0,0,0,.2)">
<a class="design-download" href="https://b.yzcdn.cn/vant/vant-axure-20200905.zip">Download</a>
<a class="design-download" href="https://github.com/vant-ui/vant-assets/blob/main/design/axure-20200905.zip?raw=true">Download</a>
<style>
a.design-download {

2
packages/vant/docs/markdown/design.zh-CN.md
View File

@ -42,7 +42,7 @@ Axure 元件库，由社区的 [@axure-tczy](https://github.com/axure-tczy) 同
<img src="https://cdn.jsdelivr.net/npm/@vant/assets/vant-axure-0905.png" style="width: 80%; box-shadow: 0 1px 2px rgba(0,0,0,.2)">
<a class="design-download" href="https://b.yzcdn.cn/vant/vant-axure-20200905.zip">下载</a>
<a class="design-download" href="https://github.com/vant-ui/vant-assets/blob/main/design/axure-20200905.zip?raw=true">下载</a>
<style>
a.design-download {

11
packages/vant/src/coupon-list/CouponList.tsx
View File

@ -24,19 +24,19 @@ import { useRefs } from '../composables/use-refs';
// Components
import { Tab } from '../tab';
import { Tabs } from '../tabs';
import { Empty } from '../empty';
import { Field } from '../field';
import { Button } from '../button';
import { Coupon, CouponInfo } from '../coupon';
import { useRect } from '@vant/use';
const [name, bem, t] = createNamespace('coupon-list');
const EMPTY_IMAGE = 'https://img.yzcdn.cn/vant/coupon-empty.png';
const couponListProps = {
code: makeStringProp(''),
coupons: makeArrayProp<CouponInfo>(),
currency: makeStringProp('¥'),
showCount: truthProp,
emptyImage: makeStringProp(EMPTY_IMAGE),
emptyImage: String,
chosenCoupon: makeNumberProp(-1),
enabledTitle: String,
disabledTitle: String,
@ -101,10 +101,9 @@ export default defineComponent({
};
const renderEmpty = () => (
<div class={bem('empty')}>
<img src={props.emptyImage} />
<p>{t('noCoupon')}</p>
</div>
<Empty image={props.emptyImage}>
<p class={bem('empty-tip')}>{t('noCoupon')}</p>
</Empty>
);
const renderExchangeBar = () => {

3
packages/vant/src/coupon-list/README.md
View File

@ -117,7 +117,7 @@ export default {
| close-button-text | Close button text | _string_ | `Close` |
| 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` |
| empty-image | Placeholder image when list is empty | _string_ | - |
| show-count | Whether to show coupon count in tab title | _boolean_ | `true` |
### CouponList Events
@ -186,7 +186,6 @@ The component provides the following CSS variables, which can be used to customi
| --van-coupon-list-field-padding | _5px 0 5px var(--van-padding-md)_ | - |
| --van-coupon-list-exchange-button-height | _32px_ | - |
| --van-coupon-list-close-button-height | _40px_ | - |
| --van-coupon-list-empty-image-size | _200px_ | - |
| --van-coupon-list-empty-tip-color | _var(--van-text-color-2)_ | - |
| --van-coupon-list-empty-tip-font-size | _var(--van-font-size-md)_ | - |
| --van-coupon-list-empty-tip-line-height | _var(--van-line-height-md)_ | - |

3
packages/vant/src/coupon-list/README.zh-CN.md
View File

@ -119,7 +119,7 @@ export default {
| input-placeholder | 输入框文字提示 | _string_ | `请输入优惠码` |
| show-exchange-bar | 是否展示兑换栏 | _boolean_ | `true` |
| currency | 货币符号 | _string_ | `¥` |
| empty-image | 列表为空时的占位图 | _string_ | `https://img.yzcdn.cn/vant/coupon-empty.png` |
| empty-image | 列表为空时的占位图 | _string_ | - |
| show-count | 是否展示可用 / 不可用数量 | _boolean_ | `true` |
### CouponList Events
@ -188,7 +188,6 @@ import type { CouponCellProps, CouponListProps } from 'vant';
| --van-coupon-list-field-padding | _5px 0 5px var(--van-padding-md)_ | - |
| --van-coupon-list-exchange-button-height | _32px_ | - |
| --van-coupon-list-close-button-height | _40px_ | - |
| --van-coupon-list-empty-image-size | _200px_ | - |
| --van-coupon-list-empty-tip-color | _var(--van-text-color-2)_ | - |
| --van-coupon-list-empty-tip-font-size | _var(--van-font-size-md)_ | - |
| --van-coupon-list-empty-tip-line-height | _var(--van-line-height-md)_ | - |

20
packages/vant/src/coupon-list/index.less
View File

@ -5,7 +5,6 @@
--van-coupon-list-field-padding: @coupon-list-field-padding;
--van-coupon-list-exchange-button-height: @coupon-list-exchange-button-height;
--van-coupon-list-close-button-height: @coupon-list-close-button-height;
--van-coupon-list-empty-image-size: @coupon-list-empty-image-size;
--van-coupon-list-empty-tip-color: @coupon-list-empty-tip-color;
--van-coupon-list-empty-tip-font-size: @coupon-list-empty-tip-font-size;
--van-coupon-list-empty-tip-line-height: @coupon-list-empty-tip-line-height;
@ -81,20 +80,9 @@
height: var(--van-coupon-list-close-button-height);
}
&__empty {
padding-top: 60px;
text-align: center;
p {
margin: var(--van-padding-md) 0;
color: var(--van-coupon-list-empty-tip-color);
font-size: var(--van-coupon-list-empty-tip-font-size);
line-height: var(--van-coupon-list-empty-tip-line-height);
}
img {
width: var(--van-coupon-list-empty-image-size);
height: var(--van-coupon-list-empty-image-size);
}
&__empty-tip {
color: var(--van-coupon-list-empty-tip-color);
font-size: var(--van-coupon-list-empty-tip-font-size);
line-height: var(--van-coupon-list-empty-tip-line-height);
}
}

70
packages/vant/src/coupon-list/test/__snapshots__/index.spec.ts.snap
View File

@ -362,11 +362,15 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis
<div class="van-coupon-list__list van-coupon-list__list--with-bottom"
style="height: 624px;"
>
<div class="van-coupon-list__empty">
<img src="https://img.yzcdn.cn/vant/coupon-empty.png">
<p>
No coupons
</p>
<div class="van-empty">
<div class="van-empty__image">
<img src="https://img.yzcdn.cn/vant/empty-image-default.png">
</div>
<div class="van-empty__bottom">
<p class="van-coupon-list__empty-tip">
No coupons
</p>
</div>
</div>
</div>
</div>
@ -380,11 +384,15 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis
<div class="van-coupon-list__list van-coupon-list__list--with-bottom"
style="height: 624px;"
>
<div class="van-coupon-list__empty">
<img src="https://img.yzcdn.cn/vant/coupon-empty.png">
<p>
No coupons
</p>
<div class="van-empty">
<div class="van-empty__image">
<img src="https://img.yzcdn.cn/vant/empty-image-default.png">
</div>
<div class="van-empty__bottom">
<p class="van-coupon-list__empty-tip">
No coupons
</p>
</div>
</div>
</div>
</div>
@ -474,11 +482,15 @@ exports[`should render list-footer slot correctly 1`] = `
<div class="van-coupon-list__list van-coupon-list__list--with-bottom"
style="height: 624px;"
>
<div class="van-coupon-list__empty">
<img src="https://img.yzcdn.cn/vant/coupon-empty.png">
<p>
No coupons
</p>
<div class="van-empty">
<div class="van-empty__image">
<img src="https://img.yzcdn.cn/vant/empty-image-default.png">
</div>
<div class="van-empty__bottom">
<p class="van-coupon-list__empty-tip">
No coupons
</p>
</div>
</div>
List Footer
</div>
@ -493,11 +505,15 @@ exports[`should render list-footer slot correctly 1`] = `
<div class="van-coupon-list__list van-coupon-list__list--with-bottom"
style="height: 624px;"
>
<div class="van-coupon-list__empty">
<img src="https://img.yzcdn.cn/vant/coupon-empty.png">
<p>
No coupons
</p>
<div class="van-empty">
<div class="van-empty__image">
<img src="https://img.yzcdn.cn/vant/empty-image-default.png">
</div>
<div class="van-empty__bottom">
<p class="van-coupon-list__empty-tip">
No coupons
</p>
</div>
</div>
Disabled List Footer
</div>
@ -588,11 +604,15 @@ exports[`should use custom src when using empty-image prop 1`] = `
<div class="van-coupon-list__list van-coupon-list__list--with-bottom"
style="height: 624px;"
>
<div class="van-coupon-list__empty">
<img src="https://cdn.jsdelivr.net/npm/@vant/assets/xxx.jpeg">
<p>
No coupons
</p>
<div class="van-empty">
<div class="van-empty__image">
<img src="https://cdn.jsdelivr.net/npm/@vant/assets/xxx.jpeg">
</div>
<div class="van-empty__bottom">
<p class="van-coupon-list__empty-tip">
No coupons
</p>
</div>
</div>
</div>
</div>

1
packages/vant/src/coupon-list/var.less
View File

@ -4,7 +4,6 @@
@coupon-list-field-padding: 5px 0 5px var(--van-padding-md);
@coupon-list-exchange-button-height: 32px;
@coupon-list-close-button-height: 40px;
@coupon-list-empty-image-size: 200px;
@coupon-list-empty-tip-color: var(--van-text-color-2);
@coupon-list-empty-tip-font-size: var(--van-font-size-md);
@coupon-list-empty-tip-line-height: var(--van-line-height-md);