feat(src): 新增文章、经销商申请、用户地址和礼物添加功能
- 新增文章添加页面,支持文章基本信息、设置、高级设置和图片上传 - 新增经销商申请页面,支持申请信息填写和审核状态显示 - 新增用户地址添加页面,支持地址信息填写和地址识别功能 - 新增礼物添加页面,功能与文章添加类似 - 统一使用 .tsx 文件格式 - 添加 .editorconfig、.eslintrc 和 .gitignore 文件,规范代码风格和项目结构
This commit is contained in:
118
src/components/PayRecord.tsx
Normal file
118
src/components/PayRecord.tsx
Normal file
@@ -0,0 +1,118 @@
|
||||
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
|
||||
Reference in New Issue
Block a user