87 lines
3.3 KiB
JavaScript
87 lines
3.3 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Button, Alert, Modal, Space, Select, Card } from 'antd';
|
|
import { CloseOutlined } from '@ant-design/icons';
|
|
import classnames from 'classnames';
|
|
import WechatPayConfigUpsert from './wechatPay';
|
|
import AccountConfigUpsert from './account';
|
|
import OfflineConfigUpsert from './offline';
|
|
import assert from 'assert';
|
|
import Styles from './web.pc.module.less';
|
|
const PayConfigComponentsDict = {
|
|
WECHAT_APP: WechatPayConfigUpsert,
|
|
WECHAT_H5: WechatPayConfigUpsert,
|
|
WECHAT_JS: WechatPayConfigUpsert,
|
|
WECHAT_MP: WechatPayConfigUpsert,
|
|
WECHAT_NATIVE: WechatPayConfigUpsert,
|
|
ACCOUNT: AccountConfigUpsert,
|
|
OFFLINE: OfflineConfigUpsert,
|
|
};
|
|
export function registerPayConfigComponent(channel, C) {
|
|
PayConfigComponentsDict[channel] = C;
|
|
}
|
|
export default function Upsert(props) {
|
|
const { serverUrl, config, channels, update, t } = props;
|
|
const [open, setOpen] = useState(false);
|
|
const AddButton = (<Button onClick={() => setOpen(true)} disabled={open}>
|
|
{t('common::action.add')}
|
|
</Button>);
|
|
let C = (<>
|
|
<Alert message={t('tips')} type="warning"/>
|
|
<div className={classnames(Styles.empty, Styles.container)}>
|
|
{AddButton}
|
|
</div>
|
|
</>);
|
|
const availableChannels = channels.filter((ele) => !config?.find(ele2 => ele2.channel === ele[1]));
|
|
if (config && config.length > 0) {
|
|
C = (<div className={Styles.container}>
|
|
<Space direction="vertical" size={16} style={{ width: '100%' }}>
|
|
{config.map((cf, idx) => {
|
|
const { channel } = cf;
|
|
const C = PayConfigComponentsDict[channel];
|
|
assert(C);
|
|
return (<Card title={channels.find(ele => ele[1] === channel)[0]} style={{
|
|
minWidth: 380,
|
|
}} key={idx} extra={<Button icon={<CloseOutlined />} type="text" onClick={() => {
|
|
config.splice(idx, 1);
|
|
update(config);
|
|
}}/>}>
|
|
<C extra={{ serverUrl }} config={cf} update={(cf2) => {
|
|
config.splice(idx, 1, {
|
|
channel,
|
|
...cf2,
|
|
});
|
|
update(config);
|
|
}} t={t}/>
|
|
</Card>);
|
|
})}
|
|
</Space>
|
|
{availableChannels.length > 0 && <div style={{ marginTop: 24, alignSelf: 'flex-end' }}>
|
|
{AddButton}
|
|
</div>}
|
|
</div>);
|
|
}
|
|
// 还没有配置config
|
|
return (<>
|
|
{C}
|
|
<Modal open={open} onCancel={() => setOpen(false)} title={t('pickChannel')} onOk={() => { }} footer={null} destroyOnClose={true}>
|
|
<Select style={{ width: 240 }} options={availableChannels.map(ele => ({
|
|
label: ele[0],
|
|
value: ele[1],
|
|
}))} onSelect={(value) => {
|
|
if (config) {
|
|
config.push({
|
|
channel: value,
|
|
});
|
|
update(config);
|
|
}
|
|
else {
|
|
update([{
|
|
channel: value,
|
|
}]);
|
|
}
|
|
setOpen(false);
|
|
}}/>
|
|
</Modal>
|
|
</>);
|
|
}
|