Upload site images during aftersales confirmation

src/pages/AftersalesConfirm.tsx

@@ -7,6 +7,7 @@ import {
   ClockCircleOutlined,
   ExclamationCircleOutlined,
   EditOutlined,
+  UploadOutlined,
 } from '@ant-design/icons';
 import { aftersalesApi } from '@/services/api';
 import type { AftersalesPublicView, AftersalesServiceType } from '@/types';
@@ -34,6 +35,7 @@ function AftersalesConfirmPage() {
   const [activeSignatureRole, setActiveSignatureRole] = useState<'customer' | 'responsible' | null>(
     null,
   );
+  const [uploadingImages, setUploadingImages] = useState(false);
 
   const loadOrder = async () => {
     setLoading(true);
@@ -119,6 +121,20 @@ function AftersalesConfirmPage() {
     setActiveSignatureRole(role);
   };
 
+  const handleUploadSiteImages = async (files: FileList | null) => {
+    if (!files || files.length === 0) return;
+    setUploadingImages(true);
+    try {
+      const images = await aftersalesApi.uploadSiteImages(serialNumber, Array.from(files));
+      setOrder((prev) => (prev ? { ...prev, siteImages: images } : prev));
+      message.success('现场图片上传成功');
+    } catch (err: any) {
+      message.error(err?.response?.data?.message || err.message || '上传现场图片失败');
+    } finally {
+      setUploadingImages(false);
+    }
+  };
+
   if (loading) {
     return (
       <PublicLayout>
@@ -224,6 +240,18 @@ function AftersalesConfirmPage() {
               <span className="value value-block">{order.resolutionNote}</span>
             </div>
           )}
+          {order.siteImages && order.siteImages.length > 0 && (
+            <div className="detail-item detail-item-block">
+              <span className="label">现场图片</span>
+              <div className="aftersales-site-images">
+                {order.siteImages.map((url) => (
+                  <a key={url} href={url} target="_blank" rel="noreferrer">
+                    <img src={url} alt="现场图片" />
+                  </a>
+                ))}
+              </div>
+            </div>
+          )}
           {order.technicianName && (
             <div className="detail-item">
               <span className="label">处理人</span>
@@ -265,6 +293,33 @@ function AftersalesConfirmPage() {
 
         {isPending && (
           <>
+            <div className="aftersales-upload-section">
+              <p className="aftersales-signature-section-title">现场图片</p>
+              <label className="aftersales-upload-trigger">
+                <UploadOutlined />
+                <span>{uploadingImages ? '上传中...' : '上传现场图片'}</span>
+                <small>最多 6 张，单张不超过 5MB</small>
+                <input
+                  type="file"
+                  accept="image/jpeg,image/png,image/webp,image/heic,image/heif"
+                  multiple
+                  disabled={uploadingImages}
+                  onChange={(e) => {
+                    handleUploadSiteImages(e.target.files);
+                    e.currentTarget.value = '';
+                  }}
+                />
+              </label>
+              {order.siteImages && order.siteImages.length > 0 && (
+                <div className="aftersales-site-images">
+                  {order.siteImages.map((url) => (
+                    <a key={url} href={url} target="_blank" rel="noreferrer">
+                      <img src={url} alt="现场图片" />
+                    </a>
+                  ))}
+                </div>
+              )}
+            </div>
             <div className="aftersales-signature-section">
               <p className="aftersales-signature-section-title">请签名确认维修结果</p>
               <div className="aftersales-signature-grid">