添加报告寄送地址面板
This commit is contained in:
xianyi
@@ -1,39 +1,110 @@
|
|||||||
|
import { useEffect, useState } from 'react';
|
||||||
import type { ExamClient } from '../../data/mockData';
|
import type { ExamClient } from '../../data/mockData';
|
||||||
|
import { getReportSendQRcode } from '../../api';
|
||||||
import { Button, Input } from '../ui';
|
import { Button, Input } from '../ui';
|
||||||
|
|
||||||
export const ExamDeliveryPanel = ({ client }: { client: ExamClient }) => (
|
export const ExamDeliveryPanel = ({ client }: { client: ExamClient }) => {
|
||||||
<div className='flex justify-center'>
|
const [viewMode, setViewMode] = useState<'form' | 'image'>('form');
|
||||||
<div className='w-full rounded-2xl border shadow-sm px-6 py-4 text-xs text-gray-800'>
|
const [qrcodeUrl, setQrcodeUrl] = useState<string | null>(null);
|
||||||
<div className='text-lg font-semibold text-gray-900 mb-3'>报告寄送</div>
|
const [qrcodeLoading, setQrcodeLoading] = useState(false);
|
||||||
<div className='grid grid-cols-2 gap-3 mb-3'>
|
|
||||||
<div>
|
useEffect(() => {
|
||||||
收件人姓名
|
if (viewMode === 'image' && !qrcodeUrl && !qrcodeLoading) {
|
||||||
<Input placeholder='请输入收件人姓名' className='mt-1' />
|
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>
|
||||||
<div>
|
|
||||||
联系电话
|
{viewMode === 'form' ? (
|
||||||
<Input placeholder='用于快递联系' className='mt-1' />
|
<>
|
||||||
</div>
|
<div className='grid grid-cols-2 gap-3 mb-3'>
|
||||||
<div className='col-span-2'>
|
<div>
|
||||||
寄送地址
|
收件人姓名
|
||||||
<Input placeholder='请输入详细寄送地址' className='mt-1' />
|
<Input placeholder='请输入收件人姓名' className='mt-1' />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div>
|
||||||
<div className='space-y-2'>
|
联系电话
|
||||||
<div>备注说明</div>
|
<Input placeholder='用于快递联系' className='mt-1' />
|
||||||
<textarea
|
</div>
|
||||||
className='w-full rounded-2xl border px-3 py-2 text-xs outline-none focus:ring-2 focus:ring-gray-200 min-h-[80px]'
|
<div className='col-span-2'>
|
||||||
placeholder='如需多份报告、加急寄送等，请在此备注'
|
寄送地址
|
||||||
/>
|
<Input placeholder='请输入详细寄送地址' className='mt-1' />
|
||||||
</div>
|
</div>
|
||||||
<div className='mt-4 flex items-center justify-between text-[11px] text-gray-500'>
|
</div>
|
||||||
<div>
|
<div className='space-y-2'>
|
||||||
当前客户：<span className='font-medium text-gray-800'>{client.name}</span>（体检号：{client.id}）
|
<div>备注说明</div>
|
||||||
</div>
|
<textarea
|
||||||
<Button className='px-4 py-1.5 text-xs'>保存寄送信息</Button>
|
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>
|
</div>
|
||||||
</div>
|
);
|
||||||
);
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user