template-10560/src/components/PayRecord.tsx

import {Avatar, Cell, Space} from '@nutui/nutui-react-taro'
import {useEffect, useState, CSSProperties} from "react";
import {BszxPay} from "@/api/bszx/bszxPay/model";
import {getCount, pageBszxPay} from "@/api/bszx/bszxPay";
import {InfiniteLoading} from '@nutui/nutui-react-taro'
import dayjs from "dayjs";

const InfiniteUlStyle: CSSProperties = {
  height: '70vh',
  width: '100%',
  padding: '0',
  overflowY: 'auto',
  overflowX: 'hidden',
}
function PayRecord() {
  const [list, setList] = useState<BszxPay[]>([])
  const [page, setPage] = useState(1)
  const [hasMore, setHasMore] = useState(true)
  const [totalMoney, setTotalMoney] = useState()
  const [numbers, setNumbers] = useState()
  const reload = async () => {
    pageBszxPay({page}).then(res => {
      let newList: BszxPay[] | undefined = []
      if (res?.list && res?.list.length > 0) {
        newList = list?.concat(res.list)
        setHasMore(true)
      } else {
        newList = res?.list
        setHasMore(false)
      }
      setList(newList || []);
    })
    getCount().then(res => {
      setNumbers(res.numbers);
      setTotalMoney(res.totalMoney);
    })
  }

  const reloadMore = async () => {
    setPage(page + 1)
    reload().then();
  }

  useEffect(() => {
    setPage(2)
    reload()
  }, [])

  return (
    <div className={'px-2'}>
      <Cell>
        <div className={'flex w-full text-center justify-around'}>
          <div className={'item py-1'}>
            <span className={'text-gray-400'}>已筹资金(元)</span>
            <span className={'text-xl py-1 font-bold'}>￥{totalMoney}元</span>
          </div>
          <div className={'item py-1'}>
            <span className={'text-gray-400'}>爱心人次</span>
            <span className={'text-xl py-1 font-bold'}>{numbers}次</span>
          </div>
        </div>
      </Cell>
      <Cell>
        <ul style={InfiniteUlStyle} id="scroll">
          <InfiniteLoading
            target="scroll"
            hasMore={hasMore}
            onLoadMore={reloadMore}
            onScroll={() => {
              console.log('onScroll')
            }}
            onScrollToUpper={() => {
              console.log('onScrollToUpper')
            }}
            loadingText={
              <>
                加载中
              </>
            }
            loadMoreText={
              <>
                没有更多了
              </>
            }
          >
            {list?.map(item => {
              return (
                <Cell style={{padding: '0'}}>
                  <div className={'flex w-full justify-between items-center'}>
                    <div className={'flex'}>
                      <Space>
                        <Avatar
                          src={item.avatar}
                        />
                        <div className={'flex flex-col'}>
                          <div className={'real-name text-lg'}>
                            {item.name || '匿名'}
                          </div>
                          <div style={{maxWidth: '240px'}} className={'text-gray-400'}>{item.formName}，{dayjs(item.createTime).format('YYYY-MM-DD HH:mm')}</div>
                          <div className={'text-green-600 my-1'}>心愿：{item.comments}</div>
                        </div>
                      </Space>
                    </div>
                    <div className={'price text-red-500 text-xl font-bold'}>
                      ￥{item.price}
                    </div>
                  </div>
                </Cell>
              )
            })}
          </InfiniteLoading>
        </ul>
      </Cell>
    </div>
  )
}

export default PayRecord