novalon/gym-manage
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

实现大部分页面前后端互通

Browse Source
This commit is contained in:
liwentao
2026-07-17 15:48:36 +08:00
parent a9ccdab421
commit 2e7c2ced43
7 changed files with 560 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files
gym-manage-uniapp/pages/course-detail/course-detail.vue
+235 -117
View File
@@ -1,116 +1,124 @@
<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">&#8249;</text>
<text class="nav-title">课程详情</text>
</view>
<view class="header-wrap" :style="{ paddingTop: statusBarHeight + 'px' }">
<view class="nav-bar" :style="{ height: navBarHeight + 'px' }">
<text class="back-btn" @click="goBack">&#8249;</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 class="cover-area">
<image v-if="course.coverImage" class="cover-img" :src="course.coverImage" mode="aspectFill"
@error="course.coverError = true" />
<view v-if="!course.coverImage || course.coverError" class="cover-bg">
<text class="cover-text">{{ course.typeName ? course.typeName.slice(0, 2) : '课程' }}</text>
</view>
<view class="status-tag" :class="course.statusClass" v-if="course.statusText">{{ course.statusText }}</view>
</view>
<scroll-view class="content" scroll-y :style="{ height: 'calc(100vh - ' + totalHeaderHeight + 'px)' }">
<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">&#8226; 课程介绍</text>
<text class="desc-text">{{ course.description }}</text>
</view>
<view class="section-card">
<text class="section-title">&#8226; 课程信息</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 ? '&#9733;' : '&#9734;' }}
</text>
<view class="course-header">
<view class="header-top">
<text class="course-title">{{ course.courseName }}</text>
<view class="difficulty-badge" :class="'diff-' + course.difficultyLevel" v-if="course.difficultyLabel">
{{ course.difficultyLabel }}
</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 class="header-meta" v-if="course.category">
<text class="meta-type">{{ course.category }}</text>
<text class="meta-type-name" v-if="course.typeName"> {{ course.typeName }}</text>
</view>
</view>
</view>
<view class="bottom-safe"></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.fullDate }}</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.shortTime }} - {{ course.endShortTime }}</text>
</view>
<view class="info-item">
<text class="info-label">时长</text>
<text class="info-value">{{ course.duration }}</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.currentMembers }} / {{ course.maxMembers }}
<text v-if="course.maxMembers - course.currentMembers > 0" class="remain-text">
(剩{{ course.maxMembers - course.currentMembers }}位)
</text>
</text>
</view>
<view class="info-item">
<text class="info-label">储值消耗</text>
<text class="info-value price">{{ course.storedValueAmount > 0 ? '￥' + course.storedValueAmount + '/次' : '免费' }}</text>
</view>
</view>
</view>
<view class="section-card" v-if="course.description">
<text class="section-title">&#8226; 课程介绍</text>
<text class="desc-text">{{ course.description }}</text>
</view>
<view class="section-card">
<text class="section-title">&#8226; 课程信息</text>
<view class="detail-grid">
<view class="detail-item" v-if="course.typeName">
<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 || 0) }">
{{ i <= (course.difficulty || 0) ? '&#9733;' : '&#9734;' }}
</text>
</view>
</view>
<view class="detail-item" v-if="course.category">
<text class="detail-label">分类</text>
<text class="detail-value">{{ course.category }}</text>
</view>
</view>
</view>
<view class="bottom-safe"></view>
</view>
</scroll-view>
</view>
</scroll-view>
<view class="bottom-bar">
<view class="bottom-info">
<text class="bottom-price" :class="{ free: course.storedValueAmount === 0 }">
{{ course.storedValueAmount > 0 ? course.storedValueAmount : '免费' }}
{{ course.storedValueAmount > 0 ? '￥' + course.storedValueAmount : '免费' }}
</text>
<text class="bottom-desc">/ 次</text>
</view>
<button class="booking-btn" :class="{ disabled: course.isFull }" :disabled="course.isFull"
<button class="booking-btn" :class="{ disabled: !course.canBook }" :disabled="!course.canBook"
@click="handleBooking">
{{ course.isFull ? '已约满' : '立即预约' }}
{{ course.btnText }}
</button>
</view>
</view>
@@ -129,7 +137,34 @@
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: '' }
course: {
id: 0,
courseName: '加载中...',
coachName: '',
location: '',
typeName: '',
category: '',
startTime: '',
endTime: '',
fullDate: '',
shortTime: '--',
endShortTime: '--',
duration: '',
maxMembers: 0,
currentMembers: 0,
isFull: false,
canBook: false,
btnText: '立即预约',
difficulty: 0,
difficultyLevel: 'mid',
difficultyLabel: '',
storedValueAmount: 0,
description: '',
statusText: '',
statusClass: '',
coverImage: '',
coverError: false
}
}
},
onLoad(options) {
@@ -153,36 +188,99 @@
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
// 基础难度：优先 calculatedDifficulty，其次 baseDifficulty
const bd = detail.calculatedDifficulty || detail.baseDifficulty || 0
// 名称来源：API 可能已 join 返回 typeName / coachName / category
const tn = detail.typeName || (detail.typeInfo && detail.typeInfo.typeName) || ''
const cat = detail.typeCategory || (detail.typeInfo && detail.typeInfo.category) || ''
const desc = detail.description || (detail.typeInfo && detail.typeInfo.description) || ''
// 日期解析（兼容 ISO 格式 "2026-07-15T16:45:00" 和空格格式）
const st = detail.startTime || ''
const et = detail.endTime || ''
const dt = st ? new Date(st.replace(/ /, 'T')) : null
const edt = et ? new Date(et.replace(/ /, 'T')) : null
// 格式化
const hh = dt && !isNaN(dt) ? String(dt.getHours()).padStart(2, '0') : ''
const mm = dt && !isNaN(dt) ? String(dt.getMinutes()).padStart(2, '0') : ''
const ehh = edt && !isNaN(edt) ? String(edt.getHours()).padStart(2, '0') : ''
const emm = edt && !isNaN(edt) ? String(edt.getMinutes()).padStart(2, '0') : ''
const y = dt && !isNaN(dt) ? String(dt.getFullYear()) : ''
const mo = dt && !isNaN(dt) ? String(dt.getMonth() + 1).padStart(2, '0') : ''
const d = dt && !isNaN(dt) ? String(dt.getDate()).padStart(2, '0') : ''
// 时长
let durationStr = ''
if (dt && edt && !isNaN(dt) && !isNaN(edt)) {
const diffMin = Math.round((edt - dt) / 60000)
if (diffMin > 0) {
const hours = Math.floor(diffMin / 60)
const mins = diffMin % 60
durationStr = hours > 0 ? hours + '小时' + (mins > 0 ? mins + '分钟' : '') : diffMin + '分钟'
}
}
// 状态：数据库 status 字段 (0正常 1已取消 2已结束 3进行中 4超时)
const statusStr = detail.status != null ? Number(detail.status) : 0
const curMembers = detail.currentMembers != null ? detail.currentMembers : 0
const maxMems = detail.maxMembers != null ? detail.maxMembers : 0
const isFull = maxMems > 0 && curMembers >= maxMems
let statusText = ''
let statusClass = ''
let canBook = false
let btnText = '立即预约'
if (statusStr === 0) {
canBook = !isFull
btnText = isFull ? '已约满' : '立即预约'
statusText = isFull ? '已约满' : ''
} else if (statusStr === 1) {
statusText = '已取消'
statusClass = 'status-cancel'
btnText = '已取消'
} else if (statusStr === 2) {
statusText = '已结束'
statusClass = 'status-end'
btnText = '已结束'
} else if (statusStr === 3) {
statusText = '进行中'
statusClass = 'status-going'
btnText = '进行中'
} else if (statusStr === 4) {
statusText = '已超时'
statusClass = 'status-timeout'
btnText = '已超时'
}
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,
category: cat,
description: desc,
startTime: st,
endTime: et,
duration: duration,
maxMembers: detail.maxMembers || 0,
currentMembers: detail.currentMembers || 0,
isFull: (detail.currentMembers || 0) >= (detail.maxMembers || 1) && detail.maxMembers > 0,
fullDate: y + '-' + mo + '-' + d,
shortTime: (hh && mm) ? hh + ':' + mm : '--',
endShortTime: (ehh && emm) ? ehh + ':' + emm : '--',
duration: durationStr,
maxMembers: maxMems,
currentMembers: curMembers,
isFull: isFull,
canBook: canBook,
btnText: btnText,
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 || ''
difficultyLabel: bd > 0 ? (bd <= 3 ? '入门' : bd <= 6 ? '中等' : '困难') : '',
storedValueAmount: detail.storedValueAmount != null ? detail.storedValueAmount : 0,
statusText: statusText,
statusClass: statusClass,
coverImage: detail.coverImage || '',
coverError: false
}
}
} catch (e) {
@@ -194,7 +292,7 @@
},
goBack() { uni.navigateBack() },
async handleBooking() {
if (this.course.isFull || this.submitting) return
if (!this.course.canBook || this.submitting) return
const memberInfo = store.getMemberInfo()
if (!memberInfo || !memberInfo.memberId) {
uni.showToast({ title: '请先登录', icon: 'none' })
@@ -222,43 +320,63 @@
<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-area { height: 200px; position: relative; overflow: hidden; }
.cover-img { width: 100%; height: 100%; }
.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; }
.status-tag { position: absolute; top: 14px; right: 16px; color: #FFFFFF; font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 40px; }
.status-cancel { background: #FF5252; }
.status-end { background: #9E9E9E; }
.status-going { background: #00C853; }
.status-timeout { background: #FF9800; }
/* 已约满不是DB status，是计算出来的 */
.status-tag:not(.status-cancel):not(.status-end):not(.status-going):not(.status-timeout) { background: #FF5252; }
/* 课程信息卡片 */
.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; }
.course-title { font-size: 22px; font-weight: 700; color: #1E1E1E; flex: 1; }
.difficulty-badge { padding: 4px 12px; border-radius: 40px; font-size: 12px; font-weight: 600; flex-shrink: 0; margin-left: 10px; }
.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; }
.header-meta { margin-top: 8px; display: flex; align-items: center; }
.meta-type { font-size: 13px; color: #00C853; background: rgba(0,230,118,0.15); padding: 3px 10px; border-radius: 20px; font-weight: 500; }
.meta-type-name { font-size: 13px; color: #7A7E84; margin-left: 6px; }
.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; }
.info-value.price { color: #00C853; }
.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; }