实现部分页面前后端相通
This commit is contained in:
@@ -117,13 +117,19 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const courseApi = require('../../api/course')
|
||||
const bookingApi = require('../../api/booking')
|
||||
const store = require('../../store/index')
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
statusBarHeight: 0,
|
||||
navBarHeight: 44,
|
||||
totalHeaderHeight: 44,
|
||||
course: { id: 1, courseName: '综合力量训练', coachName: '张教练', location: '力量区', typeChar: '力', tag: '热门', category: 'strength', categoryLabel: '力量训练', typeName: '自由重量杠铃/哑铃', startTime: '2026-07-15 10:00', endTime: '2026-07-15 10:45', duration: 45, maxMembers: 20, currentMembers: 8, isFull: false, difficulty: 5, difficultyLevel: 'mid', difficultyLabel: '中等', storedValueAmount: 0, description: '综合力量训练课程，涵盖杠铃、哑铃等自由重量训练，适合有一定基础的学员。' }
|
||||
loading: true,
|
||||
submitting: false,
|
||||
course: { id: 0, courseName: '加载中...', coachName: '', location: '', typeChar: '课', tag: '', category: '', categoryLabel: '', typeName: '', startTime: '', endTime: '', duration: 0, maxMembers: 0, currentMembers: 0, isFull: false, difficulty: 0, difficultyLevel: 'mid', difficultyLabel: '', storedValueAmount: 0, description: '' }
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
@@ -142,12 +148,74 @@
|
||||
if (options.id) this.loadCourseDetail(options.id)
|
||||
},
|
||||
methods: {
|
||||
loadCourseDetail(id) {
|
||||
const m = { 1: { courseName: '综合力量训练', coachName: '张教练', location: '力量区', typeChar: '力', tag: '热门', category: 'strength', categoryLabel: '力量训练', typeName: '自由重量杠铃/哑铃', startTime: '2026-07-15 10:00', endTime: '2026-07-15 10:45', duration: 45, maxMembers: 20, currentMembers: 8, isFull: false, difficulty: 5, difficultyLevel: 'mid', difficultyLabel: '中等', description: '综合力量训练课程，涵盖杠铃、哑铃等自由重量训练，适合有一定基础的学员。课程包括热身、主要力量训练组和拉伸放松三个环节，全面提升力量水平和身体协调性。' }, 2: { courseName: '流瑜伽 · 中级', coachName: '李教练', location: '3号教室', typeChar: '瑜', tag: '瑜伽', category: 'yoga', categoryLabel: '瑜伽', typeName: '柔韧与平衡类', startTime: '2026-07-15 14:00', endTime: '2026-07-15 15:00', duration: 60, maxMembers: 15, currentMembers: 15, isFull: true, difficulty: 5, difficultyLevel: 'mid', difficultyLabel: '中等', description: '流瑜伽中级课程，适合有一定瑜伽基础的学员。通过连贯的体式流动，提升身体柔韧性、核心力量和平衡能力。' }, 3: { courseName: '动感单车 · 冲刺', coachName: '王教练', location: '单车房', typeChar: '车', tag: '有氧', category: 'cardio', categoryLabel: '有氧运动', typeName: '基础有氧与热身', startTime: '2026-07-15 18:00', endTime: '2026-07-15 18:40', duration: 40, maxMembers: 25, currentMembers: 12, isFull: false, difficulty: 4, difficultyLevel: 'low', difficultyLabel: '入门', description: '高强度动感单车课程，结合节奏音乐，在教练的带领下进行冲刺、爬坡、耐力等训练。' }, 4: { courseName: 'HIIT训练', coachName: '赵教练', location: '多功能厅', typeChar: 'HI', tag: '有氧', category: 'cardio', categoryLabel: '有氧运动', typeName: '高强度与爆发力', startTime: '2026-07-15 12:00', endTime: '2026-07-15 12:30', duration: 30, maxMembers: 15, currentMembers: 10, isFull: false, difficulty: 7, difficultyLevel: 'high', difficultyLabel: '困难', description: '高强度间歇训练（HIIT），通过短时间高强度运动和短暂休息交替进行，高效燃脂并提升心肺功能。' }, 5: { courseName: '普拉提', coachName: '李教练', location: '2号教室', typeChar: '普', tag: '瑜伽', category: 'yoga', categoryLabel: '瑜伽', typeName: '柔韧与平衡类', startTime: '2026-07-15 16:00', endTime: '2026-07-15 16:50', duration: 50, maxMembers: 12, currentMembers: 5, isFull: false, difficulty: 4, difficultyLevel: 'low', difficultyLabel: '入门', description: '普拉提课程注重核心力量和身体控制，通过精准的动作改善体态、增强核心稳定性和身体柔韧性。' }, 6: { courseName: '搏击操', coachName: '刘教练', location: '搏击区', typeChar: '搏', tag: '有氧', category: 'cardio', categoryLabel: '有氧运动', typeName: '高强度与爆发力', startTime: '2026-07-15 07:00', endTime: '2026-07-15 07:45', duration: 45, maxMembers: 20, currentMembers: 6, isFull: false, difficulty: 5, difficultyLevel: 'mid', difficultyLabel: '中等', description: '搏击操结合拳击、踢拳等动作元素，在动感音乐下进行高强度有氧训练。' } }
|
||||
if (m[id]) this.course = { ...this.course, ...m[id], id: parseInt(id) }
|
||||
async loadCourseDetail(id) {
|
||||
this.loading = true
|
||||
try {
|
||||
const detail = await courseApi.getCourseDetail(id)
|
||||
if (detail) {
|
||||
const bd = detail.calculatedDifficulty || detail.baseDifficulty || 5
|
||||
const st = detail.startTime || ''
|
||||
const et = detail.endTime || ''
|
||||
const duration = st && et ? Math.round((new Date(et.replace(/-/g, '/')) - new Date(st.replace(/-/g, '/'))) / 60000) : 45
|
||||
const tn = detail.typeName || (detail.typeInfo && detail.typeInfo.typeName) || ''
|
||||
const cat = detail.typeCategory || (detail.typeInfo && detail.typeInfo.category) || ''
|
||||
|
||||
this.course = {
|
||||
id: detail.id || parseInt(id),
|
||||
courseName: detail.courseName || '未命名课程',
|
||||
coachName: detail.coachName || '',
|
||||
location: detail.location || '',
|
||||
typeChar: tn.charAt(0) || '课',
|
||||
tag: cat || '团课',
|
||||
category: cat,
|
||||
categoryLabel: cat,
|
||||
typeName: tn,
|
||||
startTime: st,
|
||||
endTime: et,
|
||||
duration: duration,
|
||||
maxMembers: detail.maxMembers || 0,
|
||||
currentMembers: detail.currentMembers || 0,
|
||||
isFull: (detail.currentMembers || 0) >= (detail.maxMembers || 1) && detail.maxMembers > 0,
|
||||
difficulty: bd,
|
||||
difficultyLevel: bd <= 3 ? 'low' : bd <= 6 ? 'mid' : 'high',
|
||||
difficultyLabel: bd <= 3 ? '入门' : bd <= 6 ? '中等' : '困难',
|
||||
storedValueAmount: detail.storedValueAmount || 0,
|
||||
description: detail.description || '暂无课程介绍',
|
||||
labels: detail.labels || [],
|
||||
coverImage: detail.coverImage || ''
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('加载课程详情失败:', e)
|
||||
uni.showToast({ title: '加载课程详情失败', icon: 'none' })
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
goBack() { uni.navigateBack() },
|
||||
handleBooking() { if (this.course.isFull) return; uni.showToast({ title: '预约成功', icon: 'success' }); setTimeout(() => { uni.navigateBack() }, 1000) }
|
||||
async handleBooking() {
|
||||
if (this.course.isFull || this.submitting) return
|
||||
const memberInfo = store.getMemberInfo()
|
||||
if (!memberInfo || !memberInfo.memberId) {
|
||||
uni.showToast({ title: '请先登录', icon: 'none' })
|
||||
return
|
||||
}
|
||||
this.submitting = true
|
||||
try {
|
||||
await bookingApi.bookCourse({
|
||||
courseId: this.course.id,
|
||||
memberId: memberInfo.memberId || memberInfo.id
|
||||
})
|
||||
uni.showToast({ title: '预约成功', icon: 'success' })
|
||||
setTimeout(() => { uni.navigateBack() }, 1000)
|
||||
} catch (e) {
|
||||
console.error('预约失败:', e)
|
||||
const msg = (e.data && e.data.message) || '预约失败，请重试'
|
||||
uni.showToast({ title: msg, icon: 'none' })
|
||||
} finally {
|
||||
this.submitting = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user