82 lines
2.2 KiB
TypeScript
82 lines
2.2 KiB
TypeScript
import MyModal from '@fastgpt/web/components/common/MyModal';
|
|
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
|
import { useTranslation } from 'next-i18next';
|
|
import { Box, ModalBody } from '@chakra-ui/react';
|
|
import { checkBalancePayResult } from '@/web/support/wallet/bill/api';
|
|
import { useToast } from '@fastgpt/web/hooks/useToast';
|
|
import LightTip from '@fastgpt/web/components/common/LightTip';
|
|
import QRCode from 'qrcode';
|
|
import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
|
|
|
|
export type QRPayProps = {
|
|
readPrice: number;
|
|
codeUrl: string;
|
|
billId: string;
|
|
};
|
|
|
|
const qrCodeSize = 168;
|
|
|
|
const QRCodePayModal = ({
|
|
tip,
|
|
readPrice,
|
|
codeUrl,
|
|
billId,
|
|
onSuccess
|
|
}: QRPayProps & { tip?: string; onSuccess?: () => any }) => {
|
|
const { t } = useTranslation();
|
|
const { toast } = useToast();
|
|
const canvasRef = useRef<HTMLDivElement>(null);
|
|
|
|
const drawCode = useCallback(() => {
|
|
const canvas = document.createElement('canvas');
|
|
QRCode.toCanvas(canvas, codeUrl, {
|
|
width: qrCodeSize,
|
|
margin: 0,
|
|
color: {
|
|
dark: '#000000',
|
|
light: '#ffffff'
|
|
}
|
|
})
|
|
.then(() => {
|
|
if (canvasRef.current) {
|
|
canvasRef.current.innerHTML = '';
|
|
canvasRef.current.appendChild(canvas);
|
|
} else {
|
|
drawCode();
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
console.error('QRCode generation error:', err);
|
|
});
|
|
}, [codeUrl]);
|
|
|
|
useEffect(() => {
|
|
drawCode();
|
|
}, [drawCode]);
|
|
|
|
useRequest2(() => checkBalancePayResult(billId), {
|
|
manual: false,
|
|
pollingInterval: 2000,
|
|
onSuccess: (res) => {
|
|
if (res) {
|
|
onSuccess?.();
|
|
}
|
|
},
|
|
errorToast: ''
|
|
});
|
|
|
|
return (
|
|
<MyModal isOpen title={t('common:user.Pay')} iconSrc="/imgs/modal/pay.svg">
|
|
<ModalBody textAlign={'center'} pb={10} whiteSpace={'pre-wrap'}>
|
|
{tip && <LightTip text={tip} mb={8} textAlign={'left'} />}
|
|
<Box ref={canvasRef} display={'inline-block'} h={`${qrCodeSize}px`}></Box>
|
|
<Box mt={5} textAlign={'center'}>
|
|
{t('common:pay.wechat', { price: readPrice })}
|
|
</Box>
|
|
</ModalBody>
|
|
</MyModal>
|
|
);
|
|
};
|
|
|
|
export default React.memo(QRCodePayModal);
|