97 lines
5.3 KiB
JavaScript
97 lines
5.3 KiB
JavaScript
import React, { useState } 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 AccountDeposit from '../deposit';
|
|
import AccountOperList from '../../accountOper/pure/List.pc';
|
|
import { AccountBookOutlined, ScheduleOutlined } from '@ant-design/icons';
|
|
export default function Render(props) {
|
|
const { account, depositMax, unfinishedPayId, onDepositPayId } = props.data;
|
|
const { t, createDepositPay, setMessage } = props.methods;
|
|
const [depositOpen, setDepositOpen] = useState(false);
|
|
const [ufOpen, setUfOpen] = useState(false);
|
|
const [depPrice, setDepPrice] = useState(null);
|
|
const [depositChannel, setDepositChannel] = useState();
|
|
const [depositMeta, setDepositMeta] = useState();
|
|
const [depositing, setDepositing] = useState(false);
|
|
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" onClick={() => {
|
|
if (unfinishedPayId) {
|
|
setUfOpen(true);
|
|
}
|
|
else {
|
|
setDepositOpen(true);
|
|
}
|
|
}}>
|
|
{t('account:action.deposit')}
|
|
</Button>}
|
|
{legalActions?.includes('withdraw') && <Button onClick={() => setMessage({
|
|
type: 'warning',
|
|
content: '尚未实现'
|
|
})}>
|
|
{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={() => {
|
|
setDepositOpen(false);
|
|
setDepPrice(null);
|
|
setDepositChannel(undefined);
|
|
setDepositMeta(undefined);
|
|
}} destroyOnClose={true} footer={<Button loading={depositing} type="primary" disabled={!depPrice || !depositChannel || depositing} onClick={async () => {
|
|
setDepositing(true);
|
|
const payId = await createDepositPay(depPrice, depositChannel, depositMeta || {});
|
|
setDepPrice(null);
|
|
setDepositChannel(undefined);
|
|
setDepositMeta(undefined);
|
|
setDepositing(false);
|
|
onDepositPayId(payId);
|
|
}}>
|
|
{depositing ? t('depositing') : t('common::confirm')}
|
|
</Button>}>
|
|
<div style={{ padding: 12 }}>
|
|
<AccountDeposit depositMax={depositMax} price={depPrice} channel={depositChannel} meta={depositMeta} onSetPrice={(price) => setDepPrice(price)} onSetChannel={(channel) => setDepositChannel(channel)} onSetMeta={(meta) => setDepositMeta(meta)}/>
|
|
</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={() => onDepositPayId(unfinishedPayId)}>
|
|
{t('uf.go')}
|
|
</Button>
|
|
</div>
|
|
</Modal>
|
|
</>);
|
|
}
|
|
return null;
|
|
}
|