@blocklet/payment-react/docs/components-history-credit-transactions-list.zh.md

Reusable react components for payment kit v2

# CreditTransactionsList

`CreditTransactionsList` 组件渲染了一个包含所有信用额度交易的详细分页表格，提供了信用额度使用和调整的清晰日志。它非常适合在客户门户或管理仪表板中使用，以跟踪信用额度的授予和消耗情况。

该组件会自动处理数据获取、分页和格式化，提供了一种显示交易历史的简单方法。

## 属性

| 属性 | 类型 | 描述 | 默认值 |
| --- | --- | --- | --- |
| `customer_id` | `string` | 要显示的交易记录所属客户的 ID。如果未提供，则默认为来自 `PaymentProvider` 上下文的当前登录用户的 DID。 | `session.user.did` |
| `subscription_id` | `string` | 将交易记录筛选到特定的订阅。 | `undefined` |
| `credit_grant_id` | `string` | 将交易记录筛选到特定的信用额度授予。 | `undefined` |
| `pageSize` | `number` | 每页显示的交易数量。 | `10` |
| `onTableDataChange` | `(data, prevData) => void` | 当表格数据被获取或更新时触发的回调函数。 | `() => {}` |
| `showAdminColumns` | `boolean` | 如果为 `true` 且用户是管理员，则会显示额外的列，例如 'Meter Event'。 | `false` |
| `showTimeFilter` | `boolean` | 如果为 `true`，则会显示一个日期范围选择器，以允许按日期筛选交易记录。 | `false` |
| `source` | `string` | 一个可选的源字符串，用于筛选交易记录。 | `''` |
| `mode` | `'dashboard' \| 'portal'` | 决定相关项目（如信用额度授予）的链接结构。对管理视图使用 `'dashboard'`，对面向客户的视图使用 `'portal'`。 | `'portal'` |

## 客户门户的基本用法

此示例展示了如何显示当前登录用户的信用额度交易历史。当 `customer_id` 被省略时，该组件会自动使用来自 `PaymentProvider` 上下文的用户的 DID。

```jsx MyCreditHistoryPage.tsx icon=logos:react
import React from 'react';
import { CreditTransactionsList, PaymentProvider } from '@blocklet/payment-react';
import { useSessionContext } from '../hooks/session-context'; // 你的会话上下文钩子

function MyCreditHistoryPage() {
  const { session, connectApi } = useSessionContext();

  if (!session || !connectApi) {
    return <div>正在加载会话...</div>;
  }

  return (
    <PaymentProvider session={session} connectApi={connectApi}>
      <h2>我的信用额度交易</h2>
      <CreditTransactionsList />
    </PaymentProvider>
  );
}

export default MyCreditHistoryPage;
```

## 带筛选功能的管理视图

对于管理仪表板，你可以传递一个特定的 `customer_id`，并启用管理列和时间筛选器，以提供用户交易历史的更强大和详细的视图。

```jsx CustomerDetailsPage.tsx icon=logos:react
import React from 'react';
import { CreditTransactionsList, PaymentProvider } from '@blocklet/payment-react';
import { useSessionContext } from '../hooks/session-context'; // 你的会话上下文钩子

function CustomerDetailsPage({ customerId }) {
  const { session, connectApi } = useSessionContext();

  if (!session || !connectApi) {
    return <div>正在加载会话...</div>;
  }

  return (
    <PaymentProvider session={session} connectApi={connectApi}>
      <h3>{customerId} 的交易历史</h3>
      <CreditTransactionsList
        customer_id={customerId}
        showAdminColumns={true}
        showTimeFilter={true}
        pageSize={20}
        mode="dashboard"
      />
    </PaymentProvider>
  );
}

export default CustomerDetailsPage;
```

## 显示特定信用额度授予的交易记录

要显示特定信用额度授予的消耗详情日志，请传递 `credit_grant_id`。这对于显示单个信用额度授予详情的页面非常有用。

```jsx CreditGrantDetailsPage.tsx icon=logos:react
import React from 'react';
import { CreditTransactionsList, PaymentProvider } from '@blocklet/payment-react';
import { useSessionContext } from '../hooks/session-context'; // 你的会话上下文钩子

function CreditGrantDetailsPage({ grantId }) {
  const { session, connectApi } = useSessionContext();

  if (!session || !connectApi) {
    return <div>正在加载会话...</div>;
  }

  return (
    <PaymentProvider session={session} connectApi={connectApi}>
      <h4>授权 {grantId} 的使用详情</h4>
      <CreditTransactionsList credit_grant_id={grantId} />
    </PaymentProvider>
  );
}

export default CreditGrantDetailsPage;
```