76 lines
5.2 KiB
JavaScript
76 lines
5.2 KiB
JavaScript
import { Tag, Steps } from 'antd-mobile';
|
|
import Styles from './Detail.module.less';
|
|
import classNames from 'classnames';
|
|
export default function Detail(props) {
|
|
const { withdrawExactPrice, withdrawMethod, refundData, t, step, createAt, iState } = props;
|
|
return (<>
|
|
<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.scroll}>
|
|
<div className={Styles.step}>
|
|
<Steps current={step}>
|
|
<Steps.Step title={<span className={step >= 0 ? classNames(Styles.label, Styles.active) : Styles.label}>{t('steps.1.title')}</span>} description={<span className={step >= 0 ? classNames(Styles.label, Styles.active) : Styles.label}>{createAt}</span>} key="1"/>
|
|
<Steps.Step title={<span className={step >= 1 ? classNames(Styles.label, Styles.active) : Styles.label}>{t('steps.2.title')}</span>} description={<span className={step >= 1 ? classNames(Styles.label, Styles.active) : Styles.label}>{t(`method.v.${withdrawMethod}`)}</span>} key="2"/>
|
|
<Steps.Step title={<span className={step >= 2 ? classNames(Styles.label, iState === 'failed' ? Styles.failed : Styles.success) : Styles.label}>{iState === 'failed' ? t('steps.3.failed') : (iState === 'partiallySuccessful' ? t('steps.3.partiallySuccess') : t('steps.3.success'))}</span>} key="3"/>
|
|
</Steps>
|
|
</div>
|
|
{refundData.map((data, idx) => (<div className={Styles.refundItem} key={idx}>
|
|
{data.iState && <div className={Styles.item}>
|
|
<span className={Styles.label}>{t('refund:attr.iState')}</span>
|
|
<span className={Styles.value}>
|
|
<Tag color={data.iStateColor}>
|
|
{t(`refund:v.iState.${data.iState}`)}
|
|
</Tag>
|
|
</span>
|
|
</div>}
|
|
<div className={Styles.item}>
|
|
<span className={Styles.label}>{t('refund.label.0')}</span>
|
|
<span className={Styles.value}>
|
|
<span className={Styles.symbol}>{t('common::pay.symbol')}</span>
|
|
{data.priceYuan}
|
|
</span>
|
|
</div>
|
|
{iState !== 'failed' && <>
|
|
<div className={Styles.item}>
|
|
<span className={Styles.label}>{t('refund.label.1')}</span>
|
|
<span className={Styles.value}>
|
|
<span className={Styles.symbol}>{t('common::pay.symbol')}</span>
|
|
{data.finalYuan}
|
|
</span>
|
|
</div>
|
|
<div className={Styles.item}>
|
|
<span className={Styles.label}>{t('refund.label.2')}</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.3')}</span>
|
|
<span className={Styles.value}>{data.lossExp}</span>
|
|
</div>
|
|
<div className={Styles.item}>
|
|
<span className={Styles.label}>{t('refund.label.4')}</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>
|
|
</>);
|
|
}
|