95 lines
2.5 KiB
TypeScript
95 lines
2.5 KiB
TypeScript
import { Button, Input, Space, Tooltip } from 'antd'
|
|
import type { ClaimProductInfo } from '@/types/claim'
|
|
|
|
export 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>
|
|
)
|
|
}
|
|
|
|
export function UidEditRow({
|
|
uidInput,
|
|
submitting,
|
|
onChange,
|
|
onSubmit,
|
|
}: {
|
|
uidInput: string
|
|
submitting: boolean
|
|
onChange: (value: string) => void
|
|
onSubmit: () => void
|
|
}) {
|
|
return (
|
|
<Space.Compact style={{ width: '100%', marginBottom: 16 }}>
|
|
<Input
|
|
size="large"
|
|
value={uidInput}
|
|
maxLength={15}
|
|
placeholder="游戏编号"
|
|
onChange={(event) => onChange(event.target.value.replace(/\D/g, '').slice(0, 15))}
|
|
onPressEnter={onSubmit}
|
|
/>
|
|
<Tooltip title="游戏编号填错时，修改为正确编号后点击「更新 UID」即可">
|
|
<Button size="large" loading={submitting} onClick={onSubmit}>
|
|
更新 UID
|
|
</Button>
|
|
</Tooltip>
|
|
</Space.Compact>
|
|
)
|
|
}
|
|
|
|
export function InfoTile({ label, value }: { label: string; value: string }) {
|
|
return (
|
|
<div className="claim-info-item">
|
|
<span>{label}</span>
|
|
<strong>{value}</strong>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function InfoRow({ label, value }: { label: string; value: string }) {
|
|
return (
|
|
<div className="claim-role-panel-item">
|
|
<span>{label}</span>
|
|
<strong>{value}</strong>
|
|
</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)
|
|
}
|