fix(CouponList): incorrect list height (#9874)

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

@@ -1,8 +1,8 @@
 import {
+  ref,
   watch,
   computed,
   nextTick,
-  reactive,
   onMounted,
   defineComponent,
   ExtractPropTypes,
@@ -11,6 +11,7 @@ import {
 // Utils
 import {
   truthProp,
+  windowHeight,
   makeArrayProp,
   makeStringProp,
   makeNumberProp,
@@ -26,6 +27,7 @@ import { Tabs } from '../tabs';
 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';
@@ -62,34 +64,40 @@ export default defineComponent({
   setup(props, { emit, slots }) {
     const [couponRefs, setCouponRefs] = useRefs();
 
-    const state = reactive({
+    const root = ref<HTMLElement>();
-      tab: 0,
+    const barRef = ref<HTMLElement>();
-      code: props.code,
+    const activeTab = ref(0);
-    });
+    const listHeight = ref(0);
+    const currentCode = ref(props.code);
 
     const buttonDisabled = computed(
       () =>
         !props.exchangeButtonLoading &&
         (props.exchangeButtonDisabled ||
-          !state.code ||
+          !currentCode.value ||
-          state.code.length < props.exchangeMinLength)
+          currentCode.value.length < props.exchangeMinLength)
     );
 
+    const updateListHeight = () => {
+      const TABS_HEIGHT = 44;
+      const rootHeight = useRect(root).height;
+      const headerHeight = useRect(barRef).height + TABS_HEIGHT;
+      listHeight.value =
+        (rootHeight > headerHeight ? rootHeight : windowHeight.value) -
+        headerHeight;
+    };
+
     const onExchange = () => {
-      emit('exchange', state.code);
+      emit('exchange', currentCode.value);
 
       // auto clear currentCode when not use v-model
       if (!props.code) {
-        state.code = '';
+        currentCode.value = '';
       }
     };
 
     const scrollToCoupon = (index: number) => {
-      nextTick(() => {
+      nextTick(() => couponRefs.value[index]?.scrollIntoView());
-        if (couponRefs.value[index]) {
-          couponRefs.value[index].scrollIntoView();
-        }
-      });
     };
 
     const renderEmpty = () => (
@@ -102,9 +110,9 @@ export default defineComponent({
     const renderExchangeBar = () => {
       if (props.showExchangeBar) {
         return (
-          <div class={bem('exchange-bar')}>
+          <div ref={barRef} class={bem('exchange-bar')}>
             <Field
-              v-model={state.code}
+              v-model={currentCode.value}
               clearable
               border={false}
               class={bem('field')}
@@ -133,10 +141,8 @@ export default defineComponent({
       return (
         <Tab title={title}>
           <div
-            class={bem('list', {
+            class={bem('list', { 'with-bottom': props.showCloseButton })}
-              'with-bar': props.showExchangeBar,
+            style={{ height: `${listHeight.value}px` }}
-              'with-bottom': props.showCloseButton,
-            })}
           >
             {coupons.map((coupon, index) => (
               <Coupon
@@ -163,10 +169,8 @@ export default defineComponent({
       return (
         <Tab title={title}>
           <div
-            class={bem('list', {
+            class={bem('list', { 'with-bottom': props.showCloseButton })}
-              'with-bar': props.showExchangeBar,
+            style={{ height: `${listHeight.value}px` }}
-              'with-bottom': props.showCloseButton,
-            })}
           >
             {disabledCoupons.map((coupon) => (
               <Coupon
@@ -186,25 +190,23 @@ export default defineComponent({
     watch(
       () => props.code,
       (value) => {
-        state.code = value;
+        currentCode.value = value;
       }
     );
 
-    watch(
+    watch(windowHeight, updateListHeight);
-      () => state.code,
+    watch(currentCode, (value) => emit('update:code', value));
-      (value) => emit('update:code', value)
-    );
-
     watch(() => props.displayedCouponIndex, scrollToCoupon);
 
     onMounted(() => {
+      updateListHeight();
       scrollToCoupon(props.displayedCouponIndex);
     });
 
     return () => (
-      <div class={bem()}>
+      <div ref={root} class={bem()}>
         {renderExchangeBar()}
-        <Tabs v-model:active={state.tab} class={bem('tab')} border={false}>
+        <Tabs v-model:active={activeTab.value} class={bem('tab')}>
           {renderCouponTab()}
           {renderDisabledTab()}
         </Tabs>

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

@@ -56,15 +56,10 @@
 
   &__list {
     box-sizing: border-box;
-    height: calc(100vh - 108px);
     padding: var(--van-padding-md) 0 var(--van-padding-lg);
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
 
-    &--with-bar {
-      height: calc(100vh - 152px);
-    }
-
     &--with-bottom {
       padding-bottom: 50px;
     }

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

@@ -59,7 +59,9 @@ exports[`should be the sames as the last snapshot when render coupon list 1`] =
            class="van-tab__pane"
            style
       >
-        <div class="van-coupon-list__list van-coupon-list__list--with-bar van-coupon-list__list--with-bottom">
+        <div class="van-coupon-list__list van-coupon-list__list--with-bottom"
+             style="height: 624px;"
+        >
           <div class="van-coupon">
             <div class="van-coupon__content">
               <div class="van-coupon__head">
@@ -338,7 +340,9 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis
            class="van-tab__pane"
            style="display: none;"
       >
-        <div class="van-coupon-list__list van-coupon-list__list--with-bar van-coupon-list__list--with-bottom">
+        <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>
@@ -351,7 +355,9 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis
            class="van-tab__pane"
            style
       >
-        <div class="van-coupon-list__list van-coupon-list__list--with-bar van-coupon-list__list--with-bottom">
+        <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>
@@ -435,7 +441,9 @@ exports[`should render list-footer slot correctly 1`] = `
            class="van-tab__pane"
            style="display: none;"
       >
-        <div class="van-coupon-list__list van-coupon-list__list--with-bar van-coupon-list__list--with-bottom">
+        <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>
@@ -449,7 +457,9 @@ exports[`should render list-footer slot correctly 1`] = `
            class="van-tab__pane"
            style
       >
-        <div class="van-coupon-list__list van-coupon-list__list--with-bar van-coupon-list__list--with-bottom">
+        <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>
@@ -534,7 +544,9 @@ exports[`should use custom src when using empty-image prop 1`] = `
            class="van-tab__pane"
            style
       >
-        <div class="van-coupon-list__list van-coupon-list__list--with-bar van-coupon-list__list--with-bottom">
+        <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.com/xxx.png">
             <p>