diff --git a/apps/frontend/src/pages/worker/WorkerAfterSalesPage.tsx b/apps/frontend/src/pages/worker/WorkerAfterSalesPage.tsx index 4a4b8aa8..c9b1ba19 100644 --- a/apps/frontend/src/pages/worker/WorkerAfterSalesPage.tsx +++ b/apps/frontend/src/pages/worker/WorkerAfterSalesPage.tsx @@ -1,4 +1,16 @@ -import { ReloadOutlined } from '@ant-design/icons' +import { + AlertOutlined, + AuditOutlined, + CheckCircleFilled, + CheckCircleOutlined, + ClockCircleOutlined, + CloseCircleOutlined, + DollarCircleOutlined, + FormOutlined, + ReloadOutlined, + SafetyCertificateOutlined, + UserOutlined, +} from '@ant-design/icons' import { useQuery, useQueryClient } from '@tanstack/react-query' import { App, @@ -122,6 +134,7 @@ export default function WorkerAfterSalesPage() { } return counts }, [allCases]) + const afterSalesCases = useMemo( () => allCases @@ -140,27 +153,109 @@ export default function WorkerAfterSalesPage() { isMobile ? 'worker-after-sales-page worker-after-sales-mobile' : 'worker-after-sales-page' } > + {/* 待办紧急提醒横幅 */} {pendingCount > 0 ? ( - +
+
+ + + +
+
+ 您有 {pendingCount} 笔售后单待提交说明 +
+
+ 买家已发起售后投诉，请尽快提交完成凭据或情况答辩，逾期可能影响您的资金与接单等级。 +
+
+
+ +
) : null} + + {/* 4卡片争议处理概览网格 */} +
+
+ setStatusFilter( + statusFilter === 'awaiting_worker_response' ? 'all' : 'awaiting_worker_response', + ) + } + > +
+ +
+
+
+ 待我举证 + {pendingCount > 0 && } +
+
{countByFilter.awaiting_worker_response || 0}
+
+ {pendingCount > 0 ? `${pendingCount} 笔需紧急说明` : '暂无待处理'} +
+
+
+ +
setStatusFilter(statusFilter === 'under_review' ? 'all' : 'under_review')} + > +
+ +
+
+
平台仲裁中
+
{countByFilter.under_review || 0}
+
客服公正审核中
+
+
+ +
+ setStatusFilter(statusFilter === 'recovery_pending' ? 'all' : 'recovery_pending') + } + > +
+ +
+
+
待追缴/扣款
+
{countByFilter.recovery_pending || 0}
+
存在待追缴或抵扣款
+
+
+ +
setStatusFilter(statusFilter === 'closed' ? 'all' : 'closed')} + > +
+ +
+
+
已结案归档
+
{countByFilter.closed || 0}
+
历史完结记录
+
+
+
+ + {/* 桌面端与移动端顶部筛选与控制栏 */}
- 售后问题单 + 售后维权与工单仲裁 - {pendingCount > 0 ? ( - - - {pendingCount} 条待提交说明 - - ) : ( - 无待办售后单 - )} + 共 {allCases.length} 笔工单记录
@@ -197,7 +292,9 @@ export default function WorkerAfterSalesPage() {
{afterSalesCasesQuery.isLoading ? ( - 加载中… +
+ 正在加载售后问题单… +
) : afterSalesCasesQuery.isError ? ( ) : afterSalesCases.length === 0 ? ( - +
+ +
) : (
{afterSalesCases.map((item) => ( @@ -260,180 +359,294 @@ function WorkerAfterSalesItem({ Number(item.recoveryAmount || 0) > 0 || Number(item.pendingDepositDeductionAmount || 0) > 0 || Number(item.availableDeductionAmount || 0) > 0 || - Number(item.debtAmount || 0) > 0 + Number(item.debtAmount || 0) > 0 || + Number(item.refundedAmount || 0) > 0 return ( <> -
-
- - +
+ {/* 卡片头部：状态、问题类型、工单标题、订单单号 */} +
+
+ + {formatWorkerAfterSalesStatus(item.status)} - - + + {formatWorkerAfterSalesProblemType(item.problemType)} - - - {item.productName || item.caseNo} - - - 发起 {formatDateTime(item.createdAt)} - -
- - - 工单号 {item.workOrderNo || item.caseNo} - - - 售后单号 {item.caseNo} - - {item.shareQuantity ? ( - - 拼单 {item.shareQuantity} 份 + + {item.productName || item.caseNo} - ) : null} - - -
-
投诉内容
- - {item.complaintNote || '-'} - - {item.complaintFiles.length > 0 ? ( - - ) : null} -
- - {item.workerResponse || item.workerResponseFiles.length > 0 ? ( -
-
- 我提交的说明{item.respondedAt ? ` · ${formatDateTime(item.respondedAt)}` : ''} -
- {item.workerResponse ? ( - - {item.workerResponse} - - ) : null} - {item.workerResponseFiles.length > 0 ? ( - + {item.shareQuantity ? ( + 拼单 {item.shareQuantity} 份 ) : null}
- ) : null} - {resolutionLabel || item.resolutionNote || hasRecoveryDetail ? ( -
-
处理结果
- - {resolutionLabel ? ( - - - {resolutionLabel} - - {item.resolvedAt ? ( - - {formatDateTime(item.resolvedAt)} - - ) : null} - - ) : null} - {item.resolutionNote ? ( - - {item.resolutionNote} - - ) : null} - {hasRecoveryDetail ? ( - - {Number(item.recoveryAmount || 0) > 0 ? ( - - 追缴 {formatMoney(item.recoveryAmount)} - - ) : null} - {Number(item.pendingDepositDeductionAmount || 0) > 0 ? ( - - 待解冻资金抵扣 {formatMoney(item.pendingDepositDeductionAmount)} - - ) : null} - {Number(item.availableDeductionAmount || 0) > 0 ? ( - - 余额抵扣 {formatMoney(item.availableDeductionAmount)} - - ) : null} - {Number(item.debtAmount || 0) > 0 ? ( - - 待追缴 {formatMoney(item.debtAmount)}，后续验收报酬将自动抵扣 - - ) : null} - {Number(item.refundedAmount || 0) > 0 ? ( - - 已退还追缴 {formatMoney(item.refundedAmount)} 至可用余额 - - ) : null} - - ) : null} - -
- ) : item.status === 'under_review' ? ( - 已提交说明，等待客服处理 - ) : null} - - {item.status === 'awaiting_worker_response' ? ( -
- + 工单 {item.workOrderNo || item.caseNo} + + + 售后单 {item.caseNo} + +
+
+ + {/* 主体对比区域：买家投诉诉求 vs 打手答辩举证 (并排双列) */} +
+ {/* 左列：买家投诉诉求 */} +
+
+
+ +
+ 买家投诉诉求 +
+
+
+ {item.complaintNote ? ( +

{item.complaintNote}

+ ) : ( +

买家未填写文字描述

+ )} +
+ {item.complaintFiles.length > 0 && ( +
+
+ 买家举证材料 ({item.complaintFiles.length})： +
+ +
+ )} +
+
+ + {/* 右列：打手答辩与举证 */} +
+
+
+ +
+ 我的答辩与说明 + {item.respondedAt && ( + + 提交于 {formatDateTime(item.respondedAt)} + + )} +
+ + {item.workerResponse || item.workerResponseFiles.length > 0 ? ( +
+
+ {item.workerResponse ? ( +

{item.workerResponse}

+ ) : null} +
+ {item.workerResponseFiles.length > 0 && ( +
+
+ 补救举证材料 ({item.workerResponseFiles.length})： +
+ +
+ )} +
+ ) : item.status === 'awaiting_worker_response' ? ( +
+
+
+ +
+
+

等待您提交说明材料

+

+ 买家已发起售后申诉，请针对上述问题提交文字说明或补救凭据，以便平台客服公允判定。 +

+
+
+ +
+ ) : item.status === 'under_review' ? ( +
+ +

+ 未补充文字材料，平台客服正在结合买家举证与订单原始验收凭据进行裁决审核。 +

+
+ ) : ( +
+ +

本工单已结案（未补充答辩记录）

+
+ )} +
+
+ + {/* 底部横幅：平台仲裁裁决与资金明细 */} + {resolutionLabel || + item.resolutionNote || + hasRecoveryDetail || + item.status === 'under_review' ? ( +
+
+
+ + + + 平台仲裁判定 + {resolutionLabel ? ( + + {item.resolutionAction === 'upheld' && ( + + )} + {item.resolutionAction === 'not_upheld' && ( + + )} + {resolutionLabel} + + ) : item.status === 'under_review' ? ( + + 客服审核中 + + ) : null} + {item.resolvedAt ? ( + + 裁决时间：{formatDateTime(item.resolvedAt)} + + ) : null} +
+
+ + {item.resolutionNote && ( +
+ 判定说明： + {item.resolutionNote} +
+ )} + + {hasRecoveryDetail && ( +
+ 资金处理明细： +
+ {Number(item.recoveryAmount || 0) > 0 && ( + + 追缴金额 + {formatMoney(item.recoveryAmount)} + + )} + {Number(item.pendingDepositDeductionAmount || 0) > 0 && ( + + 待解冻资金抵扣 + + {formatMoney(item.pendingDepositDeductionAmount)} + + + )} + {Number(item.availableDeductionAmount || 0) > 0 && ( + + 余额抵扣 + + {formatMoney(item.availableDeductionAmount)} + + + )} + {Number(item.debtAmount || 0) > 0 && ( + + 待追缴欠款 + {formatMoney(item.debtAmount)} + （后续报酬自动抵扣） + + )} + {Number(item.refundedAmount || 0) > 0 && ( + + 退还追缴 + {formatMoney(item.refundedAmount)} + （已入可用余额） + + )} +
+
+ )}
) : null}
+ {/* 提交说明材料弹窗 */} setResponseOpen(false)} onOk={() => form.submit()} - okText="提交说明" + okText="确认提交说明" destroyOnHidden + className="worker-as-submit-modal" > -
-
- 投诉内容 · {formatWorkerAfterSalesProblemType(item.problemType)} + + {/* 弹窗内展示买家投诉内容供参考 */} +
+
+ + 买家投诉内容 · {formatWorkerAfterSalesProblemType(item.problemType)}
- - {item.complaintNote || '-'} - - {item.complaintFiles.length > 0 ? ( - - ) : null} +
+ {item.complaintNote || '（买家未填写文字描述）'} +
+ {item.complaintFiles.length > 0 && ( +
+ +
+ )}
-
+ + String(value || '').trim() || files.length > 0 ? Promise.resolve() - : Promise.reject(new Error('请填写说明或至少上传一张图片')), + : Promise.reject(new Error('请填写说明或至少上传一张补救材料图片')), }, ]} > @@ -449,10 +662,10 @@ function WorkerAfterSalesItem({ rows={4} maxLength={2000} showCount - placeholder="请说明当时的处理情况" + placeholder="请详细客观说明当时订单处理情况、与买家沟通情况或补救事实…" /> - +