62 lines
3.1 KiB
JavaScript
62 lines
3.1 KiB
JavaScript
import React from 'react';
|
|
import { ToYuan, ToCent } from 'oak-domain/lib/utils/money';
|
|
import Styles from './web.pc.module.less';
|
|
import PayChannelPicker from '../../pay/channelPicker2';
|
|
import { Divider, Checkbox, InputNumber, Flex, Result } from 'antd';
|
|
import Info from './info';
|
|
function RenderPayChannel(props) {
|
|
const { price, payChannels, t, channel, meta, onPick, } = props;
|
|
return (<div className={Styles.pc1}>
|
|
<div className={Styles.content}>
|
|
<div>
|
|
{t('choose', { price: ToYuan(price) })}
|
|
</div>
|
|
<Divider />
|
|
<PayChannelPicker payChannels={payChannels} payChannel={channel} onPick={onPick}/>
|
|
</div>
|
|
</div>);
|
|
}
|
|
function RenderAccountPay(props) {
|
|
const { max, t, accountPrice, setAccountPrice, useAccount, switchUseAccount, accountAvail, accountTips } = props;
|
|
return (<div className={Styles.pc1}>
|
|
<div className={Styles.content}>
|
|
<Checkbox checked={useAccount} onChange={() => switchUseAccount()}>
|
|
{t('useAccount')}
|
|
</Checkbox>
|
|
{useAccount && (<>
|
|
<Divider />
|
|
<Flex align='baseline' vertical>
|
|
<InputNumber max={ToYuan(max)} addonAfter="￥" value={typeof accountPrice === 'number' ? ToYuan(accountPrice) : null} onChange={(v) => {
|
|
if (typeof v === 'number') {
|
|
setAccountPrice(Math.floor(ToCent(v)));
|
|
}
|
|
}}/>
|
|
<div className={Styles.tips}>{accountTips || t('accountMax', { max: ToYuan(accountAvail) })}</div>
|
|
</Flex>
|
|
</>)}
|
|
</div>
|
|
</div>);
|
|
}
|
|
export default function Render(props) {
|
|
const { accountId, accountAvailMax, legal, accountPrice, useAccount, order, activePay, payChannels, channel, meta, rest, accountTips } = props.data;
|
|
const { t, setAccountPrice, onPickChannel, onSetChannelMeta, switchUseAccount } = props.methods;
|
|
if (order) {
|
|
if (activePay) {
|
|
return (<Result status="warning" title={t('paying')}/>);
|
|
}
|
|
if (!legal) {
|
|
return (<Result status="warning" title={t('illegalState', { state: t(`order:v.iState.${order.iState}`) })}/>);
|
|
}
|
|
return (<div className={Styles.container}>
|
|
<Info t={t} price={ToYuan(order.price)}/>
|
|
{(accountId && accountAvailMax) ? <div className={Styles.ctrl}>
|
|
<RenderAccountPay max={Math.min(accountAvailMax, rest + accountPrice)} t={t} setAccountPrice={setAccountPrice} useAccount={useAccount} switchUseAccount={switchUseAccount} accountPrice={accountPrice} accountAvail={accountAvailMax} accountTips={accountTips}/>
|
|
</div> : null}
|
|
{!!(rest && rest > 0) && <div className={Styles.ctrl}>
|
|
<RenderPayChannel price={rest} t={t} payChannels={payChannels} channel={channel} meta={meta} onPick={onPickChannel}/>
|
|
</div>}
|
|
</div>);
|
|
}
|
|
return null;
|
|
}
|