zhjwxt/uniapp/pages/coach/schedule

课程安排表组件

功能特性

📅 完整的课程表视图

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

🔍 智能筛选功能

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

🎨 主题样式

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

📱 交互体验

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

使用方法

1. 页面导航

// 跳转到课程安排表
this.$navigateTo({
  url: '/pages/coach/schedule/schedule_table'
})

2. 数据结构

课程数据格式

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

筛选选项格式

{
  teacherOptions: [
    { id: 1, name: '张老师' }
  ],
  classroomOptions: [
    { id: 1, name: '教室1' }
  ],
  classOptions: [
    { id: 1, name: '花花-丁颖' }
  ]
}

3. 自定义配置

修改时间段

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

修改表格宽度

// 调整表格总宽度（rpx）
tableWidth: 1200

4. API 接口集成

获取课程数据

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

添加课程

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. 课程详情

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

2. 拖拽排课

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

3. 批量操作

// 支持批量选择和操作课程
// 添加多选模式

注意事项

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

troubleshooting

滚动不流畅

• 检查 scroll-view 的高度设置
• 减少滚动事件中的计算量

数据不更新

• 确保数据是响应式的
• 检查 Vue 数据绑定是否正确

样式错位

• 检查 flex 布局设置
• 确保单元格宽度一致