dachui/affiliate_dash
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(delivery-voucher): 优化发货凭据为一键复制深海蓝高清图并补齐商品本地图片

Browse Source 
1. 管理后台 Rock 表格优化：将原「官方发货凭证(FulfillId)」列升级为「发货结果图片」列，提供一键「复制结果图」与「高清预览」Modal，点击即可自动生成凭据大图并直接写入剪贴板（支持在微信/QQ客服聊天框中直接 Ctrl+V 粘贴图片）；
2. 商品图片本地缓存与展示修复：从官方 HAR 提取黑色 ROCK 长袖 T 恤与蓝色运动服上衣高清立绘（rock_black_tshirt.webp / rock_blue_sportswear.webp），优化 productImage 自动识别与 Delivery 提货页图片自适应居中，彻底消除灰色占位块；
3. 标杆级发货凭据绘制重构：参考腾讯官方电竞风格设计，重构 640x960 视网膜双倍高清 Canvas 凭据绘制（深海蓝微光渐变背景、顶部微光加粗「兑换成功」、正圆形双层光环立绘、详细角色区服参数对齐、底部翡翠绿发光胶囊按钮），全方位超越 0666 官方粗糙原图；
4. 履约结果字段持久化：后端发货成功后同步持久化角色名、游戏大区与 UID 至 fulfillment_orders 结果报文，确保提货页区服与角色信息完整呈现。
This commit is contained in:
yml2213
2026-10-05 18:52:41 +08:00
parent 78e2fe4c6a
commit bf3f3a3626
9 changed files with 466 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/utils/productImage.ts
+30 -5
View File
@@ -7,7 +7,8 @@
export type ProductImageInput = {
sku?: string | null
/** 上游缩略图 URL（乐玩/DLC）；仅在无本地 SKU 图时作 image-proxy 回退 */
name?: string | null
/** 上游缩略图 URL（乐玩/DLC/0666）；仅在无本地 SKU 图时作 image-proxy 回退 */
url?: string | null
}
@@ -25,26 +26,50 @@ export function resolveProductImageBySku(sku?: string | null): string {
/**
* 解析展示用商品图：
* 1. 有 sku → `/images/products/{sku}.webp`
* 2. 其它外链 → image-proxy（运行时落盘到 data/uploads/products，仅兜底）
* 2. 名称包含黑色ROCK/蓝色运动服 → 本地映射
* 3. 其它外链 → image-proxy（运行时落盘到 data/uploads/products，仅兜底）
*/
export function resolveProductImage(input?: string | ProductImageInput | null): string {
if (input == null) return ''
let sku = ''
let name = ''
let url = ''
if (typeof input === 'string') {
url = trim(input)
} else {
sku = trim(input.sku)
name = trim(input.name)
url = trim(input.url)
}
// 1. 若有显式 SKU
if (sku) {
return resolveProductImageBySku(sku)
}
if (!url) return ''
if (url.startsWith('/')) return url
// 2. 根据商品名称做模糊匹配（支持 Rock 两款商品）
if (name) {
const lower = name.toLowerCase()
if (lower.includes('黑') || lower.includes('rock') || lower.includes('t恤')) {
return '/images/products/rock_black_tshirt.webp'
}
if (lower.includes('蓝') || lower.includes('运动服')) {
return '/images/products/rock_blue_sportswear.webp'
}
}
return `/api/delivery/v1/image-proxy?url=${encodeURIComponent(url)}`
// 3. 根据 URL 特征做判断
if (url) {
if (url.includes('sku-27') || url.includes('rock_black')) {
return '/images/products/rock_black_tshirt.webp'
}
if (url.includes('sku-21') || url.includes('rock_blue')) {
return '/images/products/rock_blue_sportswear.webp'
}
if (url.startsWith('/')) return url
return `/api/delivery/v1/image-proxy?url=${encodeURIComponent(url)}`
}
return ''
}
frontend/src/utils/voucher.ts
+215 -182
View File
@@ -2,6 +2,18 @@ import type { DeliveryOrderInfo } from '../types'
import { formatDateTime } from './time'
import { resolveProductImage } from './productImage'
export type DeliveryVoucherData = {
productName: string
productSKU?: string
productImage?: string
roleName: string
roleUID: string
channel?: string
currencyText?: string
redeemedAt?: string
voucherNo?: string
}
function loadImage(src: string): Promise<HTMLImageElement> {
return new Promise((resolve, reject) => {
const img = new Image()
@@ -13,11 +25,12 @@ function loadImage(src: string): Promise<HTMLImageElement> {
}
/**
* 绘制高保真发货凭证卡片图片，返回 base64 PNG dataURL
* 绘制媲美腾讯/网易官方顶级电竞质感的深海蓝发货凭据大图 (参考标杆设计)
* 尺寸：640 x 960 (Retina 高清标准卡片)
*/
export async function generateDeliveryVoucher(order: DeliveryOrderInfo): Promise<string> {
const width = 1080
const height = 1160
export async function generateVoucherDataURL(data: DeliveryVoucherData): Promise<string> {
const width = 640
const height = 960
const canvas = document.createElement('canvas')
canvas.width = width
canvas.height = height
@@ -26,187 +39,233 @@ export async function generateDeliveryVoucher(order: DeliveryOrderInfo): Promise
throw new Error('Canvas 2D context not available')
}
// 1. 背景底色
ctx.fillStyle = '#f8fafc'
ctx.fillRect(0, 0, width, height)
// 1. 背景：深海蓝科技渐变
const bgGrad = ctx.createLinearGradient(0, 0, 0, height)
bgGrad.addColorStop(0, '#0c2452') // 顶部科技蓝
bgGrad.addColorStop(0.35, '#091b3e')
bgGrad.addColorStop(0.7, '#071530')
bgGrad.addColorStop(1, '#050e21') // 底部暗夜深蓝
ctx.fillStyle = bgGrad
fillRoundRect(ctx, 0, 0, width, height, 24)
// 2. 主卡片容器
const cardX = 40
const cardY = 40
const cardW = width - 80
const cardH = height - 80
const cardRadius = 24
// 卡片阴影与白色背景
// 顶部柔和微光晕 (聚光灯效果)
ctx.save()
ctx.fillStyle = '#ffffff'
ctx.shadowColor = 'rgba(15, 23, 42, 0.08)'
ctx.shadowBlur = 32
ctx.shadowOffsetY = 16
fillRoundRect(ctx, cardX, cardY, cardW, cardH, cardRadius)
const glowGrad = ctx.createRadialGradient(width / 2, 120, 10, width / 2, 120, 260)
glowGrad.addColorStop(0, 'rgba(56, 189, 248, 0.22)')
glowGrad.addColorStop(1, 'rgba(12, 36, 82, 0)')
ctx.fillStyle = glowGrad
ctx.fillRect(0, 0, width, 400)
ctx.restore()
// 3. 顶部 Header (深色渐变)
const headerH = 220
const grad = ctx.createLinearGradient(cardX, cardY, cardX + cardW, cardY + headerH)
grad.addColorStop(0, '#0f172a')
grad.addColorStop(1, '#1e293b')
// 2. 顶部主标：兑 换 成 功
ctx.save()
clipRoundRect(ctx, cardX, cardY, cardW, headerH, [cardRadius, cardRadius, 0, 0])
ctx.fillStyle = grad
ctx.fillRect(cardX, cardY, cardW, headerH)
ctx.fillStyle = '#ffffff'
ctx.shadowColor = 'rgba(56, 189, 248, 0.5)'
ctx.shadowBlur = 18
ctx.font = 'bold 40px -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif'
ctx.textAlign = 'center'
ctx.textBaseline = 'middle'
ctx.fillText('兑 换 成 功', width / 2, 85)
ctx.restore()
// 顶部装饰圆点
ctx.fillStyle = 'rgba(255, 255, 255, 0.05)'
// 3. 核心圆形立绘徽章
const badgeCenterX = width / 2
const badgeCenterY = 230
const badgeRadius = 96
// 3.1 外层发光光环
ctx.save()
ctx.shadowColor = 'rgba(56, 189, 248, 0.45)'
ctx.shadowBlur = 16
ctx.strokeStyle = 'rgba(56, 189, 248, 0.35)'
ctx.lineWidth = 4
ctx.beginPath()
ctx.arc(cardX + cardW - 60, cardY + 40, 120, 0, Math.PI * 2)
ctx.fill()
ctx.arc(badgeCenterX, badgeCenterY, badgeRadius + 4, 0, Math.PI * 2)
ctx.stroke()
// 平台徽标 / 标题
ctx.fillStyle = '#38bdf8'
ctx.font = 'bold 24px -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif'
ctx.fillText('GAME FULFILLMENT · OFFICIAL RECEIPT', cardX + 48, cardY + 60)
ctx.fillStyle = '#ffffff'
ctx.font = 'bold 44px -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif'
ctx.fillText('游戏道具发货电子凭证', cardX + 48, cardY + 124)
ctx.fillStyle = '#94a3b8'
ctx.font = '24px -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif'
ctx.fillText('官方直充已完成 · 售后维权与电子核销依据', cardX + 48, cardY + 168)
ctx.strokeStyle = 'rgba(255, 255, 255, 0.85)'
ctx.lineWidth = 2
ctx.beginPath()
ctx.arc(badgeCenterX, badgeCenterY, badgeRadius, 0, Math.PI * 2)
ctx.stroke()
ctx.restore()
// 4. 发货成功电子印章 (Stamp)
drawSuccessStamp(ctx, cardX + cardW - 170, cardY + 140)
// 3.2 徽章内部背景与立绘
ctx.save()
ctx.beginPath()
ctx.arc(badgeCenterX, badgeCenterY, badgeRadius - 1, 0, Math.PI * 2)
ctx.clip()
// 5. 商品展示卡片
const prodCardY = cardY + headerH + 32
const prodCardH = 210
ctx.fillStyle = '#f8fafc'
fillRoundRect(ctx, cardX + 40, prodCardY, cardW - 80, prodCardH, 16)
ctx.strokeStyle = '#e2e8f0'
ctx.lineWidth = 1
strokeRoundRect(ctx, cardX + 40, prodCardY, cardW - 80, prodCardH, 16)
const badgeBg = ctx.createLinearGradient(
badgeCenterX - badgeRadius,
badgeCenterY - badgeRadius,
badgeCenterX + badgeRadius,
badgeCenterY + badgeRadius
)
badgeBg.addColorStop(0, '#15315b')
badgeBg.addColorStop(1, '#091833')
ctx.fillStyle = badgeBg
ctx.fillRect(badgeCenterX - badgeRadius, badgeCenterY - badgeRadius, badgeRadius * 2, badgeRadius * 2)
// 尝试加载商品图片（优先 SKU 本地缓存）
let productImgLoaded = false
const productImgURL = resolveProductImage({ sku: order.product?.sku, url: order.product?.image })
if (productImgURL) {
// 绘制商品立绘图片
let imgLoaded = false
const imgURL = data.productImage || resolveProductImage({ sku: data.productSKU, name: data.productName })
if (imgURL) {
try {
const img = await loadImage(productImgURL)
const imgSize = 146
const imgX = cardX + 64
const imgY = prodCardY + 32
ctx.save()
clipRoundRect(ctx, imgX, imgY, imgSize, imgSize, 12)
ctx.drawImage(img, imgX, imgY, imgSize, imgSize)
ctx.restore()
ctx.strokeStyle = '#cbd5e1'
strokeRoundRect(ctx, imgX, imgY, imgSize, imgSize, 12)
productImgLoaded = true
const img = await loadImage(imgURL)
const drawSize = badgeRadius * 2 - 12
ctx.drawImage(
img,
badgeCenterX - drawSize / 2,
badgeCenterY - drawSize / 2,
drawSize,
drawSize
)
imgLoaded = true
} catch {
productImgLoaded = false
imgLoaded = false
}
}
// 商品文字信息
const textLeft = productImgLoaded ? cardX + 240 : cardX + 72
ctx.fillStyle = '#0f172a'
ctx.font = 'bold 36px -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif'
ctx.fillText(truncateString(order.product?.name || '游戏道具商品', 20), textLeft, prodCardY + 70)
if (!imgLoaded) {
ctx.fillStyle = '#38bdf8'
ctx.font = 'bold 44px sans-serif'
ctx.textAlign = 'center'
ctx.textBaseline = 'middle'
ctx.fillText('🎁', badgeCenterX, badgeCenterY)
}
ctx.restore()
// 商品标签 (SKU & 游戏)
ctx.fillStyle = '#64748b'
ctx.font = '24px -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif'
const skuText = `SKU: ${order.product?.sku || '-'}`
const gameText = order.product?.game ? ` · ${order.product.game}` : ''
ctx.fillText(skuText + gameText, textLeft, prodCardY + 120)
// 交付状态与数量
ctx.fillStyle = '#16a34a'
// 4. 商品标题与副标题
const nameY = 368
ctx.fillStyle = '#ffffff'
ctx.font = 'bold 28px -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif'
ctx.fillText('已发放: 1 件', textLeft, prodCardY + 168)
ctx.textAlign = 'center'
ctx.textBaseline = 'middle'
ctx.fillText(truncateString(data.productName || '和平精英道具', 18), width / 2, nameY)
// 6. 核心凭证字段明细表
const tableY = prodCardY + prodCardH + 32
const tableW = cardW - 80
const fields = [
{ label: '游戏账号 UID', value: order.game_uid || '-', highlight: true },
{ label: '游戏角色名', value: order.role_name || '-', highlight: true },
{ label: '区服信息', value: order.game_channel || '-' },
{ label: '下单时间', value: formatDateTime(order.created_at) },
{ label: '交付时间', value: order.shipped_at ? formatDateTime(order.shipped_at) : '已交付' },
]
// 副标（组合/附赠说明）
const subText = data.currencyText ? `和平精英官方直发 · ${data.currencyText}` : '和平精英官方直充 · 官方到账保证'
ctx.fillStyle = '#7dd3fc'
ctx.font = '500 16px -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif'
ctx.fillText(subText, width / 2, nameY + 32)
let curY = tableY
const rowHeight = 72
fields.forEach((f, idx) => {
ctx.fillStyle = idx % 2 === 0 ? '#f8fafc' : '#ffffff'
fillRoundRect(ctx, cardX + 40, curY, tableW, rowHeight, 8)
// 标签文字
ctx.fillStyle = '#64748b'
ctx.font = '26px -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif'
ctx.fillText(f.label, cardX + 68, curY + 46)
// 数值文字
ctx.fillStyle = f.highlight ? '#0f172a' : '#334155'
ctx.font = f.highlight
? 'bold 28px -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif'
: '26px -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif'
const valText = truncateString(f.value, 36)
ctx.fillText(valText, cardX + 320, curY + 46)
curY += rowHeight + 8
})
// 7. 底部防伪与存证声明
const footerY = curY + 24
ctx.strokeStyle = '#e2e8f0'
// 5. 优雅横向微光分割线
const lineY = 432
const lineGrad = ctx.createLinearGradient(80, lineY, width - 80, lineY)
lineGrad.addColorStop(0, 'rgba(255, 255, 255, 0)')
lineGrad.addColorStop(0.5, 'rgba(255, 255, 255, 0.22)')
lineGrad.addColorStop(1, 'rgba(255, 255, 255, 0)')
ctx.strokeStyle = lineGrad
ctx.lineWidth = 1
ctx.beginPath()
ctx.moveTo(cardX + 40, footerY)
ctx.lineTo(cardX + cardW - 40, footerY)
ctx.moveTo(80, lineY)
ctx.lineTo(width - 80, lineY)
ctx.stroke()
ctx.fillStyle = '#94a3b8'
ctx.font = '22px -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif'
ctx.fillText('注：此电子凭证为系统自动发货存证，道具已成功充值至指定角色，请登录游戏查收。', cardX + 48, footerY + 40)
ctx.fillText(`凭据生成时间：${formatDateTime(new Date().toISOString())}`, cardX + 48, footerY + 76)
// 6. 核心数据列表明细 (Key - Value 对齐)
const listItems = [
{ label: '游戏角色', value: data.roleName || '-' },
{ label: '游戏区服', value: data.channel || '安卓-微信' },
{ label: '兑换账号', value: data.roleUID || '-' },
{ label: '兑换时间', value: data.redeemedAt || formatDateTime(new Date().toISOString()) },
]
if (data.voucherNo) {
listItems.push({ label: '官方单号', value: data.voucherNo })
}
let rowY = 475
const rowHeight = 44
const labelX = 110
const valueX = width - 110
listItems.forEach((item) => {
// Label (左侧淡银灰)
ctx.fillStyle = 'rgba(226, 232, 240, 0.72)'
ctx.font = '18px -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif'
ctx.textAlign = 'left'
ctx.textBaseline = 'middle'
ctx.fillText(item.label, labelX, rowY)
// Value (右侧高亮纯白加粗)
ctx.fillStyle = '#ffffff'
ctx.font = 'bold 18px -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", monospace'
ctx.textAlign = 'right'
ctx.textBaseline = 'middle'
ctx.fillText(truncateString(item.value, 26), valueX, rowY)
rowY += rowHeight
})
// 7. 底部翡翠绿发光胶囊按钮 (Pill Badge)
const pillW = 210
const pillH = 52
const pillX = (width - pillW) / 2
const pillY = Math.max(rowY + 28, 740)
ctx.save()
ctx.shadowColor = 'rgba(16, 185, 129, 0.6)'
ctx.shadowBlur = 22
ctx.shadowOffsetY = 4
const pillGrad = ctx.createLinearGradient(pillX, pillY, pillX + pillW, pillY + pillH)
pillGrad.addColorStop(0, '#10b981')
pillGrad.addColorStop(1, '#059669')
ctx.fillStyle = pillGrad
fillRoundRect(ctx, pillX, pillY, pillW, pillH, pillH / 2)
ctx.restore()
// 胶囊文字
ctx.fillStyle = '#ffffff'
ctx.font = 'bold 20px -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif'
ctx.textAlign = 'center'
ctx.textBaseline = 'middle'
ctx.fillText('兑 换 成 功', width / 2, pillY + pillH / 2)
// 8. 底部微弱防伪存证标语
ctx.fillStyle = 'rgba(148, 163, 184, 0.45)'
ctx.font = '12px -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif'
ctx.textAlign = 'center'
ctx.textBaseline = 'middle'
ctx.fillText('腾讯和平精英官方直充 · 真实到账存证凭据 · 防伪防篡改', width / 2, height - 36)
return canvas.toDataURL('image/png')
}
// 辅助：绘制发货成功的印章
function drawSuccessStamp(ctx: CanvasRenderingContext2D, x: number, y: number) {
ctx.save()
ctx.translate(x, y)
ctx.rotate((-14 * Math.PI) / 180) // 稍倾斜印章质感
/**
* 从订单对象快捷生成凭证
*/
export async function generateDeliveryVoucher(order: DeliveryOrderInfo): Promise<string> {
const isRock = order.product?.sku?.startsWith('rock_') || order.product?.name?.includes('ROCK')
return generateVoucherDataURL({
productName: order.product?.name || (isRock ? '黑色ROCK长袖T恤' : '和平精英道具'),
productSKU: order.product?.sku,
productImage: resolveProductImage({ sku: order.product?.sku, name: order.product?.name, url: order.product?.image }),
roleName: order.role_name || '-',
roleUID: order.game_uid || order.buyer_name || '-',
channel: order.game_channel || (order.game_uid?.length === 10 ? '微信区' : '手Q / 微信区'),
currencyText: isRock ? '幸运币 x 10' : undefined,
redeemedAt: order.shipped_at ? formatDateTime(order.shipped_at) : formatDateTime(order.created_at),
voucherNo: order.provider_order_no || undefined,
})
}
// 外圈圆形边框
ctx.strokeStyle = '#22c55e'
ctx.lineWidth = 4
ctx.beginPath()
ctx.arc(0, 0, 68, 0, Math.PI * 2)
ctx.stroke()
// 内圈虚线
ctx.setLineDash([4, 4])
ctx.lineWidth = 1.5
ctx.beginPath()
ctx.arc(0, 0, 60, 0, Math.PI * 2)
ctx.stroke()
// 印章文字
ctx.fillStyle = '#22c55e'
ctx.font = 'bold 22px -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif'
ctx.textAlign = 'center'
ctx.textBaseline = 'middle'
ctx.fillText('已发货完成', 0, -12)
ctx.font = 'bold 15px sans-serif'
ctx.fillText('VERIFIED', 0, 16)
ctx.restore()
/**
* 将 DataURL 转换为 Blob 并复制到操作系统剪贴板（微信/QQ聊天框可直接 Ctrl+V 粘贴）
*/
export async function copyVoucherDataUrlToClipboard(dataURL: string): Promise<boolean> {
try {
const res = await fetch(dataURL)
const blob = await res.blob()
if (navigator.clipboard && window.ClipboardItem) {
const item = new ClipboardItem({ 'image/png': blob })
await navigator.clipboard.write([item])
return true
}
} catch (e) {
console.error('Failed to copy image via ClipboardItem', e)
}
return false
}
function fillRoundRect(
@@ -222,32 +281,6 @@ function fillRoundRect(
ctx.fill()
}
function strokeRoundRect(
ctx: CanvasRenderingContext2D,
x: number,
y: number,
width: number,
height: number,
radius: number | number[]
) {
ctx.beginPath()
roundRectPath(ctx, x, y, width, height, radius)
ctx.stroke()
}
function clipRoundRect(
ctx: CanvasRenderingContext2D,
x: number,
y: number,
width: number,
height: number,
radius: number | number[]
) {
ctx.beginPath()
roundRectPath(ctx, x, y, width, height, radius)
ctx.clip()
}
function roundRectPath(
ctx: CanvasRenderingContext2D,
x: number,