跳到主要内容

CreditGrantsList

CreditGrantsList 组件渲染一个分页表格，用于显示客户的信用额度授予情况。它清晰地概述了每笔授予的状态、剩余额度、范围和有效期。

该组件对于面向客户的门户（用户可以在其中跟踪其可用信用额度）和用于管理客户授予的管理仪表板都至关重要。它必须在 PaymentProvider 内部使用，以访问必要的会话和 API 上下文。

Props

PropTypeDescriptionDefault
customer_idstring可选。客户的 ID。如果省略，则默认为会话上下文中当前已认证用户的 DID。session.user.did
subscription_idstring可选。筛选列表，仅显示与特定订阅关联的授予。''
statusstring可选。一个用逗号分隔的状态字符串，用于筛选。有效状态包括 granted、pending、expired、depleted 和 voided。'granted,pending,depleted,expired'
pageSizenumber可选。每页显示的项目数。10
onTableDataChange(data, prevData) => void可选。每当获取或更新表格数据时调用的回调函数。() => {}
mode'dashboard' | 'portal'可选。决定点击行时的导航行为。对面向客户的视图使用 'portal'，对管理面板使用 'dashboard'，这将生成不同的链接路径。'portal'

用法

基本用法（针对已登录客户）

默认情况下，CreditGrantsList 组件会获取并显示当前已认证用户的信用额度授予。这是客户账户页面最常见的用例。

我的信用额度授予

jsx
import { CreditGrantsList, PaymentProvider } from '@blocklet/payment-react';
import { useSessionContext } from '/path/to/your/session/context'; // 调整此导入路径

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

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

  return (
    <PaymentProvider session={session} connectApi={connectApi}>
      <h2>我的信用额度授予</h2>
      <CreditGrantsList />
    </PaymentProvider>
  );
}

管理员或仪表板用法

在管理仪表板中，您可以通过提供 customer_id 属性来显示任何客户的信用额度授予。您还可以自定义筛选条件和页面大小。

客户的信用额度授予

jsx
import { CreditGrantsList, PaymentProvider } from '@blocklet/payment-react';
import { useSessionContext } from '/path/to/your/session/context'; // 调整此导入路径

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

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

  return (
    <PaymentProvider session={session} connectApi={connectApi}>
      <h3>客户的有效信用额度授予</h3>
      <CreditGrantsList
        customer_id={customerId}
        status="granted,pending"
        pageSize={5}
        mode="dashboard"
      />
    </PaymentProvider>
  );
}

此示例展示了如何仅列出特定客户的 'granted' 和 'pending' 状态的授予，每页显示 5 项。mode="dashboard" 确保了点击某项授予将导航至管理员专用的 URL。