47 lines
2.7 KiB
JavaScript
47 lines
2.7 KiB
JavaScript
import React from 'react';
|
|
import { Avatar, List, Select, Flex, Button, Card, Result, DatePicker } from 'antd';
|
|
import Styles from './web.module.less';
|
|
import dayJs from 'dayjs';
|
|
export default function Render(props) {
|
|
const { accountOpers, hasMore, month, type, chooseMonth, chooseType, monthStr, oakLoading, oakLoadingMore } = props.data;
|
|
const { t, loadMore, setType, setMonth, setChooseMonth, setChooseType, navigateBack } = props.methods;
|
|
return (<>
|
|
<Card title={t('history')} extra={<Flex gap="middle" className={Styles.control}>
|
|
<DatePicker picker="month" onChange={(value) => {
|
|
setMonth(value.toDate());
|
|
}} maxDate={dayJs()}/>
|
|
<Select style={{ width: 120 }} onChange={(value) => {
|
|
setType(value);
|
|
}} value={type} options={[
|
|
{ value: 'both', label: t('type.both') },
|
|
{ value: 'in', label: t('type.in') },
|
|
{ value: 'out', label: t('type.out') },
|
|
]}/>
|
|
</Flex>}>
|
|
{accountOpers?.length ?
|
|
<List className={Styles.list} loading={oakLoading || oakLoadingMore} dataSource={accountOpers} renderItem={(item, idx) => (<List.Item key={idx}>
|
|
<List.Item.Meta avatar={<Avatar style={{ backgroundColor: item.bgColor }}>{item.symbol}</Avatar>} title={<span className={Styles.type}>{item.type}</span>} description={<Flex justify="between" className={Styles.main} gap="large">
|
|
<span>{item.time}</span>
|
|
<span>{t('account:attr.avail')}:{item.avail}</span>
|
|
</Flex>}/>
|
|
<div className={Styles.value} style={{
|
|
color: item.bgColor,
|
|
}}>
|
|
{item.value}
|
|
</div>
|
|
</List.Item>)} loadMore={!oakLoading && !oakLoadingMore && hasMore ? (<div style={{
|
|
textAlign: 'center',
|
|
marginTop: 12,
|
|
height: 32,
|
|
lineHeight: '32px',
|
|
}}>
|
|
<Button onClick={loadMore}>
|
|
{t('common::loadMore')}
|
|
</Button>
|
|
</div>) : null}/> : (<Result status="404" title={t('common::noData')} extra={<Button onClick={() => navigateBack()}>
|
|
{t('common::back')}
|
|
</Button>}/>)}
|
|
</Card>
|
|
</>);
|
|
}
|