fix: 修复支付可能存在的缺陷

2023-03-22 12:20:27 +08:00
parent 984baf60f0
commit 5ec303610c
12 changed files with 266 additions and 93 deletions
--- a/src/pages/number/components/PayModal.tsx
+++ b/src/pages/number/components/PayModal.tsx
@@ -15,14 +15,14 @@ import {
 import { getPayCode, checkPayResult } from '@/api/user';
 import { useToast } from '@/hooks/useToast';
 import { useQuery } from '@tanstack/react-query';
-import { useUserStore } from '@/store/user';
+import { useRouter } from 'next/router';

 const PayModal = ({ onClose }: { onClose: () => void }) => {
+  const router = useRouter();
  const { toast } = useToast();
-  const { initUserInfo } = useUserStore();
  const [inputVal, setInputVal] = useState<number | ''>('');
  const [loading, setLoading] = useState(false);
-  const [orderId, setOrderId] = useState('');
+  const [payId, setPayId] = useState('');

  const handleClickPay = useCallback(async () => {
    if (!inputVal || inputVal <= 0 || isNaN(+inputVal)) return;
@@ -38,7 +38,7 @@ const PayModal = ({ onClose }: { onClose: () => void }) => {
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
      });
-      setOrderId(res.orderId);
+      setPayId(res.payId);
    } catch (error) {
      toast({
        title: '出现了一些意外...',
@@ -50,21 +50,20 @@ const PayModal = ({ onClose }: { onClose: () => void }) => {
  }, [inputVal, toast]);

  useQuery(
-    [orderId],
+    [payId],
    () => {
-      if (!orderId) return null;
-      return checkPayResult(orderId);
+      if (!payId) return null;
+      return checkPayResult(payId);
    },
    {
      refetchInterval: 2000,
      onSuccess(res) {
        if (!res) return;
-        onClose();
-        initUserInfo();
        toast({
          title: '充值成功',
          status: 'success'
        });
+        router.reload();
      }
    }
  );
@@ -74,17 +73,17 @@ const PayModal = ({ onClose }: { onClose: () => void }) => {
      <Modal
        isOpen={true}
        onClose={() => {
-          if (orderId) return;
+          if (payId) return;
          onClose();
        }}
      >
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>充值</ModalHeader>
-          {!orderId && <ModalCloseButton />}
+          {!payId && <ModalCloseButton />}

          <ModalBody>
-            {!orderId && (
+            {!payId && (
              <>
                <Grid gridTemplateColumns={'repeat(4,1fr)'} gridGap={5} mb={4}>
                  {[5, 10, 20, 50].map((item) => (
@@ -112,18 +111,23 @@ const PayModal = ({ onClose }: { onClose: () => void }) => {
            )}
            {/* 付费二维码 */}
            <Box textAlign={'center'}>
-              {orderId && <Box mb={3}>请微信扫码支付: {inputVal}元，请勿关闭页面</Box>}
+              {payId && <Box mb={3}>请微信扫码支付: {inputVal}元，请勿关闭页面</Box>}
              <Box id={'payQRCode'} display={'inline-block'}></Box>
            </Box>
          </ModalBody>

          <ModalFooter>
-            {!orderId && (
+            {!payId && (
              <>
                <Button colorScheme={'gray'} onClick={onClose}>
                  取消
                </Button>
-                <Button ml={3} isLoading={loading} onClick={handleClickPay}>
+                <Button
+                  ml={3}
+                  isLoading={loading}
+                  isDisabled={!inputVal || inputVal === 0}
+                  onClick={handleClickPay}
+                >
                  获取充值二维码
                </Button>
              </>
--- a/src/pages/number/setting.tsx
+++ b/src/pages/number/setting.tsx
@@ -13,12 +13,13 @@ import {
  TableContainer,
  Select,
  Input,
-  IconButton
+  IconButton,
+  useDisclosure
 } from '@chakra-ui/react';
 import { DeleteIcon } from '@chakra-ui/icons';
 import { useForm, useFieldArray } from 'react-hook-form';
 import { UserUpdateParams } from '@/types/user';
-import { putUserInfo, getUserBills } from '@/api/user';
+import { putUserInfo, getUserBills, getPayOrders, checkPayResult } from '@/api/user';
 import { useToast } from '@/hooks/useToast';
 import { useGlobalStore } from '@/store/global';
 import { useUserStore } from '@/store/user';
@@ -27,6 +28,10 @@ import { usePaging } from '@/hooks/usePaging';
 import type { UserBillType } from '@/types/user';
 import { useQuery } from '@tanstack/react-query';
 import dynamic from 'next/dynamic';
+import { PaySchema } from '@/types/mongoSchema';
+import dayjs from 'dayjs';
+import { formatPrice } from '@/utils/user';
+import WxConcat from '@/components/WxConcat';

 const PayModal = dynamic(() => import('./components/PayModal'));

@@ -37,6 +42,7 @@ const NumberSetting = () => {
    defaultValues: userInfo as UserType
  });
  const [showPay, setShowPay] = useState(false);
+  const { isOpen: isOpenWx, onOpen: onOpenWx, onClose: onCloseWx } = useDisclosure();
  const { toast } = useToast();
  const {
    fields: accounts,
@@ -50,6 +56,7 @@ const NumberSetting = () => {
    api: getUserBills,
    pageSize: 30
  });
+  const [payOrders, setPayOrders] = useState<PaySchema[]>([]);

  const onclickSave = useCallback(
    async (data: UserUpdateParams) => {
@@ -69,6 +76,31 @@ const NumberSetting = () => {

  useQuery(['init'], initUserInfo);

+  useQuery(['initPayOrder'], getPayOrders, {
+    onSuccess(res) {
+      setPayOrders(res);
+    }
+  });
+
+  const handleRefreshPayOrder = useCallback(
+    async (payId: string) => {
+      try {
+        setLoading(true);
+        await checkPayResult(payId);
+        const res = await getPayOrders();
+        setPayOrders(res);
+      } catch (error: any) {
+        toast({
+          title: error?.message,
+          status: 'warning'
+        });
+        console.log(error);
+      }
+      setLoading(false);
+    },
+    [setLoading, toast]
+  );
+
  return (
    <>
      <Card px={6} py={4}>
@@ -161,11 +193,55 @@ const NumberSetting = () => {
          </Table>
        </TableContainer>
      </Card>
+      <Card mt={6} px={6} py={4}>
+        <Flex alignItems={'flex-end'}>
+          <Box fontSize={'xl'} fontWeight={'bold'}>
+            充值记录
+          </Box>
+          <Button onClick={onOpenWx} size={'xs'} ml={4} variant={'outline'}>
+            异常问题，wx联系
+          </Button>
+        </Flex>
+        <TableContainer maxH={'400px'} overflowY={'auto'}>
+          <Table>
+            <Thead>
+              <Tr>
+                <Th>订单号</Th>
+                <Th>时间</Th>
+                <Th>金额</Th>
+                <Th>消费</Th>
+                <Th></Th>
+              </Tr>
+            </Thead>
+            <Tbody fontSize={'sm'}>
+              {payOrders.map((item) => (
+                <Tr key={item._id}>
+                  <Td>{item.orderId}</Td>
+                  <Td>
+                    {item.createTime ? dayjs(item.createTime).format('YYYY/MM/DD HH:mm:ss') : '-'}
+                  </Td>
+                  <Td whiteSpace="pre-wrap" wordBreak={'break-all'}>
+                    {formatPrice(item.price)}元
+                  </Td>
+                  <Td>{item.status}</Td>
+                  <Td>
+                    {item.status === 'NOTPAY' && (
+                      <Button onClick={() => handleRefreshPayOrder(item._id)} size={'sm'}>
+                        更新
+                      </Button>
+                    )}
+                  </Td>
+                </Tr>
+              ))}
+            </Tbody>
+          </Table>
+        </TableContainer>
+      </Card>
      <Card mt={6} px={6} py={4}>
        <Box fontSize={'xl'} fontWeight={'bold'}>
-          使用记录
+          使用记录(最新30条)
        </Box>
-        <TableContainer>
+        <TableContainer maxH={'400px'} overflowY={'auto'}>
          <Table>
            <Thead>
              <Tr>
@@ -177,8 +253,8 @@ const NumberSetting = () => {
            <Tbody fontSize={'sm'}>
              {bills.map((item) => (
                <Tr key={item.id}>
-                  <Td minW={'200px'}>{item.time}</Td>
-                  <Td minW={'200px'} whiteSpace="pre-wrap" wordBreak={'break-all'}>
+                  <Td>{item.time}</Td>
+                  <Td whiteSpace="pre-wrap" wordBreak={'break-all'}>
                    {item.textLen}
                  </Td>
                  <Td>{item.price}元</Td>
@@ -189,6 +265,8 @@ const NumberSetting = () => {
        </TableContainer>
      </Card>
      {showPay && <PayModal onClose={() => setShowPay(false)} />}
+      {/* wx 联系 */}
+      {isOpenWx && <WxConcat onClose={onCloseWx} />}
    </>
  );
 };