forked from gxwebsoft/mp-10550
105 lines
3.1 KiB
TypeScript
105 lines
3.1 KiB
TypeScript
import {Avatar, Button, Cell, Space} from '@nutui/nutui-react-taro'
|
||
import {useEffect, useState, CSSProperties} from "react";
|
||
import {BszxPay} from "@/api/bszx/bszxPay/model";
|
||
import {myPageBszxPay} from "@/api/bszx/bszxPay";
|
||
import {InfiniteLoading} from '@nutui/nutui-react-taro'
|
||
import dayjs from "dayjs";
|
||
import navTo from "@/utils/common";
|
||
|
||
const InfiniteUlStyle: CSSProperties = {
|
||
height: '80vh',
|
||
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 reload = async () => {
|
||
myPageBszxPay({page}).then(res => {
|
||
if (res?.list && res?.list.length > 0) {
|
||
const newList = list?.concat(res.list)
|
||
setList(newList);
|
||
setHasMore(true)
|
||
} else {
|
||
setHasMore(false)
|
||
}
|
||
})
|
||
}
|
||
|
||
const reloadMore = async () => {
|
||
setPage(page + 1)
|
||
reload();
|
||
}
|
||
|
||
useEffect(() => {
|
||
setPage(2)
|
||
reload()
|
||
}, [])
|
||
|
||
return (
|
||
<div className={'px-2'}>
|
||
<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: '200px'}} 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'}>
|
||
<span className={' text-red-500 text-xl text-center font-bold'}>￥{item.price}</span>
|
||
<Button className={'whitespace-nowrap'} onClick={() => {
|
||
navTo('/bszx/pay-cert/pay-cert?id=' + item.id, true)
|
||
}}>
|
||
查看证书
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</Cell>
|
||
)
|
||
})}
|
||
</InfiniteLoading>
|
||
</ul>
|
||
</Cell>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default PayRecord
|