83 lines
4.7 KiB
JavaScript
83 lines
4.7 KiB
JavaScript
import React from 'react';
|
|
import { Button, Alert, InputNumber, Result } from 'antd';
|
|
import { DownOutlined, UpOutlined } from '@ant-design/icons';
|
|
import Styles from './web.pc.module.less';
|
|
import classNames from 'classnames';
|
|
import WithDrawAccountPicker from '../../withdrawAccount/list';
|
|
import WithdrawDisplay from '../display';
|
|
export default function render(props) {
|
|
const { account, value, refundAmount, manualAmount, avail, availYuan, valueYuan, manualAmountYuan, refundAmountYuan, showMethodHelp, showLossHelp, executale, withdrawCreate, withdrawable, withdrawLossText, chooseWa, waFilter, userId, onGoToHistory, onGoToWaManage } = props.data;
|
|
const { t, setValue, switchHelp, createWithdrawData, restartAll, createWithdraw, goBack, pickWithdrawChannel } = props.methods;
|
|
if (!withdrawable) {
|
|
return (<Result status="500" title="500" subTitle={t('notSetYet')} extra={<Button type="primary" onClick={() => goBack()}>
|
|
{t('common::back')}
|
|
</Button>}/>);
|
|
}
|
|
if (chooseWa && waFilter) {
|
|
return (<WithDrawAccountPicker oakPath="$$opb-withdraw-create-wapicker" oakFilters={[waFilter]} onPick={(id) => pickWithdrawChannel(id)} onCancel={() => restartAll()} entity="user" entityId={userId}/>);
|
|
}
|
|
if (withdrawCreate) {
|
|
return (<div className={Styles.container}>
|
|
<WithdrawDisplay withdraw={withdrawCreate} create={true}/>
|
|
<div style={{ flex: 1 }}/>
|
|
<div className={Styles.btns}>
|
|
<Button className={Styles.btn} size="large" onClick={restartAll}>
|
|
{t('common::action.cancel')}
|
|
</Button>
|
|
<Button className={Styles.btn} size="large" type="primary" onClick={createWithdraw}>
|
|
{t('common::action.commit')}
|
|
</Button>
|
|
</div>
|
|
</div>);
|
|
}
|
|
if (account) {
|
|
return (<div className={Styles.main}>
|
|
<div className={Styles.label}>
|
|
{t('label')}
|
|
</div>
|
|
<InputNumber autoFocus addonBefore={t('common::pay.symbol')} className={Styles.input} size="large" value={valueYuan || null} onChange={(value) => setValue(value)} placeholder={t('placeholder')}/>
|
|
<div className={Styles.tips}>
|
|
<div className={Styles.tipLine}>
|
|
<span>{t('tips.1-1')}</span>
|
|
{avail > 0 ? <span className={classNames(Styles.value, Styles.clickable)} onClick={() => setValue(availYuan)}>
|
|
<span className={Styles.value}>{availYuan}</span>
|
|
</span> : <span className={Styles.value}>{availYuan}</span>}
|
|
<span>{t('tips.1-2')}</span>
|
|
</div>
|
|
{refundAmount > 0 && <div className={Styles.tipLine}>
|
|
<span>{t('tips.2-1')}</span>
|
|
{refundAmountYuan}
|
|
<span>{t('tips.2-2')}</span>
|
|
</div>}
|
|
<div className={Styles.tipLine}>
|
|
<span>{t('tips.3-1')}</span>
|
|
<span className={Styles.value}>
|
|
{manualAmountYuan}
|
|
</span>
|
|
<span>{t('tips.3-2')}</span>
|
|
</div>
|
|
</div>
|
|
<div className={Styles.helps}>
|
|
<Button size="small" className={Styles.label2} type="link" icon={showMethodHelp ? <UpOutlined /> : <DownOutlined />} onClick={() => switchHelp('method')}>
|
|
{t('helps.label.method')}
|
|
</Button>
|
|
{showMethodHelp && <Alert className={Styles.content2} type="info" message={t('helps.content.method')}/>}
|
|
<Button size="small" className={Styles.label2} type="link" icon={showLossHelp ? <UpOutlined /> : <DownOutlined />} onClick={() => switchHelp('loss')}>
|
|
{t('helps.label.loss')}
|
|
</Button>
|
|
{showLossHelp && <Alert className={Styles.content2} type="info" message={withdrawLossText}/>}
|
|
</div>
|
|
<div className={Styles.gotoHistory} onClick={onGoToHistory}>
|
|
{t('gotoHistory')}
|
|
</div>
|
|
<div className={Styles.gotoHistory} onClick={onGoToWaManage}>
|
|
{t('gotoWaManage')}
|
|
</div>
|
|
<div style={{ flex: 1 }}/>
|
|
<Button className={Styles.btn} size="large" type="primary" disabled={!executale} onClick={() => createWithdrawData()}>
|
|
{t('common::confirm')}
|
|
</Button>
|
|
</div>);
|
|
}
|
|
}
|