feat: 用户查询三种方式弹窗

boyang
1 parent e7087f45
Showing 4 changed files with 362 additions and 1 deletions
src/pages/Prepaid/components/PointsExchangeRecordsModal.tsx
src/pages/Prepaid/index.tsx
src/services/definition.ts
src/services/request.ts
+import { postIntegralUserExchangeRecords } from '@/services';
+import { formatDateTime } from '@/utils';
+import { Empty, Modal, Table, Tabs } from 'antd';
+import React, { useEffect, useState } from 'react';
+import '../index.less';
+
+interface PointsExchangeRecordsModalProps {
+  setVisible: (visible: boolean) => void;
+  userInfoObj: {
+    uid: string;
+    phone?: string;
+    nickname?: string;
+    realName?: string;
+    [key: string]: any;
+  };
+  onClose: () => void;
+}
+
+interface RecordItem {
+  createByName: string | null;
+  createTime: string;
+  delta: number;
+  remark: string | null;
+  sourceId: string | null;
+}
+
+interface RecordsData {
+  exchangeRecords: RecordItem[];
+  collectedRecords: RecordItem[];
+  pendingRecords: RecordItem[];
+}
+
+const PointsExchangeRecordsModal: React.FC<PointsExchangeRecordsModalProps> = ({
+  setVisible,
+  userInfoObj,
+  onClose,
+}) => {
+  const [activeTab, setActiveTab] = useState<string>('1');
+  const [loading, setLoading] = useState<boolean>(false);
+  const [recordsData, setRecordsData] = useState<RecordsData>({
+    exchangeRecords: [],
+    collectedRecords: [],
+    pendingRecords: [],
+  });
+
+  const uid = userInfoObj?.uid;
+  const phone = userInfoObj?.phone;
+
+  // Function to fetch records data from API
+  const fetchRecordsData = async () => {
+    try {
+      setLoading(true);
+      const response = await postIntegralUserExchangeRecords({
+        data: {
+          id: Number(uid),
+          phone: phone,
+        },
+      });
+
+      if (response && response.data) {
+        setRecordsData({
+          exchangeRecords: response.data.exchangeRecords || [],
+          collectedRecords: response.data.collectedRecords || [],
+          pendingRecords: response.data.pendingRecords || [],
+        });
+      }
+    } catch (error) {
+      console.error('Failed to fetch exchange records:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Fetch records data when component mounts
+  useEffect(() => {
+    if (uid || phone) {
+      fetchRecordsData();
+    }
+  }, [uid, phone]);
+  // Exchange records columns
+  const exchangeRecordsColumns = [
+    {
+      title: '兑换日期',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      render: (text: string) => formatDateTime(text),
+    },
+    {
+      title: '扣除积分',
+      dataIndex: 'delta',
+      key: 'delta',
+      render: (delta: number) => (
+        <span style={{ color: delta < 0 ? 'red' : 'green' }}>{delta}</span>
+      ),
+    },
+    {
+      title: '操作人',
+      dataIndex: 'createByName',
+      key: 'createByName',
+      render: (text: string | null) => text || '-',
+    },
+    {
+      title: '积分用途',
+      dataIndex: 'remark',
+      key: 'remark',
+      render: (text: string | null) => text || '-',
+    },
+  ];
+
+  // Collected records columns
+  const collectedRecordsColumns = [
+    {
+      title: '订单号',
+      dataIndex: 'sourceId',
+      key: 'sourceId',
+      render: (text: string | null) => text || '-',
+    },
+    {
+      title: '领取积分',
+      dataIndex: 'delta',
+      key: 'delta',
+      render: (delta: number) => (
+        <span style={{ color: delta > 0 ? 'green' : 'red' }}>{delta}</span>
+      ),
+    },
+    {
+      title: '领取日期',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      render: (text: string) => formatDateTime(text),
+    },
+  ];
+
+  // Pending records columns
+  const pendingRecordsColumns = [
+    {
+      title: '订单号',
+      dataIndex: 'sourceId',
+      key: 'sourceId',
+      render: (text: string | null) => text || '-',
+    },
+    {
+      title: '领取积分',
+      dataIndex: 'delta',
+      key: 'delta',
+      render: (delta: number) => (
+        <span style={{ color: delta > 0 ? 'green' : 'red' }}>{delta}</span>
+      ),
+    },
+    {
+      title: '过期日期',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      render: (text: string) => formatDateTime(text),
+    },
+  ];
+
+  // Tab items
+  const tabItems = [
+    {
+      key: '1',
+      label: '兑换记录',
+      children: (
+        <Table
+          columns={exchangeRecordsColumns}
+          dataSource={recordsData.exchangeRecords.map((item, index) => ({
+            ...item,
+            key: `exchange-${index}`,
+          }))}
+          pagination={{ pageSize: 5 }}
+          loading={loading && activeTab === '1'}
+          locale={{
+            emptyText: <Empty description="暂无兑换记录" />,
+          }}
+        />
+      ),
+    },
+    {
+      key: '2',
+      label: '已领取积分',
+      children: (
+        <Table
+          columns={collectedRecordsColumns}
+          dataSource={recordsData.collectedRecords.map((item, index) => ({
+            ...item,
+            key: `collected-${index}`,
+          }))}
+          pagination={{ pageSize: 5 }}
+          loading={loading && activeTab === '2'}
+          locale={{
+            emptyText: <Empty description="暂无已领取积分记录" />,
+          }}
+        />
+      ),
+    },
+    {
+      key: '3',
+      label: '待领取积分',
+      children: (
+        <Table
+          columns={pendingRecordsColumns}
+          dataSource={recordsData.pendingRecords.map((item, index) => ({
+            ...item,
+            key: `pending-${index}`,
+          }))}
+          pagination={{ pageSize: 5 }}
+          loading={loading && activeTab === '3'}
+          locale={{
+            emptyText: <Empty description="暂无待领取积分记录" />,
+          }}
+        />
+      ),
+    },
+  ];
+
+  return (
+    <Modal
+      open={true}
+      title="积分兑换记录"
+      width={800}
+      onCancel={() => {
+        setVisible(false);
+        onClose();
+      }}
+      footer={null}
+      destroyOnClose
+    >
+      <Tabs
+        activeKey={activeTab}
+        onChange={(key) => setActiveTab(key)}
+        items={tabItems}
+      />
+    </Modal>
+  );
+};
+
+export default PointsExchangeRecordsModal;
@@ -17,6 +17,7 @@ import CheckModal from &#39;../Order/Order/components/CheckModal&#39;;
 import { CHECK_TYPE } from '../Order/constant';
 import BalanceChangeRecordsModal from './components/BalanceChangeRecordsModal';
 import PointsExchangeModal from './components/PointsExchangeModal';
+import PointsExchangeRecordsModal from './components/PointsExchangeRecordsModal';
 import RechargePrepaymentModal from './components/RechargePrepaymentModal';
 import {
   ACCOUNT_COLUMNS,
@@ -39,6 +40,10 @@ const PrepaidPage = () =&gt; {
   ] = useState<boolean>(false);
   const [pointsExchangeModalVisible, setPointsExchangeModalVisible] =
     useState<boolean>(false);
+  const [
+    pointsExchangeRecordsModalVisible,
+    setPointsExchangeRecordsModalVisible,
+  ] = useState<boolean>(false);
   const reloadPrepaidTable = () => {
     prepaidActionRef.current?.reload();
@@ -198,7 +203,7 @@ const PrepaidPage = () =&gt; {
       valueType: 'option',
       key: 'option',
       fixed: 'right',
-      width: 200,
+      width: 240,
       render: (text, record) => {
         let btns = [];
         btns.push(
@@ -227,6 +232,19 @@ const PrepaidPage = () =&gt; {
             消费记录
           </Button>,
         );
+        btns.push(
+          <Button
+            className="p-0 ml-2"
+            key="pointsRecords"
+            type="link"
+            onClick={() => {
+              setCurrentOptUserObj(record);
+              setPointsExchangeRecordsModalVisible(true);
+            }}
+          >
+            积分兑换记录
+          </Button>,
+        );
         return btns;
       },
     });
@@ -407,6 +425,18 @@ const PrepaidPage = () =&gt; {
           }}
         />
       )}
+
+      {pointsExchangeRecordsModalVisible && currentOptUserObj && (
+        <PointsExchangeRecordsModal
+          setVisible={(val: boolean) => {
+            setPointsExchangeRecordsModalVisible(val);
+          }}
+          userInfoObj={currentOptUserObj}
+          onClose={() => {
+            setPointsExchangeRecordsModalVisible(false);
+          }}
+        />
+      )}
     </div>
   );
 };
@@ -1529,6 +1529,28 @@ export interface ExchangeIntegralDto {
   remark?: string;
 }
+export interface ExchangeRecordsRequestDto {
+  createByName?: string;
+  createByNameLike?: string;
+  /** @format date-time */
+  createTimeGe?: string;
+  /** @format date-time */
+  createTimeLe?: string;
+  /** @format int32 */
+  current?: number;
+  /** @format int32 */
+  end?: number;
+  /** @format int32 */
+  id?: number;
+  /** @format int32 */
+  pageSize?: number;
+  phone?: string;
+  /** @format int32 */
+  start?: number;
+  /** @format int32 */
+  total?: number;
+}
+
 export interface FilePathDto {
   url?: string;
 }
@@ -57,6 +57,7 @@ import type {
   DistrictSearchDo,
   Dto,
   ExchangeIntegralDto,
+  ExchangeRecordsRequestDto,
   FeedbackRegistrationDTO,
   InventoryMaterialStockReq,
   InvoiceBatchDownloadDto,
@@ -4732,6 +4733,77 @@ export const postIntegralQuerySumByUser = /* #__PURE__ */ (() =&gt; {
   return request;
 })();
+/** @description request parameter type for postIntegralUserExchangeRecords */
+export interface PostIntegralUserExchangeRecordsOption {
+  /**
+   * @description
+   *   dto
+   */
+  body: {
+    /**
+        @description
+          dto */
+    dto: ExchangeRecordsRequestDto;
+  };
+}
+
+/** @description response type for postIntegralUserExchangeRecords */
+export interface PostIntegralUserExchangeRecordsResponse {
+  /**
+   * @description
+   *   OK
+   */
+  200: ServerResult;
+  /**
+   * @description
+   *   Created
+   */
+  201: any;
+  /**
+   * @description
+   *   Unauthorized
+   */
+  401: any;
+  /**
+   * @description
+   *   Forbidden
+   */
+  403: any;
+  /**
+   * @description
+   *   Not Found
+   */
+  404: any;
+}
+
+export type PostIntegralUserExchangeRecordsResponseSuccess =
+  PostIntegralUserExchangeRecordsResponse[200];
+/**
+ * @description
+ *   用户积分兑换记录
+ * @tags 积分接口
+ * @produces *
+ * @consumes application/json
+ */
+export const postIntegralUserExchangeRecords = /* #__PURE__ */ (() => {
+  const method = 'post';
+  const url = '/integral/userExchangeRecords';
+  function request(
+    option: PostIntegralUserExchangeRecordsOption,
+  ): Promise<PostIntegralUserExchangeRecordsResponseSuccess> {
+    return requester(request.url, {
+      method: request.method,
+      ...option,
+    }) as unknown as Promise<PostIntegralUserExchangeRecordsResponseSuccess>;
+  }
+
+  /** http method */
+  request.method = method;
+  /** request url */
+  request.url = url;
+  return request;
+})();
+
 /** @description request parameter type for postKingdeeRepCustomer */
 export interface PostKingdeeRepCustomerOption {
   /**