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 布局设置
• 确保单元格宽度一致

---

添加课程安排页面 API 设计文档

页面概述

添加课程安排页面用于创建新的课程安排，包含课程选择、班级选择、教练分配、场地预订、时间安排等功能。

数据库表结构映射

1. 课程下拉框

• 页面字段: "请选择课程"
• 数据源: school_course 表
• 需要字段: id, course_name, course_type, duration, session_count, single_session_count
• 说明: 显示所有可用课程供选择

2. 班级下拉框

• 页面字段: "请选择班级（可选）"
• 数据源: school_class 表
• 需要字段: id, class_name, campus_id, head_coach, assistant_coach, status
• 筛选条件: status = 1 (开启状态)
• 说明: 根据校区筛选可用班级，为可选字段

3. 授课教练下拉框

• 页面字段: "请选择教练"
• 数据源: school_personnel 表 + school_campus_person_role 表
• 查询条件:
  • school_campus_person_role.dept_id = 2 (教练部门)
  • 校区筛选逻辑：
    • 如果 campus_id != 0: 查询指定校区的教练
    • 如果 campus_id = 0: 查询所有校区的教练
• 需要字段: school_personnel.id, school_personnel.name, school_campus_person_role.campus_id

4. 上课场地下拉框

• 页面字段: "请选择场地"
• 数据源: school_venue 表
• 需要字段: id, venue_name, capacity, availability_status, time_range_type, time_range_start, time_range_end, fixed_time_ranges
• 筛选条件: availability_status = 1 (可用状态)
• 说明: 根据校区筛选可用场地

5. 上课日期

• 页面字段: "上课日期"
• 数据库字段: school_course_schedule.course_date
• 格式: DATE (YYYY-MM-DD)

6. 上课时间段

• 页面字段: "请选择时间段"
• 数据库字段: school_course_schedule.time_slot
• 格式: VARCHAR "HH:MM-HH:MM" (如: "09:00-10:00")
• 说明: 根据选中场地的时间限制动态生成可选时间段

7. 课程容量

• 页面字段: "请输入课程容量"
• 数据库字段: school_course_schedule.available_capacity
• 说明: 不能超过场地的最大容量

8. 备注

• 页面字段: "请输入备注信息（可选）"
• 数据库字段: school_course_schedule.remarks
• 类型: TEXT
• 说明: 可选字段，用于记录额外信息

校区权限说明

系统根据当前用户所属校区进行数据筛选：

• 教练: 通过 school_campus_person_role 表的 campus_id 字段筛选
• 班级: 通过 school_class 表的 campus_id 字段筛选
• 场地: 通过 school_venue 表的 campus_id 字段筛选

特殊情况：如果 campus_id = 0，则表示该资源对所有校区可用。

需要的API接口

1. 获取课程列表

接口: GET /course/list 参数: 无 返回: 课程列表数据

2. 获取班级列表

接口: GET /class/list 参数:

• campus_id: 校区ID（可选） 返回: 班级列表数据

3. 获取教练列表

接口: GET /coach/list 参数:

• campus_id: 校区ID（可选） 返回: 教练列表数据 查询逻辑:

SELECT p.id, p.name 
FROM school_personnel p
JOIN school_campus_person_role r ON p.id = r.person_id
WHERE r.dept_id = 2 
AND (r.campus_id = :campus_id OR r.campus_id = 0)

4. 获取场地列表

接口: GET /venue/list
参数:

• campus_id: 校区ID（可选） 返回: 场地列表数据

5. 获取可用时间段

接口: GET /venue/timeSlots 参数:

• venue_id: 场地ID
• date: 查询日期 返回: 可用时间段列表 说明: 根据场地的时间限制和已有安排计算可用时间段

6. 创建课程安排

接口: POST /courseSchedule/create 参数:

{
  "campus_id": 1,
  "venue_id": 1,
  "course_date": "2025-06-30",
  "time_slot": "09:00-10:00",
  "course_id": 1,
  "coach_id": 1,
  "available_capacity": 15,
  "class_id": 1,
  "remarks": "备注信息",
  "created_by": "manual"
}

返回: 创建结果

数据验证规则

1. 课程容量验证: 不能超过场地最大容量
2. 时间冲突检查: 同一场地同一时间段不能有多个课程安排
3. 教练时间冲突: 同一教练同一时间段不能安排多个课程
4. 场地可用时间: 选择的时间段必须在场地可用时间范围内
5. 日期验证: 不能选择过去的日期

业务逻辑

1. 自动计算可用容量: 默认使用场地容量，用户可手动调整
2. 班级教练关联: 选择班级后，可自动填充该班级的主教练
3. 场地时间限制: 根据场地设置动态显示可选时间段
4. 重复课程检查: 创建前检查是否存在冲突

状态管理

新创建的课程安排默认状态为 pending（待开始），系统会根据时间自动更新状态：

• pending: 待开始
• upcoming: 即将开始
• ongoing: 进行中
• completed: 已结束