57 lines
2.7 KiB
JavaScript
57 lines
2.7 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Radio, Space, Picker, Button } from 'antd-mobile';
|
|
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';
|
|
import Styles from './web.mobile.module.less';
|
|
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;
|
|
const [offlinePickerVisible, setOpVisible] = useState(false);
|
|
const Offline = offlineConfig && offlineConfig.options?.length && (<>
|
|
<Button onClick={() => setOpVisible(true)}>
|
|
{meta?.option || t('common::change')}
|
|
</Button>
|
|
<Picker value={meta?.option} columns={[offlineConfig.options.map(ele => ({
|
|
label: ele,
|
|
value: ele,
|
|
}))]} visible={offlinePickerVisible} onConfirm={(value) => {
|
|
onSetMeta({
|
|
...meta,
|
|
option: value[0],
|
|
});
|
|
setOpVisible(false);
|
|
}} onCancel={() => setOpVisible(false)}/>
|
|
</>);
|
|
return (<Radio.Group onChange={(value) => {
|
|
onPick(value);
|
|
if (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}>
|
|
<Space direction="horizontal" align='center'>
|
|
<span className={Styles.span}>
|
|
{t(`payChannel::${v.channel}`)}
|
|
</span>
|
|
{v.channel === PAY_CHANNEL_OFFLINE_NAME && channel === PAY_CHANNEL_OFFLINE_NAME && Offline}
|
|
</Space>
|
|
</Radio>))}
|
|
</Space>
|
|
</Radio.Group>);
|
|
}
|