68 lines
4.4 KiB
JavaScript
68 lines
4.4 KiB
JavaScript
import React from 'react';
|
||
import { Button, Modal, Card, Flex, Divider, Typography } from 'antd';
|
||
import Styles from './web.pc.module.less';
|
||
import { CentToString } from 'oak-domain/lib/utils/money';
|
||
import classNames from 'classnames';
|
||
import NewDeposit from '../../deposit/new';
|
||
import AccountOperList from '../../accountOper/pure/List.pc';
|
||
import { AccountBookOutlined, ScheduleOutlined } from '@ant-design/icons';
|
||
export default function Render(props) {
|
||
const { account, depositMaxCent, newDepositPath, depositOpen, depositMinCent, ufOpen, depPrice, depositChannel, depositLoss, depositing, onWithdraw, } = props.data;
|
||
const { t, newDeposit, setMessage, setDepositOpen, setUfOpen, setDepPrice, setDepositChannel, onUnfinishedDepositClick, setDepositing, onDepositClick, onDepositModalClose, } = props.methods;
|
||
if (account) {
|
||
const { total, avail, '#oakLegalActions': legalActions, accountOper$account: opers } = account;
|
||
return (<>
|
||
<Card className={Styles.card} title={<span><AccountBookOutlined /> {t('title')}</span>} extra={<Flex gap="middle">
|
||
{legalActions?.includes('deposit') && <Button type="primary" disabled={ufOpen || !!depositOpen} onClick={() => onDepositClick()}>
|
||
{t('account:action.deposit')}
|
||
</Button>}
|
||
{legalActions?.includes('withdraw') && <Button onClick={() => onWithdraw()}>
|
||
{t('account:action.withdraw')}
|
||
</Button>}
|
||
</Flex>}>
|
||
<div className={Styles.content}>
|
||
<Flex gap="middle" justify='space-around'>
|
||
<div className={classNames(Styles.grid, Styles.fortify)}>
|
||
<span className={Styles.label}>{t('avail')}</span>
|
||
<span className={Styles.value}>{t('common::pay.symbol')} {CentToString(avail, 2)}</span>
|
||
</div>
|
||
<div className={Styles.grid}>
|
||
<span className={Styles.label}>{t('total')}</span>
|
||
<span className={Styles.value}>{t('common::pay.symbol')} {CentToString(total, 2)}</span>
|
||
</div>
|
||
<div className={Styles.grid}>
|
||
<span className={Styles.label}>{t('loan')}</span>
|
||
<span className={Styles.value}>{t('common::pay.symbol')} {CentToString(total - avail, 2)}</span>
|
||
</div>
|
||
</Flex>
|
||
{!!opers?.length && (<>
|
||
<Divider />
|
||
<div className={Styles.oper}>
|
||
<span className={Styles.title}><ScheduleOutlined /> {t('history')}：</span>
|
||
<AccountOperList accountOpers={opers} t={t}/>
|
||
</div>
|
||
</>)}
|
||
</div>
|
||
</Card>
|
||
<Modal title={t('deposit.title')} open={depositOpen} onCancel={() => onDepositModalClose()} destroyOnClose={true} footer={<Button loading={depositing} type="primary" disabled={!depPrice || !depositChannel || depositing} onClick={() => newDeposit()}>
|
||
{depositing ? t('depositing') : t('common::confirm')}
|
||
</Button>}>
|
||
<div style={{ padding: 12 }}>
|
||
<NewDeposit depositMinCent={depositMinCent} depositMaxCent={depositMaxCent} oakPath={newDepositPath} price={depPrice} channel={depositChannel} loss={depositLoss} onSetChannel={setDepositChannel} onSetPrice={setDepPrice}/>
|
||
</div>
|
||
</Modal>
|
||
<Modal title={t('uf.title')} open={ufOpen} onCancel={() => {
|
||
setUfOpen(false);
|
||
}} destroyOnClose={true} footer={null}>
|
||
<div className={Styles.uf}>
|
||
<Typography.Paragraph>{t('uf.content')}</Typography.Paragraph>
|
||
<Button type="link" onClick={() => onUnfinishedDepositClick()}>
|
||
{t('uf.go')}
|
||
</Button>
|
||
</div>
|
||
</Modal>
|
||
</>);
|
||
}
|
||
return null;
|
||
}
|