99 lines
5.6 KiB
JavaScript
99 lines
5.6 KiB
JavaScript
import React from 'react';
|
|
import { Button, Input, Result } from 'antd-mobile';
|
|
import { DownOutline, UpOutline, ReceiptOutline, BankcardOutline } from 'antd-mobile-icons';
|
|
import Styles from './web.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='error' title={t('notSetYet')} description={<Button color="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 className={Styles.btns}>
|
|
<Button className={Styles.btn} block onClick={restartAll}>
|
|
{t('common::action.cancel')}
|
|
</Button>
|
|
<Button className={Styles.btn} block color="primary" onClick={createWithdraw}>
|
|
{t('common::action.commit')}
|
|
</Button>
|
|
</div>
|
|
</div>);
|
|
}
|
|
if (account) {
|
|
return (<div className={Styles.main}>
|
|
<div className={Styles.label}>
|
|
{t('label')}
|
|
</div>
|
|
<div className={Styles.input}>
|
|
<span className={Styles.symbol}>{t('common::pay.symbol')}</span>
|
|
<Input autoFocus type="number" min={0} max={availYuan} placeholder={t('placeholder')} value={valueYuan ? `${valueYuan}` : undefined} onChange={(value) => setValue(value)} style={{ '--font-size': '28px' }} onEnterPress={() => createWithdrawData()}/>
|
|
</div>
|
|
<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>
|
|
<span className={Styles.value}>
|
|
{refundAmountYuan}
|
|
</span>
|
|
<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} fill="none" onClick={() => switchHelp('method')}>
|
|
<span className={showMethodHelp ? Styles.up : Styles.down} style={{ marginRight: 8 }}>
|
|
{showMethodHelp ? <UpOutline /> : <DownOutline />}
|
|
</span>
|
|
<span className={showMethodHelp ? Styles.up : Styles.down}>
|
|
{t('helps.label.method')}
|
|
</span>
|
|
</Button>
|
|
{showMethodHelp && <div className={Styles.content2}>{t('helps.content.method')}</div>}
|
|
<Button size="small" className={Styles.label2} fill="none" onClick={() => switchHelp('loss')}>
|
|
<span className={showLossHelp ? Styles.up : Styles.down} style={{ marginRight: 8 }}>
|
|
{showLossHelp ? <UpOutline /> : <DownOutline />}
|
|
</span>
|
|
<span className={showLossHelp ? Styles.up : Styles.down}>
|
|
{t('helps.label.loss')}
|
|
</span>
|
|
</Button>
|
|
{showLossHelp && <div className={Styles.content2}>{withdrawLossText}</div>}
|
|
</div>
|
|
<div className={Styles.gotoHistory} onClick={onGoToHistory}>
|
|
<ReceiptOutline scale={1.4}/>
|
|
{t('gotoHistory')}
|
|
</div>
|
|
<div className={Styles.gotoHistory} onClick={onGoToWaManage}>
|
|
<BankcardOutline scale={1.4}/>
|
|
{t('gotoWaManage')}
|
|
</div>
|
|
<div style={{ flex: 1 }}/>
|
|
<Button className={Styles.btn} block color="primary" disabled={!executale} onClick={() => createWithdrawData()}>
|
|
{t('common::confirm')}
|
|
</Button>
|
|
</div>);
|
|
}
|
|
}
|