oak-pay-business/es/components/deposit/new/web.js

36 lines
1.7 KiB
JavaScript

import React from 'react';
import { Form, Input } from 'antd-mobile';
import ChannelPicker from '../../pay/channelPicker2';
import Styles from './web.pc.module.less';
export default function render(props) {
const { depositMax, payChannels, price, channel, lossStr, lossReason, priceStr } = props.data;
const { onChooseChannel, onPriceChange, t } = props.methods;
if (payChannels) {
if (payChannels.length > 0) {
return (<Form layout="vertical">
<Form.Item label={<span>{t("deposit:attr.price")}</span>} extra={t('common::pay.symbol')}>
<Input autoFocus type='number' placeholder={t('placeholder', { max: depositMax })} value={priceStr} onChange={(value) => {
if (value === '' || value === null) {
onPriceChange(null);
return;
}
const v = parseInt(value);
if (!isNaN(v)) {
onPriceChange(v);
}
}}/>
</Form.Item>
{price > 0 && <Form.Item label={<span>{t('pay:attr.entity')}</span>}>
<ChannelPicker payChannels={payChannels} payChannel={channel} onPick={onChooseChannel}/>
</Form.Item>}
{!!lossStr && <Form.Item label={<span>{t("deposit:attr.loss")}:</span>} help={lossReason} extra={t('common::pay.symbol')}>
<Input disabled value={lossStr}/>
</Form.Item>}
</Form>);
}
}
return (<div className={Styles.container}>
{t('error.noChannel')}
</div>);
}