使用自定义select组件

src/components/booking/BookingModal.tsx

@@ -1,61 +1,65 @@
+import { useState } from 'react';
 import { BOOKING_DOCTORS } from '../../data/mockData';
-import { Button, Input } from '../ui';
+import { Button, Input, Select } 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>
+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>
-          备注
-          <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 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>
-  </div>
-);
+  );
+};