155 lines
6.6 KiB
JavaScript
155 lines
6.6 KiB
JavaScript
import React, { useState } from 'react';
|
||
import { Tag, Modal, Alert, Divider, Button } from 'antd';
|
||
import Styles from './web.pc.module.less';
|
||
import ListPro from 'oak-frontend-base/es/components/listPro';
|
||
import { RenderOffline } from '../detail/web.pc';
|
||
import { generateNewId, generateNewIdAsync } from 'oak-domain/lib/utils/uuid';
|
||
export default function Render(props) {
|
||
const { pays, offlines } = props.data;
|
||
const { t, execute, updateItem, setMessage, clean } = props.methods;
|
||
const [spId, setSpId] = useState('');
|
||
if (pays) {
|
||
const spRow = (spId && pays.find(ele => ele.id === spId));
|
||
return (<>
|
||
<ListPro data={pays} entity="pay" attributes={[
|
||
{
|
||
path: 'price',
|
||
label: t('pay:attr.price'),
|
||
span: 1,
|
||
},
|
||
'iState',
|
||
{
|
||
path: '$$createAt$$',
|
||
label: t('common::$$createAt$$'),
|
||
span: 2,
|
||
},
|
||
{
|
||
path: 'orderId',
|
||
label: t('label.source'),
|
||
span: 1,
|
||
render(row) {
|
||
const { orderId } = row;
|
||
return (<Tag bordered={false} color={orderId ? 'processing' : 'success'}>
|
||
{orderId ? t('source.order') : t('source.deposit')}
|
||
</Tag>);
|
||
}
|
||
},
|
||
{
|
||
path: 'creatorName',
|
||
label: t('label.cn'),
|
||
span: 1,
|
||
render: (row) => {
|
||
const { creatorName, creatorMobile } = row;
|
||
return (<div>
|
||
<div>{creatorName}</div>
|
||
<div>{creatorMobile}</div>
|
||
</div>);
|
||
}
|
||
},
|
||
{
|
||
path: 'phantom3',
|
||
span: 1,
|
||
label: t('label.code'),
|
||
},
|
||
{
|
||
path: 'channel',
|
||
span: 1,
|
||
label: t('pay:attr.entity'),
|
||
render: (row) => {
|
||
const { entity } = row;
|
||
const colorDict = {
|
||
'account': 'blue',
|
||
'offlineAccount': 'red',
|
||
'wpProduct': 'green',
|
||
};
|
||
return (<div>
|
||
<Tag color={colorDict[entity] || 'gray'}>{t(`payChannel::${row.entity}`)}</Tag>
|
||
{entity === 'offlineAccount' && (<div className={Styles.entityDetail}>
|
||
{t(`offlineAccount:v.type.${row.offlineAccount.type}`)}
|
||
</div>)}
|
||
{entity === 'wpProduct' && <div className={Styles.entityDetail}>
|
||
{t(`wpProduct:v.type.${row.wpProduct.type}`)}
|
||
</div>}
|
||
</div>);
|
||
}
|
||
}
|
||
]} onAction={(row, action) => {
|
||
if (action === 'close') {
|
||
Modal.confirm({
|
||
title: t('cc.title'),
|
||
content: t('cc.content'),
|
||
onOk() {
|
||
return execute(undefined, undefined, undefined, [
|
||
{
|
||
entity: 'pay',
|
||
operation: {
|
||
id: generateNewId(),
|
||
action: 'close',
|
||
data: {},
|
||
filter: {
|
||
id: row.id,
|
||
},
|
||
},
|
||
}
|
||
]);
|
||
},
|
||
okText: t('common::confirm'),
|
||
cancelText: t('common::action.cancel')
|
||
});
|
||
}
|
||
else if (action === 'succeedPaying') {
|
||
const { entity } = row;
|
||
if (entity !== 'offlineAccount') {
|
||
// 以后可能也有手动成功offline以外的pay的情况，先封掉
|
||
setMessage({
|
||
title: t('spFail.title'),
|
||
content: t('spFail.content'),
|
||
type: 'error',
|
||
});
|
||
}
|
||
else {
|
||
setSpId(row.id);
|
||
}
|
||
}
|
||
}}/>
|
||
<Modal title={t('csp.title')} width={600} open={!!spId} footer={null} onCancel={() => {
|
||
clean();
|
||
setSpId('');
|
||
}}>
|
||
<div className={Styles.spCon}>
|
||
<Alert type="warning" message={t('csp.tips')}/>
|
||
<Divider style={{ width: '80%', alignSelf: 'flex-end' }}/>
|
||
<RenderOffline pay={spRow} t={t} offlines={offlines} offline={offlines.find(ele => ele.id === spRow.entityId)} updateOfflineId={(entityId) => updateItem({
|
||
entity: 'offlineAccount',
|
||
entityId
|
||
}, spId)}/>
|
||
<div className={Styles.btn}>
|
||
<Button type="primary" onClick={async () => {
|
||
const spRow = pays.find(ele => ele.id === spId);
|
||
await execute(undefined, undefined, undefined, [
|
||
{
|
||
entity: 'pay',
|
||
operation: {
|
||
id: await generateNewIdAsync(),
|
||
action: 'succeedPaying',
|
||
data: {
|
||
paid: spRow.price,
|
||
},
|
||
filter: {
|
||
id: spId,
|
||
},
|
||
},
|
||
}
|
||
]);
|
||
setSpId('');
|
||
}}>
|
||
{t('common::confirm')}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</Modal>
|
||
</>);
|
||
}
|
||
return null;
|
||
}
|