feat: 好友邀请

src/pages/promotion/index.tsx

@@ -0,0 +1,179 @@
+import React, { useState } from 'react';
+import Link from 'next/link';
+import {
+  Card,
+  Box,
+  Button,
+  Flex,
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+  TableContainer,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalCloseButton,
+  useColorModeValue,
+  ModalFooter,
+  useDisclosure
+} from '@chakra-ui/react';
+import { useQuery } from '@tanstack/react-query';
+import { useLoading } from '@/hooks/useLoading';
+import dayjs from 'dayjs';
+import { useCopyData } from '@/utils/tools';
+import { useUserStore } from '@/store/user';
+import MyIcon from '@/components/Icon';
+import { getPromotionRecords } from '@/api/user';
+import { usePagination } from '@/hooks/usePagination';
+import { PromotionRecordType } from '@/api/response/user';
+import { PromotionTypeMap } from '@/constants/user';
+import { getPromotionInitData } from '@/api/user';
+import Image from 'next/image';
+
+const OpenApi = () => {
+  const { Loading } = useLoading();
+  const { userInfo, initUserInfo } = useUserStore();
+  const { copyData } = useCopyData();
+  const {
+    isOpen: isOpenWithdraw,
+    onClose: onCloseWithdraw,
+    onOpen: onOpenWithdraw
+  } = useDisclosure();
+
+  useQuery(['init'], initUserInfo);
+  const { data: { invitedAmount = 0, historyAmount = 0, residueAmount = 0 } = {} } = useQuery(
+    ['getInvitedCountAmount'],
+    getPromotionInitData
+  );
+
+  const {
+    data: promotionRecords,
+    isLoading,
+    Pagination,
+    total
+  } = usePagination<PromotionRecordType>({
+    api: getPromotionRecords
+  });
+
+  return (
+    <>
+      <Card px={6} py={4} position={'relative'}>
+        <Box fontSize={'xl'} fontWeight={'bold'}>
+          我的邀请
+        </Box>
+        <Box my={2} color={'blackAlpha.600'} fontSize={'sm'}>
+          你可以通过邀请链接邀请好友注册 FastGpt 账号。好友在 FastGpt
+          平台的每次充值，你都会获得一定比例的佣金。
+        </Box>
+        <Flex my={2} alignItems={'center'}>
+          <Box>当前剩余佣金: ￥</Box>
+          <Box mx={2} fontSize={'xl'} lineHeight={1} fontWeight={'bold'}>
+            {residueAmount}
+          </Box>
+        </Flex>
+        <Flex>
+          <Button
+            mr={4}
+            variant={'outline'}
+            onClick={() => {
+              copyData(`${location.origin}?inviterId=${userInfo?._id}`, '已复制邀请链接');
+            }}
+          >
+            复制邀请链接
+          </Button>
+          <Button
+            leftIcon={<MyIcon name="withdraw" w={'22px'} />}
+            px={4}
+            title={residueAmount < 50 ? '最低提现额度为50元' : ''}
+            isDisabled={residueAmount < 50}
+            onClick={onOpenWithdraw}
+          >
+            提现
+          </Button>
+        </Flex>
+      </Card>
+      <Card mt={4} px={6} py={4} position={'relative'}>
+        <Flex alignItems={'center'} mb={3} justifyContent={['space-between', 'flex-start']}>
+          <Box w={'120px'}>佣金比例</Box>
+          <Box fontWeight={'bold'}>{userInfo?.promotion.rate || 15}%</Box>
+        </Flex>
+        <Flex alignItems={'center'} mb={3} justifyContent={['space-between', 'flex-start']}>
+          <Box w={'120px'}>已注册用户数</Box>
+          <Box fontWeight={'bold'}>{invitedAmount}人</Box>
+        </Flex>
+        <Flex alignItems={'center'} justifyContent={['space-between', 'flex-start']}>
+          <Box w={'120px'}>累计佣金</Box>
+          <Box fontWeight={'bold'}>￥ {historyAmount}</Box>
+        </Flex>
+      </Card>
+      <Card mt={4} px={6} py={4} position={'relative'}>
+        <Box fontSize={'xl'} fontWeight={'bold'}>
+          佣金记录 ({total})
+        </Box>
+        <TableContainer position={'relative'}>
+          <Table>
+            <Thead>
+              <Tr>
+                <Th>时间</Th>
+                <Th>类型</Th>
+                <Th>金额</Th>
+              </Tr>
+            </Thead>
+            <Tbody fontSize={'sm'}>
+              {promotionRecords.map((item) => (
+                <Tr key={item._id}>
+                  <Td>
+                    {item.createTime ? dayjs(item.createTime).format('YYYY/MM/DD HH:mm:ss') : '-'}
+                  </Td>
+                  <Td>{PromotionTypeMap[item.type]}</Td>
+                  <Td>{item.amount}</Td>
+                </Tr>
+              ))}
+            </Tbody>
+          </Table>
+
+          <Loading loading={isLoading} fixed={false} />
+        </TableContainer>
+        <Box mt={4} mr={4} textAlign={'end'}>
+          <Pagination />
+        </Box>
+      </Card>
+      <Modal isOpen={isOpenWithdraw} onClose={onCloseWithdraw}>
+        <ModalOverlay />
+        <ModalContent color={useColorModeValue('blackAlpha.700', 'white')}>
+          <ModalHeader>提现联系</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody textAlign={'center'}>
+            <Image
+              style={{ margin: 'auto' }}
+              src={'/imgs/wx300-2.jpg'}
+              width={200}
+              height={200}
+              alt=""
+            />
+            <Box mt={2}>
+              微信号:
+              <Box as={'span'} userSelect={'all'}>
+                YNyiqi
+              </Box>
+            </Box>
+            <Box>发送你的邀请链接和需要提现的金额</Box>
+          </ModalBody>
+
+          <ModalFooter>
+            <Button variant={'outline'} onClick={onCloseWithdraw}>
+              关闭
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
+
+export default OpenApi;