feat: 增加充值功能

src/pages/number/components/PayModal.tsx

@@ -0,0 +1,138 @@
+import React, { useState, useCallback } from 'react';
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  ModalCloseButton,
+  Button,
+  Input,
+  Box,
+  Grid
+} from '@chakra-ui/react';
+import { getPayCode, checkPayResult } from '@/api/user';
+import { useToast } from '@/hooks/useToast';
+import { useQuery } from '@tanstack/react-query';
+import { useUserStore } from '@/store/user';
+
+const PayModal = ({ onClose }: { onClose: () => void }) => {
+  const { toast } = useToast();
+  const { initUserInfo } = useUserStore();
+  const [inputVal, setInputVal] = useState<number | ''>('');
+  const [loading, setLoading] = useState(false);
+  const [orderId, setOrderId] = useState('');
+
+  const handleClickPay = useCallback(async () => {
+    if (!inputVal || inputVal <= 0 || isNaN(+inputVal)) return;
+    setLoading(true);
+    try {
+      // 获取支付二维码
+      const res = await getPayCode(inputVal);
+      new QRCode(document.getElementById('payQRCode'), {
+        text: res.codeUrl,
+        width: 128,
+        height: 128,
+        colorDark: '#000000',
+        colorLight: '#ffffff',
+        correctLevel: QRCode.CorrectLevel.H
+      });
+      setOrderId(res.orderId);
+    } catch (error) {
+      toast({
+        title: '出现了一些意外...',
+        status: 'error'
+      });
+      console.log(error);
+    }
+    setLoading(false);
+  }, [inputVal, toast]);
+
+  useQuery(
+    [orderId],
+    () => {
+      if (!orderId) return null;
+      return checkPayResult(orderId);
+    },
+    {
+      refetchInterval: 2000,
+      onSuccess(res) {
+        if (!res) return;
+        onClose();
+        initUserInfo();
+        toast({
+          title: '充值成功',
+          status: 'success'
+        });
+      }
+    }
+  );
+
+  return (
+    <>
+      <Modal
+        isOpen={true}
+        onClose={() => {
+          if (orderId) return;
+          onClose();
+        }}
+      >
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>充值</ModalHeader>
+          {!orderId && <ModalCloseButton />}
+
+          <ModalBody>
+            {!orderId && (
+              <>
+                <Grid gridTemplateColumns={'repeat(4,1fr)'} gridGap={5} mb={4}>
+                  {[5, 10, 20, 50].map((item) => (
+                    <Button
+                      key={item}
+                      variant={item === inputVal ? 'solid' : 'outline'}
+                      onClick={() => setInputVal(item)}
+                    >
+                      {item}元
+                    </Button>
+                  ))}
+                </Grid>
+                <Box>
+                  <Input
+                    value={inputVal}
+                    type={'number'}
+                    step={1}
+                    placeholder={'其他金额，请取整数'}
+                    onChange={(e) => {
+                      setInputVal(Math.floor(+e.target.value));
+                    }}
+                  ></Input>
+                </Box>
+              </>
+            )}
+            {/* 付费二维码 */}
+            <Box textAlign={'center'}>
+              {orderId && <Box mb={3}>请微信扫码支付: {inputVal}元，请勿关闭页面</Box>}
+              <Box id={'payQRCode'} display={'inline-block'}></Box>
+            </Box>
+          </ModalBody>
+
+          <ModalFooter>
+            {!orderId && (
+              <>
+                <Button colorScheme={'gray'} onClick={onClose}>
+                  取消
+                </Button>
+                <Button ml={3} isLoading={loading} onClick={handleClickPay}>
+                  获取充值二维码
+                </Button>
+              </>
+            )}
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
+
+export default PayModal;

src/pages/number/setting.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 import {
   Card,
   Box,
@@ -25,13 +25,18 @@ import { useUserStore } from '@/store/user';
 import { UserType } from '@/types/user';
 import { usePaging } from '@/hooks/usePaging';
 import type { UserBillType } from '@/types/user';
+import { useQuery } from '@tanstack/react-query';
+import dynamic from 'next/dynamic';
+
+const PayModal = dynamic(() => import('./components/PayModal'));
 
 const NumberSetting = () => {
-  const { userInfo, updateUserInfo } = useUserStore();
+  const { userInfo, updateUserInfo, initUserInfo } = useUserStore();
   const { setLoading } = useGlobalStore();
   const { register, handleSubmit, control } = useForm<UserUpdateParams>({
     defaultValues: userInfo as UserType
   });
+  const [showPay, setShowPay] = useState(false);
   const { toast } = useToast();
   const {
     fields: accounts,
@@ -43,9 +48,9 @@ const NumberSetting = () => {
   });
   const { setPageNum, data: bills } = usePaging<UserBillType>({
     api: getUserBills,
-    pageSize: 20
+    pageSize: 30
   });
-  console.log(bills);
+
   const onclickSave = useCallback(
     async (data: UserUpdateParams) => {
       setLoading(true);
@@ -62,6 +67,8 @@ const NumberSetting = () => {
     [setLoading, toast, updateUserInfo]
   );
 
+  useQuery(['init'], initUserInfo);
+
   return (
     <>
       <Card px={6} py={4}>
@@ -80,9 +87,9 @@ const NumberSetting = () => {
             <Box>
               <strong>{userInfo?.balance}</strong> 元
             </Box>
-            {/* <Button size={'sm'} w={'80px'} ml={5}>
+            <Button size={'sm'} w={'80px'} ml={5} onClick={() => setShowPay(true)}>
               充值
-            </Button> */}
+            </Button>
           </Flex>
         </Box>
       </Card>
@@ -181,6 +188,7 @@ const NumberSetting = () => {
           </Table>
         </TableContainer>
       </Card>
+      {showPay && <PayModal onClose={() => setShowPay(false)} />}
     </>
   );
 };