111 lines
3.3 KiB
TypeScript
111 lines
3.3 KiB
TypeScript
import {
|
|
CheckCircleOutlined,
|
|
ExclamationCircleOutlined,
|
|
LinkOutlined,
|
|
} from '@ant-design/icons'
|
|
import { Alert, Button, Card, Typography } from 'antd'
|
|
import type {
|
|
ClaimKuaishouFeifeiFlowInfo,
|
|
ClaimOrderInfo,
|
|
ClaimProductInfo,
|
|
} from '@/types/claim'
|
|
import type { ClaimSnapshot } from './claim-snapshot'
|
|
import { InfoTile, UidEditRow } from './claim-shared'
|
|
|
|
export function FeifeiClaimPanel({
|
|
feifei,
|
|
expectedUid,
|
|
order,
|
|
product,
|
|
taskLastError,
|
|
onOpen,
|
|
uidInput,
|
|
submittingUid,
|
|
onUidChange,
|
|
onResubmitUid,
|
|
}: {
|
|
feifei: ClaimKuaishouFeifeiFlowInfo
|
|
expectedUid: string
|
|
order: ClaimOrderInfo | null
|
|
product: ClaimProductInfo | null
|
|
taskLastError?: string
|
|
onOpen: () => void
|
|
uidInput: string
|
|
submittingUid: boolean
|
|
onUidChange: (value: string) => void
|
|
onResubmitUid: () => void
|
|
}) {
|
|
const openReady = Boolean(feifei.h5UrlWithUid || feifei.h5.rechargeUrl || feifei.h5.entryUrl)
|
|
|
|
return (
|
|
<Card className="claim-content-card">
|
|
<div className="claim-feifei-main">
|
|
<span className="claim-feifei-label">kuaishou-feifei</span>
|
|
<Typography.Title level={2}>第 2 步：打开领取链接</Typography.Title>
|
|
<p>{feifei.rechargeStatusLabel || '待领取'}</p>
|
|
</div>
|
|
|
|
<UidEditRow
|
|
uidInput={uidInput}
|
|
submitting={submittingUid}
|
|
onChange={onUidChange}
|
|
onSubmit={onResubmitUid}
|
|
/>
|
|
|
|
<div className="claim-info-grid">
|
|
<InfoTile label="填写 UID" value={expectedUid || '-'} />
|
|
<InfoTile label="订单号" value={order?.platformOrderId || '-'} />
|
|
<InfoTile label="平台单号" value={feifei.orderNo || feifei.platformOrderNo || '-'} />
|
|
<InfoTile label="领取商品" value={product?.title || '-'} />
|
|
</div>
|
|
|
|
<Alert
|
|
type="info"
|
|
showIcon
|
|
message="将携带你填写的 UID 打开领取页，请确认游戏内角色一致。"
|
|
/>
|
|
|
|
<Button
|
|
type="primary"
|
|
size="large"
|
|
icon={<LinkOutlined />}
|
|
disabled={!openReady || !expectedUid}
|
|
onClick={onOpen}
|
|
block
|
|
style={{ marginTop: 16 }}
|
|
>
|
|
打开领取链接
|
|
</Button>
|
|
|
|
{taskLastError ? (
|
|
<Alert type="warning" showIcon message={taskLastError} style={{ marginTop: 12 }} />
|
|
) : null}
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export function FeifeiResultStep({ snapshot }: { snapshot: ClaimSnapshot }) {
|
|
return (
|
|
<Card className="claim-content-card">
|
|
<div className="claim-result-header">
|
|
{snapshot.resultVariant === 'warning' ? (
|
|
<ExclamationCircleOutlined className="claim-large-icon claim-icon-warning" />
|
|
) : (
|
|
<CheckCircleOutlined className={`claim-large-icon claim-icon-${snapshot.resultVariant}`} />
|
|
)}
|
|
<div>
|
|
<Typography.Title level={2}>{snapshot.resultTitle}</Typography.Title>
|
|
<p className="claim-muted">{snapshot.resultDescription}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="claim-info-grid">
|
|
<InfoTile label="填写 UID" value={snapshot.expectedUid || '-'} />
|
|
<InfoTile label="状态" value={snapshot.feifei?.rechargeStatusLabel || '-'} />
|
|
<InfoTile label="订单号" value={snapshot.order?.platformOrderId || '-'} />
|
|
<InfoTile label="领取商品" value={snapshot.product?.title || '-'} />
|
|
</div>
|
|
</Card>
|
|
)
|
|
}
|