1163 lines
33 KiB
TypeScript
1163 lines
33 KiB
TypeScript
import {
|
|
CheckCircleOutlined,
|
|
ClockCircleOutlined,
|
|
ExclamationCircleOutlined,
|
|
LinkOutlined,
|
|
LoadingOutlined,
|
|
ReloadOutlined,
|
|
SendOutlined,
|
|
SwapOutlined,
|
|
} from '@ant-design/icons'
|
|
import {
|
|
Alert,
|
|
Button,
|
|
Card,
|
|
Collapse,
|
|
Empty,
|
|
Image,
|
|
Input,
|
|
Space,
|
|
Spin,
|
|
Tooltip,
|
|
Typography,
|
|
} from 'antd'
|
|
import QRCode from 'qrcode'
|
|
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
|
import { useParams } from 'react-router'
|
|
|
|
import {
|
|
TASK_STATUS,
|
|
hasKuaishouCloudRedeemResultStatus,
|
|
isClaimInactiveTaskStatus,
|
|
isKuaishouCloudCompletedStatus,
|
|
isKuaishouCloudRoleConfirmedStatus,
|
|
normalizeTaskStatus,
|
|
} from '@/domain/task-status'
|
|
import { isFeedbackDismissed, showConfirm, showError, showSuccess } from '@/lib/feedback'
|
|
import {
|
|
confirmKuaishouCloudClaimRole,
|
|
fetchClaimDetail,
|
|
rebindKuaishouCloudClaimRole,
|
|
redeemKuaishouCloudClaim,
|
|
verifyKuaishouCloudClaimTicket,
|
|
} from '@/services/claim'
|
|
import type {
|
|
ClaimDetailData,
|
|
ClaimKuaishouCloudFlowInfo,
|
|
ClaimKuaishouFeifeiFlowInfo,
|
|
ClaimOrderInfo,
|
|
ClaimProductInfo,
|
|
} from '@/types/claim'
|
|
import { formatAdminDateTime } from '@/utils/admin-time'
|
|
|
|
const BINDING_PREPARE_POLL_MS = 5_000
|
|
const ROLE_FAST_POLL_MS = 10_000
|
|
const ROLE_SLOW_POLL_MS = 30_000
|
|
const ROLE_IDLE_POLL_MS = 60_000
|
|
const ROLE_FAST_WINDOW_MS = 3 * 60_000
|
|
const ROLE_IDLE_WINDOW_MS = 10 * 60_000
|
|
|
|
type ResultVariant = 'success' | 'warning' | 'info'
|
|
|
|
type ClaimSnapshot = ReturnType<typeof createClaimSnapshot>
|
|
|
|
export default function ClaimPage() {
|
|
const { token: routeToken } = useParams<{ token: string }>()
|
|
const token = String(routeToken || '').trim()
|
|
|
|
const [loading, setLoading] = useState(true)
|
|
const [submitting, setSubmitting] = useState(false)
|
|
const [refreshingRole, setRefreshingRole] = useState(false)
|
|
const [confirmingRole, setConfirmingRole] = useState(false)
|
|
const [rebindingRole, setRebindingRole] = useState(false)
|
|
const [redeeming, setRedeeming] = useState(false)
|
|
const [errorMessage, setErrorMessage] = useState('')
|
|
const [detail, setDetail] = useState<ClaimDetailData | null>(null)
|
|
const [ticketCode, setTicketCode] = useState('')
|
|
const [qrCodeDataUrl, setQrCodeDataUrl] = useState('')
|
|
|
|
const pollTimerRef = useRef<number>(0)
|
|
const rolePollBaselineAtRef = useRef(0)
|
|
const rolePollBaselineKeyRef = useRef('')
|
|
|
|
const snapshot = useMemo(
|
|
() => createClaimSnapshot(detail, { rebindingRole }),
|
|
[detail, rebindingRole],
|
|
)
|
|
|
|
const stopPolling = useCallback(() => {
|
|
if (pollTimerRef.current) {
|
|
window.clearTimeout(pollTimerRef.current)
|
|
pollTimerRef.current = 0
|
|
}
|
|
}, [])
|
|
|
|
const generateQRCode = useCallback(async (url: string) => {
|
|
if (!url) {
|
|
setQrCodeDataUrl('')
|
|
return
|
|
}
|
|
|
|
try {
|
|
const dataUrl = await QRCode.toDataURL(url, {
|
|
width: 280,
|
|
margin: 2,
|
|
color: {
|
|
dark: '#0f172a',
|
|
light: '#ffffff',
|
|
},
|
|
})
|
|
setQrCodeDataUrl(dataUrl)
|
|
} catch (error) {
|
|
setQrCodeDataUrl('')
|
|
console.error('生成二维码失败:', error)
|
|
}
|
|
}, [])
|
|
|
|
const applyDetail = useCallback(
|
|
async (nextDetail: ClaimDetailData) => {
|
|
setDetail(nextDetail)
|
|
setTicketCode((current) => current || nextDetail.kuaishouCloudFulfillment?.ticket.code || '')
|
|
await generateQRCode(
|
|
String(nextDetail.kuaishouCloudFulfillment?.binding.bindUrl || '').trim(),
|
|
)
|
|
},
|
|
[generateQRCode],
|
|
)
|
|
|
|
const loadDetail = useCallback(
|
|
async (options: { silent?: boolean } = {}) => {
|
|
if (!token) {
|
|
setLoading(false)
|
|
setErrorMessage('领取链接无效，请检查链接是否完整')
|
|
stopPolling()
|
|
return null
|
|
}
|
|
|
|
if (!options.silent) {
|
|
setLoading(true)
|
|
}
|
|
setErrorMessage('')
|
|
|
|
try {
|
|
const response = await fetchClaimDetail(token)
|
|
await applyDetail(response.data)
|
|
return response.data
|
|
} catch (error) {
|
|
setErrorMessage(error instanceof Error ? error.message : '读取领取信息失败')
|
|
stopPolling()
|
|
return null
|
|
} finally {
|
|
if (!options.silent) {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
},
|
|
[applyDetail, stopPolling, token],
|
|
)
|
|
|
|
const resolveRolePollDelay = useCallback((nextSnapshot: ClaimSnapshot) => {
|
|
const nextRoleKey = [nextSnapshot.roleName, nextSnapshot.roleId].join('::')
|
|
const now = Date.now()
|
|
|
|
if (nextRoleKey !== rolePollBaselineKeyRef.current) {
|
|
rolePollBaselineKeyRef.current = nextRoleKey
|
|
rolePollBaselineAtRef.current = now
|
|
}
|
|
|
|
if (!rolePollBaselineAtRef.current) {
|
|
rolePollBaselineAtRef.current = now
|
|
}
|
|
|
|
const elapsedMs = now - rolePollBaselineAtRef.current
|
|
if (elapsedMs < ROLE_FAST_WINDOW_MS) {
|
|
return ROLE_FAST_POLL_MS
|
|
}
|
|
|
|
if (elapsedMs < ROLE_IDLE_WINDOW_MS) {
|
|
return ROLE_SLOW_POLL_MS
|
|
}
|
|
|
|
return ROLE_IDLE_POLL_MS
|
|
}, [])
|
|
|
|
const resolveNextPollDelay = useCallback(
|
|
(nextSnapshot: ClaimSnapshot) => {
|
|
if (
|
|
!nextSnapshot.flow ||
|
|
nextSnapshot.hasRedeemResult ||
|
|
isClaimInactiveTaskStatus(nextSnapshot.task?.status)
|
|
) {
|
|
return 0
|
|
}
|
|
|
|
if (nextSnapshot.currentStep === 2) {
|
|
if (!nextSnapshot.isBindingPrepared) {
|
|
return BINDING_PREPARE_POLL_MS
|
|
}
|
|
|
|
return resolveRolePollDelay(nextSnapshot)
|
|
}
|
|
|
|
return 0
|
|
},
|
|
[resolveRolePollDelay],
|
|
)
|
|
|
|
useEffect(() => {
|
|
rolePollBaselineAtRef.current = 0
|
|
rolePollBaselineKeyRef.current = ''
|
|
setDetail(null)
|
|
setTicketCode('')
|
|
setQrCodeDataUrl('')
|
|
void loadDetail()
|
|
|
|
return () => {
|
|
stopPolling()
|
|
}
|
|
}, [loadDetail, stopPolling])
|
|
|
|
useEffect(() => {
|
|
stopPolling()
|
|
const delay = resolveNextPollDelay(snapshot)
|
|
if (!delay) {
|
|
return undefined
|
|
}
|
|
|
|
pollTimerRef.current = window.setTimeout(() => {
|
|
pollTimerRef.current = 0
|
|
void loadDetail({ silent: true })
|
|
}, delay)
|
|
|
|
return () => {
|
|
stopPolling()
|
|
}
|
|
}, [loadDetail, resolveNextPollDelay, snapshot, stopPolling])
|
|
|
|
async function submitTicket() {
|
|
const normalizedTicketCode = ticketCode.trim()
|
|
if (!normalizedTicketCode) {
|
|
showError('请输入核销码')
|
|
return
|
|
}
|
|
|
|
setSubmitting(true)
|
|
try {
|
|
const response = await verifyKuaishouCloudClaimTicket(token, {
|
|
ticketCode: normalizedTicketCode,
|
|
})
|
|
await applyDetail(response.data)
|
|
showSuccess('核销已完成，系统已开始准备绑定资源')
|
|
} catch (error) {
|
|
showError(error instanceof Error ? error.message : '核销码验证失败')
|
|
} finally {
|
|
setSubmitting(false)
|
|
}
|
|
}
|
|
|
|
async function refreshRole() {
|
|
setRefreshingRole(true)
|
|
try {
|
|
const nextDetail = await loadDetail({ silent: true })
|
|
const nextSnapshot = createClaimSnapshot(nextDetail, { rebindingRole })
|
|
|
|
if (nextSnapshot.isCustomerRoleReady) {
|
|
showSuccess('角色信息已刷新')
|
|
} else if (nextSnapshot.isDefaultRole) {
|
|
showError('当前仍是虚拟机默认角色，请重新绑定自己的角色信息')
|
|
} else if (nextDetail) {
|
|
showError(
|
|
nextSnapshot.flow?.role.errorMessage ||
|
|
nextSnapshot.flow?.role.defaultErrorMessage ||
|
|
'暂时还没有识别到角色信息，请完成绑定后稍等片刻再试',
|
|
)
|
|
}
|
|
} finally {
|
|
setRefreshingRole(false)
|
|
}
|
|
}
|
|
|
|
async function confirmRole() {
|
|
setConfirmingRole(true)
|
|
try {
|
|
const response = await confirmKuaishouCloudClaimRole(token)
|
|
await applyDetail(response.data)
|
|
showSuccess('角色已确认，进入下一步')
|
|
} catch (error) {
|
|
showError(error instanceof Error ? error.message : '确认角色失败')
|
|
} finally {
|
|
setConfirmingRole(false)
|
|
}
|
|
}
|
|
|
|
async function confirmRedeem() {
|
|
try {
|
|
await showConfirm('兑换后不可取消，也不可退货。请确认角色和商品信息完全正确。', '确认兑换', {
|
|
okText: '确认兑换',
|
|
okButtonProps: { danger: true },
|
|
})
|
|
} catch (error) {
|
|
if (!isFeedbackDismissed(error)) {
|
|
showError('确认弹窗已关闭')
|
|
}
|
|
return
|
|
}
|
|
|
|
setRedeeming(true)
|
|
try {
|
|
const response = await redeemKuaishouCloudClaim(token)
|
|
await applyDetail(response.data)
|
|
showSuccess('兑换请求已提交')
|
|
} catch (error) {
|
|
showError(error instanceof Error ? error.message : '兑换失败')
|
|
} finally {
|
|
setRedeeming(false)
|
|
}
|
|
}
|
|
|
|
async function rebindRole() {
|
|
try {
|
|
await showConfirm(
|
|
'换绑后当前绑定链接会失效，系统会退还当前虚拟号并生成新的绑定二维码。核销码和领取商品不会改变，但需要重新扫码绑定角色。',
|
|
'确认换绑角色',
|
|
{
|
|
okText: '确认换绑',
|
|
okButtonProps: { danger: true },
|
|
},
|
|
)
|
|
} catch (error) {
|
|
if (!isFeedbackDismissed(error)) {
|
|
showError('确认弹窗已关闭')
|
|
}
|
|
return
|
|
}
|
|
|
|
setRebindingRole(true)
|
|
try {
|
|
const response = await rebindKuaishouCloudClaimRole(token)
|
|
await applyDetail(response.data)
|
|
showSuccess('新的绑定二维码已生成，请重新绑定角色')
|
|
} catch (error) {
|
|
showError(error instanceof Error ? error.message : '换绑角色失败')
|
|
} finally {
|
|
setRebindingRole(false)
|
|
}
|
|
}
|
|
|
|
function openBindUrl(useCurrentPage = false) {
|
|
const bindUrl = String(snapshot.flow?.binding.bindUrl || '').trim()
|
|
if (!bindUrl) {
|
|
showError('绑定链接还没准备好，请稍后刷新')
|
|
return
|
|
}
|
|
|
|
if (useCurrentPage) {
|
|
window.location.assign(bindUrl)
|
|
return
|
|
}
|
|
|
|
window.open(bindUrl, '_blank', 'noopener,noreferrer')
|
|
}
|
|
|
|
function openFeifeiUrl(useCurrentPage = false) {
|
|
const url = String(
|
|
snapshot.feifei?.h5.rechargeUrl || snapshot.feifei?.h5.entryUrl || '',
|
|
).trim()
|
|
|
|
if (!url) {
|
|
showError('领取链接还没准备好，请稍后刷新')
|
|
return
|
|
}
|
|
|
|
if (useCurrentPage) {
|
|
window.location.assign(url)
|
|
return
|
|
}
|
|
|
|
window.open(url, '_blank', 'noopener,noreferrer')
|
|
}
|
|
|
|
return (
|
|
<main className="claim-page">
|
|
<ClaimHeaderCard
|
|
order={snapshot.order}
|
|
product={snapshot.product}
|
|
currentStep={snapshot.currentStep}
|
|
progressText={snapshot.progressText}
|
|
/>
|
|
|
|
{loading ? (
|
|
<Card className="claim-content-card claim-state-card">
|
|
<Spin indicator={<LoadingOutlined spin />} size="large" />
|
|
<p>正在读取当前领取进度...</p>
|
|
</Card>
|
|
) : errorMessage ? (
|
|
<Card className="claim-content-card claim-state-card">
|
|
<ExclamationCircleOutlined className="claim-large-icon claim-icon-error" />
|
|
<p>{errorMessage}</p>
|
|
</Card>
|
|
) : snapshot.isFeifeiFlow && snapshot.feifei ? (
|
|
<FeifeiClaimPanel
|
|
feifei={snapshot.feifei}
|
|
order={snapshot.order}
|
|
product={snapshot.product}
|
|
taskLastError={snapshot.task?.lastError}
|
|
onOpen={() => openFeifeiUrl(false)}
|
|
/>
|
|
) : detail && snapshot.flow ? (
|
|
<KuaishouCloudClaimSteps
|
|
snapshot={snapshot}
|
|
ticketCode={ticketCode}
|
|
qrCodeDataUrl={qrCodeDataUrl}
|
|
submitting={submitting}
|
|
refreshingRole={refreshingRole}
|
|
confirmingRole={confirmingRole}
|
|
rebindingRole={rebindingRole}
|
|
redeeming={redeeming}
|
|
onTicketCodeChange={setTicketCode}
|
|
onSubmitTicket={submitTicket}
|
|
onOpenBindUrl={openBindUrl}
|
|
onRefreshRole={refreshRole}
|
|
onRebindRole={rebindRole}
|
|
onConfirmRole={confirmRole}
|
|
onConfirmRedeem={confirmRedeem}
|
|
/>
|
|
) : (
|
|
<Card className="claim-content-card claim-state-card">
|
|
<Empty description="流程数据不完整，请联系客服处理" />
|
|
</Card>
|
|
)}
|
|
</main>
|
|
)
|
|
}
|
|
|
|
function createClaimSnapshot(
|
|
detail: ClaimDetailData | null,
|
|
options: { rebindingRole?: boolean } = {},
|
|
) {
|
|
const flow = detail?.kuaishouCloudFulfillment || null
|
|
const feifei = detail?.kuaishouFeifei || null
|
|
const order = detail?.order || null
|
|
const orderItem = detail?.orderItem || null
|
|
const product = detail?.product || null
|
|
const task = detail?.task || null
|
|
|
|
const roleName = flow?.role.name || flow?.binding.roleName || ''
|
|
const roleId = flow?.role.rid || flow?.binding.roleId || ''
|
|
const isFeifeiFlow = detail?.flowType === 'kuaishou_feifei'
|
|
const isTicketVerified = flow?.ticket.status === 'verified'
|
|
const isBindUrlExpired = isDateExpired(flow?.binding.bindExpiresAt || '')
|
|
const isBindingPrepared =
|
|
flow?.binding.prepareStatus === 'ready' &&
|
|
Boolean(String(flow?.binding.bindUrl || '').trim()) &&
|
|
!isBindUrlExpired
|
|
const isBindingPreparing = flow?.binding.prepareStatus === 'pending'
|
|
const canEnterBindingStep = isTicketVerified
|
|
const isRoleReady = Boolean(roleName || roleId)
|
|
const hasDefaultRoleSnapshot = Boolean(flow?.role.defaultName || flow?.role.defaultRid)
|
|
const isDefaultRole = flow?.role.isDefaultRole === true
|
|
const isCustomerRoleReady = isRoleReady && hasDefaultRoleSnapshot && !isDefaultRole
|
|
const confirmRoleDisabledReason = resolveConfirmRoleDisabledReason({
|
|
flow,
|
|
isBindingPrepared,
|
|
hasDefaultRoleSnapshot,
|
|
isRoleReady,
|
|
isDefaultRole,
|
|
rebindingRole: Boolean(options.rebindingRole),
|
|
})
|
|
const isRoleConfirmed = isKuaishouCloudRoleConfirmedStatus(task?.status)
|
|
const isDispatched = String(flow?.dispatch.status || '').trim() === 'success'
|
|
const normalizedStatus = normalizeTaskStatus(task?.status)
|
|
const isRedeemFailed =
|
|
normalizedStatus === TASK_STATUS.MANUAL_REVIEW ||
|
|
normalizedStatus === TASK_STATUS.FAILED ||
|
|
String(flow?.dispatch.status || '').trim() === 'failed'
|
|
const isCompleted = isKuaishouCloudCompletedStatus(task?.status)
|
|
const hasRedeemResult = isDispatched || hasKuaishouCloudRedeemResultStatus(task?.status)
|
|
const canSubmitTicket = !isClaimInactiveTaskStatus(task?.status)
|
|
|
|
const currentStep = resolveCurrentStep({
|
|
isFeifeiFlow,
|
|
isCompleted,
|
|
hasRedeemResult,
|
|
isRoleConfirmed,
|
|
canEnterBindingStep,
|
|
})
|
|
const progressText = resolveProgressText({
|
|
feifei,
|
|
isFeifeiFlow,
|
|
hasRedeemResult,
|
|
isRoleConfirmed,
|
|
isTicketVerified,
|
|
isBindingPrepared,
|
|
})
|
|
const resultTitle = resolveResultTitle({ isRedeemFailed, isCompleted, isDispatched })
|
|
const resultDescription = resolveResultDescription({ detail, flow, task, isRedeemFailed, isCompleted })
|
|
const resultVariant: ResultVariant = isRedeemFailed
|
|
? 'warning'
|
|
: isCompleted || isDispatched
|
|
? 'success'
|
|
: 'info'
|
|
|
|
return {
|
|
flow,
|
|
feifei,
|
|
order,
|
|
orderItem,
|
|
product,
|
|
task,
|
|
roleName,
|
|
roleId,
|
|
isFeifeiFlow,
|
|
isTicketVerified,
|
|
isBindUrlExpired,
|
|
isBindingPrepared,
|
|
isBindingPreparing,
|
|
canEnterBindingStep,
|
|
isRoleReady,
|
|
hasDefaultRoleSnapshot,
|
|
isDefaultRole,
|
|
isCustomerRoleReady,
|
|
confirmRoleDisabledReason,
|
|
isRoleConfirmed,
|
|
isDispatched,
|
|
isRedeemFailed,
|
|
isCompleted,
|
|
hasRedeemResult,
|
|
canSubmitTicket,
|
|
currentStep,
|
|
progressText,
|
|
resultTitle,
|
|
resultDescription,
|
|
resultVariant,
|
|
}
|
|
}
|
|
|
|
function resolveConfirmRoleDisabledReason(options: {
|
|
flow: ClaimKuaishouCloudFlowInfo | null
|
|
isBindingPrepared: boolean
|
|
hasDefaultRoleSnapshot: boolean
|
|
isRoleReady: boolean
|
|
isDefaultRole: boolean
|
|
rebindingRole: boolean
|
|
}) {
|
|
if (!options.isBindingPrepared) {
|
|
return '绑定二维码还在准备中，请稍后自动刷新'
|
|
}
|
|
if (!options.hasDefaultRoleSnapshot) {
|
|
return options.flow?.role.defaultErrorMessage || '系统还未获取到虚拟机默认角色信息，请稍后刷新'
|
|
}
|
|
if (!options.isRoleReady) {
|
|
return '请先扫码绑定自己的角色，并刷新角色信息'
|
|
}
|
|
if (options.isDefaultRole) {
|
|
return '当前仍是虚拟机默认角色，请重新绑定自己的角色信息'
|
|
}
|
|
if (options.rebindingRole) {
|
|
return '正在换绑角色，请稍候'
|
|
}
|
|
return ''
|
|
}
|
|
|
|
function resolveCurrentStep(options: {
|
|
isFeifeiFlow: boolean
|
|
isCompleted: boolean
|
|
hasRedeemResult: boolean
|
|
isRoleConfirmed: boolean
|
|
canEnterBindingStep: boolean
|
|
}) {
|
|
if (options.isFeifeiFlow) {
|
|
return options.isCompleted ? 4 : 2
|
|
}
|
|
if (options.hasRedeemResult) {
|
|
return 4
|
|
}
|
|
if (options.isRoleConfirmed) {
|
|
return 3
|
|
}
|
|
if (options.canEnterBindingStep) {
|
|
return 2
|
|
}
|
|
return 1
|
|
}
|
|
|
|
function resolveProgressText(options: {
|
|
feifei: ClaimKuaishouFeifeiFlowInfo | null
|
|
isFeifeiFlow: boolean
|
|
hasRedeemResult: boolean
|
|
isRoleConfirmed: boolean
|
|
isTicketVerified: boolean
|
|
isBindingPrepared: boolean
|
|
}) {
|
|
if (options.isFeifeiFlow) {
|
|
return options.feifei?.rechargeStatusLabel || '请打开领取链接'
|
|
}
|
|
if (options.hasRedeemResult) {
|
|
return '兑换结果已生成'
|
|
}
|
|
if (options.isRoleConfirmed) {
|
|
return '角色已确认，等待兑换'
|
|
}
|
|
if (options.isTicketVerified) {
|
|
return options.isBindingPrepared ? '请完成扫码绑定' : '绑定链接刷新中，请稍候'
|
|
}
|
|
return '等待提交并核销'
|
|
}
|
|
|
|
function resolveResultTitle(options: {
|
|
isRedeemFailed: boolean
|
|
isCompleted: boolean
|
|
isDispatched: boolean
|
|
}) {
|
|
if (options.isRedeemFailed) {
|
|
return '兑换遇到问题'
|
|
}
|
|
if (options.isCompleted) {
|
|
return '兑换成功'
|
|
}
|
|
if (options.isDispatched) {
|
|
return '兑换请求已提交'
|
|
}
|
|
return '结果已记录'
|
|
}
|
|
|
|
function resolveResultDescription(options: {
|
|
detail: ClaimDetailData | null
|
|
flow: ClaimKuaishouCloudFlowInfo | null
|
|
task: ClaimDetailData['task'] | null
|
|
isRedeemFailed: boolean
|
|
isCompleted: boolean
|
|
}) {
|
|
if (options.isRedeemFailed) {
|
|
const message = String(
|
|
options.task?.lastError ||
|
|
options.flow?.dispatch.errorMessage ||
|
|
options.detail?.result?.resultMessage ||
|
|
'',
|
|
).trim()
|
|
return message || '当前兑换流程需要客服处理，后续结果请以后台任务界面为准。'
|
|
}
|
|
|
|
if (options.isCompleted) {
|
|
return '当前兑换流程已经完成。发货、退号和核销结果会保存在后台任务界面。'
|
|
}
|
|
|
|
return '你的兑换请求已经提交。发货、退号和核销结果会由系统保存在后台任务界面，无需在此页面等待。'
|
|
}
|
|
|
|
function isDateExpired(value: string | null) {
|
|
const normalized = String(value || '').trim()
|
|
if (!normalized) {
|
|
return false
|
|
}
|
|
|
|
const expiresTime = Date.parse(normalized)
|
|
return Number.isFinite(expiresTime) && expiresTime <= Date.now()
|
|
}
|
|
|
|
function ClaimHeaderCard({
|
|
order,
|
|
product,
|
|
currentStep,
|
|
progressText,
|
|
}: {
|
|
order: ClaimOrderInfo | null
|
|
product: ClaimProductInfo | null
|
|
currentStep: number
|
|
progressText: string
|
|
}) {
|
|
return (
|
|
<Card className="claim-header-card">
|
|
<div className="claim-header-copy">
|
|
<span className="eyebrow">快手 Cloud 客户领取</span>
|
|
<h1>{product?.title || '商品领取'}</h1>
|
|
<p>订单号：{order?.platformOrderId || '-'}</p>
|
|
<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>
|
|
)
|
|
}
|
|
|
|
function KuaishouCloudClaimSteps({
|
|
snapshot,
|
|
ticketCode,
|
|
qrCodeDataUrl,
|
|
submitting,
|
|
refreshingRole,
|
|
confirmingRole,
|
|
rebindingRole,
|
|
redeeming,
|
|
onTicketCodeChange,
|
|
onSubmitTicket,
|
|
onOpenBindUrl,
|
|
onRefreshRole,
|
|
onRebindRole,
|
|
onConfirmRole,
|
|
onConfirmRedeem,
|
|
}: {
|
|
snapshot: ClaimSnapshot
|
|
ticketCode: string
|
|
qrCodeDataUrl: string
|
|
submitting: boolean
|
|
refreshingRole: boolean
|
|
confirmingRole: boolean
|
|
rebindingRole: boolean
|
|
redeeming: boolean
|
|
onTicketCodeChange: (value: string) => void
|
|
onSubmitTicket: () => void
|
|
onOpenBindUrl: (useCurrentPage?: boolean) => void
|
|
onRefreshRole: () => void
|
|
onRebindRole: () => void
|
|
onConfirmRole: () => void
|
|
onConfirmRedeem: () => void
|
|
}) {
|
|
if (!snapshot.flow) {
|
|
return null
|
|
}
|
|
|
|
if (snapshot.currentStep === 1) {
|
|
return (
|
|
<ClaimTicketStep
|
|
ticketCode={ticketCode}
|
|
canSubmitTicket={snapshot.canSubmitTicket && !submitting}
|
|
submitting={submitting}
|
|
isBindingPreparing={snapshot.isBindingPreparing}
|
|
flow={snapshot.flow}
|
|
onTicketCodeChange={onTicketCodeChange}
|
|
onSubmitTicket={onSubmitTicket}
|
|
/>
|
|
)
|
|
}
|
|
|
|
if (snapshot.currentStep === 2) {
|
|
return (
|
|
<ClaimBindingStep
|
|
snapshot={snapshot}
|
|
qrCodeDataUrl={qrCodeDataUrl}
|
|
refreshingRole={refreshingRole}
|
|
confirmingRole={confirmingRole}
|
|
rebindingRole={rebindingRole}
|
|
onOpenBindUrl={onOpenBindUrl}
|
|
onRefreshRole={onRefreshRole}
|
|
onRebindRole={onRebindRole}
|
|
onConfirmRole={onConfirmRole}
|
|
/>
|
|
)
|
|
}
|
|
|
|
if (snapshot.currentStep === 3) {
|
|
return (
|
|
<ClaimConfirmStep
|
|
roleName={snapshot.roleName}
|
|
roleId={snapshot.roleId}
|
|
product={snapshot.product}
|
|
redeeming={redeeming}
|
|
rebindingRole={rebindingRole}
|
|
onConfirmRedeem={onConfirmRedeem}
|
|
onRebindRole={onRebindRole}
|
|
/>
|
|
)
|
|
}
|
|
|
|
return <ClaimResultStep snapshot={snapshot} />
|
|
}
|
|
|
|
function ClaimTicketStep({
|
|
ticketCode,
|
|
canSubmitTicket,
|
|
submitting,
|
|
isBindingPreparing,
|
|
flow,
|
|
onTicketCodeChange,
|
|
onSubmitTicket,
|
|
}: {
|
|
ticketCode: string
|
|
canSubmitTicket: boolean
|
|
submitting: boolean
|
|
isBindingPreparing: boolean
|
|
flow: ClaimKuaishouCloudFlowInfo
|
|
onTicketCodeChange: (value: string) => void
|
|
onSubmitTicket: () => void
|
|
}) {
|
|
return (
|
|
<Card className="claim-content-card">
|
|
<Typography.Title level={2}>第 1 步：提交核销码</Typography.Title>
|
|
<p className="claim-muted">
|
|
请您先从快手小店复制核销码。提交后会立即核销，核销成功后系统会自动准备绑定资源。
|
|
</p>
|
|
|
|
<Input
|
|
size="large"
|
|
value={ticketCode}
|
|
placeholder="粘贴快手核销码"
|
|
disabled={!canSubmitTicket}
|
|
onChange={(event) => onTicketCodeChange(event.target.value)}
|
|
onPressEnter={onSubmitTicket}
|
|
/>
|
|
|
|
<Button
|
|
type="primary"
|
|
size="large"
|
|
icon={<SendOutlined />}
|
|
loading={submitting}
|
|
disabled={!canSubmitTicket}
|
|
onClick={onSubmitTicket}
|
|
>
|
|
提交核销码并继续
|
|
</Button>
|
|
|
|
<Alert
|
|
type="info"
|
|
showIcon
|
|
icon={<ClockCircleOutlined />}
|
|
message={
|
|
isBindingPreparing
|
|
? '核销完成后会自动准备绑定资源。'
|
|
: '核销完成后会自动进入扫码绑定步骤。'
|
|
}
|
|
/>
|
|
|
|
{flow.guideImages.length > 0 ? (
|
|
<Collapse
|
|
defaultActiveKey={['guide']}
|
|
items={[
|
|
{
|
|
key: 'guide',
|
|
label: '查看核销码图文指引',
|
|
children: (
|
|
<Image.PreviewGroup>
|
|
<div className="claim-guide-grid">
|
|
{flow.guideImages.map((imageUrl, index) => (
|
|
<figure key={imageUrl} className="claim-guide-figure">
|
|
<Image src={imageUrl} alt={`步骤 ${index + 1}`} />
|
|
<figcaption>步骤 {index + 1}</figcaption>
|
|
</figure>
|
|
))}
|
|
</div>
|
|
</Image.PreviewGroup>
|
|
),
|
|
},
|
|
]}
|
|
/>
|
|
) : null}
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
function ClaimBindingStep({
|
|
snapshot,
|
|
qrCodeDataUrl,
|
|
refreshingRole,
|
|
confirmingRole,
|
|
rebindingRole,
|
|
onOpenBindUrl,
|
|
onRefreshRole,
|
|
onRebindRole,
|
|
onConfirmRole,
|
|
}: {
|
|
snapshot: ClaimSnapshot
|
|
qrCodeDataUrl: string
|
|
refreshingRole: boolean
|
|
confirmingRole: boolean
|
|
rebindingRole: boolean
|
|
onOpenBindUrl: (useCurrentPage?: boolean) => void
|
|
onRefreshRole: () => void
|
|
onRebindRole: () => void
|
|
onConfirmRole: () => void
|
|
}) {
|
|
const flow = snapshot.flow
|
|
if (!flow) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<Card className="claim-content-card claim-binding-card">
|
|
{snapshot.isBindingPrepared && qrCodeDataUrl ? (
|
|
<div className="claim-qr-block">
|
|
<div className="claim-qr-guide-panel">
|
|
<div className="claim-scan-label claim-scan-label-left">Q区用Q扫</div>
|
|
<img src={qrCodeDataUrl} alt="绑定二维码" className="claim-qr-code" />
|
|
<div className="claim-scan-label claim-scan-label-right">V区用V扫</div>
|
|
<p className="claim-save-hint">长按保存相册进行扫码绑定</p>
|
|
</div>
|
|
|
|
<Button icon={<LinkOutlined />} onClick={() => onOpenBindUrl(false)}>
|
|
打开绑定链接
|
|
</Button>
|
|
</div>
|
|
) : (
|
|
<Alert
|
|
type="info"
|
|
showIcon
|
|
icon={<LoadingOutlined spin />}
|
|
message="系统正在准备绑定资源，请稍后自动刷新。"
|
|
/>
|
|
)}
|
|
|
|
<div className={snapshot.isCustomerRoleReady ? 'claim-role-panel' : 'claim-role-panel pending'}>
|
|
<InfoRow label="当前角色" value={snapshot.roleName || '待识别'} />
|
|
<InfoRow label="角色 ID" value={snapshot.roleId || '-'} />
|
|
</div>
|
|
|
|
{flow.role.isDefaultRole ? (
|
|
<Alert type="warning" showIcon message="当前仍是虚拟机默认角色，请重新绑定自己的角色信息。" />
|
|
) : null}
|
|
|
|
<Space size={12} wrap className="claim-action-row">
|
|
<Button size="large" icon={<ReloadOutlined />} loading={refreshingRole} onClick={onRefreshRole}>
|
|
刷新角色信息
|
|
</Button>
|
|
<Button
|
|
size="large"
|
|
icon={<SwapOutlined />}
|
|
loading={rebindingRole}
|
|
disabled={confirmingRole}
|
|
onClick={onRebindRole}
|
|
>
|
|
换绑角色
|
|
</Button>
|
|
<Tooltip title={snapshot.confirmRoleDisabledReason || undefined}>
|
|
<span className="claim-action-tooltip-wrap">
|
|
<Button
|
|
type="primary"
|
|
size="large"
|
|
icon={<CheckCircleOutlined />}
|
|
loading={confirmingRole}
|
|
disabled={Boolean(snapshot.confirmRoleDisabledReason)}
|
|
onClick={onConfirmRole}
|
|
>
|
|
我已完成绑定，下一步
|
|
</Button>
|
|
</span>
|
|
</Tooltip>
|
|
</Space>
|
|
|
|
<div className="claim-meta-footer">
|
|
<span>最近刷新：{formatAdminDateTime(flow.role.refreshedAt)}</span>
|
|
<span>链接有效期：{formatAdminDateTime(flow.binding.bindExpiresAt)}</span>
|
|
{flow.binding.bindProbeMessage ? (
|
|
<span>
|
|
链接检测：{flow.binding.bindProbeStatus || '-'} / {flow.binding.bindProbeMessage}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
function ClaimConfirmStep({
|
|
roleName,
|
|
roleId,
|
|
product,
|
|
redeeming,
|
|
rebindingRole,
|
|
onConfirmRedeem,
|
|
onRebindRole,
|
|
}: {
|
|
roleName: string
|
|
roleId: string
|
|
product: ClaimProductInfo | null
|
|
redeeming: boolean
|
|
rebindingRole: boolean
|
|
onConfirmRedeem: () => void
|
|
onRebindRole: () => void
|
|
}) {
|
|
return (
|
|
<Card className="claim-content-card">
|
|
<Typography.Title level={2}>第 3 步：确认兑换信息</Typography.Title>
|
|
<p className="claim-muted">请再次确认角色和商品信息，确认无误后再继续兑换。</p>
|
|
|
|
<div className="claim-info-grid">
|
|
<InfoTile label="角色名称" value={roleName || '-'} />
|
|
<InfoTile label="角色 ID" value={roleId || '-'} />
|
|
<InfoTile label="领取商品" value={product?.title || '-'} />
|
|
<InfoTile label="商品数量" value={String(product?.quantity || 0)} />
|
|
</div>
|
|
|
|
<ClaimProductItems product={product} />
|
|
|
|
<Alert type="warning" showIcon message="兑换后不可取消，也不可退货。" />
|
|
|
|
<Space size={12} wrap className="claim-action-row">
|
|
<Button
|
|
size="large"
|
|
icon={<SwapOutlined />}
|
|
loading={rebindingRole}
|
|
disabled={redeeming}
|
|
onClick={onRebindRole}
|
|
>
|
|
换绑角色
|
|
</Button>
|
|
<Button
|
|
type="primary"
|
|
size="large"
|
|
icon={<CheckCircleOutlined />}
|
|
loading={redeeming}
|
|
disabled={rebindingRole}
|
|
onClick={onConfirmRedeem}
|
|
>
|
|
确认兑换
|
|
</Button>
|
|
</Space>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
function ClaimResultStep({ snapshot }: { snapshot: ClaimSnapshot }) {
|
|
const flow = snapshot.flow
|
|
if (!flow) {
|
|
return null
|
|
}
|
|
|
|
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="结果时间" value={formatAdminDateTime(flow.dispatch.dispatchAt)} />
|
|
<InfoTile label="领取商品" value={snapshot.product?.title || '-'} />
|
|
<InfoTile label="角色名称" value={snapshot.roleName || '-'} />
|
|
<InfoTile label="角色 ID" value={snapshot.roleId || '-'} />
|
|
<InfoTile label="订单号" value={snapshot.order?.platformOrderId || '-'} />
|
|
<InfoTile label="购买数量" value={String(snapshot.product?.quantity || 0)} />
|
|
</div>
|
|
|
|
<ClaimProductItems product={snapshot.product} />
|
|
|
|
<Alert
|
|
type={snapshot.resultVariant}
|
|
showIcon
|
|
message={
|
|
snapshot.resultVariant === 'warning'
|
|
? '当前兑换未完成，客服会根据后台任务记录继续处理。'
|
|
: '客户侧操作已经完成，后续履约结果请以后台任务界面为准。'
|
|
}
|
|
/>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
function FeifeiClaimPanel({
|
|
feifei,
|
|
order,
|
|
product,
|
|
taskLastError,
|
|
onOpen,
|
|
}: {
|
|
feifei: ClaimKuaishouFeifeiFlowInfo
|
|
order: ClaimOrderInfo | null
|
|
product: ClaimProductInfo | null
|
|
taskLastError?: string
|
|
onOpen: () => void
|
|
}) {
|
|
return (
|
|
<Card className="claim-content-card">
|
|
<div className="claim-feifei-main">
|
|
<span className="claim-feifei-label">kuaishou-feifei</span>
|
|
<Typography.Title level={2}>{product?.title || '商品领取'}</Typography.Title>
|
|
<p>{feifei.rechargeStatusLabel || '待领取'}</p>
|
|
</div>
|
|
|
|
<div className="claim-info-grid">
|
|
<InfoTile label="订单号" value={order?.platformOrderId || '-'} />
|
|
<InfoTile label="平台单号" value={feifei.orderNo || feifei.platformOrderNo || '-'} />
|
|
</div>
|
|
|
|
<Button
|
|
type="primary"
|
|
size="large"
|
|
icon={<LinkOutlined />}
|
|
disabled={!feifei.h5.rechargeUrl && !feifei.h5.entryUrl}
|
|
onClick={onOpen}
|
|
>
|
|
打开领取链接
|
|
</Button>
|
|
|
|
{taskLastError ? <Alert type="warning" showIcon message={taskLastError} /> : null}
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
function ClaimProductItems({
|
|
product,
|
|
compact = false,
|
|
}: {
|
|
product: ClaimProductInfo | null
|
|
compact?: boolean
|
|
}) {
|
|
const items = getProductItems(product)
|
|
const hasMultipleItems = Boolean(product?.isBundle || items.length > 1)
|
|
|
|
if (!items.length) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<div className={compact ? 'claim-product-items compact' : 'claim-product-items'}>
|
|
<div className="claim-product-items-header">
|
|
<span>{hasMultipleItems ? '包含商品' : '商品明细'}</span>
|
|
{hasMultipleItems ? <strong>{items.length} 项</strong> : null}
|
|
</div>
|
|
|
|
<div className="claim-product-items-list">
|
|
{items.map((item) => (
|
|
<div key={item.key} className="claim-product-item-row">
|
|
<span>{item.name}</span>
|
|
<strong>x{item.quantity}</strong>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function getProductItems(product: ClaimProductInfo | null) {
|
|
const items = Array.isArray(product?.items) ? product.items : []
|
|
return items
|
|
.map((item) => ({
|
|
key: item.cloudSkuId || item.name,
|
|
name: String(item.name || '').trim(),
|
|
quantity: Math.max(1, Number(item.quantity || 1) || 1),
|
|
}))
|
|
.filter((item) => item.name)
|
|
}
|
|
|
|
function InfoTile({ label, value }: { label: string; value: string }) {
|
|
return (
|
|
<div className="claim-info-item">
|
|
<span>{label}</span>
|
|
<strong>{value}</strong>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function InfoRow({ label, value }: { label: string; value: string }) {
|
|
return (
|
|
<div className="claim-role-panel-item">
|
|
<span>{label}</span>
|
|
<strong>{value}</strong>
|
|
</div>
|
|
)
|
|
}
|