66 lines
2.3 KiB
TypeScript
66 lines
2.3 KiB
TypeScript
import { useState } from 'react';
|
||
import { BOOKING_DOCTORS } from '../../data/mockData';
|
||
import { Button, Input, Select } from '../ui';
|
||
|
||
interface BookingModalProps {
|
||
doctor: (typeof BOOKING_DOCTORS)[number];
|
||
onClose: () => void;
|
||
}
|
||
|
||
export const BookingModal = ({ doctor, onClose }: BookingModalProps) => {
|
||
const [paymentMethod, setPaymentMethod] = useState('自费');
|
||
const [isCustomized, setIsCustomized] = useState('否');
|
||
|
||
return (
|
||
<div className='fixed inset-0 z-40 flex items-center justify-center bg-black/30'>
|
||
<div className='w-[520px] max-w-[95vw] bg-white rounded-3xl shadow-xl overflow-hidden text-sm'>
|
||
<div className='px-4 py-3 border-b flex items-center justify-between'>
|
||
<div className='font-semibold'>预约申请 · {doctor.name}</div>
|
||
<button className='text-xs text-gray-500' onClick={onClose}>
|
||
关闭
|
||
</button>
|
||
</div>
|
||
<div className='px-4 py-4 bg-gray-50/60 space-y-3 text-xs text-gray-700'>
|
||
<div className='grid grid-cols-2 gap-3'>
|
||
<div>
|
||
付费方式
|
||
<Select
|
||
options={['自费', '单位结算']}
|
||
value={paymentMethod}
|
||
onChange={setPaymentMethod}
|
||
/>
|
||
</div>
|
||
<div>
|
||
产品名称
|
||
<Input placeholder='如：专家门诊咨询' className='mt-1' />
|
||
</div>
|
||
<div>
|
||
是否定制
|
||
<Select options={['否', '是']} value={isCustomized} onChange={setIsCustomized} />
|
||
</div>
|
||
<div>
|
||
期望预约时间
|
||
<Input placeholder='例如：2025-11-20 上午' className='mt-1' />
|
||
</div>
|
||
</div>
|
||
<div>
|
||
备注
|
||
<textarea
|
||
className='w-full mt-1 rounded-2xl border px-3 py-2 text-xs outline-none focus:ring-2 focus:ring-gray-200 min-h-[72px]'
|
||
placeholder='可填写病情简要、既往史、特殊需求等信息'
|
||
/>
|
||
</div>
|
||
<div className='flex items-center justify-between text-[11px] text-gray-500'>
|
||
<span>
|
||
医生：{doctor.name}（{doctor.dept}）
|
||
</span>
|
||
<Button>提交预约申请</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
|