90 lines
4.9 KiB
JavaScript
90 lines
4.9 KiB
JavaScript
import React from 'react';
|
|
import { Button, Popup, Dialog } from 'antd-mobile';
|
|
import Styles from './web.mobile.module.less';
|
|
import classNames from 'classnames';
|
|
import { CentToString } from 'oak-domain/lib/utils/money';
|
|
import NewDeposit from '../../deposit/new';
|
|
export default function Render(props) {
|
|
const { account, depositMaxCent, newDepositPath, depositOpen, depositMinCent, ufOpen, depPrice, depositChannel, depositLoss, depositing, onWithdraw, textColor, priceColor, bgColor, onGoToHistory } = 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 (<div className={Styles.container}>
|
|
<div className={Styles.info} style={{ backgroundColor: bgColor, color: textColor }}>
|
|
<div className={classNames(Styles.top, Styles.label)} onClick={onGoToHistory}>
|
|
{t('history')}
|
|
</div>
|
|
<div className={Styles.middle}>
|
|
<div className={classNames(Styles.box, Styles.fortify)}>
|
|
<div className={Styles.label}>{t('avail')}{t('yuan')}</div>
|
|
<div className={Styles.value} style={{ color: priceColor }}>{t('common::pay.symbol')} {CentToString(avail, 2)}</div>
|
|
</div>
|
|
</div>
|
|
<div className={Styles.bottom}>
|
|
<div className={Styles.box}>
|
|
<div className={Styles.label}>{t('total')}{t('yuan')}</div>
|
|
<div className={Styles.value} style={{ color: priceColor }}>{t('common::pay.symbol')} {CentToString(total, 2)}</div>
|
|
</div>
|
|
<div className={Styles.box}>
|
|
<div className={Styles.label}>{t('loan')}{t('yuan')}</div>
|
|
<div className={Styles.value} style={{ color: priceColor }}>{t('common::pay.symbol')} {CentToString(total - avail, 2)}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style={{ height: '30vh' }}/>
|
|
<div className={Styles.btn}>
|
|
{legalActions?.includes('deposit') && <div className={Styles.item}>
|
|
<Button block color="primary" disabled={ufOpen || !!depositOpen} onClick={() => {
|
|
onDepositClick();
|
|
}} style={{
|
|
'--background-color': textColor,
|
|
'--border-color': textColor,
|
|
'--border-radius': '6px',
|
|
fontWeight: 'bold',
|
|
}}>
|
|
{t('account:action.deposit')}
|
|
</Button>
|
|
</div>}
|
|
{legalActions?.includes('withdraw') && <div className={Styles.item}>
|
|
<Button block onClick={() => onWithdraw()} style={{
|
|
'--border-radius': '6px',
|
|
fontWeight: 'bold',
|
|
}}>
|
|
{t('account:action.withdraw')}
|
|
</Button>
|
|
</div>}
|
|
</div>
|
|
<Popup visible={!!depositOpen} onMaskClick={() => onDepositModalClose()} onClose={() => onDepositModalClose()} destroyOnClose>
|
|
<div style={{ padding: 12, marginBottom: 6 }}>
|
|
<NewDeposit depositMinCent={depositMinCent} depositMaxCent={depositMaxCent} oakPath={newDepositPath} price={depPrice} channel={depositChannel} loss={depositLoss} onSetChannel={setDepositChannel} onSetPrice={setDepPrice}/>
|
|
<Button block loading={depositing} color="primary" disabled={!depPrice || !depositChannel || depositing} onClick={() => newDeposit()}>
|
|
{depositing ? t('depositing') : t('common::confirm')}
|
|
</Button>
|
|
</div>
|
|
</Popup>
|
|
<Dialog visible={ufOpen} content={t("uf.content")} closeOnAction onClose={() => setUfOpen(false)} actions={[
|
|
[
|
|
{
|
|
key: 'cancel',
|
|
text: t('common::action.cancel'),
|
|
style: {
|
|
color: 'var(--oak-color-bg3)',
|
|
},
|
|
},
|
|
{
|
|
key: 'go',
|
|
text: t('uf.go'),
|
|
style: {
|
|
color: 'var(--oak-text-color-secondary)',
|
|
},
|
|
onClick: () => {
|
|
onUnfinishedDepositClick();
|
|
}
|
|
},
|
|
]
|
|
]}/>
|
|
</div>);
|
|
}
|
|
return null;
|
|
}
|