From cb88f181661ddaeb8e5061976ee764c91f994423 Mon Sep 17 00:00:00 2001
From: Frudrax Cheng <i@cynosura.one>
Date: Tue, 2 Jun 2026 10:24:40 +0800
Subject: [PATCH] Update aftersales electronic form layout

---
 src/pages/AftersalesDetail.tsx        | 55 ++++++++++-----------------
 src/pages/styles/AftersalesDetail.css | 14 +++++++
 2 files changed, 35 insertions(+), 34 deletions(-)

diff --git a/src/pages/AftersalesDetail.tsx b/src/pages/AftersalesDetail.tsx
index 1b85e71..c4b0ce7 100644
--- a/src/pages/AftersalesDetail.tsx
+++ b/src/pages/AftersalesDetail.tsx
@@ -57,12 +57,6 @@ const WORK_ORDER_STATUS_COLOR: Record<AftersalesWorkOrderStatus, string> = {
   rejected: 'warning',
 };
 
-const AUTHORIZATION_STATUS_LABEL = {
-  pending: '待确认',
-  authorized: '已授权',
-  unauthorized: '未授权',
-} as const;
-
 function statusStepIndex(status: AftersalesWorkOrderStatus): number {
   switch (status) {
     case 'created':
@@ -75,11 +69,6 @@ function statusStepIndex(status: AftersalesWorkOrderStatus): number {
   }
 }
 
-function formatDateTime(value?: string) {
-  if (!value) return '-';
-  return new Date(value).toLocaleString('zh-CN');
-}
-
 function getAftersalesPublicUrl(serialNumber: string) {
   return `${window.location.origin}/aftersales/${serialNumber}`;
 }
@@ -243,11 +232,13 @@ function AftersalesDetailPage() {
             .electronic-form-brand { justify-self: start; }
             .electronic-form-logo { height: 34px; object-fit: contain; }
             .electronic-form-title { justify-self: center; text-align: center; font-size: 20px; font-weight: 700; }
-            .electronic-form-meta { justify-self: end; }
+            .electronic-form-meta { justify-self: end; text-align: center; }
             .electronic-form-qr { width: 82px; height: 82px; object-fit: contain; }
+            .electronic-form-hotline { margin: 6px 0 0; font-size: 12px; font-weight: 600; white-space: nowrap; }
             .electronic-form-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; }
             .electronic-form-table th, .electronic-form-table td { border: 1px solid #1f2937; padding: 9px 10px; vertical-align: top; word-break: break-word; }
             .electronic-form-table th { width: 120px; background: #f3f4f6; text-align: left; font-weight: 600; }
+            .electronic-form-section { background: #e5e7eb; font-weight: 700; text-align: center; }
             .electronic-form-table td { min-height: 24px; }
             .electronic-form-table .electronic-form-code { color: #165dff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 16px; font-weight: 700; }
             .electronic-form-text { min-height: 72px; white-space: pre-wrap; }
@@ -569,22 +560,27 @@ function AftersalesDetailPage() {
                   className="electronic-form-qr"
                 />
               )}
+              <p className="electronic-form-hotline">全国售后服务热线：400-998-5710</p>
             </div>
           </div>
           <table className="electronic-form-table">
             <tbody>
               <tr>
-                <th>售后码</th>
-                <td className="electronic-form-code">{order.serialNumber}</td>
-                <th>工单状态</th>
-                <td>{WORK_ORDER_STATUS_LABEL[order.workOrderStatus]}</td>
+                <td colSpan={4} className="electronic-form-section">
+                  工单信息
+                </td>
               </tr>
               <tr>
-                <th>授权状态</th>
-                <td>{AUTHORIZATION_STATUS_LABEL[order.authorizationStatus]}</td>
+                <th>售后码</th>
+                <td className="electronic-form-code">{order.serialNumber}</td>
                 <th>服务类型</th>
                 <td>{SERVICE_TYPE_LABEL[order.serviceType]}</td>
               </tr>
+              <tr>
+                <td colSpan={4} className="electronic-form-section">
+                  客户信息
+                </td>
+              </tr>
               <tr>
                 <th>客户公司</th>
                 <td>{order.companyName}</td>
@@ -597,6 +593,11 @@ function AftersalesDetailPage() {
                 <th>联系电话</th>
                 <td>{order.contactPhone}</td>
               </tr>
+              <tr>
+                <td colSpan={4} className="electronic-form-section">
+                  处理信息
+                </td>
+              </tr>
               <tr>
                 <th>处理人</th>
                 <td>{order.technician?.name || '-'}</td>
@@ -604,22 +605,8 @@ function AftersalesDetailPage() {
                 <td>{order.creator?.name || '-'}</td>
               </tr>
               <tr>
-                <th>创建时间</th>
-                <td>{formatDateTime(order.createdAt)}</td>
-                <th>更新时间</th>
-                <td>{formatDateTime(order.updatedAt)}</td>
-              </tr>
-              <tr>
-                <th>客户扫码时间</th>
-                <td>{formatDateTime(order.scannedAt)}</td>
-                <th>客户确认时间</th>
-                <td>{formatDateTime(order.confirmedAt)}</td>
-              </tr>
-              <tr>
-                <th>退回次数</th>
-                <td>{order.rejectCount}</td>
-                <th>表单生成时间</th>
-                <td>{formatDateTime(new Date().toISOString())}</td>
+                <th>工单状态</th>
+                <td colSpan={3}>{WORK_ORDER_STATUS_LABEL[order.workOrderStatus]}</td>
               </tr>
               <tr>
                 <th>问题描述反馈</th>
diff --git a/src/pages/styles/AftersalesDetail.css b/src/pages/styles/AftersalesDetail.css
index 2d35f30..78c6630 100644
--- a/src/pages/styles/AftersalesDetail.css
+++ b/src/pages/styles/AftersalesDetail.css
@@ -28,6 +28,7 @@
 
 .electronic-form-meta {
   justify-self: end;
+  text-align: center;
 }
 
 .electronic-form-qr {
@@ -36,6 +37,13 @@
   object-fit: contain;
 }
 
+.electronic-form-hotline {
+  margin: 6px 0 0;
+  font-size: 12px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
 .electronic-form-table {
   width: 100%;
   border-collapse: collapse;
@@ -58,6 +66,12 @@
   font-weight: 600;
 }
 
+.electronic-form-section {
+  background: #e5e7eb;
+  font-weight: 700;
+  text-align: center;
+}
+
 .electronic-form-code {
   color: #165dff;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;