55 lines
2.6 KiB
JavaScript
55 lines
2.6 KiB
JavaScript
import React from 'react';
|
|
import { Radio, Space, Select, Flex } from 'antd';
|
|
import Styles from './web.pc.module.less';
|
|
import { PAY_CHANNEL_ACCOUNT_NAME, PAY_CHANNEL_OFFLINE_NAME, PAY_CHANNEL_WECHAT_APP_NAME, PAY_CHANNEL_WECHAT_H5_NAME, PAY_CHANNEL_WECHAT_JS_NAME, PAY_CHANNEL_WECHAT_MP_NAME, PAY_CHANNEL_WECHAT_NATIVE_NAME } from '../../../types/PayConfig';
|
|
import { WechatOutlined, WalletOutlined } from '@ant-design/icons';
|
|
const ChannelIconDict = {
|
|
[PAY_CHANNEL_ACCOUNT_NAME]: <WalletOutlined />,
|
|
[PAY_CHANNEL_OFFLINE_NAME]: <WalletOutlined />,
|
|
[PAY_CHANNEL_WECHAT_APP_NAME]: <WechatOutlined />,
|
|
[PAY_CHANNEL_WECHAT_JS_NAME]: <WechatOutlined />,
|
|
[PAY_CHANNEL_WECHAT_NATIVE_NAME]: <WechatOutlined />,
|
|
[PAY_CHANNEL_WECHAT_H5_NAME]: <WechatOutlined />,
|
|
[PAY_CHANNEL_WECHAT_MP_NAME]: <WechatOutlined />,
|
|
};
|
|
export default function Render(props) {
|
|
const { payConfig, offlineConfig, channel, onPick, meta, onSetMeta } = props.data;
|
|
const { t } = props.methods;
|
|
if (payConfig?.length) {
|
|
const Offline = offlineConfig && offlineConfig.options?.length && (<span className={Styles.span}>
|
|
<Select style={{ width: 140 }} value={meta?.option} options={offlineConfig.options.map(ele => ({
|
|
label: ele,
|
|
value: ele,
|
|
}))} onSelect={(value) => {
|
|
onSetMeta({
|
|
...meta,
|
|
option: value,
|
|
});
|
|
}}/>
|
|
</span>);
|
|
return (<Radio.Group onChange={({ target }) => {
|
|
onPick(target.value);
|
|
if (target.value === PAY_CHANNEL_OFFLINE_NAME && offlineConfig?.options?.length) {
|
|
onSetMeta({
|
|
option: offlineConfig.options[0],
|
|
});
|
|
}
|
|
else {
|
|
onSetMeta({});
|
|
}
|
|
}} value={channel}>
|
|
<Space direction="vertical">
|
|
{payConfig.map((v) => (<Radio value={v.channel} key={v.channel}>
|
|
<Flex gap="middle" className={Styles.option} align='center'>
|
|
<span className={Styles.span}>
|
|
{t(`payChannel::${v.channel}`)}
|
|
</span>
|
|
{v.channel === 'OFFLINE' && channel === 'OFFLINE' && Offline}
|
|
</Flex>
|
|
</Radio>))}
|
|
</Space>
|
|
</Radio.Group>);
|
|
}
|
|
return (<div>{t('noChannel')}</div>);
|
|
}
|