perf: pay process

labring · Jan 3, 2025 · 6583d13 · 6583d13
1 parent eb39237
commit 6583d13
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 27 deletions.
diff --git a/projects/app/src/components/support/wallet/NotSufficientModal/index.tsx b/projects/app/src/components/support/wallet/NotSufficientModal/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import MyModal from '@fastgpt/web/components/common/MyModal';
 import { useTranslation } from 'next-i18next';
 import { Box, Button, Flex, ModalBody, ModalFooter, useDisclosure } from '@chakra-ui/react';
@@ -10,6 +10,7 @@ import FormLabel from '@fastgpt/web/components/common/MyBox/FormLabel';
 import { useUserStore } from '@/web/support/user/useUserStore';
 import { standardSubLevelMap } from '@fastgpt/global/support/wallet/sub/constants';
 import { TeamErrEnum } from '@fastgpt/global/common/error/code/team';
+import { useMount } from 'ahooks';
 
 const NotSufficientModal = ({ type }: { type: NotSufficientModalType }) => {
   const { t } = useTranslation();
@@ -73,11 +74,9 @@ const RechargeModal = ({
   const { t } = useTranslation();
   const { teamPlanStatus, initTeamPlanStatus } = useUserStore();
 
-  useEffect(() => {
-    (async () => {
-      await initTeamPlanStatus();
-    })();
-  }, [initTeamPlanStatus]);
+  useMount(() => {
+    initTeamPlanStatus();
+  });
 
   const planName = useMemo(() => {
     if (!teamPlanStatus?.standard?.currentSubLevel) return '';

diff --git a/projects/app/src/components/support/wallet/QRCodePayModal.tsx b/projects/app/src/components/support/wallet/QRCodePayModal.tsx
@@ -1,5 +1,5 @@
 import MyModal from '@fastgpt/web/components/common/MyModal';
-import React, { useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { useTranslation } from 'next-i18next';
 import { Box, ModalBody } from '@chakra-ui/react';
 import { checkBalancePayResult } from '@/web/support/wallet/bill/api';
@@ -25,25 +25,25 @@ const QRCodePayModal = ({
   billId,
   onSuccess
 }: QRPayProps & { tip?: string; onSuccess?: () => any }) => {
-  const router = useRouter();
   const { t } = useTranslation();
   const { toast } = useToast();
   const dom = useRef<HTMLDivElement>(null);
 
+  const drawCode = useCallback(() => {
+    if (dom.current && window.QRCode && !dom.current.innerHTML) {
+      new window.QRCode(dom.current, {
+        text: codeUrl,
+        width: qrCodeSize,
+        height: qrCodeSize,
+        colorDark: '#000000',
+        colorLight: '#ffffff',
+        correctLevel: window.QRCode.CorrectLevel.H
+      });
+    }
+  }, [codeUrl]);
+
   useEffect(() => {
     let timer: NodeJS.Timeout;
-    const drawCode = () => {
-      if (dom.current && window.QRCode && !dom.current.innerHTML) {
-        new window.QRCode(dom.current, {
-          text: codeUrl,
-          width: qrCodeSize,
-          height: qrCodeSize,
-          colorDark: '#000000',
-          colorLight: '#ffffff',
-          correctLevel: window.QRCode.CorrectLevel.H
-        });
-      }
-    };
     const check = async () => {
       try {
         const res = await checkBalancePayResult(billId);
@@ -54,9 +54,6 @@ const QRCodePayModal = ({
               title: res,
               status: 'success'
             });
-            setTimeout(() => {
-              router.reload();
-            }, 1000);
             return;
           } catch (error) {
             toast({
@@ -75,11 +72,15 @@ const QRCodePayModal = ({
     check();
 
     return () => clearTimeout(timer);
-  }, [billId, onSuccess, toast]);
+  }, [billId, drawCode, onSuccess, toast]);
 
   return (
     <>
-      <Script src={getWebReqUrl('/js/qrcode.min.js')} strategy="lazyOnload"></Script>
+      <Script
+        src={getWebReqUrl('/js/qrcode.min.js')}
+        strategy="lazyOnload"
+        onLoad={drawCode}
+      ></Script>
 
       <MyModal isOpen title={t('common:user.Pay')} iconSrc="/imgs/modal/pay.svg">
         <ModalBody textAlign={'center'} pb={10} whiteSpace={'pre-wrap'}>

diff --git a/projects/app/src/pages/price/index.tsx b/projects/app/src/pages/price/index.tsx
@@ -13,16 +13,24 @@ import { getToken } from '@/web/support/user/auth';
 import { useTranslation } from 'next-i18next';
 import MyIcon from '@fastgpt/web/components/common/Icon';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
+import { useRouter } from 'next/router';
 
 const PriceBox = () => {
   const { userInfo } = useUserStore();
   const { t } = useTranslation();
   const { feConfigs } = useSystemStore();
+  const router = useRouter();
 
   const { data: teamSubPlan } = useQuery(['getTeamPlanStatus'], getTeamPlanStatus, {
     enabled: !!getToken() || !!userInfo
   });
 
+  const onPaySuccess = () => {
+    setTimeout(() => {
+      router.reload();
+    }, 1000);
+  };
+
   return (
     <Flex
       h={'100%'}
@@ -45,7 +53,7 @@ const PriceBox = () => {
             title: feConfigs?.systemTitle
           })}
         </Box>
-        <StandardPlan standardPlan={teamSubPlan?.standard} />
+        <StandardPlan standardPlan={teamSubPlan?.standard} onPaySuccess={onPaySuccess} />
         <HStack mt={8} color={'blue.700'} ml={8}>
           <MyIcon name={'infoRounded'} w={'1rem'} />
           <Box fontSize={'sm'} fontWeight={'500'}>
@@ -62,7 +70,7 @@ const PriceBox = () => {
         <Box mt={2} mb={8} color={'myGray.600'} fontSize={'md'}>
           {t('common:support.wallet.subscription.Extra plan tip')}
         </Box>
-        <ExtraPlan />
+        <ExtraPlan onPaySuccess={onPaySuccess} />
       </VStack>
 
       {/* points */}