[new feature] CouponList: add empty-image prop (#3941)

src/coupon-list/README.md

@@ -97,6 +97,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` |
 
 ### CouponList Events
 

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

@@ -98,7 +98,8 @@ export default {
 | close-button-text | 列表底部按钮文字 | `string` | `不使用优惠` | - |
 | input-placeholder | 输入框文字提示 | `string` | `请输入优惠码` | - |
 | show-exchange-bar | 是否展示兑换栏 | `boolean` | `true` | - |
-| currency | 货币符号 |  `string` | `¥` | - | 1.5.0 |
+| currency | 货币符号 |  `string` | `¥` | 1.5.0 |
+| empty-image | 列表为空时的占位图 | `string` | `https://img.yzcdn.cn/vant/coupon-empty.png` | 2.1.0 |
 
 ### CouponList Events
 

src/coupon-list/index.js

@@ -53,6 +53,10 @@ export default createComponent({
     currency: {
       type: String,
       default: '¥'
+    },
+    emptyImage: {
+      type: String,
+      default: EMPTY_IMAGE
     }
   },
 
@@ -128,7 +132,7 @@ export default createComponent({
     renderEmpty() {
       return (
         <div class={bem('empty')}>
-          <img src={EMPTY_IMAGE} />
+          <img src={this.emptyImage} />
           <p>{t('empty')}</p>
         </div>
       );

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

@@ -1,5 +1,38 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`empty-image prop 1`] = `
+<div class="van-coupon-list">
+  <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="请输入优惠码" maxlength="20" 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>
+    </div>
+  </div>
+  <div class="van-tabs van-tabs--line van-coupon-list__tab">
+    <div class="van-tabs__wrap van-hairline--top-bottom">
+      <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 class="van-tabs__line"></div>
+      </div>
+    </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__empty"><img src="https://img.yzcdn.com/xxx.png">
+            <p>暂无优惠券</p>
+          </div>
+        </div>
+      </div>
+      <div role="tabpanel" class="van-tab__pane" style="display: none;">
+        <!---->
+      </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>
+`;
+
 exports[`render coupon cell 1`] = `
 <div class="van-cell van-cell--clickable van-coupon-cell">
   <div class="van-cell__title"><span>优惠券</span></div>

src/coupon-list/test/index.spec.js

@@ -102,6 +102,16 @@ test('render empty coupon list', () => {
   expect(wrapper).toMatchSnapshot();
 });
 
+test('empty-image prop', () => {
+  const wrapper = mount(CouponList, {
+    propsData: {
+      emptyImage: 'https://img.yzcdn.com/xxx.png'
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
 test('exchange coupon', () => {
   const wrapper = mount(CouponList);
   const exchange = wrapper.find('.van-coupon-list__exchange');