68 lines
3.1 KiB
JavaScript
68 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/channelPicker';
|
|
import { Divider, Checkbox, InputNumber, Flex, Result } from 'antd';
|
|
import Info from './info';
|
|
function RenderPayChannel(props) {
|
|
const { price, payConfig, t, channel, meta, onPick, onSetMeta } = props;
|
|
return (<div className={Styles.pc1}>
|
|
<div className={Styles.content}>
|
|
<div>
|
|
{t('choose', { price: ToYuan(price) })}
|
|
</div>
|
|
<Divider />
|
|
{/* <PayChannelPicker
|
|
payConfig={payConfig}
|
|
channel={channel}
|
|
meta={meta}
|
|
onPick={onPick}
|
|
onSetMeta={onSetMeta}
|
|
/> */}
|
|
</div>
|
|
</div>);
|
|
}
|
|
function RenderAccountPay(props) {
|
|
const { max, t, accountPrice, setAccountPrice, useAccount, switchUseAccount, accountAvail } = props;
|
|
return (<div className={Styles.pc1}>
|
|
<div className={Styles.content}>
|
|
<Checkbox checked={useAccount} onChange={() => switchUseAccount()}>
|
|
{t('useAccount')}
|
|
</Checkbox>
|
|
{useAccount && (<>
|
|
<Divider />
|
|
<Flex align='baseline'>
|
|
<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}>{t('accountMax', { max: ToYuan(accountAvail) })}</div>
|
|
</Flex>
|
|
</>)}
|
|
</div>
|
|
</div>);
|
|
}
|
|
export default function Render(props) {
|
|
const { accountId, accountAvailMax, legal, accountPrice, useAccount, order, activePay, payConfig, channel, meta, rest } = 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}/>
|
|
</div>}
|
|
{!!(rest && rest > 0) && <div className={Styles.ctrl}>
|
|
<RenderPayChannel payConfig={payConfig} price={rest} t={t} channel={channel} meta={meta} onPick={onPickChannel} onSetMeta={onSetChannelMeta}/>
|
|
</div>}
|
|
</div>);
|
|
}
|
|
return null;
|
|
}
|