feat: 优化发货交付页面与凭据生成，支持一键复制结果图片及官方商品图片本地缓存
- 交付界面重构：隐藏内部订单号、流水号与发货渠道，展示聚焦于买家游戏UID、角色名与交付时间 - 发货结果凭据生成：采用 Canvas 生成高清发货存证图，优化存证说明文案与自适应排版 - 一键复制图片：支持直接将结果凭证图片写入系统剪贴板，方便客服在聊天窗口快捷粘贴 - 官方图片本地化缓存：全量下载乐玩商品官方主图并建立本地持久化路由，规避外部源站跨域及破损问题 - 修复乐玩渠道角色UID提取与履约状态幂等回填逻辑
This commit is contained in:
yml2213
+432
-37
@@ -1,4 +1,4 @@
|
||||
import { useEffect, useMemo, useState, type CSSProperties, type ReactNode } from 'react'
|
||||
import { useCallback, useEffect, useMemo, useState, type CSSProperties, type ReactNode } from 'react'
|
||||
import { useParams, useSearchParams } from 'react-router-dom'
|
||||
import {
|
||||
Alert,
|
||||
@@ -7,6 +7,7 @@ import {
|
||||
Form,
|
||||
Image,
|
||||
Input,
|
||||
Modal,
|
||||
Result,
|
||||
Space,
|
||||
Spin,
|
||||
@@ -18,12 +19,21 @@ import {
|
||||
import {
|
||||
CheckCircleOutlined,
|
||||
ClockCircleOutlined,
|
||||
CopyOutlined,
|
||||
DownloadOutlined,
|
||||
EyeOutlined,
|
||||
LoadingOutlined,
|
||||
QrcodeOutlined,
|
||||
ReloadOutlined,
|
||||
SafetyCertificateOutlined,
|
||||
SendOutlined,
|
||||
SyncOutlined,
|
||||
} from '@ant-design/icons'
|
||||
import { deliveryApi } from '../api'
|
||||
import type { DeliveryBindResult, DeliveryOrderInfo, DeliverySubmitResult } from '../types'
|
||||
import { formatDateTime } from '../utils/time'
|
||||
import { generateDeliveryVoucher } from '../utils/voucher'
|
||||
import { resolveProductImage } from '../utils/productImage'
|
||||
|
||||
const statusMap: Record<string, { color: string; text: string }> = {
|
||||
paid: { color: 'orange', text: '待发货' },
|
||||
@@ -33,17 +43,34 @@ const statusMap: Record<string, { color: string; text: string }> = {
|
||||
cancelled: { color: 'default', text: '已取消' },
|
||||
}
|
||||
|
||||
function dataURLtoBlob(dataurl: string): Blob {
|
||||
const arr = dataurl.split(',')
|
||||
const mime = arr[0].match(/:(.*?);/)?.[1] || 'image/png'
|
||||
const bstr = atob(arr[1])
|
||||
let n = bstr.length
|
||||
const u8arr = new Uint8Array(n)
|
||||
while (n--) {
|
||||
u8arr[n] = bstr.charCodeAt(n)
|
||||
}
|
||||
return new Blob([u8arr], { type: mime })
|
||||
}
|
||||
|
||||
export default function Delivery() {
|
||||
const { channel = 'dlc', orderNo = '' } = useParams()
|
||||
const { orderNo = '' } = useParams()
|
||||
const [searchParams] = useSearchParams()
|
||||
const [form] = Form.useForm<{ game_account: string }>()
|
||||
const [order, setOrder] = useState<DeliveryOrderInfo | null>(null)
|
||||
const [bindResult, setBindResult] = useState<DeliveryBindResult | null>(null)
|
||||
const [submitResult, setSubmitResult] = useState<DeliverySubmitResult | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [refreshing, setRefreshing] = useState(false)
|
||||
const [binding, setBinding] = useState(false)
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
const [voucherImageURL, setVoucherImageURL] = useState('')
|
||||
const [generatingImage, setGeneratingImage] = useState(false)
|
||||
const [copyingImage, setCopyingImage] = useState(false)
|
||||
const [previewModalOpen, setPreviewModalOpen] = useState(false)
|
||||
|
||||
const decodedOrderNo = useMemo(() => decodeURIComponent(orderNo), [orderNo])
|
||||
const deliveryAuth = useMemo(() => {
|
||||
@@ -53,21 +80,122 @@ export default function Delivery() {
|
||||
}, [searchParams])
|
||||
const gameAccount = Form.useWatch('game_account', form)
|
||||
|
||||
useEffect(() => {
|
||||
if (!decodedOrderNo) {
|
||||
setError('发货链接缺少订单号')
|
||||
setLoading(false)
|
||||
return
|
||||
const getOrGenerateVoucher = async () => {
|
||||
if (!order) return ''
|
||||
if (voucherImageURL) return voucherImageURL
|
||||
setGeneratingImage(true)
|
||||
try {
|
||||
const url = await generateDeliveryVoucher(order)
|
||||
setVoucherImageURL(url)
|
||||
return url
|
||||
} catch (e) {
|
||||
message.error('生成发货凭证图失败：' + (e instanceof Error ? e.message : '请稍后重试'))
|
||||
return ''
|
||||
} finally {
|
||||
setGeneratingImage(false)
|
||||
}
|
||||
setLoading(true)
|
||||
deliveryApi.getOrder(decodedOrderNo, deliveryAuth)
|
||||
.then((data) => {
|
||||
}
|
||||
|
||||
const handleDownloadVoucher = async () => {
|
||||
const url = await getOrGenerateVoucher()
|
||||
if (!url) return
|
||||
const link = document.createElement('a')
|
||||
link.href = url
|
||||
link.download = `发货凭据_${order?.order_no || 'order'}.png`
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
document.body.removeChild(link)
|
||||
message.success('凭证图片已生成并开始下载')
|
||||
}
|
||||
|
||||
const handlePreviewVoucher = async () => {
|
||||
setPreviewModalOpen(true)
|
||||
await getOrGenerateVoucher()
|
||||
}
|
||||
|
||||
const handleCopyVoucherImage = async () => {
|
||||
setCopyingImage(true)
|
||||
try {
|
||||
const url = await getOrGenerateVoucher()
|
||||
if (!url) {
|
||||
return
|
||||
}
|
||||
|
||||
if (
|
||||
typeof window !== 'undefined' &&
|
||||
navigator.clipboard &&
|
||||
typeof ClipboardItem !== 'undefined' &&
|
||||
navigator.clipboard.write
|
||||
) {
|
||||
const blob = dataURLtoBlob(url)
|
||||
const item = new ClipboardItem({ 'image/png': blob })
|
||||
await navigator.clipboard.write([item])
|
||||
message.success('结果图片已复制到剪贴板！可直接粘贴到聊天窗口（Ctrl+V / ⌘+V）')
|
||||
} else {
|
||||
setPreviewModalOpen(true)
|
||||
message.info('当前浏览器环境不支持直接写入剪贴板图片，已为您打开大图，可长按或右键复制图片')
|
||||
}
|
||||
} catch {
|
||||
setPreviewModalOpen(true)
|
||||
message.warning('写入剪贴板失败，已为您打开凭据预览，可长按或右键复制图片')
|
||||
} finally {
|
||||
setCopyingImage(false)
|
||||
}
|
||||
}
|
||||
|
||||
const fetchOrder = useCallback(
|
||||
async (silent = false) => {
|
||||
if (!decodedOrderNo) {
|
||||
setError('发货链接缺少订单号')
|
||||
setLoading(false)
|
||||
return
|
||||
}
|
||||
if (!silent) {
|
||||
setLoading(true)
|
||||
}
|
||||
try {
|
||||
const data = await deliveryApi.getOrder(decodedOrderNo, deliveryAuth)
|
||||
setOrder(data)
|
||||
setError('')
|
||||
})
|
||||
.catch((e) => setError(e instanceof Error ? e.message : '订单加载失败'))
|
||||
.finally(() => setLoading(false))
|
||||
}, [decodedOrderNo, deliveryAuth])
|
||||
} catch (e) {
|
||||
if (!silent) {
|
||||
setError(e instanceof Error ? e.message : '订单加载失败')
|
||||
}
|
||||
} finally {
|
||||
if (!silent) {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
},
|
||||
[decodedOrderNo, deliveryAuth]
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
fetchOrder(false)
|
||||
}, [fetchOrder])
|
||||
|
||||
// 当订单处于发货中 (delivering) 时，每 3 秒自动轮询发货进度
|
||||
useEffect(() => {
|
||||
if (order?.status !== 'delivering') {
|
||||
return
|
||||
}
|
||||
const timer = setInterval(() => {
|
||||
fetchOrder(true)
|
||||
}, 3000)
|
||||
return () => clearInterval(timer)
|
||||
}, [order?.status, fetchOrder])
|
||||
|
||||
const handleManualRefresh = async () => {
|
||||
setRefreshing(true)
|
||||
try {
|
||||
await fetchOrder(true)
|
||||
message.success('状态已刷新')
|
||||
} catch {
|
||||
message.error('刷新状态失败')
|
||||
} finally {
|
||||
setRefreshing(false)
|
||||
}
|
||||
}
|
||||
|
||||
const bindAccount = async () => {
|
||||
const values = await form.validateFields()
|
||||
@@ -94,7 +222,17 @@ export default function Delivery() {
|
||||
try {
|
||||
const result = await deliveryApi.submit(decodedOrderNo, values.game_account, bindResult.bind_uuid, deliveryAuth)
|
||||
setSubmitResult(result)
|
||||
setOrder((prev) => prev ? { ...prev, status: result.status, can_ship: false } : prev)
|
||||
setOrder((prev) =>
|
||||
prev
|
||||
? {
|
||||
...prev,
|
||||
status: result.status,
|
||||
can_ship: false,
|
||||
game_uid: values.game_account,
|
||||
role_name: (result.game_account as Record<string, string>)?.role_name || prev.role_name,
|
||||
}
|
||||
: prev
|
||||
)
|
||||
message.success(result.message || '已提交')
|
||||
} catch (e) {
|
||||
message.error(e instanceof Error ? e.message : '提交失败')
|
||||
@@ -126,13 +264,24 @@ export default function Delivery() {
|
||||
<main style={{ minHeight: '100vh', background: '#f5f7fb', padding: '32px 16px' }}>
|
||||
<div style={{ maxWidth: 880, margin: '0 auto' }}>
|
||||
<Space direction="vertical" size="large" style={{ width: '100%' }}>
|
||||
<header>
|
||||
<Typography.Title level={3} style={{ marginBottom: 4 }}>
|
||||
游戏道具发货
|
||||
</Typography.Title>
|
||||
<Typography.Text type="secondary">
|
||||
{channel.toUpperCase()} · {decodedOrderNo}
|
||||
</Typography.Text>
|
||||
<header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12 }}>
|
||||
<div>
|
||||
<Typography.Title level={3} style={{ marginBottom: 4 }}>
|
||||
游戏道具发货
|
||||
</Typography.Title>
|
||||
<Typography.Text type="secondary">
|
||||
订单编号：{decodedOrderNo}
|
||||
</Typography.Text>
|
||||
</div>
|
||||
{order.status === 'delivering' && (
|
||||
<Button
|
||||
icon={<ReloadOutlined />}
|
||||
loading={refreshing}
|
||||
onClick={handleManualRefresh}
|
||||
>
|
||||
刷新状态
|
||||
</Button>
|
||||
)}
|
||||
</header>
|
||||
|
||||
<section style={panelStyle}>
|
||||
@@ -151,40 +300,222 @@ export default function Delivery() {
|
||||
<Descriptions.Item label="买家">{order.buyer_name || '-'}</Descriptions.Item>
|
||||
<Descriptions.Item label="金额">{order.amount} 积分</Descriptions.Item>
|
||||
<Descriptions.Item label="创建时间">{formatDateTime(order.created_at)}</Descriptions.Item>
|
||||
<Descriptions.Item label="渠道">{order.product?.game || channel.toUpperCase()}</Descriptions.Item>
|
||||
<Descriptions.Item label="渠道">{order.product?.game || '自动发货'}</Descriptions.Item>
|
||||
</Descriptions>
|
||||
|
||||
{order.ship_fail_reason && (
|
||||
{order.ship_fail_reason && order.status !== 'ship_failed' && (
|
||||
<Alert type="error" showIcon message={order.ship_fail_reason} />
|
||||
)}
|
||||
{!order.can_ship && (
|
||||
<Alert type="warning" showIcon message={order.cannot_ship_reason || '当前订单暂不可发货'} />
|
||||
)}
|
||||
{!order.can_ship &&
|
||||
order.status !== 'delivering' &&
|
||||
order.status !== 'delivered' &&
|
||||
order.status !== 'ship_failed' && (
|
||||
<Alert type="warning" showIcon message={order.cannot_ship_reason || '当前订单暂不可发货'} />
|
||||
)}
|
||||
</Space>
|
||||
</section>
|
||||
|
||||
{order.can_ship && (
|
||||
{/* 状态 1：已发货完成 */}
|
||||
{order.status === 'delivered' && (
|
||||
<section style={panelStyle}>
|
||||
<Result
|
||||
status="success"
|
||||
title="道具发放成功！"
|
||||
subTitle="系统已为您完成道具充值发放，请进入游戏查收邮件或背包。"
|
||||
extra={[
|
||||
<Button
|
||||
type="primary"
|
||||
key="copy-img"
|
||||
icon={<CopyOutlined />}
|
||||
loading={copyingImage || generatingImage}
|
||||
onClick={handleCopyVoucherImage}
|
||||
style={{ background: '#16a34a', borderColor: '#16a34a' }}
|
||||
>
|
||||
复制结果图片
|
||||
</Button>,
|
||||
<Button
|
||||
key="download"
|
||||
icon={<DownloadOutlined />}
|
||||
loading={generatingImage}
|
||||
onClick={handleDownloadVoucher}
|
||||
>
|
||||
下载凭据图片
|
||||
</Button>,
|
||||
<Button
|
||||
key="preview"
|
||||
icon={<EyeOutlined />}
|
||||
loading={generatingImage}
|
||||
onClick={handlePreviewVoucher}
|
||||
>
|
||||
预览凭据图片
|
||||
</Button>,
|
||||
<Button key="refresh" icon={<ReloadOutlined />} onClick={handleManualRefresh} loading={refreshing}>
|
||||
刷新核验
|
||||
</Button>,
|
||||
]}
|
||||
>
|
||||
<div style={{ background: '#fafafa', border: '1px solid #f0f0f0', padding: '20px 24px', borderRadius: 12 }}>
|
||||
{/* 商品卡片信息 */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, marginBottom: 20, paddingBottom: 16, borderBottom: '1px solid #e2e8f0', flexWrap: 'wrap' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 16, flex: 1, minWidth: 220 }}>
|
||||
{order.product?.image ? (
|
||||
<Image
|
||||
src={resolveProductImage(order.product.image)}
|
||||
width={72}
|
||||
height={72}
|
||||
alt={order.product.name}
|
||||
style={{ objectFit: 'cover', borderRadius: 8, border: '1px solid #e2e8f0' }}
|
||||
/>
|
||||
) : (
|
||||
<div style={{ width: 72, height: 72, background: '#e2e8f0', borderRadius: 8, display: 'grid', placeItems: 'center', color: '#64748b' }}>
|
||||
道具
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<div style={{ fontSize: 18, fontWeight: 600, color: '#0f172a', marginBottom: 4 }}>
|
||||
{order.product?.name || '游戏道具商品'}
|
||||
</div>
|
||||
<Space wrap size="small">
|
||||
<Tag color="blue">{order.product?.sku || '-'}</Tag>
|
||||
{order.product?.game && <Tag color="cyan">{order.product.game}</Tag>}
|
||||
<Tag color="green">已发放 1 件</Tag>
|
||||
<Tag color="purple">{order.amount} 积分</Tag>
|
||||
</Space>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
type="primary"
|
||||
ghost
|
||||
icon={<CopyOutlined />}
|
||||
loading={copyingImage || generatingImage}
|
||||
onClick={handleCopyVoucherImage}
|
||||
>
|
||||
复制结果图片
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Descriptions column={{ xs: 1, sm: 2 }} size="middle">
|
||||
<Descriptions.Item label="游戏账号 UID">
|
||||
<Typography.Text
|
||||
code
|
||||
strong
|
||||
style={{ fontSize: 15 }}
|
||||
copyable={order.game_uid || gameAccount ? { text: order.game_uid || gameAccount } : false}
|
||||
>
|
||||
{order.game_uid || gameAccount || '-'}
|
||||
</Typography.Text>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="游戏角色名">
|
||||
<Typography.Text
|
||||
strong
|
||||
style={{ fontSize: 15, color: '#0f172a' }}
|
||||
copyable={order.role_name ? { text: order.role_name } : false}
|
||||
>
|
||||
{order.role_name || '-'}
|
||||
</Typography.Text>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="区服信息">{order.game_channel || '-'}</Descriptions.Item>
|
||||
<Descriptions.Item label="下单时间">{formatDateTime(order.created_at)}</Descriptions.Item>
|
||||
<Descriptions.Item label="完成时间">
|
||||
{order.shipped_at ? formatDateTime(order.shipped_at) : '已完成'}
|
||||
</Descriptions.Item>
|
||||
</Descriptions>
|
||||
|
||||
<div style={{ marginTop: 16, padding: '12px 16px', background: '#f0fdf4', border: '1px solid #bbf7d0', borderRadius: 8, display: 'flex', alignItems: 'center', gap: 10, color: '#15803d', fontSize: 13 }}>
|
||||
<SafetyCertificateOutlined style={{ fontSize: 20, color: '#16a34a', flexShrink: 0 }} />
|
||||
<div>
|
||||
<strong>官方履约已完成：</strong>本次道具发货已成功直充到账。点击「复制结果图片」可直接复制凭据图并在微信、客服聊天窗直接粘贴（Ctrl+V / ⌘+V）。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Result>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* 状态 2：发货处理中 */}
|
||||
{order.status === 'delivering' && (
|
||||
<section style={{ ...panelStyle, borderTop: '4px solid #1677ff' }}>
|
||||
<Space direction="vertical" size="large" style={{ width: '100%' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
|
||||
<Spin indicator={<LoadingOutlined style={{ fontSize: 28, color: '#1677ff' }} spin />} />
|
||||
<div>
|
||||
<Typography.Title level={4} style={{ margin: 0, color: '#1677ff' }}>
|
||||
道具正在极速发货中...
|
||||
</Typography.Title>
|
||||
<Typography.Text type="secondary" style={{ fontSize: 13 }}>
|
||||
已成功提交上游发放节点，通常在 10 ~ 30 秒内到账，页面会自动更新。
|
||||
</Typography.Text>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ background: '#f0f5ff', border: '1px solid #d6e4ff', padding: '16px 20px', borderRadius: 8 }}>
|
||||
<Descriptions column={{ xs: 1, sm: 2 }} size="small">
|
||||
<Descriptions.Item label="发放目标 UID">
|
||||
<Typography.Text strong code>{order.game_uid || gameAccount || '-'}</Typography.Text>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="识别角色名">
|
||||
<Typography.Text strong>{order.role_name || '正在识别...'}</Typography.Text>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="游戏区服">{order.game_channel || '自动识别'}</Descriptions.Item>
|
||||
<Descriptions.Item label="处理进度">
|
||||
<Tag color="processing" icon={<SyncOutlined spin />}>队列发放中</Tag>
|
||||
</Descriptions.Item>
|
||||
</Descriptions>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 8 }}>
|
||||
<Typography.Text type="secondary" style={{ fontSize: 12 }}>
|
||||
系统正在自动刷新进度（每 3 秒）
|
||||
</Typography.Text>
|
||||
<Button
|
||||
icon={<ReloadOutlined />}
|
||||
loading={refreshing}
|
||||
onClick={handleManualRefresh}
|
||||
>
|
||||
刷新发货进度
|
||||
</Button>
|
||||
</div>
|
||||
</Space>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* 状态 3：发货失败 */}
|
||||
{order.status === 'ship_failed' && (
|
||||
<section style={panelStyle}>
|
||||
<Result
|
||||
status="error"
|
||||
title="发货遇到异常"
|
||||
subTitle={order.ship_fail_reason || order.cannot_ship_reason || '渠道发货未成功，请核对信息或联系客服'}
|
||||
extra={[
|
||||
<Button key="retry" type="primary" onClick={handleManualRefresh} loading={refreshing}>
|
||||
重新查询订单状态
|
||||
</Button>,
|
||||
]}
|
||||
/>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* 状态 4：待绑定扫码 */}
|
||||
{order.status === 'paid' && (
|
||||
<section style={panelStyle}>
|
||||
<Space direction="vertical" size="large" style={{ width: '100%' }}>
|
||||
<Steps
|
||||
current={step}
|
||||
items={[
|
||||
{ title: '填写 UID', icon: <ClockCircleOutlined /> },
|
||||
{ title: '扫码绑定', icon: <QrcodeOutlined /> },
|
||||
{ title: '输入账号', icon: <ClockCircleOutlined /> },
|
||||
{ title: '微信/QQ 扫码绑定', icon: <QrcodeOutlined /> },
|
||||
{ title: '提交发货', icon: <CheckCircleOutlined /> },
|
||||
]}
|
||||
/>
|
||||
|
||||
<Form form={form} layout="vertical" initialValues={{ game_account: order.game_uid || '' }}>
|
||||
<Form form={form} layout="vertical" initialValues={{ game_account: order.buyer_name || '' }}>
|
||||
<Form.Item
|
||||
name="game_account"
|
||||
label="游戏 UID"
|
||||
rules={[
|
||||
{ required: true, message: '请输入游戏 UID' },
|
||||
{ pattern: /^\d+$/, message: '游戏 UID 仅支持数字' },
|
||||
]}
|
||||
label="游戏账号（用于接收充值）"
|
||||
rules={[{ required: true, message: '请输入接收道具的游戏账号 UID' }]}
|
||||
extra="请务必核对游戏账号 UID，充值成功后无法撤回"
|
||||
>
|
||||
<Input size="large" inputMode="numeric" placeholder="请输入游戏 UID" />
|
||||
<Input placeholder="请输入游戏账号 UID" size="large" />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
@@ -241,6 +572,70 @@ export default function Delivery() {
|
||||
)}
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
<Modal
|
||||
title={
|
||||
<Space>
|
||||
<SafetyCertificateOutlined style={{ color: '#16a34a' }} />
|
||||
<span>发货电子凭证预览</span>
|
||||
</Space>
|
||||
}
|
||||
open={previewModalOpen}
|
||||
onCancel={() => setPreviewModalOpen(false)}
|
||||
footer={[
|
||||
<Button key="close" onClick={() => setPreviewModalOpen(false)}>
|
||||
关闭
|
||||
</Button>,
|
||||
<Button
|
||||
key="copy"
|
||||
icon={<CopyOutlined />}
|
||||
loading={copyingImage}
|
||||
onClick={handleCopyVoucherImage}
|
||||
>
|
||||
复制图片到剪贴板
|
||||
</Button>,
|
||||
<Button
|
||||
key="download"
|
||||
type="primary"
|
||||
icon={<DownloadOutlined />}
|
||||
loading={generatingImage}
|
||||
onClick={handleDownloadVoucher}
|
||||
style={{ background: '#16a34a', borderColor: '#16a34a' }}
|
||||
>
|
||||
保存凭证图片
|
||||
</Button>,
|
||||
]}
|
||||
width={640}
|
||||
centered
|
||||
>
|
||||
{generatingImage ? (
|
||||
<div style={{ textAlign: 'center', padding: '60px 0' }}>
|
||||
<Spin size="large" />
|
||||
<div style={{ marginTop: 16, color: '#64748b' }}>正在为您绘制高清发货凭证图片...</div>
|
||||
</div>
|
||||
) : voucherImageURL ? (
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<img
|
||||
src={voucherImageURL}
|
||||
alt="发货电子凭证"
|
||||
style={{
|
||||
width: '100%',
|
||||
maxHeight: '68vh',
|
||||
objectFit: 'contain',
|
||||
borderRadius: 8,
|
||||
boxShadow: '0 4px 16px rgba(0,0,0,0.1)',
|
||||
}}
|
||||
/>
|
||||
<div style={{ marginTop: 12, color: '#64748b', fontSize: 13 }}>
|
||||
提示：支持长按或右键复制/保存图片到本地相册，作为官方维权及售后保障证据。
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ textAlign: 'center', padding: '40px 0' }}>
|
||||
<Button onClick={getOrGenerateVoucher}>生成凭证</Button>
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -60,6 +60,8 @@ export default function PlatformProducts() {
|
||||
const [lewanPage, setLewanPage] = useState(1)
|
||||
const [lewanTotal, setLewanTotal] = useState(0)
|
||||
const [lewanKeyword, setLewanKeyword] = useState('')
|
||||
const [selectedLewanMap, setSelectedLewanMap] = useState<Map<string, LewanProductItem>>(new Map())
|
||||
const [batchSubmitting, setBatchSubmitting] = useState(false)
|
||||
|
||||
// 路由配置 Modal 状态
|
||||
const [configModalOpen, setConfigModalOpen] = useState(false)
|
||||
@@ -219,13 +221,14 @@ export default function PlatformProducts() {
|
||||
// 打开将乐玩商品导入为自营目录的 Modal
|
||||
const openSyncModal = (lewanProduct: LewanProductItem) => {
|
||||
syncForm.resetFields()
|
||||
const unitPrice = Number.parseFloat(lewanProduct.effectiveUnitPrice || '')
|
||||
const unitPriceFen = Number.parseFloat(lewanProduct.effectiveUnitPrice || '')
|
||||
const unitPriceYuan = Number.isFinite(unitPriceFen) ? Number((unitPriceFen / 100).toFixed(2)) : 0
|
||||
syncForm.setFieldsValue({
|
||||
lewan_product_id: lewanProduct.id,
|
||||
name: lewanProduct.name,
|
||||
category: lewanProduct.categoryName || '未分类',
|
||||
sku: `LEWAN_${lewanProduct.id.slice(0, 8).toUpperCase()}`,
|
||||
price_yuan: Number.isFinite(unitPrice) ? unitPrice.toFixed(2) : 0,
|
||||
price_yuan: unitPriceYuan,
|
||||
delivery_type: lewanProduct.deliveryType || 'LINK_BINDING',
|
||||
})
|
||||
setSyncModalOpen(true)
|
||||
@@ -256,6 +259,92 @@ export default function PlatformProducts() {
|
||||
}
|
||||
}
|
||||
|
||||
// 批量导入选中的乐玩商品
|
||||
const handleBatchSync = () => {
|
||||
const selectedItems = Array.from(selectedLewanMap.values())
|
||||
if (selectedItems.length === 0) return
|
||||
|
||||
Modal.confirm({
|
||||
title: `确认批量导入选中的 ${selectedItems.length} 个乐玩商品？`,
|
||||
content: (
|
||||
<div>
|
||||
<Paragraph type="secondary" style={{ marginBottom: 12 }}>
|
||||
将自动按乐玩供货价生成自营商品并配置为乐玩履约模式，同步加入平台自营目录。
|
||||
</Paragraph>
|
||||
<div
|
||||
style={{
|
||||
maxHeight: 200,
|
||||
overflowY: 'auto',
|
||||
background: '#f8fafc',
|
||||
padding: '8px 12px',
|
||||
borderRadius: 6,
|
||||
fontSize: 12,
|
||||
border: '1px solid #e2e8f0',
|
||||
}}
|
||||
>
|
||||
{selectedItems.map((item, idx) => {
|
||||
const unitPriceFen = Number.parseFloat(item.effectiveUnitPrice || '')
|
||||
const unitPriceYuan = Number.isFinite(unitPriceFen)
|
||||
? (unitPriceFen / 100).toFixed(2)
|
||||
: '0.00'
|
||||
return (
|
||||
<div
|
||||
key={item.id}
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
padding: '3px 0',
|
||||
borderBottom: idx < selectedItems.length - 1 ? '1px dashed #e2e8f0' : 'none',
|
||||
}}
|
||||
>
|
||||
<span style={{ fontWeight: 500, marginRight: 8 }}>{item.name}</span>
|
||||
<span style={{ color: '#2563eb', whiteSpace: 'nowrap' }}>{unitPriceYuan} 元</span>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
okText: `确认导入 (${selectedItems.length})`,
|
||||
cancelText: '取消',
|
||||
width: 500,
|
||||
onOk: async () => {
|
||||
setBatchSubmitting(true)
|
||||
try {
|
||||
const payload: SyncLewanProductInput[] = selectedItems.map((p) => {
|
||||
const unitPriceFen = Number.parseFloat(p.effectiveUnitPrice || '')
|
||||
return {
|
||||
lewan_product_id: p.id,
|
||||
name: p.name,
|
||||
category: p.categoryName || '未分类',
|
||||
sku: `LEWAN_${p.id.slice(0, 8).toUpperCase()}`,
|
||||
price: Number.isFinite(unitPriceFen) ? Math.round(unitPriceFen) : 1000,
|
||||
delivery_type: p.deliveryType || 'LINK_BINDING',
|
||||
}
|
||||
})
|
||||
let count = 0
|
||||
try {
|
||||
const res = await lewanApi.batchSyncCatalog(payload)
|
||||
count = res.synced_count
|
||||
} catch {
|
||||
// 兼容后端尚未重启的情况：自动降级为循环单条导入
|
||||
for (const item of payload) {
|
||||
await lewanApi.syncCatalog(item)
|
||||
count++
|
||||
}
|
||||
}
|
||||
message.success(`成功批量导入 ${count} 个商品至自营目录！`)
|
||||
setSelectedLewanMap(new Map())
|
||||
loadCatalog()
|
||||
} catch (e) {
|
||||
message.error(e instanceof Error ? e.message : '批量导入失败')
|
||||
} finally {
|
||||
setBatchSubmitting(false)
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// 快捷从乐玩列表快速关联到当前配置的商品
|
||||
const quickAttachLewanProduct = (p: LewanProductItem) => {
|
||||
configForm.setFieldsValue({
|
||||
@@ -437,10 +526,10 @@ export default function PlatformProducts() {
|
||||
{
|
||||
title: '供货价',
|
||||
dataIndex: 'effectiveUnitPrice',
|
||||
width: 100,
|
||||
width: 110,
|
||||
render: (v?: string) => {
|
||||
const n = Number.parseFloat(v || '')
|
||||
return Number.isFinite(n) ? `${n.toFixed(2)} 元` : '-'
|
||||
return Number.isFinite(n) ? `${(n / 100).toFixed(2)} 元` : '-'
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -803,25 +892,41 @@ export default function PlatformProducts() {
|
||||
<Space align="center">
|
||||
<CloudDownloadOutlined style={{ color: '#2563eb' }} />
|
||||
<span>乐玩开放平台商品库 (实时拉取)</span>
|
||||
{selectedLewanMap.size > 0 && (
|
||||
<Tag color="blue">已勾选 {selectedLewanMap.size} 项</Tag>
|
||||
)}
|
||||
</Space>
|
||||
}
|
||||
placement="right"
|
||||
width={780}
|
||||
width={820}
|
||||
open={lewanDrawerOpen}
|
||||
onClose={() => setLewanDrawerOpen(false)}
|
||||
extra={
|
||||
<Button
|
||||
icon={<ReloadOutlined />}
|
||||
size="small"
|
||||
onClick={() => loadLewanProducts(lewanPage, lewanKeyword)}
|
||||
loading={lewanLoading}
|
||||
>
|
||||
刷新乐玩库
|
||||
</Button>
|
||||
<Space>
|
||||
{selectedLewanMap.size > 0 && (
|
||||
<Button
|
||||
type="primary"
|
||||
size="small"
|
||||
icon={<ImportOutlined />}
|
||||
loading={batchSubmitting}
|
||||
onClick={handleBatchSync}
|
||||
>
|
||||
批量导入 ({selectedLewanMap.size})
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
icon={<ReloadOutlined />}
|
||||
size="small"
|
||||
onClick={() => loadLewanProducts(lewanPage, lewanKeyword)}
|
||||
loading={lewanLoading}
|
||||
>
|
||||
刷新乐玩库
|
||||
</Button>
|
||||
</Space>
|
||||
}
|
||||
>
|
||||
<Paragraph type="secondary" style={{ fontSize: 13, marginBottom: 16 }}>
|
||||
此处实时连通乐玩开放平台 API 拉取最新可供货商品。您可以点击「导入为自营」直接生成自营商品，或在配置弹窗中直接关联该商品。
|
||||
此处实时连通乐玩开放平台 API 拉取最新可供货商品。勾选多项可一键批量导入，或点击单行「导入为自营」单独配置。
|
||||
</Paragraph>
|
||||
|
||||
<Space style={{ marginBottom: 16, width: '100%' }}>
|
||||
@@ -843,8 +948,64 @@ export default function PlatformProducts() {
|
||||
</Button>
|
||||
</Space>
|
||||
|
||||
{selectedLewanMap.size > 0 && (
|
||||
<div
|
||||
style={{
|
||||
marginBottom: 16,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
background: '#eff6ff',
|
||||
border: '1px solid #bfdbfe',
|
||||
padding: '8px 16px',
|
||||
borderRadius: 8,
|
||||
}}
|
||||
>
|
||||
<Space>
|
||||
<CheckCircleOutlined style={{ color: '#2563eb', fontSize: 16 }} />
|
||||
<span>
|
||||
已跨页勾选 <strong>{selectedLewanMap.size}</strong> 个商品
|
||||
</span>
|
||||
</Space>
|
||||
<Space>
|
||||
<Button size="small" onClick={() => setSelectedLewanMap(new Map())}>
|
||||
清空选择
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
size="small"
|
||||
icon={<ImportOutlined />}
|
||||
loading={batchSubmitting}
|
||||
onClick={handleBatchSync}
|
||||
>
|
||||
批量导入为自营 ({selectedLewanMap.size})
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Table
|
||||
rowKey="id"
|
||||
rowSelection={{
|
||||
selectedRowKeys: Array.from(selectedLewanMap.keys()),
|
||||
onChange: (keys: React.Key[], selectedRows: LewanProductItem[]) => {
|
||||
setSelectedLewanMap((prev) => {
|
||||
const next = new Map(prev)
|
||||
const currentPageIds = new Set(lewanProducts.map((p) => p.id))
|
||||
for (const id of currentPageIds) {
|
||||
if (!keys.includes(id)) {
|
||||
next.delete(id)
|
||||
}
|
||||
}
|
||||
for (const row of selectedRows) {
|
||||
if (row && row.id) {
|
||||
next.set(row.id, row)
|
||||
}
|
||||
}
|
||||
return next
|
||||
})
|
||||
},
|
||||
}}
|
||||
loading={lewanLoading}
|
||||
columns={lewanColumns}
|
||||
dataSource={lewanProducts}
|
||||
|
||||
Reference in New Issue
Block a user