44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
import { Card } from 'antd'
|
||
import type { ClaimOrderInfo, ClaimProductInfo } from '@/types/claim'
|
||
import { ClaimProductItems } from './claim-shared'
|
||
|
||
export function ClaimHeaderCard({
|
||
order,
|
||
product,
|
||
currentStep,
|
||
progressText,
|
||
expectedUid,
|
||
}: {
|
||
order: ClaimOrderInfo | null
|
||
product: ClaimProductInfo | null
|
||
currentStep: number
|
||
progressText: string
|
||
expectedUid: string
|
||
}) {
|
||
return (
|
||
<Card className="claim-header-card">
|
||
<div className="claim-header-copy">
|
||
<span className="eyebrow">商品领取</span>
|
||
<h1>{product?.title || '商品领取'}</h1>
|
||
<p>订单号：{order?.platformOrderId || '-'}</p>
|
||
{expectedUid ? <p>游戏 UID：{expectedUid}</p> : null}
|
||
<ClaimProductItems product={product} compact />
|
||
</div>
|
||
|
||
<div className="claim-step-indicator">
|
||
<div className="claim-step-dots" aria-label={`当前第 ${currentStep} 步`}>
|
||
{[1, 2, 3, 4].map((step) => (
|
||
<span
|
||
key={step}
|
||
className={currentStep >= step ? 'claim-step-dot active' : 'claim-step-dot'}
|
||
>
|
||
{step}
|
||
</span>
|
||
))}
|
||
</div>
|
||
<span className="claim-step-progress-text">{progressText}</span>
|
||
</div>
|
||
</Card>
|
||
)
|
||
}
|