76 lines
3.8 KiB
JavaScript
76 lines
3.8 KiB
JavaScript
import React from 'react';
|
||
import { Button, Popup } from 'antd-mobile';
|
||
import Styles from './web.mobile.module.less';
|
||
import classNames from 'classnames';
|
||
import { CentToString } from 'oak-domain/lib/utils/money';
|
||
import AccountDeposit from '../deposit';
|
||
export default function Render(props) {
|
||
const { account, depositMax, unfinishedPayId, onDepositPayId, depositOpen, ufOpen, depPrice, depositChannel, depositMeta, depositing } = props.data;
|
||
const { t, createDepositPay, setMessage, setDepositOpen, setUfOpen, setDepPrice, setDepositChannel, setDepositMeta, setDepositing } = props.methods;
|
||
if (account) {
|
||
const { total, avail, '#oakLegalActions': legalActions, accountOper$account: opers } = account;
|
||
return (<div className={Styles.container}>
|
||
<div className={Styles.info}>
|
||
<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>
|
||
<div style={{ flex: 1 }}/>
|
||
<div className={Styles.btn}>
|
||
{legalActions?.includes('deposit') && <div className={Styles.item}>
|
||
<Button block color="primary" disabled={ufOpen || depositOpen} onClick={() => {
|
||
if (unfinishedPayId) {
|
||
setUfOpen(true);
|
||
}
|
||
else {
|
||
setDepositOpen(true);
|
||
}
|
||
}}>
|
||
{t('account:action.deposit')}
|
||
</Button>
|
||
</div>}
|
||
{legalActions?.includes('withdraw') && <div className={Styles.item}>
|
||
<Button block onClick={() => setMessage({
|
||
type: 'warning',
|
||
content: '尚未实现'
|
||
})}>
|
||
{t('account:action.withdraw')}
|
||
</Button>
|
||
</div>}
|
||
</div>
|
||
<Popup visible={depositOpen} onMaskClick={() => {
|
||
setDepositOpen(false);
|
||
setDepPrice(null);
|
||
setDepositChannel(undefined);
|
||
setDepositMeta(undefined);
|
||
}} onClose={() => {
|
||
setDepositOpen(false);
|
||
setDepPrice(null);
|
||
setDepositChannel(undefined);
|
||
setDepositMeta(undefined);
|
||
}}>
|
||
<div style={{ padding: 12, marginBottom: 6 }}>
|
||
<AccountDeposit depositMax={depositMax} price={depPrice} channel={depositChannel} meta={depositMeta} onSetPrice={(price) => setDepPrice(price)} onSetChannel={(channel) => setDepositChannel(channel)} onSetMeta={(meta) => setDepositMeta(meta)}/>
|
||
<Button block loading={depositing} color="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>
|
||
</Popup>
|
||
</div>);
|
||
}
|
||
return null;
|
||
}
|