添加报告寄送地址面板

src/components/exam/ExamDeliveryPanel.tsx

@@ -1,39 +1,110 @@
+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 }) => (
-  <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='grid grid-cols-2 gap-3 mb-3'>
-        <div>
-          收件人姓名
-          <Input placeholder='请输入收件人姓名' className='mt-1' />
+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='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>
-        <div>
-          联系电话
-          <Input placeholder='用于快递联系' className='mt-1' />
-        </div>
-        <div className='col-span-2'>
-          寄送地址
-          <Input placeholder='请输入详细寄送地址' className='mt-1' />
-        </div>
-      </div>
-      <div className='space-y-2'>
-        <div>备注说明</div>
-        <textarea
-          className='w-full rounded-2xl border px-3 py-2 text-xs outline-none focus:ring-2 focus:ring-gray-200 min-h-[80px]'
-          placeholder='如需多份报告、加急寄送等，请在此备注'
-        />
-      </div>
-      <div className='mt-4 flex items-center justify-between text-[11px] text-gray-500'>
-        <div>
-          当前客户：<span className='font-medium text-gray-800'>{client.name}</span>（体检号：{client.id}）
-        </div>
-        <Button className='px-4 py-1.5 text-xs'>保存寄送信息</Button>
+
+        {viewMode === 'form' ? (
+          <>
+            <div className='grid grid-cols-2 gap-3 mb-3'>
+              <div>
+                收件人姓名
+                <Input placeholder='请输入收件人姓名' className='mt-1' />
+              </div>
+              <div>
+                联系电话
+                <Input placeholder='用于快递联系' className='mt-1' />
+              </div>
+              <div className='col-span-2'>
+                寄送地址
+                <Input placeholder='请输入详细寄送地址' className='mt-1' />
+              </div>
+            </div>
+            <div className='space-y-2'>
+              <div>备注说明</div>
+              <textarea
+                className='w-full rounded-2xl border px-3 py-2 text-xs outline-none focus:ring-2 focus:ring-gray-200 min-h-[80px]'
+                placeholder='如需多份报告、加急寄送等，请在此备注'
+              />
+            </div>
+            <div className='mt-4 flex items-center justify-between text-[11px] text-gray-500'>
+              <div>
+                当前客户：<span className='font-medium text-gray-800'>{client.name}</span>（体检号：{client.id}）
+              </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>
-  </div>
-);
+  );
+};