feat(collect): 补资料改为订单号直连并按状态一次性提交

- 公开补资料页 /supplement/:订单号 直接按平台订单号查询,不再依赖链接记录;旧 token 链接一律 404
- 仅「待完善 + 未指派 + 无拼单份额」可提交,提交后状态变为待分配,重复提交返回 409
- 非可编辑工单只返回商品、工单号、状态与客服提示,不返回已填资料和截图
- 管理端新增「重置补资料」:待分配且未指派、无份额、未发布时一键重置回待完善
- 新增 canResetMaterial 能力与 material_reset 流转事件,工单状态文案统一为「待分配」
This commit is contained in:
2026-11-01 18:12:44 +08:00
parent aed76e047e
commit a2cf48f5fc
24 changed files with 1223 additions and 494 deletions
+13 -5
View File
@@ -46,6 +46,9 @@ const AdminWorkerPlatformPage = lazy(() => import('@/pages/admin/AdminWorkerPlat
const ClaimPage = lazy(() => import('@/pages/claim/ClaimPage'))
const H5ClaimEntryPage = lazy(() => import('@/pages/claim/H5ClaimEntryPage'))
const CollectPage = lazy(() => import('@/pages/collect/CollectPage'))
const CollectMaterialLinkEntryPage = lazy(
() => import('@/pages/collect/CollectMaterialLinkEntryPage'),
)
const CollectMaterialLinkPage = lazy(() => import('@/pages/collect/CollectMaterialLinkPage'))
const NotFoundPage = lazy(() => import('@/pages/NotFoundPage'))
const RedeemPage = lazy(() => import('@/pages/redeem/RedeemPage'))
@@ -124,8 +127,8 @@ export default function App() {
return <RedeemApplication />
}
// 一次性补资料链接(`/supplement/<token>`):路径式公开页,先于站点判断,
// 保证在后台域名和打手端域名下都能打开。
// 一次性补资料链接(`/supplement`):路径式公开页,先于站点判断,
// 保证在后台域名和打手端域名下都能打开。带订单号直接进补资料页,不带订单号进输入页。
if (isCollectMaterialLinkPath(window.location.pathname)) {
return <CollectMaterialLinkApplication />
}
@@ -235,9 +238,13 @@ function ClaimApplication() {
}
/**
* 一次性补资料链接(`/supplement/<token>`)的独立路由树。
* 一次性补资料链接(`/supplement`)的独立路由树。
*
* 路径式公开页,不带 hash;页面只读取 token,不依赖后台会话。
* - `/supplement`:输入平台订单号;
* - `/supplement/<订单号>`:直接打开对应订单的补资料页;
* - 其余子路径:交给补资料页展示「链接无效」。
*
* 路径式公开页,不带 hash;不依赖后台会话。
*/
function CollectMaterialLinkApplication() {
useClearStrayHash()
@@ -246,7 +253,8 @@ function CollectMaterialLinkApplication() {
<BrowserRouter>
<Suspense fallback={<RouteLoading />}>
<Routes>
<Route path="/supplement/:token" element={<CollectMaterialLinkPage />} />
<Route path="/supplement" element={<CollectMaterialLinkEntryPage />} />
<Route path="/supplement/:code" element={<CollectMaterialLinkPage />} />
<Route path="*" element={<CollectMaterialLinkPage />} />
</Routes>
</Suspense>
@@ -21,7 +21,7 @@ type EventNodeStyle = {
/** 工单状态中文名 */
const STATUS_LABELS: Record<string, string> = {
pending_material: '待完善资料',
unassigned: '未分配',
unassigned: '待分配',
open: '待抢单',
in_progress: '代练中',
pending_acceptance: '待验收',
@@ -176,6 +176,14 @@ export function formatWorkOrderEvent(event: WorkOrderEvent): EventNodeStyle {
return { title: '完善了订单资料', color: 'cyan' }
case 'material_updated':
return { title: '更新了订单资料', color: 'cyan' }
case 'material_reset':
return {
title: note ? `客服重置补资料状态:${note}` : '客服重置补资料状态',
description: `订单状态:${formatStatusLabel(event.fromStatus)} → ${formatStatusLabel(
event.toStatus,
)}`,
color: 'orange',
}
// —— 好友赠送节点 ——
case 'gift_material_submitted':
@@ -28,7 +28,7 @@ type ImageUploadProps = {
captureGlobalPaste?: boolean
/** 是否显示移动端「拍照」入口;不传时按「打手端 + 移动端」自动判断 */
allowCamera?: boolean
/** 自定义上传函数;公开一次性链接用它把文件传到 token 校验过的上传接口。 */
/** 自定义上传函数;公开一次性链接用它把文件传到带订单号 / workOrderId 校验的上传接口。 */
uploader?: ImageUploadUploader
}
@@ -78,6 +78,7 @@ import {
reduceAdminWorkOrderShareQuantity,
reopenAdminCancelledWorkOrder,
resetAdminWorkOrderGiftMaterial,
resetAdminWorkOrderMaterialStatus,
resolveAdminProblemWorkOrder,
submitAdminWorkOrderMaterial,
unpublishAdminWorkOrder,
@@ -106,6 +107,7 @@ import dayjs, { ADMIN_DATE_FORMAT } from '@/lib/dayjs'
import { ADMIN_DEFAULT_PAGE_SIZE, buildAdminTablePagination } from '@/utils/admin-pagination'
import { getAdminUsername, hasAdminPermission, hasAdminRole } from '@/utils/admin-auth'
import { formatAdminDateTime } from '@/utils/admin-time'
import { buildCollectMaterialLinkUrl } from '@/utils/collect-link'
import { isExplicitOrderNoSearch, normalizeSearchText } from '@/utils/admin-realtime-work-orders'
import {
DeadlineCountdown,
@@ -203,10 +205,11 @@ function getConsignmentFulfillment(row: WorkOrder): ConsignmentFulfillmentInfo |
return Object.keys(consignment).length > 0 ? (consignment as ConsignmentFulfillmentInfo) : null
}
/** 公开补资料链接只在「待完善 / 未分配」阶段生成;已进大厅或已接单不允许客户改资料。 */
/** 公开补资料链接只在「待完善 / 待分配」且有平台订单号时生成;已进大厅或已接单不允许客户改资料。 */
function canCopyMaterialLink(order: WorkOrder): boolean {
const status = String(order.rawStatus || order.status || '')
return status === 'pending_material' || status === 'unassigned'
const platformOrderId = String(order.platformOrderId || '').trim()
return (status === 'pending_material' || status === 'unassigned') && Boolean(platformOrderId)
}
/** 剪贴板 API 在 HTTP + IP 下可能不可用,补一个 textarea 兜底。 */
@@ -1491,7 +1494,7 @@ export default function WorkOrdersPanel() {
modal.confirm({
title: `确认删除订单 ${getDisplayOrderNo(row)}?`,
content:
'删除后工单将从列表中移除,且不可恢复。仅未分配、待完善或已取消且无拼单参与的工单可删除。',
'删除后工单将从列表中移除,且不可恢复。仅待分配、待完善或已取消且无拼单参与的工单可删除。',
okText: '确认删除',
okButtonProps: { danger: true },
cancelText: '取消',
@@ -1577,6 +1580,22 @@ export default function WorkOrdersPanel() {
})
}
function requestResetMaterial(row: WorkOrder) {
modal.confirm({
title: '重置补资料状态?',
content:
'将把该工单重置为“待完善”,客户可用订单号重新提交一次资料。已填资料会保留,客户重新提交后覆盖;此操作会记录在订单流转记录中。',
okText: '确认重置',
okButtonProps: { type: 'primary' },
cancelText: '取消',
onOk: () =>
runAction(
() => resetAdminWorkOrderMaterialStatus(row.workOrderId),
'已重置为待完善,客户刷新补资料页即可重新提交',
),
})
}
function copyBuyerMaterialInfo(order: WorkOrder) {
const items = getMaterialDetailItems(order).filter((item) => String(item.value || '').trim())
if (items.length === 0) {
@@ -1638,12 +1657,24 @@ export default function WorkOrdersPanel() {
setMaterialLinkLoadingId(order.workOrderId)
try {
const response = await createAdminWorkOrderMaterialLink(order.workOrderId)
const url = `${window.location.origin}/supplement/${encodeURIComponent(response.data.token)}`
// 新后端返回 platformOrderId;旧后端缺失时回退 token,仅用于前后端滚动发布。
const platformOrderId = String(
response.data.platformOrderId || response.data.token || '',
).trim()
if (!platformOrderId) {
message.error('生成补资料链接失败:缺少平台订单号')
return
}
const url = buildCollectMaterialLinkUrl(window.location.origin, platformOrderId)
if (!url) {
message.error('生成补资料链接失败:链接地址为空')
return
}
const copied = await copyTextToClipboard(url)
const expiresText = formatAdminDateTime(response.data.expiresAt)
if (copied) {
message.success(
`${response.data.reused ? '已复制现有链接' : '已生成并复制新链接'},${expiresText} 前有效,仅可提交一次`,
`${response.data.reused ? '已复制现有链接' : '已生成并复制链接'}(订单号 ${platformOrderId}),${expiresText} 前有效;该订单号下已生成链接的待补商品会一起显示`,
)
} else {
setMaterialLinkFallback({ url, expiresAt: response.data.expiresAt })
@@ -1914,13 +1945,13 @@ export default function WorkOrdersPanel() {
onClick={() => {
modal.confirm({
title: '确认重新启用该订单?',
content: '订单将恢复为未分配状态。请确认资料与金额后,再发布到抢单大厅。',
content: '订单将恢复为待分配状态。请确认资料与金额后,再发布到抢单大厅。',
okText: '重新启用',
cancelText: '取消',
onOk: () =>
runAction(
() => reopenAdminCancelledWorkOrder(row.workOrderId),
'订单已恢复为未分配状态,可编辑后发布',
'订单已恢复为待分配状态,可编辑后发布',
),
})
}}
@@ -1969,11 +2000,20 @@ export default function WorkOrdersPanel() {
icon={<LinkOutlined />}
loading={materialLinkLoadingId === row.workOrderId}
onClick={() => void copyMaterialLink(row)}
title="生成一次性补资料链接(有效期内仅可提交一次)"
title="生成一次性补资料链接(按平台订单号打开;有效期内每个工单仅可提交一次)"
>
复制补资料链接
</Button>
) : null}
{row.capabilities?.canResetMaterial && canUpdateMaterial ? (
<Button
icon={<RollbackOutlined />}
onClick={() => requestResetMaterial(row)}
title="把已提交的补资料重置为待完善,客户可重新提交一次"
>
重置补资料
</Button>
) : null}
{row.capabilities?.canPublish && canPublishOrder ? (
<Button
icon={<SendOutlined />}
@@ -2006,11 +2046,11 @@ export default function WorkOrdersPanel() {
onClick={() => {
modal.confirm({
title: '确认下架该订单?',
content: '下架后订单会回到未分配状态,不再在抢单大厅展示。',
content: '下架后订单会回到待分配状态,不再在抢单大厅展示。',
okText: '确认下架',
cancelText: '取消',
onOk: () =>
runAction(() => unpublishAdminWorkOrder(row.workOrderId), '订单已撤回到未分配'),
runAction(() => unpublishAdminWorkOrder(row.workOrderId), '订单已撤回到待分配'),
})
}}
>
@@ -3251,7 +3291,8 @@ export default function WorkOrdersPanel() {
{materialLinkFallback ? (
<Space direction="vertical" size={10} style={{ width: '100%' }}>
<Typography.Text type="secondary">
链接仅可提交一次,{formatAdminDateTime(materialLinkFallback.expiresAt)} 前有效。
同一订单号下已生成链接的多个待补工单会显示在同一个页面,每个工单各自仅可提交一次;
{formatAdminDateTime(materialLinkFallback.expiresAt)} 前有效。
</Typography.Text>
<Input.TextArea
value={materialLinkFallback.url}
@@ -205,7 +205,7 @@ export function formatMoney(value: number | undefined) {
export function formatStatus(status: string) {
const labels: Record<string, string> = {
pending_material: '待完善',
unassigned: '未分配',
unassigned: '待分配',
open: '待抢单',
in_progress: '代练中',
pending_acceptance: '待验收',
@@ -0,0 +1,67 @@
import { ArrowRightOutlined } from '@ant-design/icons'
import { App, Button, Card, Form, Input, Space, Typography } from 'antd'
import { useNavigate } from 'react-router'
import { normalizeOrderNoInput } from '@/utils/collect-link'
import { useCollectLinkPageMeta } from './use-collect-link-page-meta'
const { Text, Title } = Typography
/**
* 补资料入口页(`/supplement/`)。
*
* 客户只知道平台订单号时,从这里输入订单号再跳到 `/supplement/<订单号>`;
* 如果客服已经发了完整链接,可以直接打开链接跳过这一步。
*/
export default function CollectMaterialLinkEntryPage() {
const { message } = App.useApp()
const navigate = useNavigate()
useCollectLinkPageMeta('订单资料补充')
function handleFinish(values: { orderNo?: string }) {
const orderNo = normalizeOrderNoInput(values.orderNo)
if (!orderNo) {
message.warning('请输入订单号')
return
}
void navigate(`/supplement/${encodeURIComponent(orderNo)}`)
}
return (
<main className="collect-link-page">
<Card className="collect-link-card" bordered={false}>
<Space direction="vertical" size={16} className="full-width">
<div>
<Title level={3} className="collect-link-title">
订单资料补充
</Title>
<Text type="secondary">请输入下单时使用的订单号,进入补资料页面。</Text>
</div>
<Form layout="vertical" onFinish={handleFinish}>
<Form.Item
name="orderNo"
label="订单号"
rules={[{ required: true, whitespace: true, message: '请输入订单号' }]}
>
<Input autoComplete="off" allowClear placeholder="请输入订单号" size="large" />
</Form.Item>
<Button
type="primary"
size="large"
htmlType="submit"
block
icon={<ArrowRightOutlined />}
>
下一步
</Button>
</Form>
<Text type="secondary" className="collect-link-footnote">
如果客服已经发给你完整链接,直接打开链接即可。
</Text>
</Space>
</Card>
</main>
)
}
@@ -1,4 +1,4 @@
import { CheckCircleOutlined, LoadingOutlined } from '@ant-design/icons'
import { LoadingOutlined } from '@ant-design/icons'
import {
Alert,
App,
@@ -13,17 +13,23 @@ import {
Tag,
Typography,
} from 'antd'
import { useEffect, useState } from 'react'
import { useParams } from 'react-router'
import { useCallback, useEffect, useRef, useState } from 'react'
import { Link, useParams } from 'react-router'
import ImageUpload from '@/components/files/ImageUpload'
import { uploadCollectMaterialLinkFile } from '@/services/files'
import { fetchCollectMaterialLink, submitCollectMaterialLink } from '@/services/worker'
import type { CollectMaterialLinkInfo, UploadedFile } from '@/types/worker-platform'
import { formatDateTime } from '@/utils/date-time'
import type {
CollectMaterialLinkInfo,
CollectMaterialLinkOrder,
UploadedFile,
} from '@/types/worker-platform'
import { useCollectLinkPageMeta } from './use-collect-link-page-meta'
const { Text, Title } = Typography
const NOT_FOUND_MESSAGE = '订单号无效,请确认订单号是否正确'
type LinkLoadError = {
code: string
message: string
@@ -38,135 +44,140 @@ function resolveErrorMessage(error: unknown): string {
}
function resolveErrorTitle(code: string): string {
if (code === 'material_link_expired') return '链接已过期'
if (code === 'material_link_revoked') return '链接已失效'
if (code === 'material_link_not_found') return '链接无效'
if (code === 'material_link_not_found' || code === 'material_link_work_order_invalid') {
return '订单号无效'
}
if (code === 'material_link_work_order_required') return '请选择要补充的商品'
if (code === 'material_link_order_status_invalid') return '订单状态已变化'
return '无法打开链接'
return '暂时无法打开页面'
}
const STATUS_TAG_COLORS: Record<string, string> = {
pending_material: 'orange',
unassigned: 'blue',
open: 'cyan',
in_progress: 'processing',
pending_acceptance: 'purple',
problem: 'red',
accepted: 'green',
cancelled: 'default',
}
function resolveStatusColor(status: string): string {
return STATUS_TAG_COLORS[status] || 'default'
}
/**
* 客户侧一次性补资料页。
* 客户侧补资料页。
*
* 只渲染 requirement 里的动态字段与买家主页截图,不展示发单价格、押金、
* 打手、后台备注等任何后台字段;提交成功后链接立即失效。
* 只要知道平台订单号就能打开:一个订单号下可能有多个商品工单,页面按 orders
* 渲染多张卡片。只有「待完善 + 未指派 + 无份额」的工单返回表单,其余工单只展示
* 商品、工单号、状态与客服提示,不暴露已填资料和截图。
* 提交成功后工单进入「待分配」,同一工单不能再提交,需联系客服重置。
*/
export default function CollectMaterialLinkPage() {
const { message } = App.useApp()
const { token: routeToken } = useParams<{ token?: string }>()
const token = String(routeToken || '').trim()
const { code: routeCode } = useParams<{ code?: string }>()
const code = String(routeCode || '').trim()
useCollectLinkPageMeta('订单资料补充')
const [form] = Form.useForm<Record<string, string>>()
const [loading, setLoading] = useState(true)
const [info, setInfo] = useState<CollectMaterialLinkInfo | null>(null)
const [loadError, setLoadError] = useState<LinkLoadError | null>(null)
const [submitting, setSubmitting] = useState(false)
const [submitted, setSubmitted] = useState(false)
const [screenshots, setScreenshots] = useState<UploadedFile[]>([])
const [submittingWorkOrderId, setSubmittingWorkOrderId] = useState(0)
const submittingRef = useRef(false)
const requestSeqRef = useRef(0)
const [screenshotsByOrder, setScreenshotsByOrder] = useState<Record<number, UploadedFile[]>>({})
useEffect(() => {
const previousTitle = document.title
document.title = '订单资料补充'
/**
* 读取订单资料状态。
*
* silent=true 用于提交后刷新:不切整页 loading,避免页面闪烁丢焦点;
* 同时用请求序号丢弃过期响应,防止快速重试时旧数据覆盖新数据。
*/
const loadInfo = useCallback(
async (options: { silent?: boolean } = {}) => {
const seq = requestSeqRef.current + 1
requestSeqRef.current = seq
function applyMeta(name: string, content: string) {
const existing = document.querySelector<HTMLMetaElement>(`meta[name="${name}"]`)
const previous = existing?.getAttribute('content') ?? null
let created: HTMLMetaElement | null = null
if (existing) {
existing.setAttribute('content', content)
} else {
created = document.createElement('meta')
created.setAttribute('name', name)
created.setAttribute('content', content)
document.head.appendChild(created)
}
return () => {
if (created) {
created.remove()
} else if (existing) {
if (previous === null) {
existing.removeAttribute('content')
} else {
existing.setAttribute('content', previous)
}
}
}
}
const restoreRobots = applyMeta('robots', 'noindex,nofollow')
const restoreReferrer = applyMeta('referrer', 'no-referrer')
return () => {
document.title = previousTitle
restoreRobots()
restoreReferrer()
}
}, [])
useEffect(() => {
let cancelled = false
async function load() {
if (!token) {
if (!code) {
setInfo(null)
setLoadError({ code: 'material_link_not_found', message: NOT_FOUND_MESSAGE })
setLoading(false)
setLoadError({
code: 'material_link_not_found',
message: '链接无效,请确认链接是否完整',
})
return
}
setLoading(true)
setSubmitted(false)
if (!options.silent) setLoading(true)
try {
const response = await fetchCollectMaterialLink(token)
if (cancelled) return
const response = await fetchCollectMaterialLink(code)
if (seq !== requestSeqRef.current) return
const orders = response.data.orders || []
if (orders.length === 0) {
setInfo(null)
setLoadError({ code: 'material_link_not_found', message: NOT_FOUND_MESSAGE })
return
}
setInfo(response.data)
setLoadError(null)
setScreenshots(response.data.screenshots || [])
form.resetFields()
form.setFieldsValue(response.data.values || {})
setScreenshotsByOrder((previous) => {
// 只保留仍可提交商品的本地截图,避免刷新后覆盖用户刚上传的图片;
// 不可提交商品不再展示资料,直接丢弃。
const next: Record<number, UploadedFile[]> = {}
for (const order of orders) {
if (!order.canSubmit) continue
next[order.workOrderId] = previous[order.workOrderId] ?? order.screenshots ?? []
}
return next
})
} catch (error) {
if (cancelled) return
if (seq !== requestSeqRef.current) return
setInfo(null)
setLoadError({
code: resolveErrorCode(error),
message: resolveErrorMessage(error),
message: resolveErrorMessage(error) || NOT_FOUND_MESSAGE,
})
} finally {
if (!cancelled) setLoading(false)
if (seq === requestSeqRef.current && !options.silent) setLoading(false)
}
}
},
[code],
)
void load()
return () => {
cancelled = true
}
}, [form, token])
useEffect(() => {
void loadInfo()
}, [loadInfo])
async function handleSubmit(values: Record<string, string>) {
if (!token) return
setSubmitting(true)
async function handleSubmit(order: CollectMaterialLinkOrder, values: Record<string, string>) {
if (!code) return
// 多工单时用户可能连点不同卡片;前端只允许一个提交在途,避免列表状态互相覆盖。
if (submittingRef.current) return
submittingRef.current = true
setSubmittingWorkOrderId(order.workOrderId)
try {
await submitCollectMaterialLink(token, { fields: values, screenshots })
setSubmitted(true)
await submitCollectMaterialLink(code, {
workOrderId: order.workOrderId,
fields: values,
screenshots: screenshotsByOrder[order.workOrderId] ?? order.screenshots ?? [],
})
message.success('资料已提交,订单已进入待分配')
await loadInfo({ silent: true })
} catch (error) {
const code = resolveErrorCode(error)
if (
code === 'material_link_used' ||
code === 'material_link_expired' ||
code === 'material_link_revoked' ||
code === 'material_link_not_found' ||
code === 'material_link_order_status_invalid'
) {
setInfo(null)
setLoadError({ code, message: resolveErrorMessage(error) })
return
}
const errorCode = resolveErrorCode(error)
message.error(resolveErrorMessage(error))
// 状态类错误说明工单已被并发提交、被客服重置或流转到其他状态:
// 以服务端状态为准静默刷新,页面切换成只读卡片而不是整页报错。
if (
errorCode === 'material_link_already_submitted' ||
errorCode === 'material_link_order_status_invalid' ||
errorCode === 'material_link_work_order_invalid' ||
errorCode === 'material_link_not_found'
) {
await loadInfo({ silent: true })
}
} finally {
setSubmitting(false)
submittingRef.current = false
setSubmittingWorkOrderId(0)
}
}
@@ -176,115 +187,106 @@ export default function CollectMaterialLinkPage() {
{loading ? (
<div className="collect-link-state">
<Spin indicator={<LoadingOutlined spin />} size="large" />
<Text type="secondary">正在读取补资料链接...</Text>
<Text type="secondary">正在读取订单资料...</Text>
</div>
) : submitted ? (
<Result
status="success"
title="资料已提交"
subTitle="链接已失效,如需修改资料,请联系客服重新获取。"
/>
) : loadError ? (
loadError.code === 'material_link_used' ? (
<Result
icon={<CheckCircleOutlined style={{ color: '#16a34a' }} />}
title="资料已提交"
subTitle="该链接已经使用过;如需再次修改资料,请联系客服重新获取链接。"
/>
) : (
<Result
status="warning"
title={resolveErrorTitle(loadError.code)}
subTitle={loadError.message || '请联系客服重新获取链接'}
/>
)
<Result
status="warning"
title={resolveErrorTitle(loadError.code)}
subTitle={loadError.message || NOT_FOUND_MESSAGE}
extra={
<Link to="/supplement">
<Button>重新输入订单号</Button>
</Link>
}
/>
) : info ? (
<Space direction="vertical" size={16} className="full-width">
<div>
<Title level={3} className="collect-link-title">
订单资料补充
</Title>
<Text type="secondary">请补充以下资料,提交后客服会尽快处理。</Text>
<Text type="secondary">
{info.pendingCount > 0
? '请补充以下资料,提交后客服会尽快处理。'
: '以下为该订单当前的资料状态,如需修改请联系客服。'}
</Text>
</div>
<div className="collect-link-meta">
<div>
<span>商品</span>
<strong>{info.order.productName || '-'}</strong>
</div>
<div>
<span>工单号</span>
<strong>{info.order.workOrderNo || '-'}</strong>
</div>
<div>
<span>订单号</span>
<strong>{info.order.platformOrderId || '-'}</strong>
</div>
<div>
<span>有效期至</span>
<strong>{formatDateTime(info.expiresAt)}</strong>
</div>
</div>
{info.pendingCount > 1 ? (
<Alert
type="info"
showIcon
message={`当前订单有 ${info.pendingCount} 个待完善商品,请逐个提交`}
description="每个商品的资料仅可提交一次,提交成功后该商品进入待分配。"
/>
) : null}
<Alert
type="warning"
showIcon
message="链接仅可提交一次"
description="提交成功后链接立即失效;如需再次修改资料,请联系客服重新获取链接。"
/>
{info.pendingCount === 0 ? (
<Alert type="info" showIcon message="该订单当前不可修改资料,如需修改请联系客服" />
) : null}
<Form form={form} layout="vertical" onFinish={handleSubmit}>
{info.fields.map((field) => (
<Form.Item
key={field.key}
name={field.key}
label={
<Space size={6}>
<span>{field.label}</span>
{field.required ? <Tag color="orange">必填</Tag> : <Tag>选填</Tag>}
</Space>
}
rules={
field.required
? [{ required: true, whitespace: true, message: `请填写${field.label}` }]
: undefined
}
>
{field.type === 'select' && (field.options || []).length > 0 ? (
<Radio.Group
options={(field.options || []).map((option) => ({
label: option,
value: option,
}))}
/>
{info.orders.map((order) => (
<Card
key={order.workOrderId}
className="collect-link-order-card"
size="small"
title={order.productName || '订单商品'}
extra={<Tag color={resolveStatusColor(order.status)}>{order.statusLabel}</Tag>}
>
<Space direction="vertical" size={12} className="full-width">
<div className="collect-link-meta">
<div>
<span>工单号</span>
<strong>{order.workOrderNo || '-'}</strong>
</div>
<div>
<span>订单号</span>
<strong>{order.platformOrderId || '-'}</strong>
</div>
</div>
{order.canSubmit ? (
<>
{info.pendingCount === 1 ? (
<Alert
type="warning"
showIcon
message="该商品资料仅可提交一次"
description="提交成功后该商品进入待分配,不能再修改;如需修改请联系客服。"
/>
) : null}
<MaterialLinkOrderForm
order={order}
code={code}
screenshots={
screenshotsByOrder[order.workOrderId] ?? order.screenshots ?? []
}
submitting={submittingWorkOrderId === order.workOrderId}
disabled={submittingWorkOrderId !== 0}
onScreenshotsChange={(files) =>
setScreenshotsByOrder((previous) => ({
...previous,
[order.workOrderId]: files,
}))
}
onSubmit={(values) => handleSubmit(order, values)}
/>
</>
) : (
<Input autoComplete="off" placeholder={`请输入${field.label}`} />
<Alert
type={order.blockedReason === 'already_submitted' ? 'info' : 'warning'}
showIcon
message={order.message || '当前不能修改资料,如需修改请联系客服。'}
/>
)}
</Form.Item>
))}
<Form.Item label="买家主页截图">
<ImageUpload
scene="collect-material"
scope="collect"
maxCount={5}
showPasteHint
captureGlobalPaste
value={screenshots}
onChange={setScreenshots}
uploader={(file, scene) => uploadCollectMaterialLinkFile(file, scene, token)}
/>
</Form.Item>
<div className="collect-link-actions">
<Button type="primary" size="large" htmlType="submit" loading={submitting}>
提交资料
</Button>
</div>
</Form>
</Space>
</Card>
))}
<Text type="secondary" className="collect-link-footnote">
本页面仅用于补充订单资料,请勿将链接转发给他人。
本页面仅用于补充订单资料,请妥善保管订单号。
</Text>
</Space>
) : null}
@@ -292,3 +294,83 @@ export default function CollectMaterialLinkPage() {
</main>
)
}
type MaterialLinkOrderFormProps = {
order: CollectMaterialLinkOrder
code: string
screenshots: UploadedFile[]
submitting: boolean
disabled: boolean
onScreenshotsChange: (files: UploadedFile[]) => void
onSubmit: (values: Record<string, string>) => void
}
function MaterialLinkOrderForm({
order,
code,
screenshots,
submitting,
disabled,
onScreenshotsChange,
onSubmit,
}: MaterialLinkOrderFormProps) {
return (
<Form layout="vertical" initialValues={order.values || {}} onFinish={onSubmit}>
{(order.fields ?? []).map((field) => (
<Form.Item
key={field.key}
name={field.key}
label={
<Space size={6}>
<span>{field.label}</span>
{field.required ? <Tag color="orange">必填</Tag> : <Tag>选填</Tag>}
</Space>
}
rules={
field.required
? [{ required: true, whitespace: true, message: `请填写${field.label}` }]
: undefined
}
>
{field.type === 'select' && (field.options || []).length > 0 ? (
<Radio.Group
options={(field.options || []).map((option) => ({
label: option,
value: option,
}))}
/>
) : (
<Input autoComplete="off" placeholder={`请输入${field.label}`} />
)}
</Form.Item>
))}
<Form.Item label="买家主页截图">
<ImageUpload
scene="collect-material"
scope="collect"
maxCount={5}
showPasteHint
captureGlobalPaste
value={screenshots}
onChange={onScreenshotsChange}
uploader={(file, scene) =>
uploadCollectMaterialLinkFile(file, scene, code, order.workOrderId)
}
/>
</Form.Item>
<div className="collect-link-actions">
<Button
type="primary"
size="large"
htmlType="submit"
loading={submitting}
disabled={disabled}
>
提交资料
</Button>
</div>
</Form>
)
}
@@ -0,0 +1,49 @@
import { useEffect } from 'react'
/**
* 公开补资料页共用的 document.title / robots / referrer 设置。
*
* 入口页和补资料页都是可被直接访问的公开路径,必须禁止搜索引擎收录,
* 并避免平台订单号通过 referrer 泄漏给第三方。
*/
export function useCollectLinkPageMeta(title: string) {
useEffect(() => {
const previousTitle = document.title
document.title = title
function applyMeta(name: string, content: string) {
const existing = document.querySelector<HTMLMetaElement>(`meta[name="${name}"]`)
const previous = existing?.getAttribute('content') ?? null
let created: HTMLMetaElement | null = null
if (existing) {
existing.setAttribute('content', content)
} else {
created = document.createElement('meta')
created.setAttribute('name', name)
created.setAttribute('content', content)
document.head.appendChild(created)
}
return () => {
if (created) {
created.remove()
} else if (existing) {
if (previous === null) {
existing.removeAttribute('content')
} else {
existing.setAttribute('content', previous)
}
}
}
}
const restoreRobots = applyMeta('robots', 'noindex,nofollow')
const restoreReferrer = applyMeta('referrer', 'no-referrer')
return () => {
document.title = previousTitle
restoreRobots()
restoreReferrer()
}
}, [title])
}
@@ -770,8 +770,19 @@ export function submitAdminWorkOrderMaterial(
}
export function createAdminWorkOrderMaterialLink(workOrderId: number) {
return apiPost<{ token: string; expiresAt: string; reused: boolean }>(
`/api/v1/admin/worker-platform/orders/${workOrderId}/material-link`,
return apiPost<{
token: string
/** 公开 URL 使用的平台订单号;旧后端可能没有该字段,前端仅用于滚动发布兜底。 */
platformOrderId?: string
expiresAt: string
reused: boolean
}>(`/api/v1/admin/worker-platform/orders/${workOrderId}/material-link`)
}
/** 客服重置补资料:仅「待分配 + 未指派 + 无份额 + 未发布」可重置回待完善。 */
export function resetAdminWorkOrderMaterialStatus(workOrderId: number) {
return apiPost<{ order: WorkOrder }>(
`/api/v1/admin/worker-platform/orders/${workOrderId}/reset-material`,
)
}
+10 -4
View File
@@ -22,16 +22,22 @@ export async function uploadFile(file: File, scene: string, scope: UploadScope)
/**
* 一次性补资料链接的截图上传。
*
* 与公开 collect/upload 的区别:先把 token 放在路径里,后端会校验链接
* 是否仍可用;链接已使用/过期时不会落文件。
* 与公开 collect/upload 的区别:路径里带平台订单号,多工单时再带 workOrderId;
* 后端会校验对应链接是否仍可用,链接已使用/过期时不会落文件。
*/
export async function uploadCollectMaterialLinkFile(file: File, scene: string, token: string) {
export async function uploadCollectMaterialLinkFile(
file: File,
scene: string,
code: string,
workOrderId?: number,
) {
const uploadTarget = await optimizeImageForUpload(file, scene)
const form = new FormData()
form.append('file', uploadTarget)
form.append('scene', scene)
const query = workOrderId ? `?workOrderId=${encodeURIComponent(String(workOrderId))}` : ''
const response = await apiPostForm<{ file: UploadedFile }>(
`/api/v1/collect/link/${encodeURIComponent(token)}/upload`,
`/api/v1/collect/link/${encodeURIComponent(code)}/upload${query}`,
form,
)
return response.data.file
+5 -4
View File
@@ -381,19 +381,20 @@ export function submitCollectOrder(payload: {
)
}
export function fetchCollectMaterialLink(token: string) {
return apiGet<CollectMaterialLinkInfo>(`/api/v1/collect/link/${encodeURIComponent(token)}`)
export function fetchCollectMaterialLink(code: string) {
return apiGet<CollectMaterialLinkInfo>(`/api/v1/collect/link/${encodeURIComponent(code)}`)
}
export function submitCollectMaterialLink(
token: string,
code: string,
payload: {
workOrderId?: number
fields: Record<string, string>
screenshots?: UploadedFile[]
},
) {
return apiPost<CollectMaterialLinkSubmitResult>(
`/api/v1/collect/link/${encodeURIComponent(token)}/submit`,
`/api/v1/collect/link/${encodeURIComponent(code)}/submit`,
payload,
)
}
+5
View File
@@ -499,6 +499,11 @@
padding: 28px;
}
/* 一单多工单时,内层商品卡片比外层容器更紧凑 */
.collect-link-order-card .ant-card-body {
padding: 16px;
}
.collect-link-title {
margin: 0 0 4px !important;
}
+29 -10
View File
@@ -647,6 +647,8 @@ export type WorkOrder = {
canPin: boolean
canUnpublish: boolean
canUpdateMaterial: boolean
/** 待分配且未指派、无份额、未发布时,客服可以把补资料状态重置回待完善。 */
canResetMaterial?: boolean
canAccept: boolean
canMarkProblem: boolean
canDelete: boolean
@@ -867,22 +869,39 @@ export type CollectLookupResponse = {
pendingCount: number
}
/** 一次性补资料链接的公开只读信息(不含价格/押金/打手等后台字段)。 */
export type CollectMaterialLinkInfo = {
order: {
workOrderNo: string
platformOrderId: string
productName: string
status: string
}
fields: CollectField[]
export type CollectMaterialLinkBlockedReason =
| 'already_submitted'
| 'status'
| 'assigned'
| 'shares'
| ''
/** 公开补资料页的单个工单;只有 canSubmit=true 时才有字段/已填值/截图。 */
export type CollectMaterialLinkOrder = {
workOrderId: number
workOrderNo: string
platformOrderId: string
productName: string
status: string
statusLabel: string
canSubmit: boolean
blockedReason: CollectMaterialLinkBlockedReason
message: string
fields?: CollectField[]
values?: Record<string, string>
screenshots?: UploadedFile[]
expiresAt: string
}
/** 按平台订单号读取到的补资料信息;一单多工单时 orders 会有多条。 */
export type CollectMaterialLinkInfo = {
platformOrderId: string
orders: CollectMaterialLinkOrder[]
pendingCount: number
}
export type CollectMaterialLinkSubmitResult = {
complete: boolean
workOrderId: number
order: {
workOrderNo: string
platformOrderId: string
+39 -8
View File
@@ -1,9 +1,10 @@
/**
* 一次性补资料链接的路径解析。
*
* 公开链接形如:`https://<域名>/supplement/<token>`,与后台 HashRouter 完全隔离。
* 命名空间判定用于路由分发:`/supplement` 及子路径整段交给公开页,
* 避免落到后台路由或打手端 SPA。
* 公开链接有两种形态:
* - `https://<域名>/supplement/`:输入平台订单号;
* - `https://<域名>/supplement/<平台订单号>`:直接打开对应订单的补资料页。
* 与后台 HashRouter 完全隔离。
*/
export function isCollectMaterialLinkPath(pathname: unknown): boolean {
@@ -11,14 +12,44 @@ export function isCollectMaterialLinkPath(pathname: unknown): boolean {
}
/**
* 只认 `/supplement/<一段 token>`:
* 只认 `/supplement/<一段 code>`:
* - `/supplement/abc` 命中,结尾多余斜杠容忍;
* - `/supplement`、`/supplement/a/b` 不命中(页面展示链接无效)。
* - `/supplement`、`/supplement/a/b` 不命中(由入口页/页面自己展示无效)。
*/
export function resolveCollectMaterialLinkToken(pathname: unknown): string {
export function resolveCollectMaterialLinkCode(pathname: unknown): string {
const segments = splitPathSegments(pathname)
if (segments.length !== 2 || segments[0] !== 'supplement') return ''
return decodeTokenSegment(segments[1])
return decodePathSegment(segments[1])
}
/** 统一拼补资料链接;origin 结尾多余斜杠会被去掉。 */
export function buildCollectMaterialLinkUrl(origin: unknown, code: unknown): string {
const base = String(origin ?? '')
.trim()
.replace(/\/+$/, '')
const normalized = String(code ?? '').trim()
if (!base || !normalized) return ''
return `${base}/supplement/${encodeURIComponent(normalized)}`
}
/**
* 入口页输入归一化:去空格;如果用户粘贴了完整 `/supplement/<订单号>` 链接,
* 自动提取最后一段,避免把整条 URL 当成订单号。
*/
export function normalizeOrderNoInput(value: unknown): string {
const raw = String(value ?? '').trim()
if (!raw) return ''
const marker = '/supplement/'
const index = raw.indexOf(marker)
if (index < 0) return raw
const segment = raw
.slice(index + marker.length)
.split(/[?#]/)[0]
.replace(/\/+$/, '')
.trim()
return decodePathSegment(segment)
}
function splitPathSegments(pathname: unknown): string[] {
@@ -28,7 +59,7 @@ function splitPathSegments(pathname: unknown): string[] {
return normalized.split(/[?#]/)[0].replace(/\/+$/, '').split('/').filter(Boolean)
}
function decodeTokenSegment(segment: string): string {
function decodePathSegment(segment: string): string {
try {
return decodeURIComponent(segment)
} catch {