diff --git a/apps/frontend/src/assets/claim/game-role-id-guide.jpg b/apps/frontend/src/assets/claim/game-role-id-guide.jpg new file mode 100644 index 00000000..42f9cd5f Binary files /dev/null and b/apps/frontend/src/assets/claim/game-role-id-guide.jpg differ diff --git a/apps/frontend/src/pages/admin/AdminDevMockPage.tsx b/apps/frontend/src/pages/admin/AdminDevMockPage.tsx index 5a9507fc..4ea7ef94 100644 --- a/apps/frontend/src/pages/admin/AdminDevMockPage.tsx +++ b/apps/frontend/src/pages/admin/AdminDevMockPage.tsx @@ -128,82 +128,20 @@ export default function AdminDevMockPage() { -
lewanMutation.mutate(values)} - > - - - - - - - - - - -
+ lewanMutation.mutate(values)} + />
-
feifeiMutation.mutate(values)} - > - - - - - - - - - - - - - -
+ feifeiMutation.mutate(values)} + />
@@ -357,3 +295,136 @@ export default function AdminDevMockPage() { ) } + +function LewanMockForm({ + defaultUid, + loading, + onSubmit, +}: { + defaultUid: string + loading: boolean + onSubmit: (values: Record) => void +}) { + const [form] = Form.useForm() + const step = Form.useWatch('step', form) + const uidRequired = step !== 'uid' + + return ( +
+ + + + + + + + + + +
+ ) +} + +function FeifeiMockForm({ + loading, + onSubmit, +}: { + loading: boolean + onSubmit: (values: Record) => void +}) { + const [form] = Form.useForm() + const step = Form.useWatch('step', form) + const uidRequired = step !== 'uid' + + return ( +
+ + + + + + + + + + + + + +
+ ) +} diff --git a/apps/frontend/src/pages/claim/ClaimUidStep.tsx b/apps/frontend/src/pages/claim/ClaimUidStep.tsx index cf2b98fc..e472dc3f 100644 --- a/apps/frontend/src/pages/claim/ClaimUidStep.tsx +++ b/apps/frontend/src/pages/claim/ClaimUidStep.tsx @@ -1,6 +1,7 @@ -import { Alert, Button, Card, Input, Space, Typography } from 'antd' +import { Button, Card, Input, Space, Typography } from 'antd' import type { ClaimProductInfo } from '@/types/claim' import { ClaimProductItems, InfoTile } from './claim-shared' +import gameRoleIdGuide from '@/assets/claim/game-role-id-guide.jpg' export function ClaimUidStep({ uidInput, @@ -17,38 +18,45 @@ export function ClaimUidStep({ }) { return ( - 第 1 步:填写游戏 UID + 第 1 步:填写游戏编号(数字的那个)

- 请填写你要领取的游戏角色 UID。提交后系统会按平台继续绑定或跳转领取。 + 请填写你要领取的游戏角色编号(纯数字)。提交后系统会按平台继续绑定或跳转领取。

-
+
- + onChange(event.target.value)} onPressEnter={onSubmit} /> - +

+ 游戏编号需与游戏内角色编号一致,填错将导致无法发货。 +

+ +
+ 游戏编号位置示意:复制游戏内角色编号提交纯数字 +

示意:复制游戏内「编号」处的纯数字提交

+
) } diff --git a/apps/frontend/src/pages/claim/claim-snapshot.ts b/apps/frontend/src/pages/claim/claim-snapshot.ts index 7931ae88..af8aee31 100644 --- a/apps/frontend/src/pages/claim/claim-snapshot.ts +++ b/apps/frontend/src/pages/claim/claim-snapshot.ts @@ -186,7 +186,7 @@ function resolveProgressText(options: { isUidMatched: boolean }) { if (!options.hasExpectedUid) { - return '请填写游戏 UID' + return '请填写游戏编号' } if (options.isFeifeiFlow) { return options.feifei?.rechargeStatusLabel || `UID ${options.expectedUid},请打开领取链接` diff --git a/apps/frontend/src/styles/main.css b/apps/frontend/src/styles/main.css index b5a6fc84..a12230eb 100644 --- a/apps/frontend/src/styles/main.css +++ b/apps/frontend/src/styles/main.css @@ -757,6 +757,63 @@ select { gap: 14px; } +.claim-info-grid-compact { + gap: 8px; + margin-bottom: 10px; +} + +.claim-info-grid-compact .claim-info-item { + padding: 8px 10px; + gap: 2px; + border-radius: 6px; +} + +.claim-info-grid-compact .claim-info-item span { + font-size: 11px; + line-height: 1.3; +} + +.claim-info-grid-compact .claim-info-item strong { + font-size: 13px; + line-height: 1.35; + font-weight: 600; +} + +.claim-uid-guide { + margin: 14px 0 0; + padding: 8px; + border-radius: 10px; + background: #f8fafc; + border: 1px solid #e5e7eb; +} + +.claim-uid-guide-image { + display: block; + width: 100%; + max-width: 420px; + margin: 0 auto; + border-radius: 8px; + border: 1px solid #e2e8f0; + object-fit: contain; + background: #fff; +} + +.claim-uid-guide-caption { + margin: 8px 0 0; + text-align: center; + color: #64748b; + font-size: 12px; + line-height: 1.4; +} + +.claim-uid-warning { + margin: 14px 0 0; + color: #ff4d4f; + font-size: 13px; + font-weight: 600; + line-height: 1.5; +} + .claim-info-item { min-width: 0; padding: 16px;