yml2213andCursor
df1a170d44
对外目录只保留英文主 sku；迁移硬删镜像并校准 1元=100积分；发货页/凭证优先使用 local {sku}.webp。
Co-authored-by: Cursor <cursoragent@cursor.com>
278 lines
8.8 KiB
TypeScript
278 lines
8.8 KiB
TypeScript
import type { DeliveryOrderInfo } from '../types'
|
|
import { formatDateTime } from './time'
|
|
import { resolveProductImage } from './productImage'
|
|
|
|
function loadImage(src: string): Promise<HTMLImageElement> {
|
|
return new Promise((resolve, reject) => {
|
|
const img = new Image()
|
|
img.crossOrigin = 'anonymous'
|
|
img.onload = () => resolve(img)
|
|
img.onerror = () => reject(new Error('Failed to load image'))
|
|
img.src = src
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 绘制高保真发货凭证卡片图片，返回 base64 PNG dataURL
|
|
*/
|
|
export async function generateDeliveryVoucher(order: DeliveryOrderInfo): Promise<string> {
|
|
const width = 1080
|
|
const height = 1160
|
|
const canvas = document.createElement('canvas')
|
|
canvas.width = width
|
|
canvas.height = height
|
|
const ctx = canvas.getContext('2d')
|
|
if (!ctx) {
|
|
throw new Error('Canvas 2D context not available')
|
|
}
|
|
|
|
// 1. 背景底色
|
|
ctx.fillStyle = '#f8fafc'
|
|
ctx.fillRect(0, 0, width, height)
|
|
|
|
// 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)
|
|
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')
|
|
|
|
ctx.save()
|
|
clipRoundRect(ctx, cardX, cardY, cardW, headerH, [cardRadius, cardRadius, 0, 0])
|
|
ctx.fillStyle = grad
|
|
ctx.fillRect(cardX, cardY, cardW, headerH)
|
|
|
|
// 顶部装饰圆点
|
|
ctx.fillStyle = 'rgba(255, 255, 255, 0.05)'
|
|
ctx.beginPath()
|
|
ctx.arc(cardX + cardW - 60, cardY + 40, 120, 0, Math.PI * 2)
|
|
ctx.fill()
|
|
|
|
// 平台徽标 / 标题
|
|
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.restore()
|
|
|
|
// 4. 发货成功电子印章 (Stamp)
|
|
drawSuccessStamp(ctx, cardX + cardW - 170, cardY + 140)
|
|
|
|
// 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)
|
|
|
|
// 尝试加载商品图片（优先 SKU 本地缓存）
|
|
let productImgLoaded = false
|
|
const productImgURL = resolveProductImage({ sku: order.product?.sku, url: order.product?.image })
|
|
if (productImgURL) {
|
|
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
|
|
} catch {
|
|
productImgLoaded = 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)
|
|
|
|
// 商品标签 (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'
|
|
ctx.font = 'bold 28px -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif'
|
|
ctx.fillText('已发放: 1 件', textLeft, prodCardY + 168)
|
|
|
|
// 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) : '已交付' },
|
|
]
|
|
|
|
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'
|
|
ctx.beginPath()
|
|
ctx.moveTo(cardX + 40, footerY)
|
|
ctx.lineTo(cardX + cardW - 40, footerY)
|
|
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)
|
|
|
|
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) // 稍倾斜印章质感
|
|
|
|
// 外圈圆形边框
|
|
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()
|
|
}
|
|
|
|
function fillRoundRect(
|
|
ctx: CanvasRenderingContext2D,
|
|
x: number,
|
|
y: number,
|
|
width: number,
|
|
height: number,
|
|
radius: number | number[]
|
|
) {
|
|
ctx.beginPath()
|
|
roundRectPath(ctx, x, y, width, height, radius)
|
|
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,
|
|
y: number,
|
|
width: number,
|
|
height: number,
|
|
radius: number | number[]
|
|
) {
|
|
const r = typeof radius === 'number' ? [radius, radius, radius, radius] : radius
|
|
const [tl, tr, br, bl] = r
|
|
ctx.moveTo(x + tl, y)
|
|
ctx.lineTo(x + width - tr, y)
|
|
ctx.quadraticCurveTo(x + width, y, x + width, y + tr)
|
|
ctx.lineTo(x + width, y + height - br)
|
|
ctx.quadraticCurveTo(x + width, y + height, x + width - br, y + height)
|
|
ctx.lineTo(x + bl, y + height)
|
|
ctx.quadraticCurveTo(x, y + height, x, y + height - bl)
|
|
ctx.lineTo(x, y + tl)
|
|
ctx.quadraticCurveTo(x, y, x + tl, y)
|
|
ctx.closePath()
|
|
}
|
|
|
|
function truncateString(str: string, maxLen: number): string {
|
|
if (!str) return '-'
|
|
if (str.length <= maxLen) return str
|
|
return str.slice(0, maxLen - 1) + '…'
|
|
}
|