54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
import { Button, Card, Input, Space, Typography } from 'antd'
|
|
import gameRoleIdGuide from '@/assets/claim/game-role-id-guide.jpg'
|
|
|
|
export function ClaimUidStep({
|
|
uidInput,
|
|
submitting,
|
|
onChange,
|
|
onSubmit,
|
|
}: {
|
|
uidInput: string
|
|
submitting: boolean
|
|
onChange: (value: string) => void
|
|
onSubmit: () => void
|
|
}) {
|
|
return (
|
|
<Card className="claim-content-card claim-uid-step">
|
|
<Typography.Title level={3} className="claim-uid-step-title">
|
|
第 1 步：填写游戏编号（数字的那个）
|
|
</Typography.Title>
|
|
<p className="claim-muted claim-uid-step-desc">
|
|
请填写游戏内角色编号（纯数字，不超过 15 位），提交后继续绑定或领取。
|
|
</p>
|
|
|
|
<Space direction="vertical" size={10} style={{ width: '100%' }}>
|
|
<Input
|
|
size="large"
|
|
placeholder="请输入游戏编号（纯数字）"
|
|
value={uidInput}
|
|
maxLength={15}
|
|
inputMode="numeric"
|
|
onChange={(event) => onChange(event.target.value.replace(/\D/g, '').slice(0, 15))}
|
|
onPressEnter={onSubmit}
|
|
/>
|
|
<Button type="primary" size="large" loading={submitting} onClick={onSubmit} block>
|
|
确认编号，下一步
|
|
</Button>
|
|
</Space>
|
|
|
|
<p className="claim-uid-warning">
|
|
游戏编号需与游戏内角色编号一致，填错将导致无法发货。
|
|
</p>
|
|
|
|
<div className="claim-uid-guide">
|
|
<img
|
|
src={gameRoleIdGuide}
|
|
alt="游戏编号位置示意：复制游戏内角色编号提交纯数字"
|
|
className="claim-uid-guide-image"
|
|
/>
|
|
<p className="claim-uid-guide-caption">示意：复制游戏内「编号」处的纯数字提交</p>
|
|
</div>
|
|
</Card>
|
|
)
|
|
}
|