feat(appointment): 预约创建页重写 — 宫格科室+周视图日历+时段卡片

apps/miniprogram/src/pages/appointment/create/index.tsx

@@ -1,11 +1,20 @@
-import React, { useState, useCallback } from 'react';
-import { View, Text, Picker, Input } from '@tarojs/components';
+import React, { useState, useCallback, useMemo } from 'react';
+import { View, Text, Input } from '@tarojs/components';
 import Taro from '@tarojs/taro';
-import { listDoctors, createAppointment } from '../../../services/appointment';
+import { listDoctors, createAppointment, calendarView } from '../../../services/appointment';
 import { useAuthStore } from '../../../stores/auth';
+import StepIndicator from '../../../components/StepIndicator';
+import WeekCalendar from '../../../components/WeekCalendar';
 import './index.scss';
 
-const DEPARTMENTS = ['内科', '外科', '妇科', '儿科', '体检中心'];
+const DEPARTMENTS = [
+  { label: '内科', icon: '🫀' },
+  { label: '外科', icon: '🔪' },
+  { label: '妇科', icon: '👩‍⚕️' },
+  { label: '儿科', icon: '👶' },
+  { label: '体检中心', icon: '🏥' },
+  { label: '中医科', icon: '🌿' },
+];
 
 interface DoctorItem {
   id: string;
@@ -15,27 +24,33 @@ interface DoctorItem {
   specialty?: string;
 }
 
+interface TimeSlot {
+  time_slot: string;
+  available_count: number;
+}
+
 export default function AppointmentCreate() {
   const [currentStep, setCurrentStep] = useState(0);
   const [department, setDepartment] = useState('');
-  const [deptPickerIndex, setDeptPickerIndex] = useState(0);
   const [doctors, setDoctors] = useState<DoctorItem[]>([]);
   const [selectedDoctor, setSelectedDoctor] = useState<DoctorItem | null>(null);
   const [appointmentDate, setAppointmentDate] = useState('');
   const [timeSlot, setTimeSlot] = useState('');
   const [reason, setReason] = useState('');
   const [loading, setLoading] = useState(false);
+  const [schedules, setSchedules] = useState<any[]>([]);
+  const [timeSlots, setTimeSlots] = useState<TimeSlot[]>([]);
 
   const currentPatient = useAuthStore((s) => s.currentPatient);
 
-  // Step 1: 选择科室后加载医生列表
-  const onDepartmentChange = useCallback(async (e: { detail: { value: number } }) => {
-    const idx = e.detail.value;
-    const dept = DEPARTMENTS[idx];
-    setDeptPickerIndex(idx);
+  const scheduledDates = useMemo(() => {
+    if (!schedules) return new Set<string>();
+    return new Set(schedules.map((s: any) => s.date || s.appointment_date));
+  }, [schedules]);
+
+  const onSelectDept = useCallback(async (dept: string) => {
     setDepartment(dept);
     setSelectedDoctor(null);
-
     try {
       const res = await listDoctors(dept);
       setDoctors(res.data || []);
@@ -44,44 +59,47 @@ export default function AppointmentCreate() {
     }
   }, []);
 
-  // Step 2: 选择医生
-  const onSelectDoctor = useCallback((doctor: DoctorItem) => {
+  const onSelectDoctor = useCallback(async (doctor: DoctorItem) => {
     setSelectedDoctor(doctor);
+    setLoading(true);
+    try {
+      const today = new Date();
+      const endDate = new Date(today);
+      endDate.setDate(today.getDate() + 30);
+      const fmt = (d: Date) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+      const res = await calendarView(fmt(today), fmt(endDate), doctor.id);
+      setSchedules(res || []);
+    } catch {
+      // 日历加载失败不阻塞
+    } finally {
+      setLoading(false);
+    }
   }, []);
 
-  // Step 3: 日期变更
-  const onDateChange = useCallback((e: { detail: { value: string } }) => {
-    setAppointmentDate(e.detail.value);
-  }, []);
+  const onSelectDate = useCallback((date: string) => {
+    setAppointmentDate(date);
+    setTimeSlot('');
+    // 从排班数据中提取时段
+    const daySlots = schedules
+      .filter((s: any) => (s.date || s.appointment_date) === date)
+      .map((s: any) => ({
+        time_slot: s.time_slot || `${s.start_time || ''}-${s.end_time || ''}`,
+        available_count: s.available_count ?? (s.max_patients ?? 10),
+      }));
+    setTimeSlots(daySlots);
+  }, [schedules]);
 
-  // Step 3: 时段变更
-  const onTimeSlotChange = useCallback((e: { detail: { value: string } }) => {
-    setTimeSlot(e.detail.value);
-  }, []);
+  const getSlotStyle = (available: number) => {
+    if (available === 0) return 'slot-full';
+    if (available <= 3) return 'slot-few';
+    return 'slot-available';
+  };
 
-  // Step 3: 备注变更
-  const onReasonChange = useCallback((e: { detail: { value: string } }) => {
-    setReason(e.detail.value);
-  }, []);
-
-  // 提交预约
   const handleSubmit = useCallback(async () => {
-    if (!selectedDoctor) {
-      Taro.showToast({ title: '请选择医生', icon: 'none' });
-      return;
-    }
-    if (!appointmentDate) {
-      Taro.showToast({ title: '请选择日期', icon: 'none' });
-      return;
-    }
-    if (!timeSlot.trim()) {
-      Taro.showToast({ title: '请输入时段', icon: 'none' });
-      return;
-    }
-    if (!currentPatient) {
-      Taro.showToast({ title: '请先选择就诊人', icon: 'none' });
-      return;
-    }
+    if (!selectedDoctor) { Taro.showToast({ title: '请选择医生', icon: 'none' }); return; }
+    if (!appointmentDate) { Taro.showToast({ title: '请选择日期', icon: 'none' }); return; }
+    if (!timeSlot) { Taro.showToast({ title: '请选择时段', icon: 'none' }); return; }
+    if (!currentPatient) { Taro.showToast({ title: '请先选择就诊人', icon: 'none' }); return; }
 
     setLoading(true);
     try {
@@ -89,13 +107,11 @@ export default function AppointmentCreate() {
         patient_id: currentPatient.id,
         doctor_id: selectedDoctor.id,
         appointment_date: appointmentDate,
-        time_slot: timeSlot.trim(),
+        time_slot: timeSlot,
         reason: reason.trim() || undefined,
       });
       Taro.showToast({ title: '预约成功', icon: 'success' });
-      setTimeout(() => {
-        Taro.navigateBack();
-      }, 1500);
+      setTimeout(() => Taro.navigateBack(), 1500);
     } catch {
       Taro.showToast({ title: '预约失败', icon: 'none' });
     } finally {
@@ -103,76 +119,53 @@ export default function AppointmentCreate() {
     }
   }, [selectedDoctor, appointmentDate, timeSlot, reason, currentPatient]);
 
-  // 步骤切换
   const goNext = () => {
-    if (currentStep === 0 && !department) {
-      Taro.showToast({ title: '请先选择科室', icon: 'none' });
-      return;
-    }
-    if (currentStep === 1 && !selectedDoctor) {
-      Taro.showToast({ title: '请选择医生', icon: 'none' });
-      return;
-    }
+    if (currentStep === 0 && !department) { Taro.showToast({ title: '请先选择科室', icon: 'none' }); return; }
+    if (currentStep === 1 && !selectedDoctor) { Taro.showToast({ title: '请选择医生', icon: 'none' }); return; }
     setCurrentStep(Math.min(currentStep + 1, 2));
   };
 
-  const goPrev = () => {
-    setCurrentStep(Math.max(currentStep - 1, 0));
+  const handleStepChange = (idx: number) => {
+    if (idx < currentStep) {
+      if (idx <= 1) setSelectedDoctor(null);
+      if (idx <= 2) { setAppointmentDate(''); setTimeSlot(''); }
+      setCurrentStep(idx);
+    }
   };
 
-  const stepLabels = ['选择科室', '选择医生', '选择日期与时段'];
-
   return (
     <View className='create-page'>
-      {/* 步骤指示器 */}
-      <View className='step-bar'>
-        {stepLabels.map((label, idx) => (
-          <View
-            className={`step-item ${idx <= currentStep ? 'step-active' : ''} ${idx < currentStep ? 'step-done' : ''}`}
-            key={label}
-          >
-            <View className='step-dot'>
-              {idx < currentStep ? (
-                <Text className='step-check'>&#10003;</Text>
-              ) : (
-                <Text className='step-num'>{idx + 1}</Text>
-              )}
-            </View>
-            <Text className='step-label'>{label}</Text>
-          </View>
-        ))}
-      </View>
+      <StepIndicator
+        steps={[{ label: '选科室' }, { label: '选医生' }, { label: '选时段' }]}
+        current={currentStep}
+        onChange={handleStepChange}
+      />
 
-      {/* 步骤连接线 */}
-      <View className='step-line-wrapper'>
-        <View className='step-line'>
-          <View className='step-line-fill' style={{ width: `${(currentStep / 2) * 100}%` }} />
-        </View>
-      </View>
-
-      {/* Step 1: 选择科室 */}
+      {/* Step 1: 科室宫格 */}
       {currentStep === 0 && (
         <View className='step-content'>
           <Text className='step-title'>请选择就诊科室</Text>
-          <Picker mode='selector' range={DEPARTMENTS} value={deptPickerIndex} onChange={onDepartmentChange}>
-            <View className='picker-card'>
-              <Text className={`picker-value ${department ? '' : 'placeholder'}`}>
-                {department || '点击选择科室'}
-              </Text>
-              <Text className='picker-arrow'>&#9662;</Text>
-            </View>
-          </Picker>
+          <View className='dept-grid'>
+            {DEPARTMENTS.map((dept) => (
+              <View
+                className={`dept-card ${department === dept.label ? 'dept-selected' : ''}`}
+                key={dept.label}
+                onClick={() => onSelectDept(dept.label)}
+              >
+                <Text className='dept-icon'>{dept.icon}</Text>
+                <Text className='dept-label'>{dept.label}</Text>
+              </View>
+            ))}
+          </View>
         </View>
       )}
 
-      {/* Step 2: 选择医生 */}
+      {/* Step 2: 医生列表 */}
       {currentStep === 1 && (
         <View className='step-content'>
           <Text className='step-title'>{department} - 请选择医生</Text>
           {doctors.length === 0 ? (
-            <View className='empty-state'>
-              <Text className='empty-text'>暂无可选医生</Text>
-            </View>
+            <View className='empty-hint'><Text className='empty-text'>暂无可选医生</Text></View>
           ) : (
             <View className='doctor-list'>
               {doctors.map((doc) => (
@@ -181,17 +174,13 @@ export default function AppointmentCreate() {
                   key={doc.id}
                   onClick={() => onSelectDoctor(doc)}
                 >
-                  <View className='doctor-avatar'>
-                    <Text className='doctor-avatar-text'>{doc.name.charAt(0)}</Text>
-                  </View>
+                  <View className='doctor-avatar'><Text className='doctor-avatar-text'>{doc.name.charAt(0)}</Text></View>
                   <View className='doctor-detail'>
                     <Text className='doctor-name'>{doc.name}</Text>
                     <Text className='doctor-title'>{doc.title || '医生'}</Text>
                     {doc.specialty && <Text className='doctor-specialty'>{doc.specialty}</Text>}
                   </View>
-                  {selectedDoctor?.id === doc.id && (
-                    <Text className='doctor-check'>&#10003;</Text>
-                  )}
+                  {selectedDoctor?.id === doc.id && <Text className='doctor-check'>&#10003;</Text>}
                 </View>
               ))}
             </View>
@@ -199,48 +188,42 @@ export default function AppointmentCreate() {
         </View>
       )}
 
-      {/* Step 3: 选择日期和时段 */}
+      {/* Step 3: 日历 + 时段 */}
       {currentStep === 2 && (
         <View className='step-content'>
           <Text className='step-title'>选择就诊时间</Text>
-
           <View className='form-group'>
             <Text className='form-label'>医生</Text>
-            <View className='form-static'>
-              <Text className='form-static-text'>{selectedDoctor?.name} - {department}</Text>
-            </View>
+            <View className='form-static'><Text className='form-static-text'>{selectedDoctor?.name} - {department}</Text></View>
           </View>
 
-          <View className='form-group'>
-            <Text className='form-label'>就诊日期</Text>
-            <Picker mode='date' value={appointmentDate} onChange={onDateChange}>
-              <View className='picker-card'>
-                <Text className={`picker-value ${appointmentDate ? '' : 'placeholder'}`}>
-                  {appointmentDate || '点击选择日期'}
-                </Text>
-                <Text className='picker-arrow'>&#9662;</Text>
+          <WeekCalendar
+            scheduledDates={scheduledDates}
+            selectedDate={appointmentDate}
+            onSelectDate={onSelectDate}
+          />
+
+          {appointmentDate && timeSlots.length > 0 && (
+            <View className='slot-section'>
+              <Text className='form-label'>选择时段</Text>
+              <View className='slot-grid'>
+                {timeSlots.map((slot) => (
+                  <View
+                    className={`slot-card ${getSlotStyle(slot.available_count)} ${timeSlot === slot.time_slot ? 'slot-selected' : ''}`}
+                    key={slot.time_slot}
+                    onClick={slot.available_count > 0 ? () => setTimeSlot(slot.time_slot) : undefined}
+                  >
+                    <Text className='slot-time'>{slot.time_slot}</Text>
+                    <Text className='slot-count'>{slot.available_count > 0 ? `剩余 ${slot.available_count} 位` : '已满'}</Text>
+                  </View>
+                ))}
               </View>
-            </Picker>
-          </View>
-
-          <View className='form-group'>
-            <Text className='form-label'>就诊时段</Text>
-            <Input
-              className='form-input'
-              placeholder='例如: 09:00-10:00'
-              value={timeSlot}
-              onInput={onTimeSlotChange}
-            />
-          </View>
+            </View>
+          )}
 
           <View className='form-group'>
             <Text className='form-label'>备注（选填）</Text>
-            <Input
-              className='form-input'
-              placeholder='请简要描述症状或就诊目的'
-              value={reason}
-              onInput={onReasonChange}
-            />
+            <Input className='form-input' placeholder='请简要描述症状' value={reason} onInput={(e) => setReason(e.detail.value)} />
           </View>
         </View>
       )}
@@ -248,7 +231,7 @@ export default function AppointmentCreate() {
       {/* 底部操作栏 */}
       <View className='bottom-bar'>
         {currentStep > 0 && (
-          <View className='btn btn-prev' onClick={goPrev}>
+          <View className='btn btn-prev' onClick={() => handleStepChange(currentStep - 1)}>
             <Text className='btn-text'>上一步</Text>
           </View>
         )}