feat(admin): 彻底优化任务列表与详情界面，集成到账存证凭单与联盟直充面板
- 优化任务列表角色列：支持从 affiliateDash 及 claimIdentity 中自动提取并展示角色名与 UID（含一键复制） - 列表操作栏支持一键查看到账存证凭单，支持直接复制图片发给买家或下载保存 - 任务详情页全面现代化重构： - 新增「兑换成功 · 官方直充到账存证凭据」大卡片，实时生成 640x960 Retina 高清卡片，支持一键写入系统剪贴板（微信/QQ/客服窗口直接 Ctrl+V 发送）、下载 PNG 大图与全屏预览 - 新增「联盟直充履约 (affiliate_dash)」专属面板，结构化展示上游订单号、直充状态、点数积分、核销状态及供应商回执 - 优化凭据生成器 (voucher.ts)：强制优先读取本地高清商品图，彻底消除上游图片文字水印与圆环破图问题 - 验证方式：npm run build & npm test (133 项单测全量通过)
This commit is contained in:
yml2213
@@ -139,7 +139,7 @@ export async function getAdminOrders(
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function groupRowsByOrderId<T extends { order_id: number | string }>(rows: T[]): Map<number, T[]> {
|
function groupRowsByOrderId<T extends { order_id?: number | string | null }>(rows: T[]): Map<number, T[]> {
|
||||||
const grouped = new Map<number, T[]>()
|
const grouped = new Map<number, T[]>()
|
||||||
for (const row of rows) {
|
for (const row of rows) {
|
||||||
// pg BIGINT 常以 string 返回；统一 Number 键，避免列表挂不上 order_items →「商品 0」。
|
// pg BIGINT 常以 string 返回；统一 Number 键，避免列表挂不上 order_items →「商品 0」。
|
||||||
@@ -431,6 +431,7 @@ export async function getAdminTaskDetail(
|
|||||||
kuaishouCloudFulfillment,
|
kuaishouCloudFulfillment,
|
||||||
kuaishouIndustryVoucher,
|
kuaishouIndustryVoucher,
|
||||||
manualDispatch: mapManualDispatchContext(taskContext.manualDispatch, viewerContext),
|
manualDispatch: mapManualDispatchContext(taskContext.manualDispatch, viewerContext),
|
||||||
|
affiliateDash: taskContext.affiliateDash || null,
|
||||||
events: taskEvents.map(mapAdminTaskEvent),
|
events: taskEvents.map(mapAdminTaskEvent),
|
||||||
operations: {
|
operations: {
|
||||||
canRetry:
|
canRetry:
|
||||||
|
|||||||
@@ -285,9 +285,53 @@ function getTaskRetryCount(task: TaskRow | null | undefined): number {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function resolveTaskDisplayRoleName(task: TaskRow): string {
|
function resolveTaskDisplayRoleName(task: TaskRow): string {
|
||||||
return String(task.kuaishou_role_name || task.role_name || '').trim()
|
if (task.kuaishou_role_name || task.role_name) {
|
||||||
|
return String(task.kuaishou_role_name || task.role_name).trim()
|
||||||
|
}
|
||||||
|
const context = safeParseJson(task.context_json)
|
||||||
|
const affiliateDash = context.affiliateDash
|
||||||
|
if (affiliateDash && typeof affiliateDash === 'object') {
|
||||||
|
const dash = affiliateDash as Record<string, unknown>
|
||||||
|
const name = String(dash.roleName || dash.boundRoleName || dash.game_account_role_name || '').trim()
|
||||||
|
if (name) return name
|
||||||
|
}
|
||||||
|
const kuaishouCloud = context.kuaishouCloudFulfillment
|
||||||
|
if (kuaishouCloud && typeof kuaishouCloud === 'object') {
|
||||||
|
const cloud = kuaishouCloud as Record<string, unknown>
|
||||||
|
const roleObj = cloud.role as Record<string, unknown> | undefined
|
||||||
|
if (roleObj?.name) return String(roleObj.name).trim()
|
||||||
|
}
|
||||||
|
return ''
|
||||||
}
|
}
|
||||||
|
|
||||||
function resolveTaskDisplayRoleId(task: TaskRow): string {
|
function resolveTaskDisplayRoleId(task: TaskRow): string {
|
||||||
return String(task.kuaishou_role_id || task.role_id || '').trim()
|
if (task.kuaishou_role_id || task.role_id) {
|
||||||
|
return String(task.kuaishou_role_id || task.role_id).trim()
|
||||||
|
}
|
||||||
|
const context = safeParseJson(task.context_json)
|
||||||
|
const affiliateDash = context.affiliateDash
|
||||||
|
if (affiliateDash && typeof affiliateDash === 'object') {
|
||||||
|
const dash = affiliateDash as Record<string, unknown>
|
||||||
|
const id = String(
|
||||||
|
dash.boundAccount ||
|
||||||
|
dash.gameAccount ||
|
||||||
|
dash.expectedGameAccount ||
|
||||||
|
dash.game_uid ||
|
||||||
|
dash.game_account ||
|
||||||
|
'',
|
||||||
|
).trim()
|
||||||
|
if (id) return id
|
||||||
|
}
|
||||||
|
const claimIdentity = context.claimIdentity
|
||||||
|
if (claimIdentity && typeof claimIdentity === 'object') {
|
||||||
|
const id = String((claimIdentity as Record<string, unknown>).expectedUid || '').trim()
|
||||||
|
if (id) return id
|
||||||
|
}
|
||||||
|
const kuaishouCloud = context.kuaishouCloudFulfillment
|
||||||
|
if (kuaishouCloud && typeof kuaishouCloud === 'object') {
|
||||||
|
const cloud = kuaishouCloud as Record<string, unknown>
|
||||||
|
const roleObj = cloud.role as Record<string, unknown> | undefined
|
||||||
|
if (roleObj?.rid) return String(roleObj.rid).trim()
|
||||||
|
}
|
||||||
|
return ''
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -20,6 +20,7 @@ export type AdminTaskDetailView = {
|
|||||||
kuaishouCloudFulfillment: JsonObject | null
|
kuaishouCloudFulfillment: JsonObject | null
|
||||||
kuaishouIndustryVoucher: JsonObject | null
|
kuaishouIndustryVoucher: JsonObject | null
|
||||||
manualDispatch: JsonObject | null
|
manualDispatch: JsonObject | null
|
||||||
|
affiliateDash: JsonObject | null
|
||||||
events: JsonObject[]
|
events: JsonObject[]
|
||||||
operations: JsonObject
|
operations: JsonObject
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,10 +3,14 @@ import {
|
|||||||
CheckCircleOutlined,
|
CheckCircleOutlined,
|
||||||
CloseCircleOutlined,
|
CloseCircleOutlined,
|
||||||
CopyOutlined,
|
CopyOutlined,
|
||||||
|
DownloadOutlined,
|
||||||
|
EyeOutlined,
|
||||||
|
FileImageOutlined,
|
||||||
LinkOutlined,
|
LinkOutlined,
|
||||||
PauseCircleOutlined,
|
PauseCircleOutlined,
|
||||||
PlayCircleOutlined,
|
PlayCircleOutlined,
|
||||||
ReloadOutlined,
|
ReloadOutlined,
|
||||||
|
SafetyCertificateOutlined,
|
||||||
StopOutlined,
|
StopOutlined,
|
||||||
UserSwitchOutlined,
|
UserSwitchOutlined,
|
||||||
} from '@ant-design/icons'
|
} from '@ant-design/icons'
|
||||||
@@ -23,9 +27,11 @@ import {
|
|||||||
Modal,
|
Modal,
|
||||||
Skeleton,
|
Skeleton,
|
||||||
Space,
|
Space,
|
||||||
|
Spin,
|
||||||
Table,
|
Table,
|
||||||
Tabs,
|
Tabs,
|
||||||
Tag,
|
Tag,
|
||||||
|
Tooltip,
|
||||||
Typography,
|
Typography,
|
||||||
} from 'antd'
|
} from 'antd'
|
||||||
import type { TableColumnsType } from 'antd'
|
import type { TableColumnsType } from 'antd'
|
||||||
@@ -57,6 +63,12 @@ import {
|
|||||||
formatTaskEventType,
|
formatTaskEventType,
|
||||||
} from '@/utils/admin-display'
|
} from '@/utils/admin-display'
|
||||||
import { formatAdminDateTime } from '@/utils/admin-time'
|
import { formatAdminDateTime } from '@/utils/admin-time'
|
||||||
|
import {
|
||||||
|
copyVoucherDataUrlToClipboard,
|
||||||
|
downloadVoucherDataUrl,
|
||||||
|
generateVoucherDataURL,
|
||||||
|
type DeliveryVoucherData,
|
||||||
|
} from '@/utils/voucher'
|
||||||
|
|
||||||
type TaskEvent = AdminTaskDetail['events'][number]
|
type TaskEvent = AdminTaskDetail['events'][number]
|
||||||
type KuaishouIndustryVoucher = NonNullable<AdminTaskDetail['kuaishouIndustryVoucher']>
|
type KuaishouIndustryVoucher = NonNullable<AdminTaskDetail['kuaishouIndustryVoucher']>
|
||||||
@@ -68,6 +80,7 @@ type ManualDispatchForm = {
|
|||||||
|
|
||||||
export default function AdminTaskDetailPage() {
|
export default function AdminTaskDetailPage() {
|
||||||
const { taskId = '' } = useParams()
|
const { taskId = '' } = useParams()
|
||||||
|
const navigate = useNavigate()
|
||||||
const { message, modal } = App.useApp()
|
const { message, modal } = App.useApp()
|
||||||
const [actionLoadingKey, setActionLoadingKey] = useState('')
|
const [actionLoadingKey, setActionLoadingKey] = useState('')
|
||||||
const [lastClaimUrl, setLastClaimUrl] = useState('')
|
const [lastClaimUrl, setLastClaimUrl] = useState('')
|
||||||
@@ -80,6 +93,12 @@ export default function AdminTaskDetailPage() {
|
|||||||
deliveredCredential: '',
|
deliveredCredential: '',
|
||||||
resultMessage: '',
|
resultMessage: '',
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// 存证凭据生成状态
|
||||||
|
const [voucherDataUrl, setVoucherDataUrl] = useState('')
|
||||||
|
const [voucherLoading, setVoucherLoading] = useState(false)
|
||||||
|
const [copyingVoucher, setCopyingVoucher] = useState(false)
|
||||||
|
|
||||||
const query = useQuery({
|
const query = useQuery({
|
||||||
queryKey: ['admin-task-detail', taskId],
|
queryKey: ['admin-task-detail', taskId],
|
||||||
queryFn: () => fetchAdminTaskDetail(taskId),
|
queryFn: () => fetchAdminTaskDetail(taskId),
|
||||||
@@ -158,6 +177,86 @@ export default function AdminTaskDetailPage() {
|
|||||||
}
|
}
|
||||||
}, [detail?.screenshotUrl, detail?.task.taskId])
|
}, [detail?.screenshotUrl, detail?.task.taskId])
|
||||||
|
|
||||||
|
// 生成发货存证大图
|
||||||
|
const voucherData = useMemo<DeliveryVoucherData | null>(() => {
|
||||||
|
if (!detail) return null
|
||||||
|
const roleName = detail.affiliateDash?.roleName || detail.task.roleName || ''
|
||||||
|
const roleUID =
|
||||||
|
detail.affiliateDash?.boundAccount ||
|
||||||
|
detail.affiliateDash?.gameAccount ||
|
||||||
|
detail.affiliateDash?.expectedGameAccount ||
|
||||||
|
detail.task.roleId ||
|
||||||
|
detail.claimIdentity?.boundUid ||
|
||||||
|
detail.claimIdentity?.expectedUid ||
|
||||||
|
''
|
||||||
|
const productName =
|
||||||
|
detail.orderItem?.skuName ||
|
||||||
|
detail.task.skuName ||
|
||||||
|
detail.affiliateDash?.productName ||
|
||||||
|
'和平精英道具'
|
||||||
|
const productSKU =
|
||||||
|
detail.orderItem?.skuCode || detail.task.skuCode || detail.affiliateDash?.sku || ''
|
||||||
|
const rawChannel = detail.affiliateDash?.gameChannel || ''
|
||||||
|
const channel = rawChannel === '1-1' ? '安卓-微信' : rawChannel || '安卓-微信'
|
||||||
|
const redeemedAt =
|
||||||
|
detail.task.redeemedAt || detail.affiliateDash?.lastSyncedAt || detail.task.updatedAt
|
||||||
|
const voucherNo = detail.task.taskNo || ''
|
||||||
|
|
||||||
|
return {
|
||||||
|
productName,
|
||||||
|
productSKU,
|
||||||
|
roleName,
|
||||||
|
roleUID,
|
||||||
|
channel,
|
||||||
|
redeemedAt: formatAdminDateTime(redeemedAt),
|
||||||
|
voucherNo,
|
||||||
|
}
|
||||||
|
}, [detail])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!voucherData || (!voucherData.roleUID && !voucherData.roleName)) {
|
||||||
|
setVoucherDataUrl('')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
let active = true
|
||||||
|
setVoucherLoading(true)
|
||||||
|
generateVoucherDataURL(voucherData)
|
||||||
|
.then((url) => {
|
||||||
|
if (active) {
|
||||||
|
setVoucherDataUrl(url)
|
||||||
|
setVoucherLoading(false)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
if (active) {
|
||||||
|
console.error('Failed to generate voucher preview in task detail:', err)
|
||||||
|
setVoucherLoading(false)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return () => {
|
||||||
|
active = false
|
||||||
|
}
|
||||||
|
}, [voucherData])
|
||||||
|
|
||||||
|
const handleCopyVoucher = async () => {
|
||||||
|
if (!voucherDataUrl) return
|
||||||
|
setCopyingVoucher(true)
|
||||||
|
const success = await copyVoucherDataUrlToClipboard(voucherDataUrl)
|
||||||
|
setCopyingVoucher(false)
|
||||||
|
if (success) {
|
||||||
|
message.success('凭据图片已复制到剪贴板！可在微信/QQ/客服聊天框直接 Ctrl+V 粘贴发给买家。')
|
||||||
|
} else {
|
||||||
|
message.warning('浏览器限制直接写入剪贴板图片，请使用右侧“下载大图”保存凭证！')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDownloadVoucher = () => {
|
||||||
|
if (!voucherDataUrl) return
|
||||||
|
const filename = `和平精英_${voucherData?.roleName || '直充'}_${voucherData?.voucherNo || '凭单'}.png`
|
||||||
|
downloadVoucherDataUrl(voucherDataUrl, filename)
|
||||||
|
message.success('已开始下载凭据大图')
|
||||||
|
}
|
||||||
|
|
||||||
if (query.isLoading) {
|
if (query.isLoading) {
|
||||||
return (
|
return (
|
||||||
<section className="page-stack">
|
<section className="page-stack">
|
||||||
@@ -184,6 +283,7 @@ export default function AdminTaskDetailPage() {
|
|||||||
|
|
||||||
const resolvedDetail = detail
|
const resolvedDetail = detail
|
||||||
const flow = resolvedDetail.kuaishouCloudFulfillment
|
const flow = resolvedDetail.kuaishouCloudFulfillment
|
||||||
|
const affiliateDash = resolvedDetail.affiliateDash
|
||||||
const eventColumns: TableColumnsType<TaskEvent> = [
|
const eventColumns: TableColumnsType<TaskEvent> = [
|
||||||
{
|
{
|
||||||
title: '时间',
|
title: '时间',
|
||||||
@@ -194,7 +294,7 @@ export default function AdminTaskDetailPage() {
|
|||||||
{
|
{
|
||||||
title: '事件',
|
title: '事件',
|
||||||
dataIndex: 'eventType',
|
dataIndex: 'eventType',
|
||||||
width: 180,
|
width: 200,
|
||||||
render: (value) => formatTaskEventType(value),
|
render: (value) => formatTaskEventType(value),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -306,6 +406,9 @@ export default function AdminTaskDetailPage() {
|
|||||||
setStatusModalVisible(true)
|
setStatusModalVisible(true)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const isAffiliateDash =
|
||||||
|
resolvedDetail.task.executorKey === 'affiliate_dash' || Boolean(affiliateDash)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className="page-stack">
|
<section className="page-stack">
|
||||||
<PageHeader
|
<PageHeader
|
||||||
@@ -321,12 +424,265 @@ export default function AdminTaskDetailPage() {
|
|||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<FulfillmentOverviewPanel
|
{/* 1. 基础信息与订单关键卡片 */}
|
||||||
detail={resolvedDetail}
|
<Card
|
||||||
claimUrl={claimUrl}
|
title="任务核心概览"
|
||||||
claimLinkInvalid={claimLinkInvalid}
|
extra={
|
||||||
/>
|
<Space>
|
||||||
|
<span>任务终态：</span>
|
||||||
|
<StatusTag value={resolvedDetail.task.status} kind="task" />
|
||||||
|
</Space>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Descriptions column={{ xs: 1, sm: 2, md: 3, xl: 4 }} bordered size="small">
|
||||||
|
<Descriptions.Item label="任务 ID">{resolvedDetail.task.taskId}</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="任务号">
|
||||||
|
<Typography.Text copyable={{ text: resolvedDetail.task.taskNo }}>
|
||||||
|
{resolvedDetail.task.taskNo}
|
||||||
|
</Typography.Text>
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="平台订单号">
|
||||||
|
{platformOrderId ? (
|
||||||
|
<Space>
|
||||||
|
<Typography.Link
|
||||||
|
onClick={() =>
|
||||||
|
resolvedDetail.order?.orderId &&
|
||||||
|
navigate(`/admin/orders/${resolvedDetail.order.orderId}`)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{platformOrderId}
|
||||||
|
</Typography.Link>
|
||||||
|
<Button
|
||||||
|
type="text"
|
||||||
|
size="small"
|
||||||
|
icon={<CopyOutlined />}
|
||||||
|
style={{ padding: 0, height: 'auto', color: '#64748b' }}
|
||||||
|
onClick={() => {
|
||||||
|
navigator.clipboard
|
||||||
|
.writeText(platformOrderId)
|
||||||
|
.then(() => message.success('已复制平台订单号'))
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Space>
|
||||||
|
) : (
|
||||||
|
'-'
|
||||||
|
)}
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="所属店铺">
|
||||||
|
{resolvedDetail.order?.shopName || '-'}
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="商品名称">
|
||||||
|
<span style={{ fontWeight: 600 }}>
|
||||||
|
{resolvedDetail.orderItem?.skuName || resolvedDetail.task.skuName || '-'}
|
||||||
|
</span>
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="商品编码 / SKU">
|
||||||
|
<span style={{ fontFamily: 'monospace' }}>
|
||||||
|
{resolvedDetail.orderItem?.skuCode || resolvedDetail.task.skuCode || '-'}
|
||||||
|
</span>
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="绑定游戏角色">
|
||||||
|
<span style={{ fontWeight: 600, color: '#0284c7' }}>
|
||||||
|
{resolvedDetail.task.roleName || affiliateDash?.roleName || '-'}
|
||||||
|
</span>
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="充值游戏 UID">
|
||||||
|
{resolvedDetail.task.roleId || affiliateDash?.gameAccount ? (
|
||||||
|
<Typography.Text
|
||||||
|
copyable={{
|
||||||
|
text: resolvedDetail.task.roleId || affiliateDash?.gameAccount || '',
|
||||||
|
}}
|
||||||
|
style={{ fontFamily: 'monospace', fontWeight: 600 }}
|
||||||
|
>
|
||||||
|
{resolvedDetail.task.roleId || affiliateDash?.gameAccount}
|
||||||
|
</Typography.Text>
|
||||||
|
) : (
|
||||||
|
'-'
|
||||||
|
)}
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="交付状态">
|
||||||
|
<StatusTag value={resolvedDetail.task.deliveryStatus} kind="delivery" />
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="资源状态">
|
||||||
|
<StatusTag value={resolvedDetail.task.resourceStatus} kind="resource" />
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="客户步骤">
|
||||||
|
<StatusTag value={resolvedDetail.task.customerStatus} kind="customer" />
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="更新时间">
|
||||||
|
{formatAdminDateTime(resolvedDetail.task.updatedAt)}
|
||||||
|
</Descriptions.Item>
|
||||||
|
{resolvedDetail.task.lastError ? (
|
||||||
|
<Descriptions.Item label="最近异常" span={4}>
|
||||||
|
<Typography.Text type="danger">{resolvedDetail.task.lastError}</Typography.Text>
|
||||||
|
</Descriptions.Item>
|
||||||
|
) : null}
|
||||||
|
</Descriptions>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* 2. 发货存证凭据卡片 (Voucher Delivery Proof) - 核心展示区 */}
|
||||||
|
<Card
|
||||||
|
title={
|
||||||
|
<Space>
|
||||||
|
<SafetyCertificateOutlined style={{ color: '#10b981', fontSize: 18 }} />
|
||||||
|
<span style={{ fontWeight: 600 }}>兑换成功 · 官方直充到账存证凭据</span>
|
||||||
|
{isTaskFulfilled ? <Tag color="success">已生成到账凭据</Tag> : <Tag>进行中</Tag>}
|
||||||
|
</Space>
|
||||||
|
}
|
||||||
|
extra={
|
||||||
|
<Space wrap>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
icon={<CopyOutlined />}
|
||||||
|
loading={copyingVoucher}
|
||||||
|
disabled={!voucherDataUrl || voucherLoading}
|
||||||
|
onClick={handleCopyVoucher}
|
||||||
|
>
|
||||||
|
复制凭据图片
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
icon={<DownloadOutlined />}
|
||||||
|
disabled={!voucherDataUrl || voucherLoading}
|
||||||
|
onClick={handleDownloadVoucher}
|
||||||
|
>
|
||||||
|
下载大图
|
||||||
|
</Button>
|
||||||
|
</Space>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'grid',
|
||||||
|
gridTemplateColumns: 'minmax(280px, 320px) 1fr',
|
||||||
|
gap: 28,
|
||||||
|
alignItems: 'start',
|
||||||
|
}}
|
||||||
|
className="voucher-detail-grid"
|
||||||
|
>
|
||||||
|
{/* 左侧：高清 Canvas 渲染卡片预览 */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'center',
|
||||||
|
background: '#09152b',
|
||||||
|
padding: 16,
|
||||||
|
borderRadius: 16,
|
||||||
|
boxShadow: '0 10px 30px rgba(12, 36, 82, 0.3)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{voucherLoading ? (
|
||||||
|
<div style={{ padding: '90px 0', textAlign: 'center' }}>
|
||||||
|
<Spin tip="正在渲染高清存证大图..." />
|
||||||
|
</div>
|
||||||
|
) : voucherDataUrl ? (
|
||||||
|
<div style={{ position: 'relative', width: '100%', textAlign: 'center' }}>
|
||||||
|
<Image
|
||||||
|
src={voucherDataUrl}
|
||||||
|
alt="到账存证凭单"
|
||||||
|
style={{
|
||||||
|
width: '100%',
|
||||||
|
maxWidth: 290,
|
||||||
|
borderRadius: 12,
|
||||||
|
boxShadow: '0 6px 20px rgba(0, 0, 0, 0.4)',
|
||||||
|
}}
|
||||||
|
preview={{
|
||||||
|
mask: (
|
||||||
|
<Space>
|
||||||
|
<EyeOutlined />
|
||||||
|
<span>点击全屏预览</span>
|
||||||
|
</Space>
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div style={{ marginTop: 10 }}>
|
||||||
|
<Typography.Text style={{ color: '#7dd3fc', fontSize: 12 }}>
|
||||||
|
640×960 Retina 高清凭单 · 即时生成
|
||||||
|
</Typography.Text>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div style={{ padding: '60px 0', color: '#94a3b8', textAlign: 'center' }}>
|
||||||
|
待用户绑定角色并成功充值后生成凭据
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 右侧：存证与履约结构化核验数据 */}
|
||||||
|
<Space direction="vertical" size={16} className="full-width">
|
||||||
|
<Alert
|
||||||
|
type={isTaskFulfilled ? 'success' : 'info'}
|
||||||
|
showIcon
|
||||||
|
message={
|
||||||
|
isTaskFulfilled
|
||||||
|
? '该任务已完成腾讯和平精英官方直充，到账凭据真实有效，防伪防篡改。'
|
||||||
|
: '任务推进中，用户完成角色绑定并由上游平台直充成功后即可生成官方到账存证。'
|
||||||
|
}
|
||||||
|
description="客服可通过上方“复制凭据图片”按钮，直接在抖音/微信/QQ聊天窗口 Ctrl+V 发送给买家作为发货凭据。"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Descriptions column={{ xs: 1, md: 2 }} bordered size="small">
|
||||||
|
<Descriptions.Item label="游戏角色">
|
||||||
|
<span style={{ fontWeight: 600, fontSize: 15, color: '#0f172a' }}>
|
||||||
|
{voucherData?.roleName || '-'}
|
||||||
|
</span>
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="游戏账号 (UID)">
|
||||||
|
<Typography.Text
|
||||||
|
copyable={{ text: voucherData?.roleUID || '' }}
|
||||||
|
style={{ fontFamily: 'monospace', fontWeight: 600, fontSize: 14 }}
|
||||||
|
>
|
||||||
|
{voucherData?.roleUID || '-'}
|
||||||
|
</Typography.Text>
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="充值商品">
|
||||||
|
<span style={{ fontWeight: 600 }}>{voucherData?.productName || '-'}</span>
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="充值区服">
|
||||||
|
<Tag color="cyan">{voucherData?.channel || '安卓-微信'}</Tag>
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="存证任务号">
|
||||||
|
<Typography.Text copyable={{ text: resolvedDetail.task.taskNo }}>
|
||||||
|
{resolvedDetail.task.taskNo}
|
||||||
|
</Typography.Text>
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="上游履约单号">
|
||||||
|
{affiliateDash?.orderNo ? (
|
||||||
|
<Typography.Text copyable={{ text: affiliateDash.orderNo }}>
|
||||||
|
{affiliateDash.orderNo}
|
||||||
|
</Typography.Text>
|
||||||
|
) : (
|
||||||
|
'-'
|
||||||
|
)}
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="上游供应商单号">
|
||||||
|
{affiliateDash?.providerOrderNo ||
|
||||||
|
(
|
||||||
|
affiliateDash?.raw as
|
||||||
|
| { result?: { delivery?: { provider_order_no?: string } } }
|
||||||
|
| undefined
|
||||||
|
)?.result?.delivery?.provider_order_no ? (
|
||||||
|
<Typography.Text copyable>
|
||||||
|
{affiliateDash?.providerOrderNo ||
|
||||||
|
(
|
||||||
|
affiliateDash?.raw as {
|
||||||
|
result?: { delivery?: { provider_order_no?: string } }
|
||||||
|
}
|
||||||
|
)?.result?.delivery?.provider_order_no}
|
||||||
|
</Typography.Text>
|
||||||
|
) : (
|
||||||
|
'-'
|
||||||
|
)}
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="直充到账时间">
|
||||||
|
{voucherData?.redeemedAt || '-'}
|
||||||
|
</Descriptions.Item>
|
||||||
|
</Descriptions>
|
||||||
|
</Space>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* 3. 任务操作栏 */}
|
||||||
<TaskActionPanel
|
<TaskActionPanel
|
||||||
detail={resolvedDetail}
|
detail={resolvedDetail}
|
||||||
canManageTaskLifecycle={canManageTaskLifecycle}
|
canManageTaskLifecycle={canManageTaskLifecycle}
|
||||||
@@ -375,43 +731,13 @@ export default function AdminTaskDetailPage() {
|
|||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Card title="基础信息">
|
{/* 4. H5 领取链接与兑换控制 */}
|
||||||
<Descriptions column={{ xs: 1, md: 2, xl: 3 }} bordered size="small">
|
|
||||||
<Descriptions.Item label="任务 ID">{resolvedDetail.task.taskId}</Descriptions.Item>
|
|
||||||
<Descriptions.Item label="任务号">{resolvedDetail.task.taskNo}</Descriptions.Item>
|
|
||||||
<Descriptions.Item label="平台订单号">
|
|
||||||
{resolvedDetail.task.platformOrderId || resolvedDetail.order?.platformOrderId || '-'}
|
|
||||||
</Descriptions.Item>
|
|
||||||
<Descriptions.Item label="任务状态">
|
|
||||||
<StatusTag value={resolvedDetail.task.status} kind="task" />
|
|
||||||
</Descriptions.Item>
|
|
||||||
<Descriptions.Item label="资源状态">
|
|
||||||
<StatusTag value={resolvedDetail.task.resourceStatus} kind="resource" />
|
|
||||||
</Descriptions.Item>
|
|
||||||
<Descriptions.Item label="客户步骤">
|
|
||||||
<StatusTag value={resolvedDetail.task.customerStatus} kind="customer" />
|
|
||||||
</Descriptions.Item>
|
|
||||||
<Descriptions.Item label="商品">
|
|
||||||
{resolvedDetail.orderItem?.skuName || resolvedDetail.task.skuName || '-'}
|
|
||||||
</Descriptions.Item>
|
|
||||||
<Descriptions.Item label="角色">
|
|
||||||
{resolvedDetail.task.roleName || '-'}{' '}
|
|
||||||
{resolvedDetail.task.roleId ? `(${resolvedDetail.task.roleId})` : ''}
|
|
||||||
</Descriptions.Item>
|
|
||||||
<Descriptions.Item label="更新时间">
|
|
||||||
{formatAdminDateTime(resolvedDetail.task.updatedAt)}
|
|
||||||
</Descriptions.Item>
|
|
||||||
<Descriptions.Item label="最近错误" span={3}>
|
|
||||||
{resolvedDetail.task.lastError || '-'}
|
|
||||||
</Descriptions.Item>
|
|
||||||
</Descriptions>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{h5ClaimUrl || resolvedDetail.claimToken ? (
|
{h5ClaimUrl || resolvedDetail.claimToken ? (
|
||||||
<Card
|
<Card
|
||||||
title={
|
title={
|
||||||
<Space size={12}>
|
<Space size={12}>
|
||||||
<span>领取链接与兑换控制</span>
|
<LinkOutlined style={{ color: '#0284c7' }} />
|
||||||
|
<span>买家 H5 领取链接与状态控制</span>
|
||||||
{resolvedDetail.order ? (
|
{resolvedDetail.order ? (
|
||||||
claimStatus === 'active' ? (
|
claimStatus === 'active' ? (
|
||||||
<Tag color="success">H5兑换有效</Tag>
|
<Tag color="success">H5兑换有效</Tag>
|
||||||
@@ -429,8 +755,8 @@ export default function AdminTaskDetailPage() {
|
|||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
background: '#fafafa',
|
background: '#fafafa',
|
||||||
padding: 12,
|
padding: 14,
|
||||||
borderRadius: 6,
|
borderRadius: 8,
|
||||||
border: '1px solid #f0f0f0',
|
border: '1px solid #f0f0f0',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
@@ -543,60 +869,33 @@ export default function AdminTaskDetailPage() {
|
|||||||
</Card>
|
</Card>
|
||||||
) : null}
|
) : null}
|
||||||
|
|
||||||
{resolvedDetail.task.executorKey === 'manual_dispatch' ||
|
{/* 5. 选项卡面板结构 */}
|
||||||
resolvedDetail.operations.canCompleteManualDispatch ||
|
|
||||||
resolvedDetail.manualDispatch ? (
|
|
||||||
<ManualDispatchPanel
|
|
||||||
detail={resolvedDetail}
|
|
||||||
form={manualDispatchForm}
|
|
||||||
canSubmit={canManageTaskLifecycle && resolvedDetail.operations.canCompleteManualDispatch}
|
|
||||||
actionLoadingKey={actionLoadingKey}
|
|
||||||
onChange={setManualDispatchForm}
|
|
||||||
onSubmit={submitManualDispatch}
|
|
||||||
/>
|
|
||||||
) : null}
|
|
||||||
|
|
||||||
<Tabs
|
<Tabs
|
||||||
|
defaultActiveKey={isAffiliateDash ? 'affiliate-dash' : 'overview'}
|
||||||
items={[
|
items={[
|
||||||
{
|
{
|
||||||
key: 'cloud',
|
key: 'affiliate-dash',
|
||||||
label: '乐玩云(历史)',
|
label: '联盟直充履约 (affiliate_dash)',
|
||||||
children: flow ? (
|
children: affiliateDash ? (
|
||||||
<KuaishouCloudPanel flow={flow} />
|
<AffiliateDashPanel affiliateDash={affiliateDash} />
|
||||||
) : (
|
) : (
|
||||||
<Empty description="无历史乐玩云履约上下文" />
|
<Empty description="当前任务暂无联盟直充 (affiliate_dash) 履约上下文" />
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'industry-voucher',
|
key: 'overview',
|
||||||
label: '电子凭证',
|
label: '履约链路与卡点',
|
||||||
children: resolvedDetail.kuaishouIndustryVoucher ? (
|
children: (
|
||||||
<KuaishouIndustryVoucherPanel voucher={resolvedDetail.kuaishouIndustryVoucher} />
|
<FulfillmentOverviewPanel
|
||||||
) : (
|
detail={resolvedDetail}
|
||||||
<Empty description="无电子凭证绑定" />
|
claimUrl={claimUrl}
|
||||||
),
|
claimLinkInvalid={claimLinkInvalid}
|
||||||
},
|
/>
|
||||||
{
|
|
||||||
key: 'resolution',
|
|
||||||
label: '兑换重试',
|
|
||||||
children: resolvedDetail.redeemResolution ? (
|
|
||||||
<RedeemResolutionPanel resolution={resolvedDetail.redeemResolution} />
|
|
||||||
) : (
|
|
||||||
<Empty description="无兑换重试记录" />
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'screenshot',
|
|
||||||
label: '截图',
|
|
||||||
children: resolvedDetail.screenshotUrl ? (
|
|
||||||
<ScreenshotPanel screenshotPreviewUrl={screenshotPreviewUrl} />
|
|
||||||
) : (
|
|
||||||
<Empty description="当前任务没有截图" />
|
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'events',
|
key: 'events',
|
||||||
label: '事件流水',
|
label: `事件流水 (${resolvedDetail.events.length})`,
|
||||||
children: (
|
children: (
|
||||||
<Table<TaskEvent>
|
<Table<TaskEvent>
|
||||||
rowKey="eventId"
|
rowKey="eventId"
|
||||||
@@ -607,9 +906,73 @@ export default function AdminTaskDetailPage() {
|
|||||||
/>
|
/>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
|
...(resolvedDetail.kuaishouIndustryVoucher
|
||||||
|
? [
|
||||||
|
{
|
||||||
|
key: 'industry-voucher',
|
||||||
|
label: '电子凭证',
|
||||||
|
children: (
|
||||||
|
<KuaishouIndustryVoucherPanel
|
||||||
|
voucher={resolvedDetail.kuaishouIndustryVoucher}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]
|
||||||
|
: []),
|
||||||
|
...(resolvedDetail.manualDispatch ||
|
||||||
|
resolvedDetail.task.executorKey === 'manual_dispatch'
|
||||||
|
? [
|
||||||
|
{
|
||||||
|
key: 'manual-dispatch',
|
||||||
|
label: '人工履约',
|
||||||
|
children: (
|
||||||
|
<ManualDispatchPanel
|
||||||
|
detail={resolvedDetail}
|
||||||
|
form={manualDispatchForm}
|
||||||
|
canSubmit={
|
||||||
|
canManageTaskLifecycle &&
|
||||||
|
resolvedDetail.operations.canCompleteManualDispatch
|
||||||
|
}
|
||||||
|
actionLoadingKey={actionLoadingKey}
|
||||||
|
onChange={setManualDispatchForm}
|
||||||
|
onSubmit={submitManualDispatch}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]
|
||||||
|
: []),
|
||||||
|
...(resolvedDetail.redeemResolution
|
||||||
|
? [
|
||||||
|
{
|
||||||
|
key: 'resolution',
|
||||||
|
label: '兑换重试',
|
||||||
|
children: (
|
||||||
|
<RedeemResolutionPanel resolution={resolvedDetail.redeemResolution} />
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]
|
||||||
|
: []),
|
||||||
|
...(flow
|
||||||
|
? [
|
||||||
|
{
|
||||||
|
key: 'cloud',
|
||||||
|
label: '乐玩云(只读历史)',
|
||||||
|
children: <KuaishouCloudPanel flow={flow} />,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
: []),
|
||||||
|
...(resolvedDetail.screenshotUrl
|
||||||
|
? [
|
||||||
|
{
|
||||||
|
key: 'screenshot',
|
||||||
|
label: '任务截图',
|
||||||
|
children: <ScreenshotPanel screenshotPreviewUrl={screenshotPreviewUrl} />,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
: []),
|
||||||
{
|
{
|
||||||
key: 'raw',
|
key: 'raw',
|
||||||
label: '原始数据',
|
label: '原始数据 (JSON)',
|
||||||
children: <JsonPreview value={resolvedDetail} />,
|
children: <JsonPreview value={resolvedDetail} />,
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
@@ -660,6 +1023,161 @@ export default function AdminTaskDetailPage() {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 联盟直充专属履约详情面板 (affiliate_dash)
|
||||||
|
*/
|
||||||
|
function AffiliateDashPanel({
|
||||||
|
affiliateDash,
|
||||||
|
}: {
|
||||||
|
affiliateDash: NonNullable<AdminTaskDetail['affiliateDash']>
|
||||||
|
}) {
|
||||||
|
const rawObj = affiliateDash.raw as
|
||||||
|
| {
|
||||||
|
result?: {
|
||||||
|
delivery?: {
|
||||||
|
phone_number?: string
|
||||||
|
good_details?: {
|
||||||
|
order_title?: string
|
||||||
|
image?: string
|
||||||
|
order_image?: string
|
||||||
|
points?: number
|
||||||
|
}
|
||||||
|
send_status?: string
|
||||||
|
success_time?: string
|
||||||
|
provider_order_no?: string
|
||||||
|
}
|
||||||
|
provider?: string
|
||||||
|
game_channel?: string
|
||||||
|
ship_attempts?: number
|
||||||
|
}
|
||||||
|
}
|
||||||
|
| undefined
|
||||||
|
|
||||||
|
const delivery = rawObj?.result?.delivery
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Space direction="vertical" size={16} className="full-width">
|
||||||
|
<Card title="上游直充订单数据">
|
||||||
|
<Descriptions column={{ xs: 1, sm: 2, md: 3 }} bordered size="small">
|
||||||
|
<Descriptions.Item label="上游订单号">
|
||||||
|
{affiliateDash.orderNo ? (
|
||||||
|
<Typography.Text copyable={{ text: affiliateDash.orderNo }}>
|
||||||
|
{affiliateDash.orderNo}
|
||||||
|
</Typography.Text>
|
||||||
|
) : (
|
||||||
|
'-'
|
||||||
|
)}
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="客户订单号">
|
||||||
|
{affiliateDash.clientOrderNo ? (
|
||||||
|
<Typography.Text copyable={{ text: affiliateDash.clientOrderNo }}>
|
||||||
|
{affiliateDash.clientOrderNo}
|
||||||
|
</Typography.Text>
|
||||||
|
) : (
|
||||||
|
'-'
|
||||||
|
)}
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="上游履约状态">
|
||||||
|
<StatusTag value={affiliateDash.orderStatus || 'pending'} />
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="直充商品">
|
||||||
|
{affiliateDash.productName || affiliateDash.sku || '-'}
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="绑定角色名">
|
||||||
|
<span style={{ fontWeight: 600, color: '#0284c7' }}>
|
||||||
|
{affiliateDash.roleName || '-'}
|
||||||
|
</span>
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="直充账号 (UID)">
|
||||||
|
{affiliateDash.gameAccount || affiliateDash.boundAccount ? (
|
||||||
|
<Typography.Text
|
||||||
|
copyable={{
|
||||||
|
text: affiliateDash.boundAccount || affiliateDash.gameAccount || '',
|
||||||
|
}}
|
||||||
|
style={{ fontFamily: 'monospace', fontWeight: 600 }}
|
||||||
|
>
|
||||||
|
{affiliateDash.boundAccount || affiliateDash.gameAccount}
|
||||||
|
</Typography.Text>
|
||||||
|
) : (
|
||||||
|
'-'
|
||||||
|
)}
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="直充渠道">
|
||||||
|
<Tag color="cyan">
|
||||||
|
{affiliateDash.gameChannel === '1-1'
|
||||||
|
? '1-1 (安卓-微信)'
|
||||||
|
: affiliateDash.gameChannel || '1-1'}
|
||||||
|
</Tag>
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="充值点数 / 积分">
|
||||||
|
<span>
|
||||||
|
{affiliateDash.amount || 0} {affiliateDash.currency || 'POINT'}
|
||||||
|
</span>
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="电子凭证核销">
|
||||||
|
<Tag
|
||||||
|
color={
|
||||||
|
affiliateDash.consumeStatus === 'success' ||
|
||||||
|
affiliateDash.consumeStatus === 'not_required'
|
||||||
|
? 'green'
|
||||||
|
: 'volcano'
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{affiliateDash.consumeStatus || '未核销'}
|
||||||
|
</Tag>
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="绑定同步时间">
|
||||||
|
{formatAdminDateTime(affiliateDash.lastBindSyncedAt || affiliateDash.lastSyncedAt)}
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="最后对账时间">
|
||||||
|
{formatAdminDateTime(affiliateDash.lastSyncedAt)}
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="失败原因">
|
||||||
|
{affiliateDash.failureReason || affiliateDash.cannotShipReason || '无异常'}
|
||||||
|
</Descriptions.Item>
|
||||||
|
</Descriptions>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{delivery ? (
|
||||||
|
<Card title="上游接口交付回执 (Delivery Proxy Response)">
|
||||||
|
<Descriptions column={{ xs: 1, sm: 2, md: 3 }} bordered size="small">
|
||||||
|
<Descriptions.Item label="交付提供方 (Provider)">
|
||||||
|
{rawObj?.result?.provider || 'DLC'}
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="发货状态">
|
||||||
|
<Tag color={delivery.send_status === 'SUCCESS' ? 'green' : 'blue'}>
|
||||||
|
{delivery.send_status || 'FINISHED'}
|
||||||
|
</Tag>
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="发货次数">
|
||||||
|
{rawObj?.result?.ship_attempts || 1} 次
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="绑定手机号">
|
||||||
|
{delivery.phone_number || '-'}
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="上游商品标题">
|
||||||
|
{delivery.good_details?.order_title || delivery.good_details?.image ? (
|
||||||
|
<span>{delivery.good_details?.order_title}</span>
|
||||||
|
) : (
|
||||||
|
'-'
|
||||||
|
)}
|
||||||
|
</Descriptions.Item>
|
||||||
|
<Descriptions.Item label="成功直充时间">
|
||||||
|
{formatAdminDateTime(delivery.success_time)}
|
||||||
|
</Descriptions.Item>
|
||||||
|
</Descriptions>
|
||||||
|
</Card>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{affiliateDash.raw ? (
|
||||||
|
<Card title="上游完整响应 JSON">
|
||||||
|
<JsonPreview value={affiliateDash.raw} />
|
||||||
|
</Card>
|
||||||
|
) : null}
|
||||||
|
</Space>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
function TaskActionPanel({
|
function TaskActionPanel({
|
||||||
detail,
|
detail,
|
||||||
canManageTaskLifecycle,
|
canManageTaskLifecycle,
|
||||||
@@ -691,11 +1209,11 @@ function TaskActionPanel({
|
|||||||
Boolean(detail.kuaishouIndustryVoucher)
|
Boolean(detail.kuaishouIndustryVoucher)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card title="任务操作">
|
<Card title="快捷任务操作">
|
||||||
<div className="task-action-groups">
|
<div className="task-action-groups">
|
||||||
{canManageTaskLifecycle ? (
|
{canManageTaskLifecycle ? (
|
||||||
<section className="task-action-group">
|
<section className="task-action-group">
|
||||||
<Typography.Text type="secondary">通用</Typography.Text>
|
<Typography.Text type="secondary">生命周期</Typography.Text>
|
||||||
<Space wrap>
|
<Space wrap>
|
||||||
<Button
|
<Button
|
||||||
type="primary"
|
type="primary"
|
||||||
@@ -712,7 +1230,7 @@ function TaskActionPanel({
|
|||||||
loading={actionLoadingKey === 'manual-review'}
|
loading={actionLoadingKey === 'manual-review'}
|
||||||
onClick={onMarkManualReview}
|
onClick={onMarkManualReview}
|
||||||
>
|
>
|
||||||
转人工
|
转人工处理
|
||||||
</Button>
|
</Button>
|
||||||
</Space>
|
</Space>
|
||||||
</section>
|
</section>
|
||||||
@@ -802,71 +1320,75 @@ function FulfillmentOverviewPanel({
|
|||||||
: { color: 'warning' as const, text: '未填 UID' }
|
: { color: 'warning' as const, text: '未填 UID' }
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card title="履约链路总览" extra={<Tag color={executor.color}>{executor.label}</Tag>}>
|
<Space direction="vertical" size={16} className="full-width">
|
||||||
<Descriptions
|
<Card title="履约链路总览" extra={<Tag color={executor.color}>{executor.label}</Tag>}>
|
||||||
size="small"
|
<Descriptions
|
||||||
column={{ xs: 1, sm: 2, md: 3 }}
|
size="small"
|
||||||
className="platform-section-gap"
|
column={{ xs: 1, sm: 2, md: 3 }}
|
||||||
style={{ marginBottom: 12 }}
|
className="platform-section-gap"
|
||||||
>
|
style={{ marginBottom: 12 }}
|
||||||
<Descriptions.Item label="填写 UID">
|
>
|
||||||
{claimIdentity?.expectedUid || <Typography.Text type="warning">未提交</Typography.Text>}
|
<Descriptions.Item label="填写 UID">
|
||||||
</Descriptions.Item>
|
{claimIdentity?.expectedUid || (
|
||||||
<Descriptions.Item label="绑定角色 ID">
|
<Typography.Text type="warning">未提交</Typography.Text>
|
||||||
{claimIdentity?.boundUid || detail.task.roleId || '-'}
|
)}
|
||||||
{claimIdentity?.displaySource === 'shipped' ? (
|
</Descriptions.Item>
|
||||||
<Tag color="blue" style={{ marginLeft: 6 }}>
|
<Descriptions.Item label="绑定角色 ID">
|
||||||
发货快照
|
{claimIdentity?.boundUid || detail.task.roleId || '-'}
|
||||||
</Tag>
|
{claimIdentity?.displaySource === 'shipped' ? (
|
||||||
) : null}
|
<Tag color="blue" style={{ marginLeft: 6 }}>
|
||||||
</Descriptions.Item>
|
发货快照
|
||||||
<Descriptions.Item label="绑定角色名">
|
</Tag>
|
||||||
{claimIdentity?.boundRoleName || detail.task.roleName || '-'}
|
|
||||||
</Descriptions.Item>
|
|
||||||
<Descriptions.Item label="匹配状态">
|
|
||||||
<Tag color={uidMatchTag.color}>{uidMatchTag.text}</Tag>
|
|
||||||
</Descriptions.Item>
|
|
||||||
<Descriptions.Item label="兼容模式">
|
|
||||||
{claimIdentity?.compatibilityMode === 'legacy_no_uid' ? '旧单无 UID' : 'UID 闸门'}
|
|
||||||
</Descriptions.Item>
|
|
||||||
{claimIdentity?.shippedUid ? (
|
|
||||||
<Descriptions.Item label="发货 UID / 角色" span={2}>
|
|
||||||
{claimIdentity.shippedUid}
|
|
||||||
{claimIdentity.shippedRoleName ? ` / ${claimIdentity.shippedRoleName}` : ''}
|
|
||||||
{claimIdentity.shippedAt ? (
|
|
||||||
<Typography.Text type="secondary" style={{ marginLeft: 8 }}>
|
|
||||||
{claimIdentity.shippedAt}
|
|
||||||
</Typography.Text>
|
|
||||||
) : null}
|
) : null}
|
||||||
</Descriptions.Item>
|
</Descriptions.Item>
|
||||||
) : null}
|
<Descriptions.Item label="绑定角色名">
|
||||||
<Descriptions.Item label="说明" span={3}>
|
{claimIdentity?.boundRoleName || detail.task.roleName || '-'}
|
||||||
<Typography.Text type="secondary">
|
</Descriptions.Item>
|
||||||
{claimIdentity?.note || '暂无 UID 信息'}
|
<Descriptions.Item label="匹配状态">
|
||||||
</Typography.Text>
|
<Tag color={uidMatchTag.color}>{uidMatchTag.text}</Tag>
|
||||||
</Descriptions.Item>
|
</Descriptions.Item>
|
||||||
</Descriptions>
|
<Descriptions.Item label="兼容模式">
|
||||||
|
{claimIdentity?.compatibilityMode === 'legacy_no_uid' ? '旧单无 UID' : 'UID 闸门'}
|
||||||
|
</Descriptions.Item>
|
||||||
|
{claimIdentity?.shippedUid ? (
|
||||||
|
<Descriptions.Item label="发货 UID / 角色" span={2}>
|
||||||
|
{claimIdentity.shippedUid}
|
||||||
|
{claimIdentity.shippedRoleName ? ` / ${claimIdentity.shippedRoleName}` : ''}
|
||||||
|
{claimIdentity.shippedAt ? (
|
||||||
|
<Typography.Text type="secondary" style={{ marginLeft: 8 }}>
|
||||||
|
{claimIdentity.shippedAt}
|
||||||
|
</Typography.Text>
|
||||||
|
) : null}
|
||||||
|
</Descriptions.Item>
|
||||||
|
) : null}
|
||||||
|
<Descriptions.Item label="说明" span={3}>
|
||||||
|
<Typography.Text type="secondary">
|
||||||
|
{claimIdentity?.note || '暂无 UID 信息'}
|
||||||
|
</Typography.Text>
|
||||||
|
</Descriptions.Item>
|
||||||
|
</Descriptions>
|
||||||
|
|
||||||
<div className="fulfillment-overview-grid">
|
<div className="fulfillment-overview-grid">
|
||||||
{steps.map((step) => (
|
{steps.map((step) => (
|
||||||
<div key={step.key} className="fulfillment-step-card">
|
<div key={step.key} className="fulfillment-step-card">
|
||||||
<Space size={[6, 6]} wrap>
|
<Space size={[6, 6]} wrap>
|
||||||
<StatusTag value={step.status} />
|
<StatusTag value={step.status} />
|
||||||
<Typography.Text strong>{step.label}</Typography.Text>
|
<Typography.Text strong>{step.label}</Typography.Text>
|
||||||
</Space>
|
</Space>
|
||||||
<Typography.Text type="secondary">{step.detail}</Typography.Text>
|
<Typography.Text type="secondary">{step.detail}</Typography.Text>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Alert
|
<Alert
|
||||||
className="platform-section-gap"
|
className="platform-section-gap"
|
||||||
type={currentBlocker.level}
|
type={currentBlocker.level}
|
||||||
showIcon
|
showIcon
|
||||||
message={currentBlocker.title}
|
message={currentBlocker.title}
|
||||||
description={currentBlocker.detail}
|
description={currentBlocker.detail}
|
||||||
/>
|
/>
|
||||||
</Card>
|
</Card>
|
||||||
|
</Space>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1204,7 +1726,7 @@ function KuaishouIndustryVoucherPanel({ voucher }: { voucher: KuaishouIndustryVo
|
|||||||
const consumeDetails = Array.isArray(voucher.consumeDetails) ? voucher.consumeDetails : []
|
const consumeDetails = Array.isArray(voucher.consumeDetails) ? voucher.consumeDetails : []
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card title="电子凭证">
|
<Card title="电子凭证绑定数据">
|
||||||
<Descriptions column={{ xs: 1, md: 2, xl: 3 }} bordered size="small">
|
<Descriptions column={{ xs: 1, md: 2, xl: 3 }} bordered size="small">
|
||||||
<Descriptions.Item label="订单号">{voucher.oid || '-'}</Descriptions.Item>
|
<Descriptions.Item label="订单号">{voucher.oid || '-'}</Descriptions.Item>
|
||||||
<Descriptions.Item label="凭证码">{voucher.voucherCode || '-'}</Descriptions.Item>
|
<Descriptions.Item label="凭证码">{voucher.voucherCode || '-'}</Descriptions.Item>
|
||||||
@@ -1493,7 +2015,7 @@ function BackButton() {
|
|||||||
const navigate = useNavigate()
|
const navigate = useNavigate()
|
||||||
return (
|
return (
|
||||||
<Button icon={<ArrowLeftOutlined />} onClick={() => navigate('/admin/tasks')}>
|
<Button icon={<ArrowLeftOutlined />} onClick={() => navigate('/admin/tasks')}>
|
||||||
返回任务
|
返回任务列表
|
||||||
</Button>
|
</Button>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,6 +1,8 @@
|
|||||||
import {
|
import {
|
||||||
CloseCircleOutlined,
|
CloseCircleOutlined,
|
||||||
CopyOutlined,
|
CopyOutlined,
|
||||||
|
DownloadOutlined,
|
||||||
|
FileImageOutlined,
|
||||||
ReloadOutlined,
|
ReloadOutlined,
|
||||||
SearchOutlined,
|
SearchOutlined,
|
||||||
UserSwitchOutlined,
|
UserSwitchOutlined,
|
||||||
@@ -11,9 +13,12 @@ import {
|
|||||||
Button,
|
Button,
|
||||||
Card,
|
Card,
|
||||||
Form,
|
Form,
|
||||||
|
Image,
|
||||||
Input,
|
Input,
|
||||||
|
Modal,
|
||||||
Select,
|
Select,
|
||||||
Space,
|
Space,
|
||||||
|
Spin,
|
||||||
Table,
|
Table,
|
||||||
Tag,
|
Tag,
|
||||||
Tooltip,
|
Tooltip,
|
||||||
@@ -43,6 +48,11 @@ import {
|
|||||||
resolveAdminPageSize,
|
resolveAdminPageSize,
|
||||||
} from '@/utils/admin-pagination'
|
} from '@/utils/admin-pagination'
|
||||||
import { formatAdminDateTime } from '@/utils/admin-time'
|
import { formatAdminDateTime } from '@/utils/admin-time'
|
||||||
|
import {
|
||||||
|
copyVoucherDataUrlToClipboard,
|
||||||
|
downloadVoucherDataUrl,
|
||||||
|
generateVoucherDataURL,
|
||||||
|
} from '@/utils/voucher'
|
||||||
|
|
||||||
type TaskFilterForm = {
|
type TaskFilterForm = {
|
||||||
keyword?: string
|
keyword?: string
|
||||||
@@ -68,10 +78,66 @@ export default function AdminTasksPage() {
|
|||||||
const [searchParams, setSearchParams] = useSearchParams()
|
const [searchParams, setSearchParams] = useSearchParams()
|
||||||
const [actionLoadingId, setActionLoadingId] = useState<number | null>(null)
|
const [actionLoadingId, setActionLoadingId] = useState<number | null>(null)
|
||||||
const [lastClaimUrl, setLastClaimUrl] = useState('')
|
const [lastClaimUrl, setLastClaimUrl] = useState('')
|
||||||
|
const [voucherModal, setVoucherModal] = useState<{
|
||||||
|
visible: boolean
|
||||||
|
task: AdminTaskListItem | null
|
||||||
|
dataUrl: string
|
||||||
|
loading: boolean
|
||||||
|
copying: boolean
|
||||||
|
}>({
|
||||||
|
visible: false,
|
||||||
|
task: null,
|
||||||
|
dataUrl: '',
|
||||||
|
loading: false,
|
||||||
|
copying: false,
|
||||||
|
})
|
||||||
const page = Number(searchParams.get('page') || 1) || 1
|
const page = Number(searchParams.get('page') || 1) || 1
|
||||||
const pageSize = resolveAdminPageSize(searchParams.get('pageSize'), ADMIN_DEFAULT_PAGE_SIZE)
|
const pageSize = resolveAdminPageSize(searchParams.get('pageSize'), ADMIN_DEFAULT_PAGE_SIZE)
|
||||||
const canManageTaskLifecycle = hasAdminRole('operator')
|
const canManageTaskLifecycle = hasAdminRole('operator')
|
||||||
const canCloseTasks = hasAdminRole('support')
|
const canCloseTasks = hasAdminRole('support')
|
||||||
|
|
||||||
|
const openVoucherModal = async (row: AdminTaskListItem) => {
|
||||||
|
setVoucherModal({
|
||||||
|
visible: true,
|
||||||
|
task: row,
|
||||||
|
dataUrl: '',
|
||||||
|
loading: true,
|
||||||
|
copying: false,
|
||||||
|
})
|
||||||
|
try {
|
||||||
|
const url = await generateVoucherDataURL({
|
||||||
|
productName: row.skuName,
|
||||||
|
productSKU: row.skuCode,
|
||||||
|
roleName: row.roleName,
|
||||||
|
roleUID: row.roleId,
|
||||||
|
redeemedAt: row.redeemedAt || row.updatedAt,
|
||||||
|
voucherNo: row.taskNo,
|
||||||
|
})
|
||||||
|
setVoucherModal((prev) => ({ ...prev, dataUrl: url, loading: false }))
|
||||||
|
} catch {
|
||||||
|
message.error('生成凭据图片失败')
|
||||||
|
setVoucherModal((prev) => ({ ...prev, loading: false }))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleCopyVoucher = async () => {
|
||||||
|
if (!voucherModal.dataUrl) return
|
||||||
|
setVoucherModal((prev) => ({ ...prev, copying: true }))
|
||||||
|
const success = await copyVoucherDataUrlToClipboard(voucherModal.dataUrl)
|
||||||
|
setVoucherModal((prev) => ({ ...prev, copying: false }))
|
||||||
|
if (success) {
|
||||||
|
message.success('凭据图片已复制到剪贴板，可在微信/QQ/客服聊天框直接 Ctrl+V 粘贴！')
|
||||||
|
} else {
|
||||||
|
message.warning('浏览器限制直接复制图片，请使用下方“下载凭据”按钮保存！')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDownloadVoucher = () => {
|
||||||
|
if (!voucherModal.dataUrl) return
|
||||||
|
const filename = `和平精英_${voucherModal.task?.roleName || '直充'}_${voucherModal.task?.taskNo || '凭据'}.png`
|
||||||
|
downloadVoucherDataUrl(voucherModal.dataUrl, filename)
|
||||||
|
message.success('已开始下载凭据图片')
|
||||||
|
}
|
||||||
const filters = {
|
const filters = {
|
||||||
keyword:
|
keyword:
|
||||||
searchParams.get('keyword') ||
|
searchParams.get('keyword') ||
|
||||||
@@ -222,16 +288,43 @@ export default function AdminTasksPage() {
|
|||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '角色',
|
title: '角色信息',
|
||||||
minWidth: 140,
|
minWidth: 160,
|
||||||
render: (_, row) => (
|
render: (_, row) => {
|
||||||
<div className="cell-stack">
|
const hasRole = Boolean(row.roleName && row.roleName !== '-')
|
||||||
<span>{row.roleName || '-'}</span>
|
const hasUid = Boolean(row.roleId && row.roleId !== '-')
|
||||||
{row.roleId || row.loginType ? (
|
if (!hasRole && !hasUid) {
|
||||||
<span className="muted">{row.roleId || row.loginType}</span>
|
return <span className="muted">-</span>
|
||||||
) : null}
|
}
|
||||||
</div>
|
return (
|
||||||
),
|
<div className="cell-stack">
|
||||||
|
{hasRole ? (
|
||||||
|
<span style={{ fontWeight: 600, color: '#1e293b' }}>{row.roleName}</span>
|
||||||
|
) : null}
|
||||||
|
{hasUid ? (
|
||||||
|
<Space size={4}>
|
||||||
|
<span className="muted" style={{ fontFamily: 'monospace', fontSize: 12 }}>
|
||||||
|
{row.roleId}
|
||||||
|
</span>
|
||||||
|
<Button
|
||||||
|
type="text"
|
||||||
|
size="small"
|
||||||
|
icon={<CopyOutlined />}
|
||||||
|
title="复制角色 UID"
|
||||||
|
style={{ padding: 0, height: 'auto', color: '#64748b' }}
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation()
|
||||||
|
navigator.clipboard
|
||||||
|
.writeText(row.roleId)
|
||||||
|
.then(() => message.success('已复制 UID: ' + row.roleId))
|
||||||
|
.catch(() => message.error('复制失败'))
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Space>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '更新时间',
|
title: '更新时间',
|
||||||
@@ -244,7 +337,7 @@ export default function AdminTasksPage() {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '操作',
|
title: '操作',
|
||||||
minWidth: 200,
|
minWidth: 220,
|
||||||
fixed: 'right',
|
fixed: 'right',
|
||||||
render: (_, row) => {
|
render: (_, row) => {
|
||||||
const rowLoading = actionLoadingId === row.taskId
|
const rowLoading = actionLoadingId === row.taskId
|
||||||
@@ -259,7 +352,11 @@ export default function AdminTasksPage() {
|
|||||||
canManageTaskLifecycle &&
|
canManageTaskLifecycle &&
|
||||||
!['redeemed', 'closed', 'completed', 'manual_review'].includes(row.status)
|
!['redeemed', 'closed', 'completed', 'manual_review'].includes(row.status)
|
||||||
const canClose = canCloseTasks && !['redeemed', 'closed'].includes(row.status)
|
const canClose = canCloseTasks && !['redeemed', 'closed'].includes(row.status)
|
||||||
const hasActions = canRetry || canManualReview || canClose
|
const hasVoucher =
|
||||||
|
['redeemed', 'delivered', 'completed', 'success'].includes(row.status) ||
|
||||||
|
row.deliveryStatus === 'delivered' ||
|
||||||
|
Boolean(row.roleName || row.roleId)
|
||||||
|
const hasActions = canRetry || canManualReview || canClose || hasVoucher
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="cell-stack">
|
<div className="cell-stack">
|
||||||
@@ -270,6 +367,18 @@ export default function AdminTasksPage() {
|
|||||||
) : null}
|
) : null}
|
||||||
{hasActions ? (
|
{hasActions ? (
|
||||||
<Space size={[6, 6]} wrap>
|
<Space size={[6, 6]} wrap>
|
||||||
|
{hasVoucher ? (
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
type="primary"
|
||||||
|
ghost
|
||||||
|
icon={<FileImageOutlined />}
|
||||||
|
title="查看到账存证凭据"
|
||||||
|
onClick={() => openVoucherModal(row)}
|
||||||
|
>
|
||||||
|
凭据
|
||||||
|
</Button>
|
||||||
|
) : null}
|
||||||
{canRetry ? (
|
{canRetry ? (
|
||||||
<Button
|
<Button
|
||||||
size="small"
|
size="small"
|
||||||
@@ -487,6 +596,75 @@ export default function AdminTasksPage() {
|
|||||||
})}
|
})}
|
||||||
/>
|
/>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
|
<Modal
|
||||||
|
title={
|
||||||
|
<Space>
|
||||||
|
<FileImageOutlined style={{ color: '#0284c7' }} />
|
||||||
|
<span>发货存证凭据 · 官方直充凭单</span>
|
||||||
|
</Space>
|
||||||
|
}
|
||||||
|
open={voucherModal.visible}
|
||||||
|
footer={
|
||||||
|
<Space wrap style={{ width: '100%', justifyContent: 'space-between' }}>
|
||||||
|
<Button
|
||||||
|
onClick={() => {
|
||||||
|
if (voucherModal.task?.taskId) {
|
||||||
|
navigate(`/admin/tasks/${voucherModal.task.taskId}`)
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
查看任务详情
|
||||||
|
</Button>
|
||||||
|
<Space>
|
||||||
|
<Button
|
||||||
|
icon={<CopyOutlined />}
|
||||||
|
loading={voucherModal.copying}
|
||||||
|
disabled={!voucherModal.dataUrl || voucherModal.loading}
|
||||||
|
onClick={handleCopyVoucher}
|
||||||
|
>
|
||||||
|
复制图片
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
icon={<DownloadOutlined />}
|
||||||
|
disabled={!voucherModal.dataUrl || voucherModal.loading}
|
||||||
|
onClick={handleDownloadVoucher}
|
||||||
|
>
|
||||||
|
下载大图
|
||||||
|
</Button>
|
||||||
|
</Space>
|
||||||
|
</Space>
|
||||||
|
}
|
||||||
|
onCancel={() => setVoucherModal((prev) => ({ ...prev, visible: false }))}
|
||||||
|
width={420}
|
||||||
|
centered
|
||||||
|
styles={{ body: { textAlign: 'center', padding: '16px 0' } }}
|
||||||
|
>
|
||||||
|
{voucherModal.loading ? (
|
||||||
|
<div style={{ padding: '60px 0' }}>
|
||||||
|
<Spin tip="正在生成高清存证大图..." />
|
||||||
|
</div>
|
||||||
|
) : voucherModal.dataUrl ? (
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
|
||||||
|
<Image
|
||||||
|
src={voucherModal.dataUrl}
|
||||||
|
alt="发货存证凭据"
|
||||||
|
style={{
|
||||||
|
width: '100%',
|
||||||
|
maxWidth: 320,
|
||||||
|
borderRadius: 12,
|
||||||
|
boxShadow: '0 8px 30px rgba(0, 0, 0, 0.25)',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Typography.Text type="secondary" style={{ fontSize: 12 }}>
|
||||||
|
提示：点击“复制图片”后可直接在微信/QQ客服聊天窗口中粘贴发给买家。
|
||||||
|
</Typography.Text>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div style={{ padding: '40px 0', color: '#94a3b8' }}>暂无凭据生成</div>
|
||||||
|
)}
|
||||||
|
</Modal>
|
||||||
</section>
|
</section>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -253,6 +253,32 @@ export interface AdminTaskDetail {
|
|||||||
role: string
|
role: string
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
affiliateDash?: null | {
|
||||||
|
orderNo?: string
|
||||||
|
clientOrderNo?: string
|
||||||
|
providerOrderNo?: string
|
||||||
|
orderStatus?: string
|
||||||
|
sku?: string
|
||||||
|
productName?: string
|
||||||
|
amount?: number
|
||||||
|
currency?: string
|
||||||
|
canShip?: boolean
|
||||||
|
cannotShipReason?: string
|
||||||
|
failureReason?: string
|
||||||
|
roleName?: string
|
||||||
|
gameAccount?: string
|
||||||
|
boundAccount?: string
|
||||||
|
expectedGameAccount?: string
|
||||||
|
gameChannel?: string
|
||||||
|
bindUrl?: string
|
||||||
|
qrUrl?: string
|
||||||
|
bound?: boolean
|
||||||
|
submitStatus?: string
|
||||||
|
consumeStatus?: string
|
||||||
|
lastSyncedAt?: string
|
||||||
|
lastBindSyncedAt?: string
|
||||||
|
raw?: Record<string, unknown>
|
||||||
|
}
|
||||||
events: Array<{
|
events: Array<{
|
||||||
eventId: number
|
eventId: number
|
||||||
eventType: string
|
eventType: string
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
* 绘制和平精英官方直充/兑换凭据大图 (640x960 Retina 高清卡片)。
|
* 绘制和平精英官方直充/兑换凭据大图 (640x960 Retina 高清卡片)。
|
||||||
*
|
*
|
||||||
* 纯前端 Canvas 渲染：不依赖后端存储或额外图片服务，
|
* 纯前端 Canvas 渲染：不依赖后端存储或额外图片服务，
|
||||||
* 兑换成功后即时生成供买家/客服预览、保存或复制。
|
* 兑换成功后即时生成供买家/客服预览、保存、复制或下载。
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export type DeliveryVoucherData = {
|
export type DeliveryVoucherData = {
|
||||||
@@ -17,6 +17,109 @@ export type DeliveryVoucherData = {
|
|||||||
voucherNo?: string
|
voucherNo?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const PRODUCT_SKU_MAP: Record<string, string> = {
|
||||||
|
suit_jester_face: 'suit_jester_face',
|
||||||
|
'套装-花面小丑': 'suit_jester_face',
|
||||||
|
suit_dune_song: 'suit_dune_song',
|
||||||
|
'套装-沙丘之歌': 'suit_dune_song',
|
||||||
|
pack_dragon_palace: 'pack_dragon_palace',
|
||||||
|
龙宫之主大礼包: 'pack_dragon_palace',
|
||||||
|
lucky_coin_x90: 'lucky_coin_x90',
|
||||||
|
幸运币90个: 'lucky_coin_x90',
|
||||||
|
lucky_coin_x30: 'lucky_coin_x30',
|
||||||
|
幸运币30个: 'lucky_coin_x30',
|
||||||
|
lucky_coin_x2: 'lucky_coin_x2',
|
||||||
|
幸运币2个: 'lucky_coin_x2',
|
||||||
|
honor_medal_x90: 'honor_medal_x90',
|
||||||
|
荣耀勋章90个: 'honor_medal_x90',
|
||||||
|
honor_medal_x30: 'honor_medal_x30',
|
||||||
|
荣耀勋章30个: 'honor_medal_x30',
|
||||||
|
honor_medal_x2: 'honor_medal_x2',
|
||||||
|
荣耀勋章2个: 'honor_medal_x2',
|
||||||
|
suit_cloud_bear: 'suit_cloud_bear',
|
||||||
|
'套装-绵云熊熊': 'suit_cloud_bear',
|
||||||
|
pack_star_roam_weapon: 'pack_star_roam_weapon',
|
||||||
|
星际漫游枪械礼包: 'pack_star_roam_weapon',
|
||||||
|
pack_star_roam_outfit: 'pack_star_roam_outfit',
|
||||||
|
星际漫游服装礼包: 'pack_star_roam_outfit',
|
||||||
|
suit_sand_dancer: 'suit_sand_dancer',
|
||||||
|
'套装-狂沙舞者': 'suit_sand_dancer',
|
||||||
|
pack_lava_ranger: 'pack_lava_ranger',
|
||||||
|
熔岩游骑兵礼包: 'pack_lava_ranger',
|
||||||
|
suit_panda_tuan: 'suit_panda_tuan',
|
||||||
|
'套装-胖达团团': 'suit_panda_tuan',
|
||||||
|
suit_panda_round: 'suit_panda_round',
|
||||||
|
'套装-胖达圆圆': 'suit_panda_round',
|
||||||
|
helmet_panda_treasure: 'helmet_panda_treasure',
|
||||||
|
国宝胖达头盔: 'helmet_panda_treasure',
|
||||||
|
suit_western_mystery: 'suit_western_mystery',
|
||||||
|
'套装-西部谜踪': 'suit_western_mystery',
|
||||||
|
helmet_hamster_gray: 'helmet_hamster_gray',
|
||||||
|
仓鼠灰灰头盔: 'helmet_hamster_gray',
|
||||||
|
bag_hamster_gray: 'bag_hamster_gray',
|
||||||
|
仓鼠灰灰背包: 'bag_hamster_gray',
|
||||||
|
helmet_pink_sheep: 'helmet_pink_sheep',
|
||||||
|
糯粉咩咩头盔: 'helmet_pink_sheep',
|
||||||
|
bag_pink_sheep: 'bag_pink_sheep',
|
||||||
|
糯粉咩咩背包: 'bag_pink_sheep',
|
||||||
|
suit_cute_bear: 'suit_cute_bear',
|
||||||
|
'套装-萌熊伴侣': 'suit_cute_bear',
|
||||||
|
suit_hamster_gray: 'suit_hamster_gray',
|
||||||
|
'套装-仓鼠灰灰': 'suit_hamster_gray',
|
||||||
|
frag_pink_sheep: 'frag_pink_sheep',
|
||||||
|
'破片手榴弹-糯粉咩咩': 'frag_pink_sheep',
|
||||||
|
smoke_pink_sheep: 'smoke_pink_sheep',
|
||||||
|
'烟雾弹-糯粉咩咩': 'smoke_pink_sheep',
|
||||||
|
pack_western_cowboy: 'pack_western_cowboy',
|
||||||
|
西部牛仔大礼包: 'pack_western_cowboy',
|
||||||
|
suit_romantic_destiny: 'suit_romantic_destiny',
|
||||||
|
'套装-浪漫天命': 'suit_romantic_destiny',
|
||||||
|
suit_first_peach: 'suit_first_peach',
|
||||||
|
'套装-恋恋初桃': 'suit_first_peach',
|
||||||
|
suit_pink_sheep: 'suit_pink_sheep',
|
||||||
|
'套装-糯粉咩咩': 'suit_pink_sheep',
|
||||||
|
suit_dual_fluffy: 'suit_dual_fluffy',
|
||||||
|
'套装-双彩绵绵': 'suit_dual_fluffy',
|
||||||
|
bag_cute_bear: 'bag_cute_bear',
|
||||||
|
萌熊伴侣背包: 'bag_cute_bear',
|
||||||
|
m416_hamster_gray: 'm416_hamster_gray',
|
||||||
|
'M416-仓鼠灰灰': 'm416_hamster_gray',
|
||||||
|
top_black_elite_trainer: 'top_black_elite_trainer',
|
||||||
|
黑色高级特训官上衣: 'top_black_elite_trainer',
|
||||||
|
suit_shadow_gothic: 'suit_shadow_gothic',
|
||||||
|
'套装-暗影哥特': 'suit_shadow_gothic',
|
||||||
|
suit_alan_walker: 'suit_alan_walker',
|
||||||
|
'套装-Alan Walker': 'suit_alan_walker',
|
||||||
|
rock_black_tshirt: 'rock_black_tshirt',
|
||||||
|
黑色ROCK长袖T恤: 'rock_black_tshirt',
|
||||||
|
黑色ROCK长袖: 'rock_black_tshirt',
|
||||||
|
rock_blue_sportswear: 'rock_blue_sportswear',
|
||||||
|
蓝色运动服上衣: 'rock_blue_sportswear',
|
||||||
|
蓝色运动服: 'rock_blue_sportswear',
|
||||||
|
}
|
||||||
|
|
||||||
|
export function resolveVoucherProductImageUrl(data: DeliveryVoucherData): string {
|
||||||
|
const sku = (data.productSKU || '').trim()
|
||||||
|
if (sku && PRODUCT_SKU_MAP[sku]) {
|
||||||
|
return `/images/products/${PRODUCT_SKU_MAP[sku]}.webp`
|
||||||
|
}
|
||||||
|
const name = (data.productName || '').trim()
|
||||||
|
if (name && PRODUCT_SKU_MAP[name]) {
|
||||||
|
return `/images/products/${PRODUCT_SKU_MAP[name]}.webp`
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
data.productImage &&
|
||||||
|
!data.productImage.includes('_order.png') &&
|
||||||
|
!data.productImage.includes('ugempire.com')
|
||||||
|
) {
|
||||||
|
return data.productImage
|
||||||
|
}
|
||||||
|
if (sku) {
|
||||||
|
return `/images/products/${sku}.webp`
|
||||||
|
}
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
|
||||||
function loadImage(src: string): Promise<HTMLImageElement> {
|
function loadImage(src: string): Promise<HTMLImageElement> {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
const img = new Image()
|
const img = new Image()
|
||||||
@@ -40,7 +143,7 @@ export function dataURLtoBlob(dataurl: string): Blob {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 绘制深海蓝科技感发货到账凭据大图 (640 x 960)
|
* 绘制深海蓝科技感发货到账凭据大图 (640 x 960 Retina 高清)
|
||||||
*/
|
*/
|
||||||
export async function generateVoucherDataURL(data: DeliveryVoucherData): Promise<string> {
|
export async function generateVoucherDataURL(data: DeliveryVoucherData): Promise<string> {
|
||||||
const width = 640
|
const width = 640
|
||||||
@@ -53,30 +156,32 @@ export async function generateVoucherDataURL(data: DeliveryVoucherData): Promise
|
|||||||
throw new Error('Canvas 2D context not available')
|
throw new Error('Canvas 2D context not available')
|
||||||
}
|
}
|
||||||
|
|
||||||
// 1. 背景：深海蓝科技渐变
|
// 1. 背景：深海蓝科技暗夜渐变
|
||||||
const bgGrad = ctx.createLinearGradient(0, 0, 0, height)
|
const bgGrad = ctx.createLinearGradient(0, 0, 0, height)
|
||||||
bgGrad.addColorStop(0, '#0c2452')
|
bgGrad.addColorStop(0, '#0c234b')
|
||||||
bgGrad.addColorStop(0.35, '#091b3e')
|
bgGrad.addColorStop(0.3, '#081938')
|
||||||
bgGrad.addColorStop(0.7, '#071530')
|
bgGrad.addColorStop(0.7, '#051025')
|
||||||
bgGrad.addColorStop(1, '#050e21')
|
bgGrad.addColorStop(1, '#030814')
|
||||||
ctx.fillStyle = bgGrad
|
ctx.fillStyle = bgGrad
|
||||||
fillRoundRect(ctx, 0, 0, width, height, 24)
|
fillRoundRect(ctx, 0, 0, width, height, 28)
|
||||||
|
|
||||||
// 顶部柔和微光晕 (聚光灯效果)
|
// 顶部与中心微光晕 (立体聚光灯效果)
|
||||||
ctx.save()
|
ctx.save()
|
||||||
const glowGrad = ctx.createRadialGradient(width / 2, 120, 10, width / 2, 120, 260)
|
const glowGrad = ctx.createRadialGradient(width / 2, 110, 10, width / 2, 110, 280)
|
||||||
glowGrad.addColorStop(0, 'rgba(56, 189, 248, 0.22)')
|
glowGrad.addColorStop(0, 'rgba(56, 189, 248, 0.28)')
|
||||||
glowGrad.addColorStop(1, 'rgba(12, 36, 82, 0)')
|
glowGrad.addColorStop(0.5, 'rgba(14, 165, 233, 0.12)')
|
||||||
|
glowGrad.addColorStop(1, 'rgba(12, 35, 75, 0)')
|
||||||
ctx.fillStyle = glowGrad
|
ctx.fillStyle = glowGrad
|
||||||
ctx.fillRect(0, 0, width, 400)
|
ctx.fillRect(0, 0, width, 450)
|
||||||
ctx.restore()
|
ctx.restore()
|
||||||
|
|
||||||
// 2. 顶部主标：兑 换 成 功
|
// 2. 顶部主标：兑 换 成 功
|
||||||
ctx.save()
|
ctx.save()
|
||||||
ctx.fillStyle = '#ffffff'
|
ctx.fillStyle = '#ffffff'
|
||||||
ctx.shadowColor = 'rgba(56, 189, 248, 0.5)'
|
ctx.shadowColor = 'rgba(56, 189, 248, 0.6)'
|
||||||
ctx.shadowBlur = 18
|
ctx.shadowBlur = 20
|
||||||
ctx.font = 'bold 40px -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif'
|
ctx.font =
|
||||||
|
'bold 42px -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif'
|
||||||
ctx.textAlign = 'center'
|
ctx.textAlign = 'center'
|
||||||
ctx.textBaseline = 'middle'
|
ctx.textBaseline = 'middle'
|
||||||
ctx.fillText('兑 换 成 功', width / 2, 85)
|
ctx.fillText('兑 换 成 功', width / 2, 85)
|
||||||
@@ -84,57 +189,66 @@ export async function generateVoucherDataURL(data: DeliveryVoucherData): Promise
|
|||||||
|
|
||||||
// 3. 核心圆形立绘徽章
|
// 3. 核心圆形立绘徽章
|
||||||
const badgeCenterX = width / 2
|
const badgeCenterX = width / 2
|
||||||
const badgeCenterY = 230
|
const badgeCenterY = 232
|
||||||
const badgeRadius = 96
|
const badgeRadius = 98
|
||||||
|
|
||||||
// 3.1 外层发光光环
|
// 3.1 外层发光与多重光环
|
||||||
ctx.save()
|
ctx.save()
|
||||||
ctx.shadowColor = 'rgba(56, 189, 248, 0.45)'
|
ctx.shadowColor = 'rgba(56, 189, 248, 0.55)'
|
||||||
ctx.shadowBlur = 16
|
ctx.shadowBlur = 20
|
||||||
ctx.strokeStyle = 'rgba(56, 189, 248, 0.35)'
|
ctx.strokeStyle = 'rgba(56, 189, 248, 0.4)'
|
||||||
ctx.lineWidth = 4
|
ctx.lineWidth = 4
|
||||||
ctx.beginPath()
|
ctx.beginPath()
|
||||||
ctx.arc(badgeCenterX, badgeCenterY, badgeRadius + 4, 0, Math.PI * 2)
|
ctx.arc(badgeCenterX, badgeCenterY, badgeRadius + 5, 0, Math.PI * 2)
|
||||||
ctx.stroke()
|
ctx.stroke()
|
||||||
|
|
||||||
ctx.strokeStyle = 'rgba(255, 255, 255, 0.85)'
|
ctx.strokeStyle = 'rgba(255, 255, 255, 0.9)'
|
||||||
ctx.lineWidth = 2
|
ctx.lineWidth = 2
|
||||||
ctx.beginPath()
|
ctx.beginPath()
|
||||||
ctx.arc(badgeCenterX, badgeCenterY, badgeRadius, 0, Math.PI * 2)
|
ctx.arc(badgeCenterX, badgeCenterY, badgeRadius, 0, Math.PI * 2)
|
||||||
ctx.stroke()
|
ctx.stroke()
|
||||||
ctx.restore()
|
ctx.restore()
|
||||||
|
|
||||||
// 3.2 徽章内部背景与立绘
|
// 3.2 徽章内部深蓝渐变背景与微光
|
||||||
ctx.save()
|
ctx.save()
|
||||||
ctx.beginPath()
|
ctx.beginPath()
|
||||||
ctx.arc(badgeCenterX, badgeCenterY, badgeRadius - 1, 0, Math.PI * 2)
|
ctx.arc(badgeCenterX, badgeCenterY, badgeRadius - 1, 0, Math.PI * 2)
|
||||||
ctx.clip()
|
ctx.clip()
|
||||||
|
|
||||||
const badgeBg = ctx.createLinearGradient(
|
const badgeBg = ctx.createRadialGradient(
|
||||||
|
badgeCenterX,
|
||||||
|
badgeCenterY,
|
||||||
|
10,
|
||||||
|
badgeCenterX,
|
||||||
|
badgeCenterY,
|
||||||
|
badgeRadius,
|
||||||
|
)
|
||||||
|
badgeBg.addColorStop(0, '#1c427b')
|
||||||
|
badgeBg.addColorStop(0.7, '#0f274e')
|
||||||
|
badgeBg.addColorStop(1, '#08162e')
|
||||||
|
ctx.fillStyle = badgeBg
|
||||||
|
ctx.fillRect(
|
||||||
badgeCenterX - badgeRadius,
|
badgeCenterX - badgeRadius,
|
||||||
badgeCenterY - badgeRadius,
|
badgeCenterY - badgeRadius,
|
||||||
badgeCenterX + badgeRadius,
|
badgeRadius * 2,
|
||||||
badgeCenterY + badgeRadius,
|
badgeRadius * 2,
|
||||||
)
|
)
|
||||||
badgeBg.addColorStop(0, '#15315b')
|
|
||||||
badgeBg.addColorStop(1, '#091833')
|
|
||||||
ctx.fillStyle = badgeBg
|
|
||||||
ctx.fillRect(badgeCenterX - badgeRadius, badgeCenterY - badgeRadius, badgeRadius * 2, badgeRadius * 2)
|
|
||||||
|
|
||||||
// 绘制商品立绘图片
|
// 绘制商品立绘图片（确保使用纯净高清资源）
|
||||||
let imgLoaded = false
|
let imgLoaded = false
|
||||||
const imgURL = data.productImage || (data.productSKU ? `/images/products/${data.productSKU}.webp` : '')
|
const imgURL = resolveVoucherProductImageUrl(data)
|
||||||
|
|
||||||
if (imgURL) {
|
if (imgURL) {
|
||||||
try {
|
try {
|
||||||
const img = await loadImage(imgURL)
|
const img = await loadImage(imgURL)
|
||||||
const drawSize = badgeRadius * 2 - 12
|
const maxDrawSize = badgeRadius * 2 - 16
|
||||||
ctx.drawImage(
|
const scale = Math.min(maxDrawSize / img.width, maxDrawSize / img.height, 1)
|
||||||
img,
|
const drawW = img.width * scale
|
||||||
badgeCenterX - drawSize / 2,
|
const drawH = img.height * scale
|
||||||
badgeCenterY - drawSize / 2,
|
|
||||||
drawSize,
|
ctx.imageSmoothingEnabled = true
|
||||||
drawSize,
|
ctx.imageSmoothingQuality = 'high'
|
||||||
)
|
ctx.drawImage(img, badgeCenterX - drawW / 2, badgeCenterY - drawH / 2, drawW, drawH)
|
||||||
imgLoaded = true
|
imgLoaded = true
|
||||||
} catch {
|
} catch {
|
||||||
imgLoaded = false
|
imgLoaded = false
|
||||||
@@ -143,7 +257,7 @@ export async function generateVoucherDataURL(data: DeliveryVoucherData): Promise
|
|||||||
|
|
||||||
if (!imgLoaded) {
|
if (!imgLoaded) {
|
||||||
ctx.fillStyle = '#38bdf8'
|
ctx.fillStyle = '#38bdf8'
|
||||||
ctx.font = 'bold 44px sans-serif'
|
ctx.font = 'bold 48px sans-serif'
|
||||||
ctx.textAlign = 'center'
|
ctx.textAlign = 'center'
|
||||||
ctx.textBaseline = 'middle'
|
ctx.textBaseline = 'middle'
|
||||||
ctx.fillText('🎁', badgeCenterX, badgeCenterY)
|
ctx.fillText('🎁', badgeCenterX, badgeCenterY)
|
||||||
@@ -151,30 +265,34 @@ export async function generateVoucherDataURL(data: DeliveryVoucherData): Promise
|
|||||||
ctx.restore()
|
ctx.restore()
|
||||||
|
|
||||||
// 4. 商品标题与副标题
|
// 4. 商品标题与副标题
|
||||||
const nameY = 368
|
const nameY = 372
|
||||||
ctx.fillStyle = '#ffffff'
|
ctx.fillStyle = '#ffffff'
|
||||||
ctx.font = 'bold 28px -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif'
|
ctx.font =
|
||||||
|
'bold 28px -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif'
|
||||||
ctx.textAlign = 'center'
|
ctx.textAlign = 'center'
|
||||||
ctx.textBaseline = 'middle'
|
ctx.textBaseline = 'middle'
|
||||||
ctx.fillText(truncateString(data.productName || '和平精英道具', 18), width / 2, nameY)
|
ctx.fillText(truncateString(data.productName || '和平精英道具', 18), width / 2, nameY)
|
||||||
|
|
||||||
// 副标（组合/附赠说明）
|
// 副标（组合/附赠说明）
|
||||||
const subText = data.currencyText ? `和平精英官方直发 · ${data.currencyText}` : '和平精英官方直充 · 官方到账保证'
|
const subText = data.currencyText
|
||||||
|
? `和平精英官方直发 · ${data.currencyText}`
|
||||||
|
: '和平精英官方直充 · 官方到账保证'
|
||||||
ctx.fillStyle = '#7dd3fc'
|
ctx.fillStyle = '#7dd3fc'
|
||||||
ctx.font = '500 16px -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif'
|
ctx.font =
|
||||||
ctx.fillText(subText, width / 2, nameY + 32)
|
'500 16px -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif'
|
||||||
|
ctx.fillText(subText, width / 2, nameY + 34)
|
||||||
|
|
||||||
// 5. 优雅横向微光分割线
|
// 5. 优雅横向微光分割线
|
||||||
const lineY = 432
|
const lineY = 438
|
||||||
const lineGrad = ctx.createLinearGradient(80, lineY, width - 80, lineY)
|
const lineGrad = ctx.createLinearGradient(70, lineY, width - 70, lineY)
|
||||||
lineGrad.addColorStop(0, 'rgba(255, 255, 255, 0)')
|
lineGrad.addColorStop(0, 'rgba(255, 255, 255, 0)')
|
||||||
lineGrad.addColorStop(0.5, 'rgba(255, 255, 255, 0.22)')
|
lineGrad.addColorStop(0.5, 'rgba(255, 255, 255, 0.28)')
|
||||||
lineGrad.addColorStop(1, 'rgba(255, 255, 255, 0)')
|
lineGrad.addColorStop(1, 'rgba(255, 255, 255, 0)')
|
||||||
ctx.strokeStyle = lineGrad
|
ctx.strokeStyle = lineGrad
|
||||||
ctx.lineWidth = 1
|
ctx.lineWidth = 1
|
||||||
ctx.beginPath()
|
ctx.beginPath()
|
||||||
ctx.moveTo(80, lineY)
|
ctx.moveTo(70, lineY)
|
||||||
ctx.lineTo(width - 80, lineY)
|
ctx.lineTo(width - 70, lineY)
|
||||||
ctx.stroke()
|
ctx.stroke()
|
||||||
|
|
||||||
// 6. 核心数据列表明细 (Key - Value 对齐)
|
// 6. 核心数据列表明细 (Key - Value 对齐)
|
||||||
@@ -191,10 +309,14 @@ export async function generateVoucherDataURL(data: DeliveryVoucherData): Promise
|
|||||||
{ label: '兑换时间', value: data.redeemedAt || new Date().toLocaleString() },
|
{ label: '兑换时间', value: data.redeemedAt || new Date().toLocaleString() },
|
||||||
)
|
)
|
||||||
|
|
||||||
let rowY = 475
|
if (data.voucherNo) {
|
||||||
|
listItems.push({ label: '存证单号', value: data.voucherNo })
|
||||||
|
}
|
||||||
|
|
||||||
|
let rowY = 485
|
||||||
const rowHeight = 44
|
const rowHeight = 44
|
||||||
const labelX = 110
|
const labelX = 105
|
||||||
const valueX = width - 110
|
const valueX = width - 105
|
||||||
|
|
||||||
listItems.forEach((item) => {
|
listItems.forEach((item) => {
|
||||||
// Label (左侧淡银灰)
|
// Label (左侧淡银灰)
|
||||||
@@ -206,7 +328,8 @@ export async function generateVoucherDataURL(data: DeliveryVoucherData): Promise
|
|||||||
|
|
||||||
// Value (右侧高亮纯白加粗)
|
// Value (右侧高亮纯白加粗)
|
||||||
ctx.fillStyle = '#ffffff'
|
ctx.fillStyle = '#ffffff'
|
||||||
ctx.font = 'bold 18px -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", monospace'
|
ctx.font =
|
||||||
|
'bold 18px -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", monospace'
|
||||||
ctx.textAlign = 'right'
|
ctx.textAlign = 'right'
|
||||||
ctx.textBaseline = 'middle'
|
ctx.textBaseline = 'middle'
|
||||||
ctx.fillText(truncateString(item.value, 26), valueX, rowY)
|
ctx.fillText(truncateString(item.value, 26), valueX, rowY)
|
||||||
@@ -218,11 +341,11 @@ export async function generateVoucherDataURL(data: DeliveryVoucherData): Promise
|
|||||||
const pillW = 210
|
const pillW = 210
|
||||||
const pillH = 52
|
const pillH = 52
|
||||||
const pillX = (width - pillW) / 2
|
const pillX = (width - pillW) / 2
|
||||||
const pillY = Math.max(rowY + 28, 740)
|
const pillY = Math.max(rowY + 28, 746)
|
||||||
|
|
||||||
ctx.save()
|
ctx.save()
|
||||||
ctx.shadowColor = 'rgba(16, 185, 129, 0.6)'
|
ctx.shadowColor = 'rgba(16, 185, 129, 0.65)'
|
||||||
ctx.shadowBlur = 22
|
ctx.shadowBlur = 24
|
||||||
ctx.shadowOffsetY = 4
|
ctx.shadowOffsetY = 4
|
||||||
|
|
||||||
const pillGrad = ctx.createLinearGradient(pillX, pillY, pillX + pillW, pillY + pillH)
|
const pillGrad = ctx.createLinearGradient(pillX, pillY, pillX + pillW, pillY + pillH)
|
||||||
@@ -234,7 +357,8 @@ export async function generateVoucherDataURL(data: DeliveryVoucherData): Promise
|
|||||||
|
|
||||||
// 胶囊文字
|
// 胶囊文字
|
||||||
ctx.fillStyle = '#ffffff'
|
ctx.fillStyle = '#ffffff'
|
||||||
ctx.font = 'bold 20px -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif'
|
ctx.font =
|
||||||
|
'bold 20px -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif'
|
||||||
ctx.textAlign = 'center'
|
ctx.textAlign = 'center'
|
||||||
ctx.textBaseline = 'middle'
|
ctx.textBaseline = 'middle'
|
||||||
ctx.fillText('兑 换 成 功', width / 2, pillY + pillH / 2)
|
ctx.fillText('兑 换 成 功', width / 2, pillY + pillH / 2)
|
||||||
@@ -250,7 +374,7 @@ export async function generateVoucherDataURL(data: DeliveryVoucherData): Promise
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 将 DataURL 转换为 Blob 并复制到操作系统剪贴板（微信/QQ聊天框可直接 Ctrl+V 粘贴）
|
* 将 DataURL 转换为 Blob 并复制到操作系统剪贴板（微信/QQ/抖店客服聊天框可直接 Ctrl+V 粘贴）
|
||||||
*/
|
*/
|
||||||
export async function copyVoucherDataUrlToClipboard(dataURL: string): Promise<boolean> {
|
export async function copyVoucherDataUrlToClipboard(dataURL: string): Promise<boolean> {
|
||||||
try {
|
try {
|
||||||
@@ -267,6 +391,18 @@ export async function copyVoucherDataUrlToClipboard(dataURL: string): Promise<bo
|
|||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 触发下载存证凭据 PNG 图片到本地
|
||||||
|
*/
|
||||||
|
export function downloadVoucherDataUrl(dataURL: string, filename = '和平精英兑换凭据.png'): void {
|
||||||
|
const link = document.createElement('a')
|
||||||
|
link.download = filename
|
||||||
|
link.href = dataURL
|
||||||
|
document.body.appendChild(link)
|
||||||
|
link.click()
|
||||||
|
document.body.removeChild(link)
|
||||||
|
}
|
||||||
|
|
||||||
function fillRoundRect(
|
function fillRoundRect(
|
||||||
ctx: CanvasRenderingContext2D,
|
ctx: CanvasRenderingContext2D,
|
||||||
x: number,
|
x: number,
|
||||||
|
|||||||
Reference in New Issue
Block a user