From 9414c381547f312a4cc76a5258194148197bf99c Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sat, 26 Mar 2022 11:13:22 +0800
Subject: [PATCH] feat(CouponList): update empty image (#10436)

* feat(CouponList): update empty image

* docs: update axure link
---
 packages/vant/docs/markdown/design.en-US.md   |  2 +-
 packages/vant/docs/markdown/design.zh-CN.md   |  2 +-
 packages/vant/src/coupon-list/CouponList.tsx  | 11 ++-
 packages/vant/src/coupon-list/README.md       |  3 +-
 packages/vant/src/coupon-list/README.zh-CN.md |  3 +-
 packages/vant/src/coupon-list/index.less      | 20 ++----
 .../test/__snapshots__/index.spec.ts.snap     | 70 ++++++++++++-------
 packages/vant/src/coupon-list/var.less        |  1 -
 8 files changed, 58 insertions(+), 54 deletions(-)

diff --git a/packages/vant/docs/markdown/design.en-US.md b/packages/vant/docs/markdown/design.en-US.md
index fc2a49b7d..bd757fd2f 100644
--- a/packages/vant/docs/markdown/design.en-US.md
+++ b/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 {
diff --git a/packages/vant/docs/markdown/design.zh-CN.md b/packages/vant/docs/markdown/design.zh-CN.md
index c752cc242..651ff4c4b 100644
--- a/packages/vant/docs/markdown/design.zh-CN.md
+++ b/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 {
diff --git a/packages/vant/src/coupon-list/CouponList.tsx b/packages/vant/src/coupon-list/CouponList.tsx
index ef1201891..60caf7119 100644
--- a/packages/vant/src/coupon-list/CouponList.tsx
+++ b/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')}>
-        <img src={props.emptyImage} />
-        <p>{t('noCoupon')}</p>
-      </div>
+      <Empty image={props.emptyImage}>
+        <p class={bem('empty-tip')}>{t('noCoupon')}</p>
+      </Empty>
     );
 
     const renderExchangeBar = () => {
diff --git a/packages/vant/src/coupon-list/README.md b/packages/vant/src/coupon-list/README.md
index daf92e0ba..36f43fc43 100644
--- a/packages/vant/src/coupon-list/README.md
+++ b/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)_ | - |
diff --git a/packages/vant/src/coupon-list/README.zh-CN.md b/packages/vant/src/coupon-list/README.zh-CN.md
index 771f17b87..6c5bd4bf9 100644
--- a/packages/vant/src/coupon-list/README.zh-CN.md
+++ b/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)_ | - |
diff --git a/packages/vant/src/coupon-list/index.less b/packages/vant/src/coupon-list/index.less
index 5935ce447..1973500c6 100644
--- a/packages/vant/src/coupon-list/index.less
+++ b/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 {
-    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);
   }
 }
diff --git a/packages/vant/src/coupon-list/test/__snapshots__/index.spec.ts.snap b/packages/vant/src/coupon-list/test/__snapshots__/index.spec.ts.snap
index 41a01ffc2..e9b17704e 100644
--- a/packages/vant/src/coupon-list/test/__snapshots__/index.spec.ts.snap
+++ b/packages/vant/src/coupon-list/test/__snapshots__/index.spec.ts.snap
@@ -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>
diff --git a/packages/vant/src/coupon-list/var.less b/packages/vant/src/coupon-list/var.less
index c4a585cce..b5164de7e 100644
--- a/packages/vant/src/coupon-list/var.less
+++ b/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);