57 lines
1.8 KiB
TypeScript
57 lines
1.8 KiB
TypeScript
import {Button, Space} from "@douyinfe/semi-ui";
|
|
import {useTranslation} from "react-i18next";
|
|
import {useSetState} from "ahooks";
|
|
import dayjs from "dayjs";
|
|
|
|
import styles from "@/pages/manual/manual.module.less";
|
|
import {BillDetailItems, useBillQRCode} from "@/components/bill/index.ts";
|
|
import {getPayUrl} from "@/components/bill/qr-code.tsx";
|
|
|
|
import './bill.less'
|
|
|
|
|
|
type BillDetailProps = {
|
|
onCancel: () => void;
|
|
bill: BillModel;
|
|
}
|
|
const BillDetail: BasicComponent<BillDetailProps> = ({bill, onCancel}) => {
|
|
const {t} = useTranslation();
|
|
const {exportQRCode, QRCode} = useBillQRCode()
|
|
const [state, setState] = useSetState<{ success: boolean }>({
|
|
success: false
|
|
})
|
|
|
|
const onCopy = () => {
|
|
const payUrl = getPayUrl(bill.id,'link');
|
|
navigator.clipboard.writeText(payUrl).then(() => {
|
|
setState({success: true})
|
|
setTimeout(() => {
|
|
setState({success: false})
|
|
}, 3000)
|
|
})
|
|
}
|
|
return <div className={'modal-bill-detail'}>
|
|
<div className={'modal-bill-info'}>
|
|
<div className={'bill-qr-code'}>
|
|
<div className={styles.QRCodeContainer}>
|
|
<QRCode size={160} className={styles.qrCode} bill={bill}/>
|
|
</div>
|
|
</div>
|
|
<div className={'bill-info-detail'}>
|
|
<div
|
|
className={'bill-exp-time text-center'}> {t('manual.exp_time')} {dayjs(bill.expiration_time).format('YYYY-MM-DD HH:mm')} </div>
|
|
<BillDetailItems bill={bill}/>
|
|
</div>
|
|
</div>
|
|
<div className="text-center semi-modal-footer">
|
|
<Space spacing={1}>
|
|
<Button
|
|
disabled={state.success} style={{width: 150}} theme={'borderless'}
|
|
onClick={onCopy} type={'tertiary'}>{state.success ? 'Copy Success' : t('base.copy-pay-url')}</Button>
|
|
<Button type="primary" onClick={onCancel}>{t('base.close')}</Button>
|
|
<Button theme={'solid'} type="primary" onClick={exportQRCode}>{t('bill.download-qr-code')}</Button>
|
|
</Space>
|
|
</div>
|
|
</div>
|
|
}
|
|
export default BillDetail |