From ac08bd9dabd0b5d97b12d42def948fbd3a6c35a9 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Wed, 15 Sep 2021 15:15:29 +0800
Subject: [PATCH] fix(CouponList): fix scroll issue (#9480)

* fix(CouponList): fix scroll issue

* perf: using vh instead of window height
---
 packages/vant/src/coupon-list/CouponList.tsx  | 19 +++++++--------
 packages/vant/src/coupon-list/demo/index.vue  |  1 -
 packages/vant/src/coupon-list/index.less      |  5 ++++
 .../test/__snapshots__/index.spec.ts.snap     | 24 +++++--------------
 4 files changed, 19 insertions(+), 30 deletions(-)

diff --git a/packages/vant/src/coupon-list/CouponList.tsx b/packages/vant/src/coupon-list/CouponList.tsx
index 4e8097688..aa207b9bc 100644
--- a/packages/vant/src/coupon-list/CouponList.tsx
+++ b/packages/vant/src/coupon-list/CouponList.tsx
@@ -12,7 +12,6 @@ import {
 import { truthProp, createNamespace } from '../utils';
 
 // Composables
-import { useWindowSize } from '@vant/use';
 import { useRefs } from '../composables/use-refs';
 
 // Components
@@ -83,8 +82,6 @@ export default defineComponent({
       code: props.code,
     });
 
-    const { height: windowHeight } = useWindowSize();
-
     const buttonDisabled = computed(
       () =>
         !props.exchangeButtonLoading &&
@@ -93,10 +90,6 @@ export default defineComponent({
           state.code.length < props.exchangeMinLength)
     );
 
-    const listStyle = computed(() => ({
-      height: windowHeight.value - (props.showExchangeBar ? 140 : 94) + 'px',
-    }));
-
     const onExchange = () => {
       emit('exchange', state.code);
 
@@ -155,8 +148,10 @@ export default defineComponent({
       return (
         <Tab title={title}>
           <div
-            class={bem('list', { 'with-bottom': props.showCloseButton })}
-            style={listStyle.value}
+            class={bem('list', {
+              'with-bar': props.showExchangeBar,
+              'with-bottom': props.showCloseButton,
+            })}
           >
             {coupons.map((coupon, index) => (
               <Coupon
@@ -183,8 +178,10 @@ export default defineComponent({
       return (
         <Tab title={title}>
           <div
-            class={bem('list', { 'with-bottom': props.showCloseButton })}
-            style={listStyle.value}
+            class={bem('list', {
+              'with-bar': props.showExchangeBar,
+              'with-bottom': props.showCloseButton,
+            })}
           >
             {disabledCoupons.map((coupon) => (
               <Coupon
diff --git a/packages/vant/src/coupon-list/demo/index.vue b/packages/vant/src/coupon-list/demo/index.vue
index 44c263577..1260f7a3a 100644
--- a/packages/vant/src/coupon-list/demo/index.vue
+++ b/packages/vant/src/coupon-list/demo/index.vue
@@ -110,7 +110,6 @@ const onExchange = () => {
         :coupons="coupons"
         :chosen-coupon="chosenCoupon"
         :disabled-coupons="disabledCoupons"
-        :show-count="false"
         @change="onChange"
         @exchange="onExchange"
       />
diff --git a/packages/vant/src/coupon-list/index.less b/packages/vant/src/coupon-list/index.less
index 6da9cb36a..e3b0c13b1 100644
--- a/packages/vant/src/coupon-list/index.less
+++ b/packages/vant/src/coupon-list/index.less
@@ -56,10 +56,15 @@
 
   &__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;
     }
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 cdda7551f..8dbd004c4 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
@@ -56,9 +56,7 @@ 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-bottom"
-             style="height: 628px;"
-        >
+        <div class="van-coupon-list__list van-coupon-list__list--with-bar van-coupon-list__list--with-bottom">
           <div class="van-coupon">
             <div class="van-coupon__content">
               <div class="van-coupon__head">
@@ -334,9 +332,7 @@ 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-bottom"
-             style="height: 628px;"
-        >
+        <div class="van-coupon-list__list van-coupon-list__list--with-bar van-coupon-list__list--with-bottom">
           <div class="van-coupon-list__empty">
             <img src="https://img.yzcdn.cn/vant/coupon-empty.png">
             <p>
@@ -349,9 +345,7 @@ 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-bottom"
-             style="height: 628px;"
-        >
+        <div class="van-coupon-list__list van-coupon-list__list--with-bar van-coupon-list__list--with-bottom">
           <div class="van-coupon-list__empty">
             <img src="https://img.yzcdn.cn/vant/coupon-empty.png">
             <p>
@@ -432,9 +426,7 @@ 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-bottom"
-             style="height: 628px;"
-        >
+        <div class="van-coupon-list__list van-coupon-list__list--with-bar van-coupon-list__list--with-bottom">
           <div class="van-coupon-list__empty">
             <img src="https://img.yzcdn.cn/vant/coupon-empty.png">
             <p>
@@ -448,9 +440,7 @@ exports[`should render list-footer slot correctly 1`] = `
            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__list van-coupon-list__list--with-bar van-coupon-list__list--with-bottom">
           <div class="van-coupon-list__empty">
             <img src="https://img.yzcdn.cn/vant/coupon-empty.png">
             <p>
@@ -532,9 +522,7 @@ 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-bottom"
-             style="height: 628px;"
-        >
+        <div class="van-coupon-list__list van-coupon-list__list--with-bar van-coupon-list__list--with-bottom">
           <div class="van-coupon-list__empty">
             <img src="https://img.yzcdn.com/xxx.png">
             <p>