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

Reusable react components for payment kit v2

# 历史组件

`@blocklet/payment-react` 库提供了一套历史组件，旨在为您的用户提供清晰详细的过往活动视图。这些组件对于构建客户门户、账户仪表盘和管理界面至关重要，用户可以在这些界面中跟踪他们的账单、支付和信用使用情况。

这些组件直接从支付服务中获取并显示数据，提供了一种无缝呈现历史信息的方式，无需从头开始构建复杂的数据获取和渲染逻辑。

<x-cards data-columns="2">
  <x-card data-title="CustomerInvoiceList" data-icon="lucide:receipt-text" data-href="/components/history/invoice-list">
    渲染客户发票的列表或表格，包括状态、金额和创建日期的详细信息。
  </x-card>
  <x-card data-title="CustomerPaymentList" data-icon="lucide:credit-card" data-href="/components/history/payment-list">
    显示客户的完整支付历史，包括交易详情、支付方式和状态。
  </x-card>
  <x-card data-title="CreditGrantsList" data-icon="lucide:award" data-href="/components/history/credit-grants-list">
    显示客户的所有信用授予列表，详细说明状态、剩余金额和生效日期。
  </x-card>
  <x-card data-title="CreditTransactionsList" data-icon="lucide:history" data-href="/components/history/credit-transactions-list">
    列出所有个人信用交易，提供信用使用和随时间调整的详细日志。
  </x-card>
</x-cards>

## 常见用例

一个典型的用例是在用户的账户页面中创建一个“账单历史”部分。您可以使用选项卡式界面在不同的历史视图之间切换，例如发票、支付和信用。

下面是一个关于如何构建这样一个页面的概念性示例。

```jsx MyBillingPage.tsx icon=lucide:user
import React from 'react';
import { CustomerInvoiceList, CustomerPaymentList } from '@blocklet/payment-react';

// 假设您从会话或上下文中获取了客户的 ID
const customerId = 'cus_xxxxxxxxxxxxxx';

export default function MyBillingPage() {
  // 在实际应用中，您会使用 state 来管理活动选项卡
  const [activeTab, setActiveTab] = React.useState('invoices');

  return (
    <div>
      <h1>Billing History</h1>
      <nav>
        <button onClick={() => setActiveTab('invoices')}>Invoices</button>
        <button onClick={() => setActiveTab('payments')}>Payments</button>
      </nav>

      <div style={{ marginTop: '20px' }}>
        {activeTab === 'invoices' && (
          <CustomerInvoiceList 
            customer_id={customerId} 
            type="table" 
          />
        )}
        {activeTab === 'payments' && (
          <CustomerPaymentList 
            customer_id={customerId} 
          />
        )}
      </div>
    </div>
  );
}
```

这个例子展示了如何轻松嵌入历史组件，为您的用户提供全面的自助式账单信息。每个组件都处理自己的数据获取、分页和显示逻辑。

探索每个组件的详细文档，以了解其特定的属性和自定义选项。