完成了课时记录页面的两列布局改造,添加开始/结束时间选择器并自动计算时长,实现重复录入检测、消息自动隐藏、提交成功自动返回,以及多页面数据联动更新。

This commit is contained in:
taocong 2026-05-14 16:21:59 +08:00 committed by taocong45644
parent 0b9b0eed83
commit cd999bed76
12 changed files with 962 additions and 429 deletions

View File

@ -1,12 +1,13 @@
import { Module } from '@nestjs/common' import { Module } from '@nestjs/common'
import { AuthController, StudentController, RecordController } from '@/controllers' import { AuthController, StudentController, RecordController, ScheduleController } from '@/controllers'
import { AuthService, StudentService, RecordService } from '@/services' import { AuthService, StudentService, RecordService, ScheduleService } from '@/services'
@Module({ @Module({
controllers: [AuthController, StudentController, RecordController], controllers: [AuthController, StudentController, RecordController, ScheduleController],
providers: [ providers: [
AuthService, AuthService,
RecordService, RecordService,
ScheduleService,
{ {
provide: StudentService, provide: StudentService,
useFactory: (recordService: RecordService) => { useFactory: (recordService: RecordService) => {

View File

@ -1,3 +1,4 @@
export * from './auth.controller' export * from './auth.controller'
export * from './student.controller' export * from './student.controller'
export * from './record.controller' export * from './record.controller'
export * from './schedule.controller'

View File

@ -1,3 +1,4 @@
export * from './auth.dto' export * from './auth.dto'
export * from './student.dto' export * from './student.dto'
export * from './record.dto' export * from './record.dto'
export * from './schedule.dto'

View File

@ -1,3 +1,4 @@
export * from './user.entity' export * from './user.entity'
export * from './student.entity' export * from './student.entity'
export * from './record.entity' export * from './record.entity'
export * from './schedule.entity'

View File

@ -1,4 +1,5 @@
export * from './auth.service' export * from './auth.service'
export * from './student.service' export * from './student.service'
export * from './record.service' export * from './record.service'
export * from './schedule.service'
export { RecordQueryResult, RecordStatistics } from './record.service' export { RecordQueryResult, RecordStatistics } from './record.service'

View File

@ -1,16 +1,15 @@
.course-page { .course-page {
min-height: 100vh; min-height: 100vh;
background-color: #f0f4f8; background-color: #ffffff;
padding-bottom: 32px; padding-bottom: 100rpx;
} }
/* 课程日历区域 */
.calendar-section { .calendar-section {
background-color: #ffffff; background-color: #ffffff;
margin-bottom: 24px; margin-bottom: 24rpx;
border-radius: 16px; border-radius: 16rpx;
overflow: hidden; overflow: hidden;
margin: 16px; margin: 16rpx;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
} }
@ -19,63 +18,61 @@
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 20px 24px; padding: 24rpx;
border-bottom: 1px solid #f0f0f0; border-bottom: 1px solid #f3f4f6;
} }
.calendar-title-row { .calendar-title-row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
gap: 10px; gap: 12rpx;
} }
.calendar-title { .calendar-title {
font-size: 17px; font-size: 32rpx;
font-weight: 600; font-weight: 600;
color: #1f2937; color: #1f2937;
} }
.calendar-toggle { .calendar-toggle {
font-size: 14px; font-size: 26rpx;
color: #3B82F6; color: #6b7280;
} }
.calendar-body { .calendar-body {
padding: 16px 16px 24px; padding: 24rpx;
} }
/* 月份导航 */
.month-nav { .month-nav {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin-bottom: 20px; margin-bottom: 24rpx;
padding: 0 8px; padding: 0 8rpx;
} }
.nav-btn { .nav-btn {
width: 36px; width: 64rpx;
height: 36px; height: 64rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: #f5f5f5; background-color: #f3f4f6;
border-radius: 8px; border-radius: 12rpx;
} }
.month-label { .month-label {
font-size: 16px; font-size: 30rpx;
font-weight: 600; font-weight: 600;
color: #1f2937; color: #1f2937;
} }
/* 星期标题 */
.week-header { .week-header {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
margin-bottom: 8px; margin-bottom: 16rpx;
} }
.week-day { .week-day {
@ -83,16 +80,14 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 8px 0; padding: 12rpx 0;
} }
.week-day-text { .week-day-text {
font-size: 12px; font-size: 24rpx;
color: #9CA3AF; color: #9ca3af;
font-weight: 500;
} }
/* 日期网格 */
.date-grid { .date-grid {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -100,11 +95,12 @@
} }
.date-cell { .date-cell {
width: 14.28%; width: calc(100% / 7);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 8px 0; padding: 16rpx 0;
border-radius: 12rpx;
cursor: pointer; cursor: pointer;
} }
@ -112,76 +108,44 @@
opacity: 0.3; opacity: 0.3;
} }
.date-cell.is-today .date-text { .date-cell.is-today {
border: 2px solid #3B82F6; background-color: rgba(59, 130, 246, 0.1);
border-radius: 50%;
color: #3B82F6;
} }
.date-cell.is-selected { .date-cell.is-selected {
background-color: #3B82F6; background-color: #3B82F6;
border-radius: 10px; }
margin: 2px;
.date-text {
font-size: 28rpx;
color: #1f2937;
margin-bottom: 8rpx;
} }
.date-cell.is-selected .date-text { .date-cell.is-selected .date-text {
color: #ffffff; color: #ffffff;
}
.date-cell.is-selected .week-day-text {
color: #ffffff;
}
.date-cell.is-selected .other-month {
opacity: 0.5;
}
.date-text {
font-size: 15px;
color: #1f2937;
font-weight: 500;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
}
/* 课程圆点标记 */
.course-dots {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-top: 4px;
height: 12px;
}
.course-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background-color: #3B82F6;
margin: 0 1px;
}
.course-dot-text {
font-size: 8px;
color: #3B82F6;
font-weight: 600; font-weight: 600;
} }
.date-cell.is-selected .course-dot { .course-dots {
background-color: #ffffff; display: flex;
gap: 4rpx;
} }
.date-cell.is-selected .course-dot-text { .course-dot {
color: #ffffff; width: 8rpx;
height: 8rpx;
border-radius: 50%;
background-color: #3B82F6;
}
.course-dot-text {
font-size: 18rpx;
color: #3B82F6;
} }
/* 课程列表区域 */
.course-list-section { .course-list-section {
margin: 0 16px; padding: 0 16rpx;
} }
.list-header { .list-header {
@ -189,157 +153,373 @@
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin-bottom: 16px; margin-bottom: 20rpx;
}
.list-title-row {
display: flex;
flex-direction: row;
align-items: center;
gap: 10rpx;
} }
.list-title { .list-title {
font-size: 17px; font-size: 32rpx;
font-weight: 600; font-weight: 600;
color: #1f2937; color: #1f2937;
} }
.student-count { .student-count-badge {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
gap: 4px; background-color: #3B82F6;
background-color: #EEF2FF; padding: 8rpx 16rpx;
padding: 6px 12px; border-radius: 20rpx;
border-radius: 16px;
} }
.count-number { .count-number {
font-size: 15px; font-size: 26rpx;
font-weight: 700; font-weight: 600;
color: #3B82F6; color: #ffffff;
} }
.count-label { .count-label {
font-size: 13px; font-size: 24rpx;
color: #6366F1; color: rgba(255, 255, 255, 0.8);
margin-left: 4rpx;
} }
/* 课程卡片 */
.course-list { .course-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px; gap: 16rpx;
}
.empty-state {
display: flex;
align-items: center;
justify-content: center;
padding: 80rpx 0;
}
.empty-text {
font-size: 28rpx;
color: #9ca3af;
} }
.course-card { .course-card {
background-color: #ffffff; background-color: #ffffff;
border-radius: 14px; border-radius: 16rpx;
padding: 16px 18px; padding: 20rpx;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.course-main {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 16rpx;
}
.course-info {
flex: 1;
}
.student-name {
font-size: 30rpx;
font-weight: 600;
color: #1f2937;
margin-bottom: 8rpx;
}
.time-info {
display: flex;
flex-direction: row;
align-items: center;
gap: 8rpx;
}
.time-text {
font-size: 26rpx;
color: #6b7280;
}
.duration-badge {
background-color: #f3f4f6;
padding: 4rpx 12rpx;
border-radius: 8rpx;
}
.duration-text {
font-size: 22rpx;
color: #6b7280;
}
.course-status {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 12rpx;
}
.status-tag {
padding: 6rpx 16rpx;
border-radius: 8rpx;
}
.status-tag.pending {
background-color: rgba(251, 191, 36, 0.15);
}
.status-tag.completed {
background-color: rgba(16, 185, 129, 0.15);
}
.status-text {
font-size: 22rpx;
}
.status-tag.pending .status-text {
color: #d97706;
}
.status-tag.completed .status-text {
color: #059669;
}
.recorded-tag {
display: flex;
flex-direction: row;
align-items: center;
gap: 4rpx;
background-color: rgba(16, 185, 129, 0.15);
padding: 6rpx 12rpx;
border-radius: 8rpx;
}
.recorded-text {
font-size: 22rpx;
color: #059669;
}
.course-progress {
margin-bottom: 16rpx;
}
.progress-label {
font-size: 24rpx;
color: #6b7280;
margin-bottom: 8rpx;
}
.progress-bar-wrapper {
display: flex;
flex-direction: row;
align-items: center;
gap: 12rpx;
}
.progress-bar-bg {
flex: 1;
height: 8rpx;
background-color: #e5e7eb;
border-radius: 4rpx;
overflow: hidden;
}
.progress-bar-fill {
height: 100%;
background-color: #3B82F6;
border-radius: 4rpx;
transition: width 0.3s ease;
}
.progress-text {
font-size: 24rpx;
color: #6b7280;
white-space: nowrap;
}
.record-btn {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 8rpx;
background-color: #10b981;
padding: 10rpx 20rpx;
border-radius: 8rpx;
}
.record-btn.recorded {
background-color: rgba(16, 185, 129, 0.15);
}
.record-btn-text {
font-size: 24rpx;
font-weight: 500;
color: #ffffff;
}
.record-btn.recorded .record-btn-text {
color: #059669;
}
.record-btn.recorded svg {
filter: none;
}
.record-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.record-dialog {
width: 90%;
max-width: 640rpx;
background-color: #ffffff;
border-radius: 24rpx;
overflow: hidden;
}
.record-header {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); padding: 24rpx 28rpx;
border-bottom: 1px solid #f3f4f6;
} }
.course-info { .record-title {
display: flex; font-size: 32rpx;
flex-direction: column;
gap: 8px;
}
.student-name {
font-size: 16px;
font-weight: 600; font-weight: 600;
color: #1f2937; color: #1f2937;
} }
.time-row { .close-btn {
width: 48rpx;
height: 48rpx;
display: flex; display: flex;
flex-direction: row;
align-items: center;
gap: 6px;
}
.time-text {
font-size: 14px;
color: #6B7280;
}
.duration-tag {
background-color: #F3F4F6;
padding: 2px 8px;
border-radius: 10px;
margin-left: 8px;
}
.duration-text {
font-size: 12px;
color: #6B7280;
font-weight: 500;
}
.course-actions {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
}
.status-badge {
padding: 4px 10px;
border-radius: 12px;
}
.status-completed {
background-color: #D1FAE5;
}
.status-completed .status-text {
color: #059669;
}
.status-pending {
background-color: #FEF3C7;
}
.status-pending .status-text {
color: #D97706;
}
.status-cancelled {
background-color: #F3F4F6;
}
.status-cancelled .status-text {
color: #9CA3AF;
}
.status-text {
font-size: 12px;
font-weight: 500;
}
.recorded-badge {
display: flex;
flex-direction: row;
align-items: center;
gap: 4px;
}
.recorded-text {
font-size: 12px;
color: #10B981;
font-weight: 500;
}
/* 空状态 */
.empty-state {
display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 48px 24px;
background-color: #ffffff;
border-radius: 14px;
} }
.empty-text { .record-body {
font-size: 15px; padding: 28rpx;
color: #9CA3AF; }
.record-info-row {
display: flex;
flex-direction: row;
align-items: center;
padding: 16rpx 20rpx;
background-color: #f9fafb;
border-radius: 12rpx;
margin-bottom: 16rpx;
}
.info-label {
font-size: 26rpx;
color: #6b7280;
margin-right: 12rpx;
}
.info-value {
font-size: 26rpx;
color: #1f2937;
font-weight: 500;
}
.record-section {
margin-bottom: 24rpx;
}
.section-title {
font-size: 26rpx;
color: #6b7280;
margin-bottom: 12rpx;
}
.time-picker-row {
display: flex;
flex-direction: row;
align-items: center;
gap: 16rpx;
}
.time-picker {
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 20rpx;
background-color: #f9fafb;
border-radius: 12rpx;
}
.picker-value {
font-size: 28rpx;
color: #1f2937;
}
.time-separator {
font-size: 26rpx;
color: #9ca3af;
}
.record-input {
width: 100%;
height: 88rpx;
padding: 0 24rpx;
font-size: 28rpx;
color: #1f2937;
background-color: #f9fafb;
border-radius: 12rpx;
box-sizing: border-box;
}
.record-footer {
display: flex;
flex-direction: row;
gap: 16rpx;
padding: 0 28rpx 28rpx;
}
.dialog-btn {
flex: 1;
padding: 24rpx;
border-radius: 12rpx;
display: flex;
align-items: center;
justify-content: center;
}
.dialog-btn.cancel {
background-color: #f3f4f6;
}
.dialog-btn.cancel .btn-text {
color: #6b7280;
}
.dialog-btn.confirm {
background-color: #3B82F6;
}
.btn-text {
font-size: 28rpx;
font-weight: 500;
color: #ffffff;
} }

View File

@ -1,22 +1,30 @@
import { View, Text } from '@tarojs/components' import { View, Text, Input } from '@tarojs/components'
import { useState, useEffect } from 'react' import { useState, useEffect, useCallback } from 'react'
import { Calendar, ChevronLeft, ChevronRight, CircleCheck, Clock } from 'lucide-react-taro' import { useDidShow } from '@tarojs/taro'
import { Calendar, ChevronLeft, ChevronRight, CircleCheck, Clock, X, Pencil, ChevronDown, ChevronUp } from 'lucide-react-taro'
import Taro from '@tarojs/taro' import Taro from '@tarojs/taro'
import './index.css' import './index.css'
// 课程状态枚举
type CourseStatus = 'completed' | 'pending' | 'cancelled' type CourseStatus = 'completed' | 'pending' | 'cancelled'
// 课程接口
interface Course { interface Course {
id: number id: number
studentName: string studentName: string
date: string date: string
startTime: string startTime: string
endTime: string endTime: string
duration: number // 课时时长(小时) duration: number
status: CourseStatus status: CourseStatus
recorded: boolean // 是否已录入课时 recorded: boolean
}
interface RecordForm {
studentName: string
date: string
startTime: string
endTime: string
duration: number
fee: number
} }
export default function CoursePage() { export default function CoursePage() {
@ -24,8 +32,17 @@ export default function CoursePage() {
const [currentMonth, setCurrentMonth] = useState(new Date()) const [currentMonth, setCurrentMonth] = useState(new Date())
const [selectedDate, setSelectedDate] = useState(new Date()) const [selectedDate, setSelectedDate] = useState(new Date())
const [courses, setCourses] = useState<Course[]>([]) const [courses, setCourses] = useState<Course[]>([])
const [recordDialogOpen, setRecordDialogOpen] = useState(false)
const [currentCourse, setCurrentCourse] = useState<Course | null>(null)
const [recordForm, setRecordForm] = useState<RecordForm>({
studentName: '',
date: '',
startTime: '',
endTime: '',
duration: 1,
fee: 0
})
// 格式化日期为 YYYY-MM-DD
const formatDate = (date: Date): string => { const formatDate = (date: Date): string => {
const year = date.getFullYear() const year = date.getFullYear()
const month = String(date.getMonth() + 1).padStart(2, '0') const month = String(date.getMonth() + 1).padStart(2, '0')
@ -33,7 +50,6 @@ export default function CoursePage() {
return `${year}-${month}-${day}` return `${year}-${month}-${day}`
} }
// 计算时长
const calculateDuration = (startTime: string, endTime: string): number => { const calculateDuration = (startTime: string, endTime: string): number => {
const start = new Date(`2000-01-01T${startTime}`) const start = new Date(`2000-01-01T${startTime}`)
const end = new Date(`2000-01-01T${endTime}`) const end = new Date(`2000-01-01T${endTime}`)
@ -41,51 +57,64 @@ export default function CoursePage() {
return parseFloat(diffHours.toFixed(1)) return parseFloat(diffHours.toFixed(1))
} }
// 加载课程数据 const loadCourses = useCallback(() => {
useEffect(() => {
const savedSchedules = Taro.getStorageSync('schedules') const savedSchedules = Taro.getStorageSync('schedules')
const savedStudents = Taro.getStorageSync('students')
if (savedSchedules && Array.isArray(savedSchedules)) { if (savedSchedules && Array.isArray(savedSchedules)) {
const courseList: Course[] = savedSchedules.map(s => ({ const courseList: Course[] = savedSchedules.map(s => {
id: s.id, const duration = calculateDuration(s.startTime, s.endTime)
studentName: s.studentName, const student = savedStudents?.find((st: any) => st.id === s.studentId)
date: s.date, const usedHours = student?.usedHours || 0
startTime: s.startTime, const totalHours = student?.totalHours || 0
endTime: s.endTime,
duration: calculateDuration(s.startTime, s.endTime), let status: CourseStatus = s.status || 'pending'
status: 'pending' as CourseStatus, let recorded = s.recorded || false
recorded: false
})) return {
id: s.id,
studentName: s.studentName,
date: s.date,
startTime: s.startTime,
endTime: s.endTime,
duration,
status,
recorded
}
})
setCourses(courseList) setCourses(courseList)
} else {
setCourses([])
} }
}, []) }, [])
// 获取当月日历数据 useEffect(() => {
loadCourses()
}, [loadCourses])
useDidShow(() => {
loadCourses()
})
const getMonthData = () => { const getMonthData = () => {
const year = currentMonth.getFullYear() const year = currentMonth.getFullYear()
const month = currentMonth.getMonth() const month = currentMonth.getMonth()
// 当月第一天
const firstDay = new Date(year, month, 1) const firstDay = new Date(year, month, 1)
// 当月最后一天
const lastDay = new Date(year, month + 1, 0) const lastDay = new Date(year, month + 1, 0)
// 补齐日历开头
const startWeek = firstDay.getDay() || 7 const startWeek = firstDay.getDay() || 7
const days: { date: Date; isCurrentMonth: boolean }[] = [] const days: { date: Date; isCurrentMonth: boolean }[] = []
// 上月日期
for (let i = startWeek - 1; i > 0; i--) { for (let i = startWeek - 1; i > 0; i--) {
const date = new Date(year, month, 1 - i) const date = new Date(year, month, 1 - i)
days.push({ date, isCurrentMonth: false }) days.push({ date, isCurrentMonth: false })
} }
// 当月日期
for (let i = 1; i <= lastDay.getDate(); i++) { for (let i = 1; i <= lastDay.getDate(); i++) {
const date = new Date(year, month, i) const date = new Date(year, month, i)
days.push({ date, isCurrentMonth: true }) days.push({ date, isCurrentMonth: true })
} }
// 下月日期补满6行
const remaining = 42 - days.length const remaining = 42 - days.length
for (let i = 1; i <= remaining; i++) { for (let i = 1; i <= remaining; i++) {
const date = new Date(year, month + 1, i) const date = new Date(year, month + 1, i)
@ -95,42 +124,98 @@ export default function CoursePage() {
return days return days
} }
// 判断日期是否有课程
const hasCourse = (date: Date): number => { const hasCourse = (date: Date): number => {
const dateStr = formatDate(date) const dateStr = formatDate(date)
return courses.filter(c => c.date === dateStr).length return courses.filter(c => c.date === dateStr).length
} }
// 判断是否是今天
const isToday = (date: Date): boolean => { const isToday = (date: Date): boolean => {
const today = new Date() const today = new Date()
return formatDate(date) === formatDate(today) return formatDate(date) === formatDate(today)
} }
// 判断是否选中 const isCourseTimeValid = (dateStr: string, endTime: string): boolean => {
const now = new Date()
const courseEnd = new Date(`${dateStr}T${endTime}`)
return courseEnd >= now
}
const isSelected = (date: Date): boolean => { const isSelected = (date: Date): boolean => {
return formatDate(date) === formatDate(selectedDate) return formatDate(date) === formatDate(selectedDate)
} }
// 获取选中日期的课程
const getSelectedDateCourses = (): Course[] => { const getSelectedDateCourses = (): Course[] => {
const dateStr = formatDate(selectedDate) const dateStr = formatDate(selectedDate)
return courses.filter(c => c.date === dateStr) return courses.filter(c => c.date === dateStr)
} }
// 获取状态标签 const getStudentProgress = (studentName: string): { used: number; total: number } => {
const getStatusLabel = (status: CourseStatus): { text: string; className: string } => { const savedStudents = Taro.getStorageSync('students')
switch (status) { const student = savedStudents?.find((s: any) => s.studentName === studentName)
case 'completed': return {
return { text: '已上课', className: 'status-completed' } used: student?.usedHours || 0,
case 'pending': total: student?.totalHours || 20
return { text: '未上课', className: 'status-pending' }
case 'cancelled':
return { text: '已取消', className: 'status-cancelled' }
} }
} }
// 月份导航 const getListTitle = (): string => {
if (isToday(selectedDate)) {
return '今日课程'
}
const year = selectedDate.getFullYear()
const month = selectedDate.getMonth() + 1
const day = selectedDate.getDate()
const weekDay = ['日', '一', '二', '三', '四', '五', '六'][selectedDate.getDay()]
return `${year}${month}${day}日 星期${weekDay}`
}
const handleRecordClick = (course: Course) => {
setCurrentCourse(course)
setRecordForm({
studentName: course.studentName,
date: course.date,
startTime: course.startTime,
endTime: course.endTime,
duration: course.duration,
fee: 0
})
setRecordDialogOpen(true)
}
const handleSaveRecord = () => {
const savedStudents = Taro.getStorageSync('students') || []
const updatedStudents = savedStudents.map((student: any) => {
if (student.studentName === recordForm.studentName) {
return {
...student,
usedHours: (student.usedHours || 0) + recordForm.duration
}
}
return student
})
Taro.setStorageSync('students', updatedStudents)
const updatedCourses = courses.map(c => {
if (c.id === currentCourse?.id) {
return { ...c, status: 'completed' as CourseStatus, recorded: true }
}
return c
})
setCourses(updatedCourses)
const savedSchedules = Taro.getStorageSync('schedules') || []
const updatedSchedules = savedSchedules.map((s: any) => {
if (s.id === currentCourse?.id) {
return { ...s, status: 'completed', recorded: true }
}
return s
})
Taro.setStorageSync('schedules', updatedSchedules)
Taro.showToast({ title: '录入成功', icon: 'success' })
setRecordDialogOpen(false)
}
const prevMonth = () => { const prevMonth = () => {
setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1)) setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1))
} }
@ -141,26 +226,21 @@ export default function CoursePage() {
const monthData = getMonthData() const monthData = getMonthData()
const selectedCourses = getSelectedDateCourses() const selectedCourses = getSelectedDateCourses()
const weekDays = ['一', '二', '三', '四', '五', '六', '日'] const weekDays = ['日', '一', '二', '三', '四', '五', '六']
return ( return (
<View className="course-page"> <View className="course-page">
{/* 课程日历 */}
<View className="calendar-section"> <View className="calendar-section">
<View <View className="calendar-header" onClick={() => setCalendarExpanded(!calendarExpanded)}>
className="calendar-header"
onClick={() => setCalendarExpanded(!calendarExpanded)}
>
<View className="calendar-title-row"> <View className="calendar-title-row">
<Calendar size={20} color="#3B82F6" /> <Calendar size={20} color="#3B82F6" />
<Text className="calendar-title"></Text> <Text className="calendar-title"></Text>
</View> </View>
<Text className="calendar-toggle">{calendarExpanded ? '收起' : '展开'}</Text> {calendarExpanded ? <ChevronUp size={20} color="#6b7280" /> : <ChevronDown size={20} color="#6b7280" />}
</View> </View>
{calendarExpanded && ( {calendarExpanded && (
<View className="calendar-body"> <View className="calendar-body">
{/* 月份导航 */}
<View className="month-nav"> <View className="month-nav">
<View className="nav-btn" onClick={prevMonth}> <View className="nav-btn" onClick={prevMonth}>
<ChevronLeft size={20} color="#6B7280" /> <ChevronLeft size={20} color="#6B7280" />
@ -173,7 +253,6 @@ export default function CoursePage() {
</View> </View>
</View> </View>
{/* 星期标题 */}
<View className="week-header"> <View className="week-header">
{weekDays.map((day, index) => ( {weekDays.map((day, index) => (
<View key={index} className="week-day"> <View key={index} className="week-day">
@ -182,7 +261,6 @@ export default function CoursePage() {
))} ))}
</View> </View>
{/* 日期网格 */}
<View className="date-grid"> <View className="date-grid">
{monthData.map((item, index) => { {monthData.map((item, index) => {
const courseCount = hasCourse(item.date) const courseCount = hasCourse(item.date)
@ -212,15 +290,15 @@ export default function CoursePage() {
)} )}
</View> </View>
{/* 今日课程列表 */}
<View className="course-list-section"> <View className="course-list-section">
<View className="list-header"> <View className="list-header">
<Text className="list-title"> <View className="list-title-row">
{selectedDate.getMonth() + 1}{selectedDate.getDate()} <Calendar size={18} color="#3B82F6" />
</Text> <Text className="list-title">{getListTitle()}</Text>
<View className="student-count"> </View>
<View className="student-count-badge">
<Text className="count-number">{selectedCourses.length}</Text> <Text className="count-number">{selectedCourses.length}</Text>
<Text className="count-label"></Text> <Text className="count-label"></Text>
</View> </View>
</View> </View>
@ -231,31 +309,51 @@ export default function CoursePage() {
</View> </View>
) : ( ) : (
selectedCourses.map(course => { selectedCourses.map(course => {
const statusInfo = getStatusLabel(course.status) const progress = getStudentProgress(course.studentName)
const progressPercent = progress.total > 0 ? (progress.used / progress.total) * 100 : 0
return ( return (
<View key={course.id} className="course-card"> <View key={course.id} className="course-card">
<View className="course-info"> <View className="course-main">
<Text className="student-name">{course.studentName}</Text> <View className="course-info">
<View className="time-row"> <Text className="student-name">{course.studentName}</Text>
<Clock size={14} color="#6B7280" /> <View className="time-info">
<Text className="time-text"> <Clock size={14} color="#6B7280" />
{course.startTime} - {course.endTime} <Text className="time-text">{course.startTime} - {course.endTime}</Text>
</Text> <View className="duration-badge">
<View className="duration-tag"> <Text className="duration-text">{course.duration}h</Text>
<Text className="duration-text">{course.duration}h</Text> </View>
</View> </View>
</View> </View>
<View className="course-status">
<View className={`status-tag ${course.status === 'completed' ? 'completed' : 'pending'}`}>
<Text className="status-text">{course.status === 'completed' ? '已上课' : '未上课'}</Text>
</View>
{course.recorded ? (
<View className="record-btn recorded">
<CircleCheck size={12} color="#10B981" />
<Text className="record-btn-text"></Text>
</View>
) : (
<>
{!isCourseTimeValid(course.date, course.endTime) && (
<View className="record-btn" onClick={() => handleRecordClick(course)}>
<Pencil size={12} color="#ffffff" />
<Text className="record-btn-text"></Text>
</View>
)}
</>
)}
</View>
</View> </View>
<View className="course-actions"> <View className="course-progress">
<View className={`status-badge ${statusInfo.className}`}> <Text className="progress-label"></Text>
<Text className="status-text">{statusInfo.text}</Text> <View className="progress-bar-wrapper">
</View> <View className="progress-bar-bg">
{course.recorded && ( <View className="progress-bar-fill" style={{ width: `${Math.min(progressPercent, 100)}%` }} />
<View className="recorded-badge">
<CircleCheck size={14} color="#10B981" />
<Text className="recorded-text"></Text>
</View> </View>
)} <Text className="progress-text">{progress.used.toFixed(1)}/{progress.total}h</Text>
</View>
</View> </View>
</View> </View>
) )
@ -263,6 +361,80 @@ export default function CoursePage() {
)} )}
</View> </View>
</View> </View>
{recordDialogOpen && (
<View className="record-overlay" onClick={() => setRecordDialogOpen(false)}>
<View className="record-dialog" onClick={e => e.stopPropagation()}>
<View className="record-header">
<Text className="record-title"></Text>
<View className="close-btn" onClick={() => setRecordDialogOpen(false)}>
<X size={18} color="#6B7280" />
</View>
</View>
<View className="record-body">
<View className="record-info-row">
<Text className="info-label">:</Text>
<Text className="info-value">{recordForm.studentName}</Text>
</View>
<View className="record-info-row">
<Text className="info-label">:</Text>
<Text className="info-value">{recordForm.date}</Text>
</View>
<View className="record-section">
<Text className="section-title"></Text>
<View className="time-picker-row">
<View className="time-picker">
<Text className="picker-value">{recordForm.startTime}</Text>
</View>
<Text className="time-separator"></Text>
<View className="time-picker">
<Text className="picker-value">{recordForm.endTime}</Text>
</View>
</View>
</View>
<View className="record-section">
<Text className="section-title"> ()</Text>
<Input
className="record-input"
type="number"
value={recordForm.duration.toString()}
onInput={(e: any) => {
const val = parseFloat(e.detail.value) || 0
setRecordForm(prev => ({ ...prev, duration: val }))
}}
placeholder="请输入时长"
/>
</View>
<View className="record-section">
<Text className="section-title"> ()</Text>
<Input
className="record-input"
type="number"
value={recordForm.fee.toString()}
onInput={(e: any) => {
const val = parseFloat(e.detail.value) || 0
setRecordForm(prev => ({ ...prev, fee: val }))
}}
placeholder="请输入费用"
/>
</View>
</View>
<View className="record-footer">
<View className="dialog-btn cancel" onClick={() => setRecordDialogOpen(false)}>
<Text className="btn-text"></Text>
</View>
<View className="dialog-btn confirm" onClick={handleSaveRecord}>
<Text className="btn-text"></Text>
</View>
</View>
</View>
</View>
)}
</View> </View>
) )
} }

View File

@ -20,8 +20,19 @@
padding: 20px; padding: 20px;
} }
.form-row {
display: flex;
flex-direction: row;
gap: 12px;
margin-bottom: 16px;
}
.form-item { .form-item {
margin-bottom: 20px; flex: 1;
}
.form-item.half {
width: calc(50% - 6px);
} }
.form-label { .form-label {

View File

@ -28,10 +28,20 @@ export default function RecordPage() {
const [students, setStudents] = useState<Student[]>([]) const [students, setStudents] = useState<Student[]>([])
const [selectedDate, setSelectedDate] = useState<string>('') const [selectedDate, setSelectedDate] = useState<string>('')
const [selectedStudent, setSelectedStudent] = useState<number>(-1) const [selectedStudent, setSelectedStudent] = useState<number>(-1)
const [startTime, setStartTime] = useState<string>('')
const [endTime, setEndTime] = useState<string>('')
const [duration, setDuration] = useState<string>('') const [duration, setDuration] = useState<string>('')
const [fee, setFee] = useState<string>('') const [fee, setFee] = useState<string>('')
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false)
const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null) const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null)
// 显示提示信息并自动隐藏
const showMessage = (type: 'success' | 'error', text: string) => {
setMessage({ type, text })
setTimeout(() => {
setMessage(null)
}, 3000)
}
const [openid, setOpenid] = useState<string>('') const [openid, setOpenid] = useState<string>('')
useEffect(() => { useEffect(() => {
@ -83,9 +93,35 @@ export default function RecordPage() {
setSelectedStudent(index) setSelectedStudent(index)
} }
// 课时时长输入 // 计算时长(小时)
const onDurationChange = (e: any) => { const calculateDuration = (start: string, end: string) => {
setDuration(e.detail.value) if (!start || !end) return ''
const [startHour, startMin] = start.split(':').map(Number)
const [endHour, endMin] = end.split(':').map(Number)
const startTotalMinutes = startHour * 60 + startMin
const endTotalMinutes = endHour * 60 + endMin
let diffMinutes = endTotalMinutes - startTotalMinutes
if (diffMinutes < 0) {
diffMinutes += 24 * 60
}
const hours = diffMinutes / 60
return hours.toFixed(1)
}
// 开始时间变化
const onStartTimeChange = (e: any) => {
const newStartTime = e.detail.value
setStartTime(newStartTime)
const newDuration = calculateDuration(newStartTime, endTime)
setDuration(newDuration)
}
// 结束时间变化
const onEndTimeChange = (e: any) => {
const newEndTime = e.detail.value
setEndTime(newEndTime)
const newDuration = calculateDuration(startTime, newEndTime)
setDuration(newDuration)
} }
// 费用输入 // 费用输入
@ -97,21 +133,43 @@ export default function RecordPage() {
const handleSubmit = async () => { const handleSubmit = async () => {
// 校验 // 校验
if (!selectedDate) { if (!selectedDate) {
setMessage({ type: 'error', text: '请选择上课日期' }) showMessage('error', '请选择上课日期')
return return
} }
if (selectedStudent < 0 || !students[selectedStudent]) { if (selectedStudent < 0 || !students[selectedStudent]) {
setMessage({ type: 'error', text: '请选择学员' }) showMessage('error', '请选择学员')
return
}
if (!startTime) {
showMessage('error', '请选择开始时间')
return
}
if (!endTime) {
showMessage('error', '请选择结束时间')
return return
} }
const durationNum = parseFloat(duration) const durationNum = parseFloat(duration)
if (Number.isNaN(durationNum) || durationNum <= 0) { if (Number.isNaN(durationNum) || durationNum <= 0) {
setMessage({ type: 'error', text: '课时时长需为正数' }) showMessage('error', '课时时长需为正数')
return return
} }
const feeNum = parseFloat(fee) const feeNum = parseFloat(fee)
if (Number.isNaN(feeNum) || feeNum < 0) { if (Number.isNaN(feeNum) || feeNum < 0) {
setMessage({ type: 'error', text: '单次费用需为非负数' }) showMessage('error', '单次费用需为非负数')
return
}
// 检查是否已存在相同记录
const savedRecords = Taro.getStorageSync('records') || []
const student = students[selectedStudent]
const existsRecord = savedRecords.some(
(r: any) => r.name === student.studentName &&
r.date === selectedDate &&
r.startTime === startTime &&
r.endTime === endTime
)
if (existsRecord) {
showMessage('error', '该时间段已录入课时记录')
return return
} }
@ -120,34 +178,63 @@ export default function RecordPage() {
try { try {
const student = students[selectedStudent] const student = students[selectedStudent]
const res = await Network.request({ const record = {
url: '/api/records', id: Date.now(),
method: 'POST', date: selectedDate,
data: { name: student.studentName,
date: selectedDate, startTime,
name: student.studentName, endTime,
duration: durationNum, duration: durationNum,
fee: feeNum, fee: feeNum,
openid openid,
} createTime: new Date().toISOString()
})
console.log('[课时录入] 提交结果:', res.data)
if (res.data && res.data.code === 200) {
setMessage({ type: 'success', text: '记录提交成功' })
// 清空课时相关输入
setDuration('')
setFee('')
// 设置日期为今天
const today = new Date()
const dateStr = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`
setSelectedDate(dateStr)
} else {
setMessage({ type: 'error', text: res.data?.msg || '提交失败' })
} }
// 保存课时记录
const savedRecords = Taro.getStorageSync('records') || []
savedRecords.push(record)
Taro.setStorageSync('records', savedRecords)
// 更新学员已上课时数
const savedStudents = Taro.getStorageSync('students') || []
const updatedStudents = savedStudents.map((s: any) => {
if (s.studentName === student.studentName) {
return {
...s,
usedHours: (s.usedHours || 0) + durationNum
}
}
return s
})
Taro.setStorageSync('students', updatedStudents)
// 更新课程状态(标记为已完成和已录入)
const savedSchedules = Taro.getStorageSync('schedules') || []
const updatedSchedules = savedSchedules.map((sch: any) => {
if (sch.studentName === student.studentName &&
sch.date === selectedDate &&
sch.startTime === startTime &&
sch.endTime === endTime) {
return {
...sch,
status: 'completed',
recorded: true
}
}
return sch
})
Taro.setStorageSync('schedules', updatedSchedules)
console.log('[课时录入] 提交成功:', record)
showMessage('success', '记录提交成功')
// 2秒后自动返回上一页
setTimeout(() => {
Taro.navigateBack()
}, 2000)
} catch (err) { } catch (err) {
console.error('[课时录入] 提交失败:', err) console.error('[课时录入] 提交失败:', err)
setMessage({ type: 'error', text: '网络错误,请重试' }) showMessage('error', '保存失败,请重试')
} finally { } finally {
setLoading(false) setLoading(false)
} }
@ -169,77 +256,114 @@ export default function RecordPage() {
return ( return (
<View className="page-container"> <View className="page-container">
<View className="page-header"> <View className="page-header">
<Text className="page-title"></Text> <Text className="page-title"></Text>
</View> </View>
<View className="form-container"> <View className="form-container">
{/* 上课日期 */} <View className="form-row">
<View className="form-item"> {/* 上课日期 */}
<Text className="form-label"></Text> <View className="form-item half">
<View className="form-input-wrapper"> <Text className="form-label"></Text>
<Picker <View className="form-input-wrapper">
mode="date" <Picker
value={selectedDate} mode="date"
onChange={onDateChange} value={selectedDate}
className="date-picker" onChange={onDateChange}
> className="date-picker"
<View className="picker-content"> >
<Text className="picker-text">{selectedDate || '请选择日期'}</Text> <View className="picker-content">
<Text className="picker-weekday">{getWeekday(selectedDate)}</Text> <Text className="picker-text">{selectedDate || '请选择日期'}</Text>
</View> </View>
</Picker> </Picker>
</View>
</View>
{/* 学员选择 */}
<View className="form-item half">
<Text className="form-label"></Text>
<View className="form-input-wrapper">
<Picker
mode="selector"
range={studentNames}
disabled={studentNames.length === 0}
onChange={onStudentChange}
className="student-picker"
>
<View className="picker-content">
<Text className={selectedStudent >= 0 && activeStudents[selectedStudent] ? 'picker-text' : 'picker-placeholder'}>
{selectedStudent >= 0 && activeStudents[selectedStudent] ? activeStudents[selectedStudent].studentName : '请选择学员'}
</Text>
</View>
</Picker>
</View>
</View> </View>
</View> </View>
{/* 学员选择 */} <View className="form-row">
<View className="form-item"> {/* 开始时间 */}
<Text className="form-label"></Text> <View className="form-item half">
<View className="form-input-wrapper"> <Text className="form-label"></Text>
<Picker <View className="form-input-wrapper">
mode="selector" <Picker
range={studentNames} mode="time"
disabled={studentNames.length === 0} value={startTime}
onChange={onStudentChange} onChange={onStartTimeChange}
className="student-picker" className="time-picker"
> >
<View className="picker-content">
<Text className={startTime ? 'picker-text' : 'picker-placeholder'}>
{startTime || '--:--'}
</Text>
</View>
</Picker>
</View>
</View>
{/* 结束时间 */}
<View className="form-item half">
<Text className="form-label"></Text>
<View className="form-input-wrapper">
<Picker
mode="time"
value={endTime}
onChange={onEndTimeChange}
className="time-picker"
>
<View className="picker-content">
<Text className={endTime ? 'picker-text' : 'picker-placeholder'}>
{endTime || '--:--'}
</Text>
</View>
</Picker>
</View>
</View>
</View>
<View className="form-row">
{/* 上课时长 */}
<View className="form-item half">
<Text className="form-label"></Text>
<View className="form-input-wrapper">
<View className="picker-content"> <View className="picker-content">
<Text className={selectedStudent >= 0 && activeStudents[selectedStudent] ? 'picker-text' : 'picker-placeholder'}> <Text className={duration ? 'picker-text' : 'picker-placeholder'}>
{selectedStudent >= 0 && activeStudents[selectedStudent] ? activeStudents[selectedStudent].studentName : '请选择学员'} {duration || '--'}
</Text> </Text>
</View> </View>
</Picker> </View>
{studentNames.length === 0 && (
<Text className="form-hint error"></Text>
)}
</View> </View>
</View>
{/* 课时时长 */} {/* 课时费 */}
<View className="form-item"> <View className="form-item half">
<Text className="form-label"></Text> <Text className="form-label"></Text>
<View className="form-input-wrapper"> <View className="form-input-wrapper">
<Input <Input
className="simple-input" className="simple-input"
type="digit" type="digit"
placeholder="请输入课时时长" placeholder="如 200"
value={duration} value={fee}
onInput={onDurationChange} onInput={onFeeChange}
onBlur={() => {}} />
/> </View>
</View>
</View>
{/* 单次费用 */}
<View className="form-item">
<Text className="form-label"></Text>
<View className="form-input-wrapper">
<Input
className="simple-input"
type="digit"
placeholder="请输入单次费用"
value={fee}
onInput={onFeeChange}
/>
</View> </View>
</View> </View>

View File

@ -14,6 +14,8 @@ interface ScheduleRecord {
date: string date: string
startTime: string startTime: string
endTime: string endTime: string
status?: 'completed' | 'pending' | 'cancelled'
recorded?: boolean
} }
// 学员类型 // 学员类型
@ -68,58 +70,23 @@ export default function SchedulePage() {
setSelectedDate(today) setSelectedDate(today)
setAddForm(prev => ({ ...prev, date: today })) setAddForm(prev => ({ ...prev, date: today }))
if (userInfo && userInfo.openid) { loadStudents()
setOpenid(userInfo.openid) loadSchedules()
loadStudents(userInfo.openid)
loadSchedules(userInfo.openid)
} else {
const savedStudents = Taro.getStorageSync('students')
if (savedStudents && Array.isArray(savedStudents)) {
setStudents(savedStudents)
}
const savedSchedules = Taro.getStorageSync('schedules')
if (savedSchedules && Array.isArray(savedSchedules)) {
setSchedules(savedSchedules)
}
}
}, []) }, [])
// 加载排课数据 // 加载排课数据
const loadSchedules = async (oid: string) => { const loadSchedules = () => {
try { const savedSchedules = Taro.getStorageSync('schedules')
const res = await Network.request({ if (savedSchedules && Array.isArray(savedSchedules)) {
url: '/api/schedules', setSchedules(savedSchedules)
method: 'GET',
data: { openid: oid }
})
console.log('[排课] 加载排课数据:', res.data)
if (res.data && res.data.code === 200) {
const serverSchedules = res.data.data || []
setSchedules(serverSchedules)
Taro.setStorageSync('schedules', serverSchedules)
}
} catch (err) {
console.error('[排课] 加载失败:', err)
} }
} }
// 加载学员数据 // 加载学员数据
const loadStudents = async (oid: string) => { const loadStudents = () => {
try { const savedStudents = Taro.getStorageSync('students')
const res = await Network.request({ if (savedStudents && Array.isArray(savedStudents)) {
url: '/api/students', setStudents(savedStudents.filter((s: Student) => s.status === 0))
method: 'GET',
data: { openid: oid, activeOnly: 1 }
})
console.log('[排课] 加载学员列表:', res.data)
if (res.data && res.data.code === 200) {
const serverStudents = res.data.data || []
setStudents(serverStudents)
Taro.setStorageSync('students', serverStudents)
}
} catch (err) {
console.error('[排课] 加载学员失败:', err)
} }
} }
@ -221,7 +188,9 @@ export default function SchedulePage() {
studentName: addForm.studentName, studentName: addForm.studentName,
date: addForm.date, date: addForm.date,
startTime: addForm.startTime, startTime: addForm.startTime,
endTime: addForm.endTime endTime: addForm.endTime,
status: 'pending',
recorded: false
} }
const conflicts = checkTimeConflict(newSchedule) const conflicts = checkTimeConflict(newSchedule)
@ -262,13 +231,17 @@ export default function SchedulePage() {
return return
} }
const existingRecord = schedules.find(s => s.id === editForm.id)
const updatedSchedule: ScheduleRecord = { const updatedSchedule: ScheduleRecord = {
id: editForm.id, id: editForm.id,
studentId: parseInt(editForm.studentId), studentId: parseInt(editForm.studentId),
studentName: editForm.studentName, studentName: editForm.studentName,
date: editForm.date, date: editForm.date,
startTime: editForm.startTime, startTime: editForm.startTime,
endTime: editForm.endTime endTime: editForm.endTime,
status: existingRecord?.status || 'pending',
recorded: existingRecord?.recorded || false
} }
const conflicts = checkTimeConflict(updatedSchedule, editForm.id) const conflicts = checkTimeConflict(updatedSchedule, editForm.id)

View File

@ -197,6 +197,24 @@
.student-name { .student-name {
font-size: 30rpx; font-size: 30rpx;
font-weight: 600; font-weight: 600;
}
.student-status-tag {
padding: 6rpx 16rpx;
border-radius: 8rpx;
}
.student-status-tag.completed {
background-color: rgba(239, 68, 68, 0.15);
}
.student-status-tag .status-tag-text {
font-size: 22rpx;
color: #dc2626;
font-weight: 500;
}
.student-name {
color: #1f2937; color: #1f2937;
} }
@ -229,6 +247,10 @@
background: #ef4444; background: #ef4444;
} }
.student-action-btn.restore-btn {
background: #10b981;
}
.student-action-text { .student-action-text {
font-size: 24rpx; font-size: 24rpx;
color: #ffffff; color: #ffffff;
@ -585,6 +607,39 @@
font-weight: 500; font-weight: 500;
} }
.course-info {
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
gap: 16rpx;
}
.course-status {
padding: 8rpx 20rpx;
border-radius: 8rpx;
}
.course-status.pending {
background-color: rgba(251, 191, 36, 0.15);
}
.course-status.completed {
background-color: rgba(16, 185, 129, 0.15);
}
.course-status .status-text {
font-size: 24rpx;
}
.course-status.pending .status-text {
color: #d97706;
}
.course-status.completed .status-text {
color: #059669;
}
.course-summary { .course-summary {
display: flex; display: flex;
align-items: center; align-items: center;

View File

@ -231,18 +231,26 @@ export default function StudentPage() {
<View className="student-name-section"> <View className="student-name-section">
<Text className="student-icon">👤</Text> <Text className="student-icon">👤</Text>
<Text className="student-name">{student.studentName}</Text> <Text className="student-name">{student.studentName}</Text>
{student.status === 1 && (
<View className="student-status-tag completed">
<Text className="status-tag-text"></Text>
</View>
)}
</View> </View>
<View className="student-actions"> <View className="student-actions">
<View className="student-action-btn course-btn" onClick={() => openCourseDialog(student)}> <View className="student-action-btn course-btn" onClick={() => openCourseDialog(student)}>
<Text className="student-action-text"></Text> <Text className="student-action-text"></Text>
</View> </View>
<View className="student-action-btn end-btn" onClick={() => { <View
setStudents(prev => prev.map(s => className={`student-action-btn ${student.status === 1 ? 'restore-btn' : 'end-btn'}`}
s.id === student.id ? { ...s, status: 1 } : s onClick={() => {
)) const newStatus = student.status === 1 ? 0 : 1
Taro.showToast({ title: '已结课', icon: 'success' }) setStudents(prev => prev.map(s =>
}}> s.id === student.id ? { ...s, status: newStatus } : s
<Text className="student-action-text"></Text> ))
Taro.showToast({ title: newStatus === 1 ? '已结课' : '已恢复', icon: 'success' })
}}>
<Text className="student-action-text">{student.status === 1 ? '恢复' : '结课'}</Text>
</View> </View>
<View className="student-action-btn delete-btn" onClick={() => openDeleteDialog(student)}> <View className="student-action-btn delete-btn" onClick={() => openDeleteDialog(student)}>
<Text className="student-action-text"></Text> <Text className="student-action-text"></Text>
@ -418,8 +426,13 @@ export default function StudentPage() {
<View className="course-list"> <View className="course-list">
{studentSchedules.map((schedule, index) => ( {studentSchedules.map((schedule, index) => (
<View key={schedule.id || index} className="course-item"> <View key={schedule.id || index} className="course-item">
<Text className="course-date">{schedule.date}</Text> <View className="course-info">
<Text className="course-time">{schedule.startTime} - {schedule.endTime}</Text> <Text className="course-date">{schedule.date}</Text>
<Text className="course-time">{schedule.startTime} - {schedule.endTime}</Text>
</View>
<View className={`course-status ${schedule.status === 'completed' ? 'completed' : 'pending'}`}>
<Text className="status-text">{schedule.status === 'completed' ? '已上课' : '未上课'}</Text>
</View>
</View> </View>
))} ))}
<View className="course-summary"> <View className="course-summary">