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

* feat(CouponList): update empty image

* docs: update axure link

packages/vant/docs/markdown/design.en-US.md

@@ -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 {

packages/vant/docs/markdown/design.zh-CN.md

@@ -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 {

packages/vant/src/coupon-list/CouponList.tsx

@@ -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')}>
+      <Empty image={props.emptyImage}>
-        <img src={props.emptyImage} />
+        <p class={bem('empty-tip')}>{t('noCoupon')}</p>
-        <p>{t('noCoupon')}</p>
+      </Empty>
-      </div>
     );
 
     const renderExchangeBar = () => {

packages/vant/src/coupon-list/README.md

@@ -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)_ | - |

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

@@ -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)_ | - |

packages/vant/src/coupon-list/index.less

@@ -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 {
+  &__empty-tip {
-    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);
-    }
-  }
 }

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

@@ -362,14 +362,18 @@ 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">
+          <div class="van-empty">
-            <img src="https://img.yzcdn.cn/vant/coupon-empty.png">
+            <div class="van-empty__image">
-            <p>
+              <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>
       <div id="van-tab"
            role="tabpanel"
            class="van-tab__panel"
@@ -380,9 +384,12 @@ 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">
+          <div class="van-empty">
-            <img src="https://img.yzcdn.cn/vant/coupon-empty.png">
+            <div class="van-empty__image">
-            <p>
+              <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>
@@ -390,6 +397,7 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis
         </div>
       </div>
     </div>
+  </div>
   <div class="van-coupon-list__bottom">
     <button type="button"
             class="van-button van-button--danger van-button--normal van-button--block van-button--round van-coupon-list__close"
@@ -474,12 +482,16 @@ 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">
+          <div class="van-empty">
-            <img src="https://img.yzcdn.cn/vant/coupon-empty.png">
+            <div class="van-empty__image">
-            <p>
+              <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>
       </div>
@@ -493,12 +505,16 @@ 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">
+          <div class="van-empty">
-            <img src="https://img.yzcdn.cn/vant/coupon-empty.png">
+            <div class="van-empty__image">
-            <p>
+              <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>
       </div>
@@ -588,14 +604,18 @@ 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">
+          <div class="van-empty">
+            <div class="van-empty__image">
               <img src="https://cdn.jsdelivr.net/npm/@vant/assets/xxx.jpeg">
-            <p>
+            </div>
+            <div class="van-empty__bottom">
+              <p class="van-coupon-list__empty-tip">
                 No coupons
               </p>
             </div>
           </div>
         </div>
+      </div>
       <div id="van-tab"
            role="tabpanel"
            class="van-tab__panel"

packages/vant/src/coupon-list/var.less

@@ -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);