1

src/pages/Product/Lock/Lockstore/components/LocksDetail/LockModal.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import { Modal, Form, Select, Input, Spin, Button } from 'antd'
 import styles from './index.less'
 import { SearchOutlined } from '@ant-design/icons'
@@ -27,6 +27,7 @@ const LockModal = props => {
   }
   const [form] = Form.useForm()
   const { Option } = Select
+  const scrollRef = useRef()
   const { visible, onCancel, onConfirm, loading, type, longleId, keyNum, status } = props
   const layout = {
     layout: 'vertical'
@@ -99,6 +100,20 @@ const LockModal = props => {
     })
   }
 
+  const handleListScroll = () => {
+    // console.log('fasfasf')
+    // 未滚动到底部
+    if (type === lockTypeEnum.SALE || type === lockTypeEnum.CHANGE) {
+      if (
+        scrollRef.current.scrollHeight - scrollRef.current.clientHeight <=
+        scrollRef.current.scrollTop
+      ) {
+        // 已到底部
+        initData({ page: state.page + 1, size: state.size })
+      }
+    }
+  }
+
   return (
     <Modal
       title={
@@ -126,7 +141,7 @@ const LockModal = props => {
         type !== lockTypeEnum.UPDATE &&
         type !== lockTypeEnum.RECOVER &&
         type !== lockTypeEnum.REMARK ? null : (
-          <div className={['zh-text-right', styles.modalFooter].join(' ')}>
+          <div>
             <Button className="zh-mg-right-10" onClick={onCancel}>
               取消
             </Button>
@@ -137,7 +152,7 @@ const LockModal = props => {
         )
       }>
       {type === lockTypeEnum.SALE ? (
-        <div className={[styles.modalContainer].join(' ')}>
+        <div className={styles.modalContainer} onScroll={handleListScroll}>
           <div className={styles.modalContent}>
             <Spin spinning={state.laoding}>
               {state.client.map(item => (
@@ -161,8 +176,8 @@ const LockModal = props => {
         <div className={[styles.modalContainer].join(' ')}>
           <div className={styles.modalContent}>
             <Spin spinning={state.laoding}>
-              {state.longle.map((item, index) => (
-                <div key={index} className={styles.card}>
+              {state.longle.map(item => (
+                <div key={item.id} className={styles.card}>
                   <div className="zh-flex-sub">{item.keyNum}</div>
                   <div className="zh-flex-sub zh-justify-between">
                     <span>{item.product}</span>

src/pages/Product/Lock/Lockstore/components/LocksDetail/index.less

@@ -1,9 +1,6 @@
 .inputSearch {
   width: 95%;
 }
-.modalFooter {
-  padding: 1.5rem 0 0;
-}
 .modalContainer {
   height: 53vh;
   max-height: 53vh;