feat(CouponList): add list-footer、disabled-list-footer slot (#8801)

src/coupon-list/CouponList.tsx

@@ -75,7 +75,7 @@ export default defineComponent({
 
   emits: ['change', 'exchange', 'update:code'],
 
-  setup(props, { emit }) {
+  setup(props, { emit, slots }) {
     const [couponRefs, setCouponRefs] = useRefs();
 
     const state = reactive({
@@ -169,6 +169,7 @@ export default defineComponent({
               />
             ))}
             {!coupons.length && renderEmpty()}
+            {slots['list-footer']?.()}
           </div>
         </Tab>
       );
@@ -194,6 +195,7 @@ export default defineComponent({
               />
             ))}
             {!disabledCoupons.length && renderEmpty()}
+            {slots['disabled-list-footer']?.()}
           </div>
         </Tab>
       );

src/coupon-list/README.md

@@ -90,14 +90,14 @@ export default {
 
 ### CouponCell Props
 
-| Attribute | Description | Type | Default |
-| --- | --- | --- | --- |
-| title | Cell title | _string_ | `Coupon` |
-| chosen-coupon | Index of chosen coupon | _number \| string_ | `-1` |
-| coupons | Coupon list | _Coupon[]_ | `[]` |
-| editable | Cell editable | _boolean_ | `true` |
-| border | Whether to show innner border | _boolean_ | `true` |
-| currency | Currency symbol | _string_ | `¥` |
+| Attribute     | Description                  | Type               | Default  |
+| ------------- | ---------------------------- | ------------------ | -------- |
+| title         | Cell title                   | _string_           | `Coupon` |
+| chosen-coupon | Index of chosen coupon       | _number \| string_ | `-1`     |
+| coupons       | Coupon list                  | _Coupon[]_         | `[]`     |
+| editable      | Cell editable                | _boolean_          | `true`   |
+| border        | Whether to show inner border | _boolean_          | `true`   |
+| currency      | Currency symbol              | _string_           | `¥`      |
 
 ### CouponList Props
 
@@ -127,6 +127,13 @@ export default {
 | change | Emitted when chosen coupon changed | index: index of chosen coupon |
 | exchange | Emitted when exchanging coupon | code: exchange code |
 
+### CouponList Slots
+
+| Name                           | Description                     |
+| ------------------------------ | ------------------------------- |
+| list-footer `v3.0.18`          | Coupon list bottom              |
+| disabled-list-footer `v3.0.18` | Unavailable coupons list bottom |
+
 ### Data Structure of Coupon
 
 | Key         | Description                         | Type     |
@@ -134,8 +141,8 @@ export default {
 | id          | Id                                  | _string_ |
 | name        | Name                                | _string_ |
 | condition   | Condition                           | _string_ |
-| startAt     | Start time (Timestmap, unit second) | _number_ |
-| endAt       | End time (Timestmap, unit second)   | _number_ |
+| startAt     | Start time (Timestamp, unit second) | _number_ |
+| endAt       | End time (Timestamp, unit second)   | _number_ |
 | description | Description                         | _string_ |
 | reason      | Unavailable reason                  | _string_ |
 | value       | Value                               | _number_ |

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

@@ -129,6 +129,13 @@ export default {
 | change   | 优惠券切换回调 | index, 选中优惠券的索引 |
 | exchange | 兑换优惠券回调 | code, 兑换码            |
 
+### CouponList Slots
+
+| 名称                           | 说明                 |
+| ------------------------------ | -------------------- |
+| list-footer `v3.0.18`          | 优惠券列表底部       |
+| disabled-list-footer `v3.0.18` | 不可用优惠券列表底部 |
+
 ### Coupon 数据结构
 
 | 键名        | 说明                            | 类型     |

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

@@ -380,6 +380,108 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis
 </div>
 `;
 
+exports[`should render list-footer slot correctly 1`] = `
+<div class="van-coupon-list">
+  <div class="van-coupon-list__exchange-bar">
+    <div class="van-cell van-cell--borderless van-field van-coupon-list__field">
+      <div class="van-cell__value van-cell__value--alone van-field__value">
+        <div class="van-field__body">
+          <input type="text"
+                 class="van-field__control"
+                 placeholder="Coupon code"
+          >
+        </div>
+      </div>
+    </div>
+    <button type="button"
+            class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange"
+            disabled
+    >
+      <div class="van-button__content">
+        <span class="van-button__text">
+          Exchange
+        </span>
+      </div>
+    </button>
+  </div>
+  <div class="van-tabs van-tabs--line van-coupon-list__tab"
+       modelvalue="0"
+  >
+    <div class="van-tabs__wrap">
+      <div role="tablist"
+           class="van-tabs__nav van-tabs__nav--line"
+      >
+        <div role="tab"
+             class="van-tab"
+             aria-selected="false"
+        >
+          <span class="van-tab__text van-tab__text--ellipsis">
+            Available (0)
+          </span>
+        </div>
+        <div role="tab"
+             class="van-tab van-tab--active"
+             aria-selected="true"
+        >
+          <span class="van-tab__text van-tab__text--ellipsis">
+            Unavailable (0)
+          </span>
+        </div>
+        <div class="van-tabs__line"
+             style="transform: translateX(0px) translateX(-50%); transition-duration: 0.3s;"
+        >
+        </div>
+      </div>
+    </div>
+    <div class="van-tabs__content">
+      <div role="tabpanel"
+           class="van-tab__pane"
+           style="display: none;"
+      >
+        <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>
+              No coupons
+            </p>
+          </div>
+          List Footer
+        </div>
+      </div>
+      <div role="tabpanel"
+           class="van-tab__pane"
+           style
+      >
+        <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>
+              No coupons
+            </p>
+          </div>
+          Disabled List Footer
+        </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"
+    >
+      <div class="van-button__content">
+        <span class="van-button__text">
+          Close
+        </span>
+      </div>
+    </button>
+  </div>
+</div>
+`;
+
 exports[`should use custom src when using empty-image prop 1`] = `
 <div class="van-coupon-list">
   <div class="van-coupon-list__exchange-bar">

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

@@ -144,3 +144,18 @@ test('should emit "update:code" event when input a code', async () => {
   await wrapper.setProps({ code: '2' });
   expect(wrapper.emitted('update:code')![2]).toEqual(['2']);
 });
+
+test('should render list-footer slot correctly', async () => {
+  const wrapper = mount(CouponList, {
+    slots: {
+      'list-footer': () => 'List Footer',
+      'disabled-list-footer': () => 'Disabled List Footer',
+    },
+  });
+
+  await later();
+  const tabs = wrapper.findAll('.van-tab');
+  await tabs[1].trigger('click');
+
+  expect(wrapper.html()).toMatchSnapshot();
+});