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。

MyCreditHistoryPage.tsx

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，并启用管理列和时间筛选器，以提供用户交易历史的更强大和详细的视图。

CustomerDetailsPage.tsx

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。这对于显示单个信用额度授予详情的页面非常有用。

CreditGrantDetailsPage.tsx

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;