271 lines
12 KiB
Vue
271 lines
12 KiB
Vue
<template>
|
|
<view class="detail-root">
|
|
<view class="detail-page">
|
|
<view class="header-wrap" :style="{ paddingTop: statusBarHeight + 'px' }">
|
|
<view class="nav-bar" :style="{ height: navBarHeight + 'px' }">
|
|
<text class="back-btn" @click="goBack">‹</text>
|
|
<text class="nav-title">课程详情</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="cover-area">
|
|
<view class="cover-bg">
|
|
<text class="cover-text">{{ course.typeChar }}</text>
|
|
</view>
|
|
<view class="status-tag" v-if="course.isFull">已约满</view>
|
|
</view>
|
|
|
|
<scroll-view class="content" scroll-y :style="{ height: 'calc(100vh - ' + totalHeaderHeight + 'px)' }">
|
|
<view class="content-inner">
|
|
<view class="course-header">
|
|
<view class="header-top">
|
|
<text class="course-title">{{ course.courseName }}</text>
|
|
<view class="difficulty-badge" :class="'diff-' + course.difficultyLevel">
|
|
{{ course.difficultyLabel }}
|
|
</view>
|
|
</view>
|
|
<view class="header-meta">
|
|
<text class="meta-type">{{ course.tag }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="info-card">
|
|
<view class="info-row">
|
|
<view class="info-item">
|
|
<text class="info-label">教练</text>
|
|
<text class="info-value">{{ course.coachName }}</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="info-label">地点</text>
|
|
<text class="info-value">{{ course.location }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="divider"></view>
|
|
<view class="info-row">
|
|
<view class="info-item">
|
|
<text class="info-label">日期时间</text>
|
|
<text class="info-value">{{ course.startTime }} - {{ course.endTime }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="divider"></view>
|
|
<view class="info-row">
|
|
<view class="info-item">
|
|
<text class="info-label">时长</text>
|
|
<text class="info-value">{{ course.duration }} 分钟</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="info-label">人数</text>
|
|
<text class="info-value">
|
|
{{ course.currentMembers }} / {{ course.maxMembers }}
|
|
<text v-if="course.maxMembers - course.currentMembers > 0" class="remain-text">
|
|
(剩{{ course.maxMembers - course.currentMembers }}位)
|
|
</text>
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="section-card">
|
|
<text class="section-title">• 课程介绍</text>
|
|
<text class="desc-text">{{ course.description }}</text>
|
|
</view>
|
|
|
|
<view class="section-card">
|
|
<text class="section-title">• 课程信息</text>
|
|
<view class="detail-grid">
|
|
<view class="detail-item">
|
|
<text class="detail-label">课程类型</text>
|
|
<text class="detail-value">{{ course.typeName || '团课' }}</text>
|
|
</view>
|
|
<view class="detail-item">
|
|
<text class="detail-label">基础难度</text>
|
|
<view class="stars">
|
|
<text v-for="i in 10" :key="i" class="star" :class="{ filled: i <= course.difficulty }">
|
|
{{ i <= course.difficulty ? '★' : '☆' }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
<view class="detail-item">
|
|
<text class="detail-label">分类</text>
|
|
<text class="detail-value">{{ course.categoryLabel || '综合' }}</text>
|
|
</view>
|
|
<view class="detail-item">
|
|
<text class="detail-label">储值消耗</text>
|
|
<text class="detail-value price">{{ course.storedValueAmount > 0 ? course.storedValueAmount + '元' : '免费' }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="bottom-safe"></view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<view class="bottom-bar">
|
|
<view class="bottom-info">
|
|
<text class="bottom-price" :class="{ free: course.storedValueAmount === 0 }">
|
|
{{ course.storedValueAmount > 0 ? course.storedValueAmount : '免费' }}
|
|
</text>
|
|
<text class="bottom-desc">/ 次</text>
|
|
</view>
|
|
<button class="booking-btn" :class="{ disabled: course.isFull }" :disabled="course.isFull"
|
|
@click="handleBooking">
|
|
{{ course.isFull ? '已约满' : '立即预约' }}
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</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,
|
|
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) {
|
|
const systemInfo = uni.getSystemInfoSync()
|
|
const statusBarHeight = systemInfo.statusBarHeight || 20
|
|
let navBarHeight = 44
|
|
// #ifdef MP-WEIXIN
|
|
const menuButton = uni.getMenuButtonBoundingClientRect()
|
|
if (menuButton) {
|
|
navBarHeight = (menuButton.top - statusBarHeight) * 2 + menuButton.height
|
|
}
|
|
// #endif
|
|
this.statusBarHeight = statusBarHeight
|
|
this.navBarHeight = navBarHeight
|
|
this.totalHeaderHeight = statusBarHeight + navBarHeight
|
|
if (options.id) this.loadCourseDetail(options.id)
|
|
},
|
|
methods: {
|
|
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() },
|
|
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>
|
|
|
|
<style scoped>
|
|
.detail-page { min-height: 100vh; background: #F5F7FA; overflow-x: hidden; }
|
|
.header-wrap { background: #1A1A1A; }
|
|
.nav-bar { background: #1A1A1A; padding: 0 20px; display: flex; align-items: center; }
|
|
.back-btn { font-size: 26px; color: #FFFFFF; font-weight: 700; margin-right: 10px; line-height: 1; }
|
|
.nav-title { font-size: 18px; font-weight: 700; color: #FFFFFF; }
|
|
.cover-area { height: 180px; position: relative; overflow: hidden; }
|
|
.cover-bg { width: 100%; height: 100%; background: linear-gradient(135deg, #00C853, #00BFA5); display: flex; align-items: center; justify-content: center; }
|
|
.cover-text { font-size: 56px; font-weight: 700; color: rgba(255,255,255,0.9); }
|
|
.status-tag { position: absolute; top: 14px; right: 16px; background: #FF5252; color: #FFFFFF; font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 40px; }
|
|
.content-inner { padding-bottom: 100px; }
|
|
.course-header { background: #FFFFFF; padding: 20px 16px 16px; border-radius: 20px 20px 0 0; margin-top: -16px; position: relative; z-index: 1; }
|
|
.header-top { display: flex; justify-content: space-between; align-items: center; }
|
|
.course-title { font-size: 22px; font-weight: 700; color: #1E1E1E; }
|
|
.difficulty-badge { padding: 4px 12px; border-radius: 40px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
|
.diff-low { background: rgba(0,230,118,0.15); color: #00C853; }
|
|
.diff-mid { background: rgba(255,165,2,0.15); color: #FFA502; }
|
|
.diff-high { background: rgba(255,82,82,0.15); color: #FF5252; }
|
|
.header-meta { margin-top: 8px; }
|
|
.meta-type { font-size: 13px; color: #00C853; background: rgba(0,230,118,0.15); padding: 3px 10px; border-radius: 20px; font-weight: 500; }
|
|
.info-card { background: #FFFFFF; margin: 0 16px; border-radius: 20px; padding: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.06); margin-top: 12px; }
|
|
.info-row { display: flex; justify-content: space-between; }
|
|
.info-item { display: flex; flex-direction: column; flex: 1; }
|
|
.info-label { font-size: 12px; color: #7A7E84; margin-bottom: 4px; }
|
|
.info-value { font-size: 14px; font-weight: 600; color: #1E1E1E; }
|
|
.remain-text { font-size: 12px; color: #00C853; font-weight: 500; }
|
|
.divider { height: 1px; background: #EEEEEE; margin: 14px 0; }
|
|
.section-card { background: #FFFFFF; margin: 12px 16px; border-radius: 20px; padding: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
|
|
.section-title { font-size: 16px; font-weight: 700; color: #1E1E1E; display: block; margin-bottom: 12px; }
|
|
.desc-text { font-size: 14px; color: #7A7E84; line-height: 1.7; }
|
|
.detail-grid { display: flex; flex-wrap: wrap; }
|
|
.detail-item { width: 50%; display: flex; flex-direction: column; margin-bottom: 14px; }
|
|
.detail-label { font-size: 12px; color: #7A7E84; }
|
|
.detail-value { font-size: 14px; font-weight: 600; color: #1E1E1E; margin-top: 4px; }
|
|
.detail-value.price { color: #00C853; }
|
|
.stars { display: flex; flex-wrap: wrap; }
|
|
.star { font-size: 13px; color: #E0E0E0; }
|
|
.star.filled { color: #FFA502; }
|
|
.bottom-safe { height: 30px; }
|
|
.bottom-bar { position: fixed; bottom: 0; left: 0; right: 0; background: #FFFFFF; padding: 12px 16px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; box-shadow: 0 -2px 12px rgba(0,0,0,0.06); z-index: 100; }
|
|
.bottom-info { display: flex; align-items: baseline; }
|
|
.bottom-price { font-size: 22px; font-weight: 700; color: #00C853; }
|
|
.bottom-price.free { color: #00C853; }
|
|
.bottom-desc { font-size: 13px; color: #7A7E84; margin-left: 2px; }
|
|
.booking-btn { background: #00E676; color: #1A1A1A; border: none; padding: 12px 32px; border-radius: 40px; font-weight: 700; font-size: 16px; box-shadow: 0 4px 14px rgba(0,230,118,0.35); line-height: 1.2; }
|
|
.booking-btn::after { border: none; }
|
|
.booking-btn.disabled { background: #E0E0E0; color: #BDBDBD; box-shadow: none; }
|
|
</style>
|