# 课程安排表组件

## 功能特性

### 📅 完整的课程表视图
- **时间轴显示**：11:00-17:00 每小时时间段
- **周视图**：显示一周7天的课程安排
- **双向滚动**：支持水平（日期）和垂直（时间）滚动
- **响应式布局**：适配微信小程序端

### 🔍 智能筛选功能
- **顶部快捷筛选**：时间、老师、教室、班级
- **详细筛选弹窗**：支持多选条件组合筛选
- **实时统计**：显示总课程数和未点名课程数

### 🎨 主题样式
- **暗黑主题**：#292929 背景色
- **绿色主色调**：#29d3b4 强调色
- **层次化设计**：清晰的视觉层级

### 📱 交互体验
- **日期导航**：支持上一周/下一周切换
- **课程类型**：普通课程、私教课程、活动课程区分显示
- **点击交互**：支持单元格点击添加课程
- **悬浮按钮**：快速添加课程

## 使用方法

### 1. 页面导航
```javascript
// 跳转到课程安排表
this.$navigateTo({
  url: '/pages/coach/schedule/schedule_table'
})
```

### 2. 数据结构

#### 课程数据格式
```javascript
{
  id: 1,                    // 课程ID
  date: '2025-07-02',       // 日期
  time: '11:00',            // 时间
  courseName: '花花-丁颖',   // 课程名称
  students: '小鱼-周子',     // 学员
  teacher: '燕子-符',       // 老师
  status: '燕菜',           // 状态
  type: 'normal',           // 类型：normal/private/activity
  duration: 1               // 持续时间（小时）
}
```

#### 筛选选项格式
```javascript
{
  teacherOptions: [
    { id: 1, name: '张老师' }
  ],
  classroomOptions: [
    { id: 1, name: '教室1' }
  ],
  classOptions: [
    { id: 1, name: '花花-丁颖' }
  ]
}
```

### 3. 自定义配置

#### 修改时间段
```javascript
// 在 data 中修改 timeSlots
timeSlots: [
  { time: '09:00', value: 9 },
  { time: '10:00', value: 10 },
  // ... 更多时间段
]
```

#### 修改表格宽度
```javascript
// 调整表格总宽度（rpx）
tableWidth: 1200
```

### 4. API 接口集成

#### 获取课程数据
```javascript
async loadCourses() {
  try {
    const res = await apiRoute.getCourseSchedule({
      startDate: this.currentWeekStart,
      endDate: this.getWeekEndDate()
    })
    this.courses = res.data
  } catch (error) {
    console.error('加载课程失败:', error)
  }
}
```

#### 添加课程
```javascript
async addCourse(courseData) {
  try {
    const res = await apiRoute.addCourseSchedule(courseData)
    if (res.code === 1) {
      this.loadCourses() // 重新加载数据
    }
  } catch (error) {
    console.error('添加课程失败:', error)
  }
}
```

## 性能优化建议

### 1. 数据懒加载
- 只加载当前周的数据
- 切换周时再加载新数据

### 2. 滚动优化
- 使用 `scroll-view` 组件的惯性滚动
- 避免在滚动事件中进行复杂计算

### 3. 渲染优化
- 使用 `v-show` 替代 `v-if` 进行显示隐藏
- 合理使用 `key` 属性优化列表渲染

## 扩展功能

### 1. 课程详情
```javascript
// 点击课程查看详情
handleCourseClick(course) {
  this.$navigateTo({
    url: `/pages/coach/course/info?id=${course.id}`
  })
}
```

### 2. 拖拽排课
```javascript
// 可以集成拖拽功能实现课程时间调整
// 使用 movable-view 组件或手势事件
```

### 3. 批量操作
```javascript
// 支持批量选择和操作课程
// 添加多选模式
```

## 注意事项

1. **微信小程序兼容性**：使用了 `scroll-view` 组件，确保在微信小程序中正常滚动
2. **数据更新**：切换日期时需要重新加载数据
3. **内存管理**：大量数据时考虑虚拟滚动优化
4. **网络状态**：处理网络异常情况，提供离线缓存

## troubleshooting

### 滚动不流畅
- 检查 `scroll-view` 的高度设置
- 减少滚动事件中的计算量

### 数据不更新
- 确保数据是响应式的
- 检查 Vue 数据绑定是否正确

### 样式错位
- 检查 flex 布局设置
- 确保单元格宽度一致