825 lines
23 KiB
Vue
825 lines
23 KiB
Vue
<template>
|
|
<view class="course-detail-page">
|
|
<scroll-view scroll-y class="page-scroll">
|
|
<!-- 骨架屏 -->
|
|
<view v-if="detailLoading">
|
|
<view class="detail-card">
|
|
<view class="flex-between" style="margin-bottom:20px">
|
|
<view class="skeleton sk-line" style="width:55%;height:22px"></view>
|
|
<view class="skeleton sk-line" style="width:50px;height:22px;border-radius:20px"></view>
|
|
</view>
|
|
<view class="detail-grid">
|
|
<view v-for="i in 4" :key="'dg-'+i" class="detail-item">
|
|
<view class="skeleton sk-line sk-line-sm" style="width:32px;height:10px;margin-bottom:6px"></view>
|
|
<view class="skeleton sk-line" style="width:80%;height:14px"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="tab-bar" style="margin-top:12px">
|
|
<view v-for="t in tabs" :key="'st-'+t.key" class="tab-item">
|
|
<view class="skeleton sk-line" style="width:48px;height:14px;margin:0 auto"></view>
|
|
</view>
|
|
</view>
|
|
<view v-for="i in 4" :key="'ssk-'+i" class="sk-row" style="flex-direction:column;align-items:stretch;gap:10px;margin:10px 16px 0">
|
|
<view class="flex-between">
|
|
<view class="skeleton sk-line" style="width:35%;height:16px"></view>
|
|
<view class="skeleton sk-line" style="width:44px;height:18px;border-radius:20px"></view>
|
|
</view>
|
|
<view class="skeleton sk-line" style="width:50%;height:12px"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 真实内容 -->
|
|
<template v-else>
|
|
<!-- 课程基本信息 -->
|
|
<view class="detail-card card-fade-in">
|
|
<view class="detail-header">
|
|
<view class="flex-between">
|
|
<text class="detail-title">{{ course.courseName || '--' }}</text>
|
|
<view :class="['tag', getCourseStatusClass(course.status, course.deletedAt)]">
|
|
{{ getCourseStatusLabel(course.status, course.deletedAt) }}
|
|
</view>
|
|
</view>
|
|
<text class="detail-type" v-if="typeName">{{ typeName }}</text>
|
|
</view>
|
|
|
|
<view class="detail-grid">
|
|
<view class="detail-item">
|
|
<text class="d-label">日期</text>
|
|
<text class="d-value">{{ formatDate(course.startTime) }}</text>
|
|
</view>
|
|
<view class="detail-item">
|
|
<text class="d-label">时间</text>
|
|
<text class="d-value">
|
|
{{ formatTimeStr(course.actualStartTime || course.startTime) }} — {{ formatTimeStr(course.actualEndTime || course.endTime) }}
|
|
</text>
|
|
</view>
|
|
<view class="detail-item">
|
|
<text class="d-label">地点</text>
|
|
<text class="d-value">{{ course.location || '未设置' }}</text>
|
|
</view>
|
|
<view class="detail-item">
|
|
<text class="d-label">人数</text>
|
|
<text class="d-value">{{ course.currentMembers || 0 }} / {{ course.maxMembers || 0 }}人</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 实际时间记录 -->
|
|
<view v-if="course.actualStartTime || course.actualEndTime" class="actual-time-section">
|
|
<text class="at-title">实际时间记录</text>
|
|
<view class="at-row" v-if="course.actualStartTime">
|
|
<text class="at-label">实际开课</text>
|
|
<text class="at-value">{{ formatDateTime(course.actualStartTime) }}</text>
|
|
</view>
|
|
<view class="at-row" v-if="course.actualEndTime">
|
|
<text class="at-label">实际结课</text>
|
|
<text class="at-value">{{ formatDateTime(course.actualEndTime) }}</text>
|
|
</view>
|
|
<view class="at-note" v-if="course.actualEndTime">
|
|
<text>{{ isAutoEnded(course) ? '系统自动结课（教练未在课程结束后10分钟内点击结课）' : '教练手动结课' }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="course.description" class="detail-desc">
|
|
<text class="d-label">课程描述</text>
|
|
<text class="d-desc-text">{{ course.description }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 开课/结课操作按钮 -->
|
|
<view v-if="showCourseActions" class="course-actions">
|
|
<view v-if="showStartButton" class="action-hint">
|
|
<text class="hint-text">{{ startButtonHint }}</text>
|
|
</view>
|
|
<view v-if="showEndButton" class="action-hint">
|
|
<text class="hint-text">{{ endButtonHint }}</text>
|
|
</view>
|
|
<view class="action-buttons">
|
|
<button
|
|
v-if="showStartButton"
|
|
class="action-btn start-btn"
|
|
:class="{ 'btn-disabled': !canStartCourse }"
|
|
:loading="startLoading"
|
|
:disabled="!canStartCourse || startLoading"
|
|
@tap="handleStartCourse"
|
|
>
|
|
<text v-if="!startLoading">开始上课</text>
|
|
<text v-else>开课中...</text>
|
|
</button>
|
|
<button
|
|
v-if="showEndButton"
|
|
class="action-btn end-btn"
|
|
:class="{ 'btn-disabled': !canEndCourse }"
|
|
:loading="endLoading"
|
|
:disabled="!canEndCourse || endLoading"
|
|
@tap="handleEndCourse"
|
|
>
|
|
<text v-if="!endLoading">结束上课</text>
|
|
<text v-else>结课中...</text>
|
|
</button>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- Tab切换 -->
|
|
<view class="tab-bar">
|
|
<view
|
|
v-for="tab in tabs"
|
|
:key="tab.key"
|
|
class="tab-item"
|
|
:class="{ active: activeTab === tab.key }"
|
|
@tap="switchTab(tab.key)"
|
|
>
|
|
<text>{{ tab.label }}</text>
|
|
<view v-if="activeTab === tab.key" class="tab-indicator"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 时间表 -->
|
|
<view v-if="activeTab === 'schedule'" class="tab-content fade-in-up">
|
|
<view class="schedule-card card">
|
|
<view v-for="(item, idx) in scheduleItems" :key="'s-'+idx" class="schedule-item list-item-enter" :style="{ animationDelay: (idx * 0.05) + 's' }">
|
|
<text class="s-label">{{ item.label }}</text>
|
|
<text :class="['s-value', item.highlight ? 's-highlight' : '']">{{ item.value }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 签到情况 -->
|
|
<view v-if="activeTab === 'signin'" class="tab-content">
|
|
<!-- 签到骨架屏 -->
|
|
<view v-if="signinLoading">
|
|
<view v-for="i in 4" :key="'sik-'+i" class="sk-row" style="margin:0 16px 8px">
|
|
<view style="flex:1">
|
|
<view class="skeleton sk-line" style="width:40%;height:15px;margin-bottom:6px"></view>
|
|
<view class="skeleton sk-line" style="width:55%;height:12px"></view>
|
|
</view>
|
|
<view class="skeleton sk-line" style="width:44px;height:20px;border-radius:20px"></view>
|
|
</view>
|
|
</view>
|
|
<view v-else-if="signinRecords.length === 0" class="empty-state">
|
|
<text>暂无签到记录</text>
|
|
</view>
|
|
<view v-else class="signin-list">
|
|
<view
|
|
v-for="(record, index) in signinRecords"
|
|
:key="record.id || index"
|
|
class="signin-item card list-item-enter"
|
|
:style="{ animationDelay: (index * 0.06) + 's' }"
|
|
>
|
|
<view class="flex-between">
|
|
<view class="signin-left">
|
|
<text class="member-name">{{ record.memberName || '会员' + record.memberId }}</text>
|
|
<text class="signin-time">{{ formatDateTime(record.signInTime) }}</text>
|
|
</view>
|
|
<view class="tag tag-green">{{ record.signInStatus === 'SUCCESS' ? '已签到' : '未签到' }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 预约会员 -->
|
|
<view v-if="activeTab === 'bookings'" class="tab-content">
|
|
<!-- 预约骨架屏 -->
|
|
<view v-if="bookingLoading">
|
|
<view v-for="i in 4" :key="'bik-'+i" class="sk-row" style="margin:0 16px 8px">
|
|
<view style="flex:1">
|
|
<view class="skeleton sk-line" style="width:40%;height:15px;margin-bottom:6px"></view>
|
|
<view class="skeleton sk-line" style="width:60%;height:12px"></view>
|
|
</view>
|
|
<view class="skeleton sk-line" style="width:48px;height:20px;border-radius:20px"></view>
|
|
</view>
|
|
</view>
|
|
<view v-else-if="bookings.length === 0" class="empty-state">
|
|
<text>暂无预约会员</text>
|
|
</view>
|
|
<view v-else class="booking-list">
|
|
<view class="flex-between" style="padding:0 16px;margin-bottom:8px">
|
|
<text class="stat-text">共 {{ bookings.length }} 人预约</text>
|
|
<text class="stat-text">{{ attendedCount }} 人已签到</text>
|
|
</view>
|
|
<view
|
|
v-for="(b, index) in bookings"
|
|
:key="b.id || index"
|
|
class="booking-item card list-item-enter"
|
|
:style="{ animationDelay: (index * 0.06) + 's' }"
|
|
>
|
|
<view class="flex-between">
|
|
<view class="booking-left">
|
|
<text class="member-name">{{ b.memberName || '会员' + b.memberId }}</text>
|
|
<text class="booking-time">预约时间: {{ formatDateTime(b.createdAt) }}</text>
|
|
</view>
|
|
<view :class="['tag', getBookingStatusClass(b.status)]">
|
|
{{ getBookingStatusLabel(b.status) }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<view class="safe-area-bottom" style="height:80px"></view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getCourseDetail, getBookingsByCourseId, startCourse, endCourse } from '@/api/course.js'
|
|
import { getSignInRecords } from '@/api/checkin.js'
|
|
import {
|
|
formatDate,
|
|
formatTime,
|
|
formatDateTime,
|
|
getCourseStatusLabel,
|
|
getCourseStatusClass
|
|
} from '@/utils/index.js'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
courseId: null,
|
|
course: {},
|
|
typeName: '',
|
|
detailLoading: true,
|
|
activeTab: 'schedule',
|
|
|
|
signinRecords: [],
|
|
signinLoading: false,
|
|
|
|
bookings: [],
|
|
bookingLoading: false,
|
|
|
|
// 开课/结课
|
|
startLoading: false,
|
|
endLoading: false,
|
|
|
|
tabs: [
|
|
{ key: 'schedule', label: '时间表' },
|
|
{ key: 'signin', label: '签到情况' },
|
|
{ key: 'bookings', label: '预约会员' }
|
|
]
|
|
}
|
|
},
|
|
computed: {
|
|
/** 是否显示操作区域：状态为正常(0) 或 进行中(3)，且未被删除 */
|
|
showCourseActions() {
|
|
const c = this.course
|
|
if (c.deletedAt) return false
|
|
const s = Number(c.status)
|
|
return s === 0 || s === 3
|
|
},
|
|
/** 是否已开课 */
|
|
isStarted() {
|
|
return !!this.course.actualStartTime
|
|
},
|
|
/** 是否已结课 */
|
|
isEnded() {
|
|
return !!this.course.actualEndTime
|
|
},
|
|
/** 是否可以开课：状态为正常(0)，未开课，当前时间在 startTime ~ startTime+10分钟内 */
|
|
canStartCourse() {
|
|
const c = this.course
|
|
if (!c.startTime) return false
|
|
if (Number(c.status) !== 0) return false
|
|
if (c.actualStartTime) return false
|
|
const now = Date.now()
|
|
const start = new Date(c.startTime).getTime()
|
|
const deadline = start + 10 * 60 * 1000
|
|
return now >= start && now <= deadline
|
|
},
|
|
/** 是否可以结课：已开课且未结课，当前时间在 endTime-10分钟 ~ endTime+10分钟内 */
|
|
canEndCourse() {
|
|
const c = this.course
|
|
if (!c.actualStartTime) return false
|
|
if (c.actualEndTime) return false
|
|
if (!c.endTime) return false
|
|
const now = Date.now()
|
|
const end = new Date(c.endTime).getTime()
|
|
const earliest = end - 10 * 60 * 1000
|
|
const latest = end + 10 * 60 * 1000
|
|
return now >= earliest && now <= latest
|
|
},
|
|
/** 开课按钮是否可显示：状态正常(0) 且 未开课 */
|
|
showStartButton() {
|
|
const c = this.course
|
|
if (!c.startTime) return false
|
|
if (Number(c.status) !== 0) return false
|
|
if (c.actualStartTime) return false
|
|
return true
|
|
},
|
|
/** 结课按钮是否可显示：已开课 且 未结课 */
|
|
showEndButton() {
|
|
const c = this.course
|
|
if (!c.actualStartTime) return false
|
|
if (c.actualEndTime) return false
|
|
return true
|
|
},
|
|
/** 开课按钮提示文字 */
|
|
startButtonHint() {
|
|
if (!this.course.startTime) return ''
|
|
if (Number(this.course.status) !== 0) return '课程状态不允许开课'
|
|
if (this.course.actualStartTime) return '已开课'
|
|
const now = Date.now()
|
|
const start = new Date(this.course.startTime).getTime()
|
|
if (now < start) {
|
|
const remain = Math.ceil((start - now) / 60000)
|
|
return `距离开课还有${this.formatDuration(remain)}`
|
|
}
|
|
const deadline = start + 10 * 60 * 1000
|
|
if (now > deadline) return '已超过开课时限（开课后10分钟）'
|
|
const remain = Math.ceil((deadline - now) / 60000)
|
|
return `请在 ${remain} 分钟内开课`
|
|
},
|
|
/** 结课按钮提示文字 */
|
|
endButtonHint() {
|
|
if (!this.course.endTime) return ''
|
|
if (!this.course.actualStartTime) return '尚未开课'
|
|
if (this.course.actualEndTime) return '已结课'
|
|
const now = Date.now()
|
|
const end = new Date(this.course.endTime).getTime()
|
|
const earliest = end - 10 * 60 * 1000
|
|
const latest = end + 10 * 60 * 1000
|
|
if (now < earliest) {
|
|
const remain = Math.ceil((earliest - now) / 60000)
|
|
return `距离开放结课还有${this.formatDuration(remain)}`
|
|
}
|
|
if (now > latest) return '已超过结课时限（结课后10分钟）'
|
|
const remain = Math.ceil((latest - now) / 60000)
|
|
return `请在 ${remain} 分钟内结课`
|
|
},
|
|
scheduleItems() {
|
|
const items = [
|
|
{ label: '课程名称', value: this.course.courseName || '--' },
|
|
{ label: '课程日期', value: this.formatDate(this.course.startTime) },
|
|
{ label: '上课时间', value: this.formatTimeStr(this.course.startTime) + ' - ' + this.formatTimeStr(this.course.endTime), highlight: true },
|
|
{ label: '上课地点', value: this.course.location || '未设置' },
|
|
{ label: '课程类型', value: this.typeName || '未知' },
|
|
{ label: '人数限制', value: (this.course.currentMembers || 0) + ' / ' + (this.course.maxMembers || 0) + '人' }
|
|
]
|
|
if (this.course.actualStartTime) {
|
|
items.push({ label: '实际开课', value: this.formatDateTime(this.course.actualStartTime) })
|
|
}
|
|
if (this.course.actualEndTime) {
|
|
items.push({ label: '实际结课', value: this.formatDateTime(this.course.actualEndTime) })
|
|
items.push({
|
|
label: '结课方式',
|
|
value: this.isAutoEnded(this.course) ? '系统自动结课' : '教练手动结课'
|
|
})
|
|
}
|
|
return items
|
|
},
|
|
attendedCount() {
|
|
return this.bookings.filter(b => b.status === 2 || b.status === 'ATTENDED').length
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.courseId = Number(options.id)
|
|
if (this.courseId) {
|
|
this.loadCourseDetail()
|
|
}
|
|
},
|
|
methods: {
|
|
formatDate,
|
|
formatTimeStr: formatTime,
|
|
formatDateTime,
|
|
getCourseStatusLabel,
|
|
getCourseStatusClass,
|
|
|
|
async loadCourseDetail() {
|
|
this.detailLoading = true
|
|
try {
|
|
const detail = await getCourseDetail(this.courseId)
|
|
this.course = detail
|
|
this.typeName = detail.courseType?.typeName || detail.typeName || ''
|
|
if (detail.description) {
|
|
this.course.description = detail.description
|
|
}
|
|
} catch (e) {
|
|
console.error('加载课程详情失败:', e)
|
|
uni.showToast({ title: '加载失败', icon: 'none' })
|
|
} finally {
|
|
this.detailLoading = false
|
|
}
|
|
},
|
|
|
|
switchTab(key) {
|
|
this.activeTab = key
|
|
if (key === 'signin' && this.signinRecords.length === 0) {
|
|
this.loadSignInRecords()
|
|
} else if (key === 'bookings' && this.bookings.length === 0) {
|
|
this.loadBookings()
|
|
}
|
|
},
|
|
|
|
async loadSignInRecords() {
|
|
this.signinLoading = true
|
|
try {
|
|
const courseDate = this.course.startTime
|
|
? new Date(this.course.startTime).toISOString().slice(0, 10)
|
|
: new Date().toISOString().slice(0, 10)
|
|
const res = await getSignInRecords({
|
|
startDate: courseDate,
|
|
endDate: courseDate
|
|
})
|
|
this.signinRecords = Array.isArray(res?.data) ? res.data : (Array.isArray(res) ? res : [])
|
|
} catch (e) {
|
|
console.error('加载签到记录失败:', e)
|
|
this.signinRecords = []
|
|
} finally {
|
|
this.signinLoading = false
|
|
}
|
|
},
|
|
|
|
async loadBookings() {
|
|
this.bookingLoading = true
|
|
try {
|
|
const list = await getBookingsByCourseId(this.courseId)
|
|
this.bookings = Array.isArray(list) ? list : []
|
|
} catch (e) {
|
|
console.error('加载预约列表失败:', e)
|
|
this.bookings = []
|
|
} finally {
|
|
this.bookingLoading = false
|
|
}
|
|
},
|
|
|
|
getBookingStatusLabel(status) {
|
|
const n = Number(status)
|
|
if (n === 0 || status === 'PENDING') return '待确认'
|
|
if (n === 1 || status === 'CONFIRMED') return '已确认'
|
|
if (n === 2 || status === 'ATTENDED') return '已签到'
|
|
if (n === -1 || status === 'CANCELLED') return '已取消'
|
|
return '未知'
|
|
},
|
|
|
|
getBookingStatusClass(status) {
|
|
const n = Number(status)
|
|
if (n === 0 || status === 'PENDING') return 'tag-orange'
|
|
if (n === 1 || status === 'CONFIRMED') return 'tag-blue'
|
|
if (n === 2 || status === 'ATTENDED') return 'tag-green'
|
|
if (n === -1 || status === 'CANCELLED') return 'tag-gray'
|
|
return 'tag-gray'
|
|
},
|
|
|
|
isAutoEnded(course) {
|
|
// 自动结课：已结束 且 实际结束时间与理论结束时间相同（调度器自动设置）
|
|
return !!(course && course.status === 2 && course.actualEndTime && course.endTime && course.actualEndTime === course.endTime)
|
|
},
|
|
|
|
/** 格式化倒计时：总分钟数 -> 天/小时/分钟 */
|
|
formatDuration(totalMinutes) {
|
|
if (totalMinutes <= 0) return ''
|
|
const days = Math.floor(totalMinutes / (24 * 60))
|
|
const hours = Math.floor((totalMinutes % (24 * 60)) / 60)
|
|
const mins = totalMinutes % 60
|
|
const parts = []
|
|
if (days > 0) parts.push(`${days} 天`)
|
|
if (hours > 0) parts.push(`${hours} 小时`)
|
|
if (mins > 0) parts.push(`${mins} 分钟`)
|
|
// 确保至少输出一部分（极端情况：恰好是天/小时的整数倍时，分钟为0）
|
|
if (parts.length === 0) parts.push('0 分钟')
|
|
return parts.join('')
|
|
},
|
|
|
|
/** 格式化当前时间为后端需要的 yyyy-MM-ddTHH:mm:ss（本地时间） */
|
|
formatLocalISO(date) {
|
|
const d = date || new Date()
|
|
const pad = (n) => String(n).padStart(2, '0')
|
|
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
|
|
},
|
|
|
|
async handleStartCourse() {
|
|
const hint = this.startButtonHint
|
|
const confirmRes = await new Promise((resolve) => {
|
|
uni.showModal({
|
|
title: '确认开课',
|
|
content: `点击确认后将以当前时间作为实际开课时间。${hint}`,
|
|
success: (r) => resolve(r.confirm),
|
|
fail: () => resolve(false)
|
|
})
|
|
})
|
|
if (!confirmRes) return
|
|
|
|
this.startLoading = true
|
|
try {
|
|
const now = this.formatLocalISO()
|
|
const res = await startCourse(this.courseId, now)
|
|
if (res.success) {
|
|
uni.showToast({ title: '开课成功', icon: 'success' })
|
|
await this.loadCourseDetail()
|
|
} else {
|
|
uni.showToast({ title: res.message || '开课失败', icon: 'none' })
|
|
}
|
|
} catch (e) {
|
|
const msg = e?.data?.message || e?.message || '开课失败'
|
|
uni.showToast({ title: msg, icon: 'none' })
|
|
} finally {
|
|
this.startLoading = false
|
|
}
|
|
},
|
|
|
|
async handleEndCourse() {
|
|
const hint = this.endButtonHint
|
|
const confirmRes = await new Promise((resolve) => {
|
|
uni.showModal({
|
|
title: '确认结课',
|
|
content: `点击确认后将以当前时间作为实际结课时间。${hint}`,
|
|
success: (r) => resolve(r.confirm),
|
|
fail: () => resolve(false)
|
|
})
|
|
})
|
|
if (!confirmRes) return
|
|
|
|
this.endLoading = true
|
|
try {
|
|
const now = this.formatLocalISO()
|
|
const res = await endCourse(this.courseId, now)
|
|
if (res.success) {
|
|
uni.showToast({ title: '结课成功', icon: 'success' })
|
|
await this.loadCourseDetail()
|
|
} else {
|
|
uni.showToast({ title: res.message || '结课失败', icon: 'none' })
|
|
}
|
|
} catch (e) {
|
|
const msg = e?.data?.message || e?.message || '结课失败'
|
|
uni.showToast({ title: msg, icon: 'none' })
|
|
} finally {
|
|
this.endLoading = false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.course-detail-page {
|
|
min-height: 100vh;
|
|
background: #f6f8fc;
|
|
}
|
|
|
|
.page-scroll { height: 100vh; }
|
|
|
|
.card-fade-in {
|
|
animation: cardFadeIn 0.4s ease-out both;
|
|
}
|
|
|
|
.detail-card {
|
|
background: #ffffff;
|
|
margin: 12px 16px;
|
|
border-radius: 14px;
|
|
padding: 20px;
|
|
box-shadow: 0 2px 12px rgba(0,0,0,0.04);
|
|
}
|
|
|
|
.detail-header { margin-bottom: 20px; }
|
|
|
|
.detail-title {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: #0b1a33;
|
|
flex: 1;
|
|
}
|
|
|
|
.detail-type {
|
|
font-size: 13px;
|
|
color: #4f7cff;
|
|
margin-top: 6px;
|
|
display: block;
|
|
}
|
|
|
|
.detail-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 14px 20px;
|
|
}
|
|
|
|
.detail-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.d-label { font-size: 12px; color: #94a3b8; }
|
|
.d-value { font-size: 14px; color: #334155; font-weight: 500; }
|
|
|
|
.detail-desc {
|
|
margin-top: 20px;
|
|
padding-top: 16px;
|
|
border-top: 1px solid #f0f3f8;
|
|
}
|
|
|
|
.d-desc-text {
|
|
font-size: 14px;
|
|
color: #64748b;
|
|
line-height: 1.6;
|
|
margin-top: 6px;
|
|
display: block;
|
|
}
|
|
|
|
/* Tab */
|
|
.tab-bar {
|
|
display: flex;
|
|
background: #ffffff;
|
|
margin: 0 16px;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.03);
|
|
}
|
|
|
|
.tab-item {
|
|
flex: 1;
|
|
text-align: center;
|
|
padding: 14px 0;
|
|
font-size: 14px;
|
|
color: #64748b;
|
|
position: relative;
|
|
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.tab-item:active { background: #f4f7fd; }
|
|
|
|
.tab-item.active {
|
|
color: #4f7cff;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.tab-indicator {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 28px;
|
|
height: 3px;
|
|
background: #4f7cff;
|
|
border-radius: 2px;
|
|
animation: tabSlideIn 0.25s ease-out;
|
|
}
|
|
|
|
@keyframes tabSlideIn {
|
|
from { width: 0; }
|
|
to { width: 28px; }
|
|
}
|
|
|
|
.tab-content { padding-top: 12px; }
|
|
|
|
/* 时间表 */
|
|
.schedule-card { border-radius: 14px; }
|
|
|
|
.schedule-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 12px 0;
|
|
border-bottom: 1px solid #f0f3f8;
|
|
transition: background 0.15s;
|
|
}
|
|
|
|
.schedule-item:active { background: #fafbff; }
|
|
|
|
.schedule-item:last-child { border-bottom: none; }
|
|
|
|
.s-label { font-size: 14px; color: #94a3b8; }
|
|
.s-value { font-size: 14px; color: #334155; font-weight: 500; }
|
|
.s-highlight { color: #4f7cff; font-weight: 600; }
|
|
|
|
/* 签到/预约列表 */
|
|
.signin-list, .booking-list { padding: 0; }
|
|
|
|
.signin-item, .booking-item {
|
|
border-radius: 12px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.member-name {
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
color: #1e293b;
|
|
display: block;
|
|
}
|
|
|
|
.signin-time, .booking-time {
|
|
font-size: 12px;
|
|
color: #94a3b8;
|
|
margin-top: 4px;
|
|
display: block;
|
|
}
|
|
|
|
.stat-text { font-size: 13px; color: #64748b; }
|
|
|
|
/* ---- 实际时间记录 ---- */
|
|
.actual-time-section {
|
|
background: #fffbeb;
|
|
border: 1px solid #fde68a;
|
|
border-radius: 12px;
|
|
padding: 14px 16px;
|
|
margin: 0 16px 12px;
|
|
}
|
|
|
|
.at-title {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: #92400e;
|
|
margin-bottom: 10px;
|
|
display: block;
|
|
}
|
|
|
|
.at-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 6px 0;
|
|
}
|
|
|
|
.at-label { font-size: 13px; color: #a16207; }
|
|
.at-value { font-size: 13px; color: #92400e; font-weight: 500; }
|
|
|
|
.at-note {
|
|
margin-top: 8px;
|
|
padding-top: 8px;
|
|
border-top: 1px dashed #fde68a;
|
|
font-size: 12px;
|
|
color: #92400e;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* ---- 开课/结课操作按钮 ---- */
|
|
.course-actions {
|
|
margin: 0 16px 12px;
|
|
background: #ffffff;
|
|
border-radius: 14px;
|
|
padding: 16px;
|
|
box-shadow: 0 2px 12px rgba(0,0,0,0.04);
|
|
}
|
|
|
|
.action-hint {
|
|
margin-bottom: 10px;
|
|
padding: 6px 10px;
|
|
background: #eff6ff;
|
|
border-radius: 8px;
|
|
border: 1px solid #bfdbfe;
|
|
}
|
|
|
|
.hint-text {
|
|
font-size: 12px;
|
|
color: #3b82f6;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.action-buttons {
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
|
|
.action-btn {
|
|
flex: 1;
|
|
height: 46px;
|
|
border-radius: 12px;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
border: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.action-btn::after { border: none; }
|
|
|
|
.start-btn {
|
|
background: linear-gradient(135deg, #4f7cff, #6366f1);
|
|
color: white;
|
|
box-shadow: 0 4px 14px rgba(79,124,255,0.35);
|
|
}
|
|
|
|
.start-btn:active {
|
|
transform: scale(0.97);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.action-btn[disabled] {
|
|
opacity: 0.5;
|
|
transform: none;
|
|
}
|
|
|
|
.btn-disabled {
|
|
opacity: 0.45 !important;
|
|
transform: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.end-btn {
|
|
background: linear-gradient(135deg, #ef4444, #f97316);
|
|
color: white;
|
|
box-shadow: 0 4px 14px rgba(239,68,68,0.3);
|
|
}
|
|
|
|
.end-btn:active {
|
|
transform: scale(0.97);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.end-btn[disabled] {
|
|
opacity: 0.5;
|
|
transform: none;
|
|
}
|
|
</style>
|