106 lines
5.8 KiB
JavaScript
106 lines
5.8 KiB
JavaScript
import { Steps, Tag } from 'antd';
|
|
import { CloseCircleOutlined, FileAddOutlined, FieldTimeOutlined, CheckCircleOutlined } from '@ant-design/icons';
|
|
import Styles from './web.pc.module.less';
|
|
import classNames from 'classnames';
|
|
export default function render(props) {
|
|
const { withdrawExactPrice, itemData, step, createAt, iState } = props.data;
|
|
const { t } = props.methods;
|
|
const H = (<>
|
|
<div className={Styles.header}>
|
|
<div className={Styles.label}>
|
|
{['successful', 'partiallySuccessful', 'failed'].includes(iState) ? t('header.label.end') : t('header.label.ing')}
|
|
</div>
|
|
<div className={Styles.value}>
|
|
<span className={Styles.symbol}>{t('common::pay.symbol')}</span>
|
|
<span>{withdrawExactPrice}</span>
|
|
</div>
|
|
</div>
|
|
<div className={Styles.step}>
|
|
<Steps labelPlacement="vertical" current={step} items={[
|
|
{
|
|
title: t('steps.first.title'),
|
|
icon: <FileAddOutlined />,
|
|
description: createAt,
|
|
},
|
|
{
|
|
title: t('steps.second.title'),
|
|
icon: <FieldTimeOutlined />,
|
|
},
|
|
{
|
|
title: step === 2
|
|
? (iState === 'failed'
|
|
? <span style={{ color: 'red' }}>{t('steps.3.failed')}</span>
|
|
: (iState === 'partiallySuccessful'
|
|
? <span style={{ color: 'green' }}>{t('steps.third.partiallySuccess')}</span>
|
|
: <span style={{ color: 'green' }}>{t('steps.third.success')}</span>))
|
|
: t('steps.third.success'),
|
|
icon: step === 2 ?
|
|
(iState === 'failed' ? <CloseCircleOutlined style={{ color: 'red' }}/> : <CheckCircleOutlined style={{ color: 'green' }}/>)
|
|
: <CheckCircleOutlined />
|
|
}
|
|
]}/>
|
|
</div>
|
|
</>);
|
|
return (<>
|
|
{H}
|
|
{itemData && <div className={Styles.refunds}>
|
|
{itemData.map((data, idx) => (<div className={Styles.refundItem} key={idx}>
|
|
<div className={Styles.header2}>
|
|
<Tag>
|
|
{data.type}
|
|
</Tag>
|
|
</div>
|
|
{data.iState && <div className={Styles.item}>
|
|
<span className={Styles.label}>{t('refund:attr.iState')}</span>
|
|
<span className={Styles.value}>
|
|
<Tag color={data.iStateColor} style={{
|
|
marginInlineEnd: 0,
|
|
}}>
|
|
{t(`refund:v.iState.${data.iState}`)}
|
|
</Tag>
|
|
</span>
|
|
</div>}
|
|
<div className={Styles.item}>
|
|
<span className={Styles.label}>{t('refund.label.zero')}</span>
|
|
<span className={Styles.value}>
|
|
<span className={Styles.symbol}>{t('common::pay.symbol')}</span>
|
|
{data.priceYuan}
|
|
</span>
|
|
</div>
|
|
<div className={Styles.item}>
|
|
<span className={Styles.label}>{t('refund.label.one')}</span>
|
|
<span className={Styles.value}>
|
|
<span className={Styles.symbol}>{t('common::pay.symbol')}</span>
|
|
{data.finalYuan}
|
|
</span>
|
|
</div>
|
|
{data.iState !== 'failed' && <>
|
|
<div className={Styles.item}>
|
|
<span className={Styles.label}>{t('refund.label.two')}</span>
|
|
<span className={Styles.value}>
|
|
<span className={Styles.symbol}>{t('common::pay.symbol')}</span>
|
|
{data.lossYuan}
|
|
</span>
|
|
</div>
|
|
<div className={Styles.item}>
|
|
<span className={Styles.label}>{t('refund.label.three')}</span>
|
|
<span className={Styles.value}>{data.lossExp}</span>
|
|
</div>
|
|
<div className={Styles.item}>
|
|
<span className={Styles.label}>{t('refund.label.four')}</span>
|
|
<span className={Styles.value}>{data.channel}</span>
|
|
</div>
|
|
</>}
|
|
{!!data.reason && <div className={Styles.item}>
|
|
<span className={Styles.label}>{t('refund.label.reason')}</span>
|
|
<span className={classNames(Styles.value, Styles.reason)}>{data.reason}</span>
|
|
</div>}
|
|
{!!data.updateAt && <div className={Styles.item}>
|
|
<span className={Styles.label}>{t('refund.label.updateAt')}</span>
|
|
<span className={Styles.value}>{data.updateAt}</span>
|
|
</div>}
|
|
</div>))}
|
|
</div>}
|
|
</>);
|
|
}
|