init

src/components/booking/BookingModal.tsx

@@ -0,0 +1,61 @@
+import { BOOKING_DOCTORS } from '../../data/mockData';
+import { Button, Input } from '../ui';
+
+interface BookingModalProps {
+  doctor: (typeof BOOKING_DOCTORS)[number];
+  onClose: () => void;
+}
+
+export const BookingModal = ({ doctor, onClose }: BookingModalProps) => (
+  <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 className='mt-1 w-full rounded-2xl border px-3 py-1.5 bg-white outline-none text-xs'>
+              <option>自费</option>
+              <option>单位结算</option>
+            </select>
+          </div>
+          <div>
+            产品名称
+            <Input placeholder='如：专家门诊咨询' className='mt-1' />
+          </div>
+          <div>
+            是否定制
+            <select className='mt-1 w-full rounded-2xl border px-3 py-1.5 bg-white outline-none text-xs'>
+              <option>否</option>
+              <option>是</option>
+            </select>
+          </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>
+);
+
+