添加报告寄送地址面板

src/components/exam/ExamDeliveryPanel.tsx

@@ -1,10 +1,61 @@
+import { useEffect, useState } from 'react';
 import type { ExamClient } from '../../data/mockData';
+import { getReportSendQRcode } from '../../api';
 import { Button, Input } from '../ui';
 
-export const ExamDeliveryPanel = ({ client }: { client: ExamClient }) => (
+export const ExamDeliveryPanel = ({ client }: { client: ExamClient }) => {
+  const [viewMode, setViewMode] = useState<'form' | 'image'>('form');
+  const [qrcodeUrl, setQrcodeUrl] = useState<string | null>(null);
+  const [qrcodeLoading, setQrcodeLoading] = useState(false);
+
+  useEffect(() => {
+    if (viewMode === 'image' && !qrcodeUrl && !qrcodeLoading) {
+      setQrcodeLoading(true);
+      // 使用 client.id 作为 appointment_id，如果接口需要其他格式，可以调整
+      getReportSendQRcode({ appointment_id: client.id })
+        .then((res) => {
+          if (res.Status === 200 && res.Data?.qrcode_url) {
+            setQrcodeUrl(res.Data.qrcode_url);
+          }
+        })
+        .catch((err) => {
+          console.error('获取报告寄送二维码失败', err);
+        })
+        .finally(() => {
+          setQrcodeLoading(false);
+        });
+    }
+  }, [viewMode, client.id, qrcodeUrl, qrcodeLoading]);
+
+  return (
     <div className='flex justify-center'>
       <div className='w-full rounded-2xl border shadow-sm px-6 py-4 text-xs text-gray-800'>
-      <div className='text-lg font-semibold text-gray-900 mb-3'>报告寄送</div>
+        <div className='flex items-center justify-between mb-3'>
+          <div className='text-lg font-semibold text-gray-900'>报告寄送</div>
+          <div className='flex items-center gap-2'>
+            <button
+              onClick={() => setViewMode('form')}
+              className={`px-3 py-1.5 text-xs rounded-lg border transition-colors ${viewMode === 'form'
+                ? 'bg-blue-600 text-white border-blue-600'
+                : 'bg-white text-gray-600 border-gray-200 hover:border-gray-300'
+                }`}
+            >
+              表单
+            </button>
+            <button
+              onClick={() => setViewMode('image')}
+              className={`px-3 py-1.5 text-xs rounded-lg border transition-colors ${viewMode === 'image'
+                ? 'bg-blue-600 text-white border-blue-600'
+                : 'bg-white text-gray-600 border-gray-200 hover:border-gray-300'
+                }`}
+            >
+              图片
+            </button>
+          </div>
+        </div>
+
+        {viewMode === 'form' ? (
+          <>
             <div className='grid grid-cols-2 gap-3 mb-3'>
               <div>
                 收件人姓名
@@ -32,8 +83,28 @@ export const ExamDeliveryPanel = ({ client }: { client: ExamClient }) => (
               </div>
               <Button className='px-4 py-1.5 text-xs'>保存寄送信息</Button>
             </div>
+          </>
+        ) : (
+          <div className='flex flex-col items-center justify-center py-8'>
+            {qrcodeLoading ? (
+              <div className='text-gray-500'>加载中...</div>
+            ) : qrcodeUrl ? (
+              <div className='flex flex-col items-center gap-4'>
+                <img
+                  src={qrcodeUrl.startsWith('data:') ? qrcodeUrl : `data:image/png;base64,${qrcodeUrl}`}
+                  alt='报告寄送登记二维码'
+                  className='max-w-full max-h-[400px] object-contain'
+                />
+                <div className='text-xs text-gray-500'>请扫描二维码进行报告寄送登记</div>
+              </div>
+            ) : (
+              <div className='text-gray-500'>获取二维码失败</div>
+            )}
+          </div>
+        )}
       </div>
     </div>
-);
+  );
+};