重写会员端，初步完善首页
This commit is contained in:
@@ -0,0 +1,202 @@
|
||||
<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>
|
||||
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: '综合力量训练课程，涵盖杠铃、哑铃等自由重量训练，适合有一定基础的学员。' }
|
||||
}
|
||||
},
|
||||
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: {
|
||||
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) }
|
||||
},
|
||||
goBack() { uni.navigateBack() },
|
||||
handleBooking() { if (this.course.isFull) return; uni.showToast({ title: '预约成功', icon: 'success' }); setTimeout(() => { uni.navigateBack() }, 1000) }
|
||||
}
|
||||
}
|
||||
</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>
|
||||
@@ -0,0 +1,171 @@
|
||||
<template>
|
||||
<view class="home-page">
|
||||
<!-- 状态栏 + 胶囊按钮占位 -->
|
||||
<view class="header-wrap" :style="{ paddingTop: statusBarHeight + 'px' }">
|
||||
<view class="nav-bar" :style="{ height: navBarHeight + 'px' }">
|
||||
<text class="nav-title">✯ 今日训练</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<scroll-view class="content" scroll-y :style="{ height: 'calc(100vh - ' + totalHeaderHeight + 'px)' }">
|
||||
<view class="content-inner">
|
||||
<!-- 个人信息卡片（深色）+ 轮播图 -->
|
||||
<view class="greeting-card">
|
||||
<view class="greeting-header">
|
||||
<view class="member-info">
|
||||
<text class="member-name">你好，{{ memberInfo.nickname }}</text>
|
||||
<text class="member-no">{{ memberInfo.memberNo }}</text>
|
||||
</view>
|
||||
<view class="checkin-badge" v-if="memberInfo.checkedInToday">
|
||||
<text class="checkin-icon">✓</text>
|
||||
<text>今日已签到</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="stats">
|
||||
<view class="stat-item">
|
||||
<text class="stat-number">{{ memberInfo.totalSignDays }}</text>
|
||||
<text class="stat-label">累计签到(天)</text>
|
||||
</view>
|
||||
<view class="stat-item">
|
||||
<text class="stat-number">{{ memberInfo.pendingBookings }}</text>
|
||||
<text class="stat-label">待上团课</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 轮播图 -->
|
||||
<swiper class="banner-swiper" :indicator-dots="true" :autoplay="true" :interval="4000" :duration="500" circular>
|
||||
<swiper-item v-for="(banner, idx) in banners" :key="idx">
|
||||
<view class="banner-slide" :style="{ backgroundImage: 'url(' + banner.imageUrl + ')' }">
|
||||
<text class="banner-title">{{ banner.title }}</text>
|
||||
<text class="banner-subtitle">{{ banner.subtitle }}</text>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
|
||||
<!-- 今日推荐 -->
|
||||
<view class="recommend-section">
|
||||
<view class="section-header">
|
||||
<text class="section-title">✯ 今日推荐</text>
|
||||
<text class="section-more" @click="goToSearch">查看全部 ›</text>
|
||||
</view>
|
||||
<view class="recommend-list">
|
||||
<view v-for="(course, idx) in recommendCourses" :key="idx" class="recommend-card"
|
||||
@click="goToCourseDetail(course.id)">
|
||||
<view class="card-cover" :style="{ backgroundImage: 'url(' + course.imageUrl + ')' }">
|
||||
<view class="card-tag" v-if="course.recommendTitle">{{ course.recommendTitle }}</view>
|
||||
</view>
|
||||
<view class="card-body">
|
||||
<text class="card-name">{{ course.courseName }}</text>
|
||||
<text class="card-reason">{{ course.recommendReason }}</text>
|
||||
<view class="card-bottom">
|
||||
<text class="card-price">{{ course.priceLabel }}</text>
|
||||
<text class="card-count">{{ course.bookedCount }}人已预约</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bottom-safe"></view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
statusBarHeight: 0,
|
||||
navBarHeight: 44,
|
||||
totalHeaderHeight: 44,
|
||||
memberInfo: {
|
||||
nickname: 'Jason',
|
||||
memberNo: 'MEM20260715001',
|
||||
checkedInToday: true,
|
||||
totalSignDays: 128,
|
||||
pendingBookings: 3
|
||||
},
|
||||
banners: [
|
||||
{ imageUrl: 'https://img.zcool.cn/community/01f5c65e5d9c6ca801216518e1d2e0.jpg@1280w_1l_2o_100sh.jpg', title: '夏季燃脂计划', subtitle: 'HIIT + 动感单车，高效燃脂 7 天挑战' },
|
||||
{ imageUrl: 'https://img.zcool.cn/community/01a5fe5e5d9c4ba80121985ac87c5f.jpg@1280w_1l_2o_100sh.jpg', title: '瑜伽月卡特惠', subtitle: '新人专享 5 折，流瑜伽 / 普拉提任选' },
|
||||
{ imageUrl: 'https://img.zcool.cn/community/0177c85e5d9c84a8012165182ef63f.jpg@1280w_1l_2o_100sh.jpg', title: '私教一对一体验', subtitle: '免费体测 + 定制训练计划，限 30 名' }
|
||||
],
|
||||
recommendCourses: [
|
||||
{ id: 1, courseName: '极速燃脂单车', recommendTitle: '热门', tagColor: '', imageUrl: 'https://img.zcool.cn/community/01f5c65e5d9c6ca801216518e1d2e0.jpg@1280w_1l_2o_100sh.jpg', recommendReason: '教练专业 · 燃脂效果显著', priceLabel: '￥50', bookedCount: 186 },
|
||||
{ id: 2, courseName: '清晨流瑜伽', recommendTitle: '新手推荐', tagColor: '', imageUrl: 'https://img.zcool.cn/community/01a5fe5e5d9c4ba80121985ac87c5f.jpg@1280w_1l_2o_100sh.jpg', recommendReason: '教练耐心 · 节奏适中', priceLabel: '￥50', bookedCount: 142 },
|
||||
{ id: 3, courseName: '核心力量训练', recommendTitle: '塑形', tagColor: '', imageUrl: 'https://img.zcool.cn/community/0165ed5e5d9c6ca80121985a0733a5.jpg@1280w_1l_2o_100sh.jpg', recommendReason: '核心专项 · 适合所有水平', priceLabel: '￥50', bookedCount: 97 },
|
||||
{ id: 4, courseName: 'HIIT燃脂训练', recommendTitle: '高强度', tagColor: '', imageUrl: 'https://img.zcool.cn/community/0148fa5e5d9c4ba80121985a1b52e4.jpg@1280w_1l_2o_100sh.jpg', recommendReason: '挑战心肺极限 · 快速燃脂', priceLabel: '￥50', bookedCount: 211 },
|
||||
{ id: 5, courseName: '晚间普拉提', recommendTitle: '新上', tagColor: '', imageUrl: 'https://img.zcool.cn/community/01c3b25e5d9c6ca80121985ab2b7e6.jpg@1280w_1l_2o_100sh.jpg', recommendReason: '核心力量 · 放松一天疲劳', priceLabel: '￥50', bookedCount: 68 },
|
||||
{ id: 6, courseName: '周末瑜伽', recommendTitle: '进阶', tagColor: '', imageUrl: 'https://img.zcool.cn/community/0177c85e5d9c84a8012165182ef63f.jpg@1280w_1l_2o_100sh.jpg', recommendReason: '有基础的进阶课程', priceLabel: '￥50', bookedCount: 55 }
|
||||
]
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
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
|
||||
},
|
||||
methods: {
|
||||
goToCourseDetail(id) { uni.navigateTo({ url: '/pages/course-detail/course-detail?id=' + id }) },
|
||||
goToSearch() { uni.switchTab({ url: '/pages/search/search' }) }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.home-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; }
|
||||
.nav-title { font-size: 18px; font-weight: 700; color: #FFFFFF; }
|
||||
.content-inner { padding: 16px; }
|
||||
|
||||
/* 个人信息卡片 */
|
||||
.greeting-card { background: #1A1A1A; border-radius: 20px; padding: 18px 20px 0; color: #FFFFFF; margin-bottom: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.06); overflow: hidden; }
|
||||
.greeting-header { display: flex; justify-content: space-between; align-items: flex-start; }
|
||||
.member-info { display: flex; flex-direction: column; }
|
||||
.member-name { font-size: 18px; font-weight: 600; }
|
||||
.member-no { font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 2px; }
|
||||
.checkin-badge { background: rgba(0,230,118,0.2); color: #00E676; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 12px; display: flex; align-items: center; }
|
||||
.checkin-icon { font-size: 11px; margin-right: 3px; }
|
||||
|
||||
.stats { display: flex; margin-top: 16px; }
|
||||
.stat-item { display: flex; flex-direction: column; margin-right: 24px; }
|
||||
.stat-number { font-size: 22px; font-weight: 700; color: #00E676; }
|
||||
.stat-label { font-size: 12px; color: rgba(255,255,255,0.6); margin-top: 2px; }
|
||||
|
||||
|
||||
/* 轮播图 */
|
||||
.banner-swiper { height: 160px; margin: 14px -20px 0; }
|
||||
.banner-slide { height: 100%; background-size: cover; background-position: center; background-color: #2A2A2A; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px 20px; }
|
||||
.banner-title { font-size: 20px; font-weight: 700; color: #FFFFFF; text-shadow: 0 2px 6px rgba(0,0,0,0.5); }
|
||||
.banner-subtitle { font-size: 14px; color: rgba(255,255,255,0.9); margin-top: 6px; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }
|
||||
|
||||
/* 今日推荐 */
|
||||
.recommend-section { margin-bottom: 16px; }
|
||||
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
|
||||
.section-title { font-size: 18px; font-weight: 700; color: #1E1E1E; }
|
||||
.section-more { font-size: 13px; color: #00C853; }
|
||||
.recommend-list { display: flex; flex-wrap: wrap; justify-content: space-between; }
|
||||
.recommend-card { width: calc(50% - 6px); background: #FFFFFF; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.06); margin-bottom: 12px; }
|
||||
.card-cover { height: 130px; background-size: cover; background-position: center; background-color: #E8E8E8; display: flex; align-items: flex-start; justify-content: flex-end; padding: 8px; }
|
||||
.card-tag { background: #00E676; color: #1A1A1A; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; }
|
||||
.card-body { padding: 10px 12px 14px; }
|
||||
.card-name { font-size: 14px; font-weight: 600; color: #1E1E1E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; margin-bottom: 4px; }
|
||||
.card-reason { font-size: 12px; color: #7A7E84; display: block; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.card-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 2px; }
|
||||
.card-price { font-size: 14px; font-weight: 700; color: #00C853; }
|
||||
.card-count { font-size: 11px; color: #BDBDBD; }
|
||||
.bottom-safe { height: 20px; }
|
||||
</style>
|
||||
@@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<view class="login-page" :style="{ paddingTop: statusBarHeight + 'px' }">
|
||||
<view class="brand-area">
|
||||
<view class="logo-icon">
|
||||
<text class="logo-symbol">✦</text>
|
||||
</view>
|
||||
<text class="app-name">Novalon 健身房</text>
|
||||
<text class="app-slogan">专业预约 · 科学训练</text>
|
||||
</view>
|
||||
|
||||
<view class="login-btn-area">
|
||||
<button class="wechat-login-btn" @click="handleLogin">
|
||||
<text class="wechat-symbol">微</text>
|
||||
<text class="btn-text">微信一键登录</text>
|
||||
</button>
|
||||
|
||||
<view class="agreement-row">
|
||||
<view class="checkbox-wrapper" @click="toggleAgree">
|
||||
<view class="checkbox" :class="{ checked: agreed }">
|
||||
<text v-if="agreed" class="check-mark">✓</text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="agreement-text">
|
||||
已阅读并同意
|
||||
<text class="link">《用户协议》</text>
|
||||
和
|
||||
<text class="link">《隐私政策》</text>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="other-login">
|
||||
<text class="divider-text">其他登录方式</text>
|
||||
<view class="other-icons">
|
||||
<view class="other-item">
|
||||
<view class="other-icon-circle">
|
||||
<text class="other-symbol">☏</text>
|
||||
</view>
|
||||
<text class="other-label">手机号</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="footer-tip">
|
||||
<text>首次登录将自动注册账号</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
statusBarHeight: 0,
|
||||
agreed: false
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
const systemInfo = uni.getSystemInfoSync()
|
||||
this.statusBarHeight = systemInfo.statusBarHeight || 20
|
||||
},
|
||||
methods: {
|
||||
toggleAgree() { this.agreed = !this.agreed },
|
||||
handleLogin() { uni.switchTab({ url: '/pages/index/index' }) }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.login-page { min-height: 100vh; background: #F5F7FA; display: flex; flex-direction: column; align-items: center; padding: 0 32px; overflow-x: hidden; }
|
||||
|
||||
.brand-area { display: flex; flex-direction: column; align-items: center; margin-top: 60px; margin-bottom: 80px; }
|
||||
.logo-icon { width: 80px; height: 80px; background: rgba(0,230,118,0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
|
||||
.logo-symbol { font-size: 36px; color: #00C853; }
|
||||
.app-name { font-size: 28px; font-weight: 700; color: #1E1E1E; letter-spacing: 1px; }
|
||||
.app-slogan { font-size: 14px; color: #7A7E84; margin-top: 8px; letter-spacing: 2px; }
|
||||
|
||||
.login-btn-area { width: 100%; display: flex; flex-direction: column; align-items: center; }
|
||||
.wechat-login-btn { width: 100%; height: 52px; background: #00E676; border-radius: 40px; display: flex; align-items: center; justify-content: center; border: none; padding: 0; box-shadow: 0 4px 16px rgba(0,230,118,0.35); }
|
||||
.wechat-login-btn::after { border: none; }
|
||||
.wechat-symbol { font-size: 18px; font-weight: 700; color: #1A1A1A; margin-right: 8px; }
|
||||
.btn-text { font-size: 17px; font-weight: 700; color: #1A1A1A; }
|
||||
|
||||
.agreement-row { display: flex; align-items: center; margin-top: 16px; }
|
||||
.checkbox-wrapper { margin-right: 6px; }
|
||||
.checkbox { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #BDBDBD; display: flex; align-items: center; justify-content: center; }
|
||||
.checkbox.checked { background: #00E676; border-color: #00E676; }
|
||||
.check-mark { font-size: 12px; color: #1A1A1A; font-weight: 700; }
|
||||
.agreement-text { font-size: 12px; color: #7A7E84; }
|
||||
.link { color: #00C853; }
|
||||
|
||||
.other-login { margin-top: 60px; width: 100%; display: flex; flex-direction: column; align-items: center; }
|
||||
.divider-text { font-size: 13px; color: #BDBDBD; margin-bottom: 20px; }
|
||||
.other-icons { display: flex; }
|
||||
.other-item { display: flex; flex-direction: column; align-items: center; }
|
||||
.other-icon-circle { width: 48px; height: 48px; background: #FFFFFF; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
|
||||
.other-symbol { font-size: 22px; color: #7A7E84; }
|
||||
.other-label { font-size: 12px; color: #7A7E84; }
|
||||
|
||||
.footer-tip { position: absolute; bottom: 60px; font-size: 12px; color: #BDBDBD; }
|
||||
</style>
|
||||
@@ -0,0 +1,211 @@
|
||||
<template>
|
||||
<view class="profile-page">
|
||||
<view class="header-wrap" :style="{ paddingTop: statusBarHeight + 'px' }">
|
||||
<view class="nav-bar" :style="{ height: navBarHeight + 'px' }">
|
||||
<text class="nav-title">● 个人中心</text>
|
||||
<text class="settings-symbol" @click="goToSettings">⚙</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<scroll-view class="content" scroll-y :style="{ height: 'calc(100vh - ' + totalHeaderHeight + 'px)' }">
|
||||
<view class="content-inner">
|
||||
<view class="user-card">
|
||||
<view class="user-row">
|
||||
<view class="big-avatar"><text>J</text></view>
|
||||
<view class="user-info">
|
||||
<text class="user-name">{{ userInfo.nickname }}</text>
|
||||
<view class="user-tag">
|
||||
<text class="tag-symbol">★</text>
|
||||
<text>{{ userInfo.membershipLevel }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="edit-symbol" @click="editProfile">✎</text>
|
||||
</view>
|
||||
<view class="user-details">
|
||||
<view class="detail-row">
|
||||
<text class="detail-label">会员编号</text>
|
||||
<text class="detail-value">{{ userInfo.memberNo }}</text>
|
||||
</view>
|
||||
<view class="detail-row">
|
||||
<text class="detail-label">手机号</text>
|
||||
<text class="detail-value">{{ userInfo.phone }}</text>
|
||||
</view>
|
||||
<view class="detail-row">
|
||||
<text class="detail-label">性别</text>
|
||||
<text class="detail-value">{{ userInfo.gender === 1 ? '男' : userInfo.gender === 2 ? '女' : '未设置' }}</text>
|
||||
</view>
|
||||
<view class="detail-row">
|
||||
<text class="detail-label">生日</text>
|
||||
<text class="detail-value">{{ userInfo.birthday || '未设置' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="stats-card">
|
||||
<view class="stat-item">
|
||||
<text class="stat-number">{{ userInfo.totalCourses }}</text>
|
||||
<text class="stat-label">总课时</text>
|
||||
</view>
|
||||
<view class="stat-divider"></view>
|
||||
<view class="stat-item">
|
||||
<text class="stat-number">{{ userInfo.streakDays }}</text>
|
||||
<text class="stat-label">连续打卡</text>
|
||||
</view>
|
||||
<view class="stat-divider"></view>
|
||||
<view class="stat-item">
|
||||
<view class="stat-rating-row">
|
||||
<text class="stat-number">{{ userInfo.rating }}</text>
|
||||
<text class="star-icon">★</text>
|
||||
</view>
|
||||
<text class="stat-label">评分</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card-section">
|
||||
<view class="section-title-row">
|
||||
<text class="section-symbol">◆</text>
|
||||
<text class="section-title">我的会员卡</text>
|
||||
</view>
|
||||
<scroll-view class="card-scroll" scroll-x>
|
||||
<view v-for="(card, idx) in memberCards" :key="idx" class="member-card-item"
|
||||
:class="'card-type-' + card.cardType">
|
||||
<text class="card-name">{{ card.cardName }}</text>
|
||||
<text class="card-type-label">{{ card.typeLabel }}</text>
|
||||
<view class="card-details">
|
||||
<text v-if="card.remainingTimes !== null" class="card-remain">剩余 <text class="card-remain-num">{{ card.remainingTimes }}</text> 次</text>
|
||||
<text v-if="card.remainingAmount !== null" class="card-remain">余额 <text class="card-remain-num">{{ card.remainingAmount }}</text></text>
|
||||
<text v-if="card.expireTime" class="card-expire">有效期至 {{ card.expireTime }}</text>
|
||||
</view>
|
||||
<view class="card-status" :class="card.status">{{ card.statusLabel }}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<view class="menu-section">
|
||||
<view class="menu-grid">
|
||||
<view class="menu-item" v-for="(menu, idx) in menus" :key="idx" @click="handleMenuClick(menu.key)">
|
||||
<text class="menu-symbol">{{ menu.symbol }}</text>
|
||||
<text class="menu-label">{{ menu.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="sign-section">
|
||||
<view class="sign-header">
|
||||
<view class="section-title-row">
|
||||
<text class="section-symbol">☰</text>
|
||||
<text class="section-title">最近签到</text>
|
||||
</view>
|
||||
<text class="section-more" @click="viewAllSignIn">查看全部</text>
|
||||
</view>
|
||||
<view v-for="(record, idx) in signInRecords" :key="idx" class="sign-item">
|
||||
<view class="sign-left">
|
||||
<text class="sign-date">{{ record.date }}</text>
|
||||
<text class="sign-time">{{ record.time }}</text>
|
||||
</view>
|
||||
<view class="sign-right">
|
||||
<text class="sign-type">{{ record.typeLabel }}</text>
|
||||
<text class="sign-status" :class="record.status">{{ record.statusLabel }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom-safe"></view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
statusBarHeight: 0,
|
||||
navBarHeight: 44,
|
||||
totalHeaderHeight: 44,
|
||||
userInfo: { nickname: 'Jason Wang', membershipLevel: '高级会员', memberNo: 'MEM2024A7K3', phone: '138****8888', gender: 1, birthday: '1995-06-15', totalCourses: 68, streakDays: 12, rating: '4.8' },
|
||||
memberCards: [{ cardName: '年卡 · 无限次', cardType: 'time', typeLabel: '时长卡', expireTime: '2027-06-15', status: 'active', statusLabel: '有效' }, { cardName: '储值卡 · 白金', cardType: 'stored', typeLabel: '储值卡', remainingAmount: 2580, expireTime: '2027-06-15', status: 'active', statusLabel: '有效' }, { cardName: '10次体验卡', cardType: 'count', typeLabel: '次卡', remainingTimes: 3, expireTime: '2026-12-31', status: 'active', statusLabel: '有效' }],
|
||||
menus: [{ symbol: '☰', label: '训练数据', key: 'data' }, { symbol: '★', label: '成就徽章', key: 'achievement' }, { symbol: '⚙', label: '账户设置', key: 'settings' }, { symbol: '▤', label: '我的预约', key: 'booking' }, { symbol: '◆', label: '购卡记录', key: 'cardPurchase' }, { symbol: '?', label: '帮助中心', key: 'help' }],
|
||||
signInRecords: [{ date: '07-15', time: '09:30', typeLabel: '扫码签到', status: 'success', statusLabel: '成功' }, { date: '07-14', time: '18:00', typeLabel: '扫码签到', status: 'success', statusLabel: '成功' }, { date: '07-13', time: '10:15', typeLabel: '手动签到', status: 'success', statusLabel: '成功' }, { date: '07-12', time: '08:45', typeLabel: '扫码签到', status: 'success', statusLabel: '成功' }]
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
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
|
||||
},
|
||||
methods: { editProfile() { uni.showToast({ title: '编辑资料', icon: 'none' }) }, goToSettings() { uni.showToast({ title: '设置页面', icon: 'none' }) }, handleMenuClick(key) { uni.showToast({ title: '功能: ' + key, icon: 'none' }) }, viewAllSignIn() { uni.showToast({ title: '全部签到记录', icon: 'none' }) } }
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.profile-page { min-height: 100vh; background: #F5F7FA; overflow-x: hidden; }
|
||||
.header-wrap { background: #1A1A1A; }
|
||||
.nav-bar { background: #1A1A1A; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; }
|
||||
.nav-title { font-size: 18px; font-weight: 700; color: #FFFFFF; }
|
||||
.settings-symbol { font-size: 20px; color: rgba(255,255,255,0.8); }
|
||||
.content-inner { padding: 16px 16px 0; }
|
||||
.user-card { background: #FFFFFF; border-radius: 20px; padding: 20px; margin-bottom: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
|
||||
.user-row { display: flex; align-items: center; margin-bottom: 18px; }
|
||||
.big-avatar { width: 56px; height: 56px; background: linear-gradient(135deg, #00E676, #00BFA5); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 24px; color: #1A1A1A; flex-shrink: 0; margin-right: 14px; }
|
||||
.user-info { flex: 1; display: flex; flex-direction: column; }
|
||||
.user-name { font-size: 18px; font-weight: 700; color: #1E1E1E; }
|
||||
.user-tag { font-size: 13px; color: #00C853; font-weight: 500; display: flex; align-items: center; }
|
||||
.tag-symbol { font-size: 12px; margin-right: 4px; }
|
||||
.edit-symbol { font-size: 20px; color: #7A7E84; }
|
||||
.user-details { background: #F5F7FA; border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; }
|
||||
.detail-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
|
||||
.detail-label { font-size: 13px; color: #7A7E84; }
|
||||
.detail-value { font-size: 14px; font-weight: 600; color: #1E1E1E; }
|
||||
.stats-card { background: #1A1A1A; border-radius: 20px; padding: 18px 20px; display: flex; justify-content: space-around; margin-bottom: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
|
||||
.stat-item { display: flex; flex-direction: column; align-items: center; }
|
||||
.stat-number { font-size: 24px; font-weight: 700; color: #00E676; }
|
||||
.stat-label { font-size: 12px; color: rgba(255,255,255,0.6); margin-top: 4px; }
|
||||
.stat-divider { width: 1px; background: rgba(255,255,255,0.15); }
|
||||
.stat-rating-row { display: flex; align-items: center; }
|
||||
.star-icon { font-size: 14px; color: #00E676; }
|
||||
.card-section { margin-bottom: 16px; }
|
||||
.section-title-row { display: flex; align-items: center; margin-bottom: 12px; }
|
||||
.section-symbol { font-size: 16px; color: #00E676; margin-right: 8px; }
|
||||
.section-title { font-size: 16px; font-weight: 700; color: #1E1E1E; }
|
||||
.card-scroll { display: flex; white-space: nowrap; }
|
||||
.member-card-item { display: inline-block; width: 200px; background: #FFFFFF; border-radius: 20px; padding: 16px; margin-right: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.06); position: relative; overflow: hidden; }
|
||||
.member-card-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; }
|
||||
.card-type-time::before { background: #00E676; }
|
||||
.card-type-stored::before { background: linear-gradient(135deg, #FFA502, #FF6B4A); }
|
||||
.card-type-count::before { background: #4A90D9; }
|
||||
.card-name { font-size: 15px; font-weight: 700; color: #1E1E1E; display: block; margin-top: 4px; }
|
||||
.card-type-label { font-size: 11px; color: #7A7E84; background: #F5F7FA; padding: 2px 8px; border-radius: 10px; margin-top: 4px; display: inline-block; }
|
||||
.card-details { margin-top: 12px; display: flex; flex-direction: column; }
|
||||
.card-remain { font-size: 13px; color: #7A7E84; }
|
||||
.card-remain-num { font-size: 16px; font-weight: 700; color: #00C853; margin: 0 2px; }
|
||||
.card-expire { font-size: 11px; color: #BDBDBD; }
|
||||
.card-status { position: absolute; top: 12px; right: 12px; font-size: 11px; font-weight: 600; padding: 2px 10px; border-radius: 20px; }
|
||||
.card-status.active { background: rgba(0,230,118,0.15); color: #00C853; }
|
||||
.menu-section { margin-bottom: 16px; }
|
||||
.menu-grid { display: flex; flex-wrap: wrap; }
|
||||
.menu-item { width: calc(33.33% - 8px); background: #FFFFFF; border-radius: 12px; padding: 16px 0; text-align: center; box-shadow: 0 4px 12px rgba(0,0,0,0.06); display: flex; flex-direction: column; align-items: center; margin-right: 12px; margin-bottom: 12px; }
|
||||
.menu-symbol { font-size: 22px; color: #7A7E84; }
|
||||
.menu-label { font-size: 13px; font-weight: 500; color: #7A7E84; }
|
||||
.sign-section { margin-bottom: 16px; }
|
||||
.sign-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
|
||||
.sign-header .section-title-row { margin-bottom: 0; }
|
||||
.section-more { font-size: 13px; color: #00C853; }
|
||||
.sign-item { background: #FFFFFF; border-radius: 12px; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
|
||||
.sign-left { display: flex; flex-direction: column; }
|
||||
.sign-date { font-size: 14px; font-weight: 600; color: #1E1E1E; }
|
||||
.sign-time { font-size: 12px; color: #7A7E84; margin-top: 2px; }
|
||||
.sign-right { display: flex; align-items: center; }
|
||||
.sign-type { font-size: 12px; color: #7A7E84; margin-right: 10px; }
|
||||
.sign-status { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 20px; }
|
||||
.sign-status.success { background: rgba(0,230,118,0.15); color: #00C853; }
|
||||
.bottom-safe { height: 50px; }
|
||||
</style>
|
||||
@@ -0,0 +1,241 @@
|
||||
<template>
|
||||
<view class="search-page">
|
||||
<view class="header-wrap" :style="{ paddingTop: statusBarHeight + 'px' }">
|
||||
<view class="nav-bar" :style="{ height: navBarHeight + 'px' }">
|
||||
<text class="nav-title">⌕ 团课搜索</text>
|
||||
</view>
|
||||
<view class="search-area">
|
||||
<view class="search-box">
|
||||
<text class="search-symbol">⌕</text>
|
||||
<input class="search-input" v-model="searchKeyword" placeholder="搜索课程名称、教练、场地..."
|
||||
placeholder-style="color: rgba(255,255,255,0.35);" @input="onSearchInput" />
|
||||
<text v-if="searchKeyword" class="clear-btn" @click="clearSearch">✕</text>
|
||||
</view>
|
||||
|
||||
<view class="date-range-row">
|
||||
<view class="date-range-item" @click="openStartDatePicker">
|
||||
<text class="range-label">开始</text>
|
||||
<text class="range-value" :class="{ placeholder: !startDate }">{{ startDate || '选择日期' }}</text>
|
||||
</view>
|
||||
<text class="range-sep">至</text>
|
||||
<view class="date-range-item" @click="openEndDatePicker">
|
||||
<text class="range-label">结束</text>
|
||||
<text class="range-value" :class="{ placeholder: !endDate }">{{ endDate || '选择日期' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="period-selector">
|
||||
<text class="period-label">时段</text>
|
||||
<scroll-view class="period-scroll" scroll-x>
|
||||
<view v-for="(period, idx) in periods" :key="idx" class="period-item"
|
||||
:class="{ active: currentPeriod === period.value }" @click="selectPeriod(period.value)">
|
||||
<text class="period-symbol">{{ period.symbol }}</text>
|
||||
<text>{{ period.label }}</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<scroll-view class="filter-tabs" scroll-x>
|
||||
<view class="filter-tabs-inner">
|
||||
<view v-for="(tab, idx) in filterTabs" :key="idx" class="filter-tab"
|
||||
:class="{ active: currentFilter === tab.value }" @click="switchFilter(tab.value)">
|
||||
{{ tab.label }}
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<view class="sort-bar">
|
||||
<text class="result-count">共 {{ filteredCourses.length }} 个课程</text>
|
||||
<view class="sort-options">
|
||||
<text v-for="(sort, idx) in sortOptions" :key="idx" class="sort-item"
|
||||
:class="{ active: currentSort === sort.value }" @click="switchSort(sort.value)">
|
||||
{{ sort.label }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<scroll-view class="course-list" scroll-y :style="{ height: 'calc(100vh - ' + totalHeaderHeight + 'px - 104px)' }">
|
||||
<view class="course-list-inner">
|
||||
<view v-for="(course, idx) in filteredCourses" :key="idx" class="course-card" @click="goToDetail(course)">
|
||||
<view class="course-cover">
|
||||
<text class="cover-text">{{ course.typeChar }}</text>
|
||||
</view>
|
||||
<view class="course-body">
|
||||
<text class="course-name">{{ course.courseName }}</text>
|
||||
<view class="course-row">
|
||||
<text class="course-coach">教练 {{ course.coachName }}</text>
|
||||
<text class="course-difficulty" :class="'diff-' + course.difficultyLevel">{{ course.difficultyLabel }}</text>
|
||||
</view>
|
||||
<view class="course-row">
|
||||
<text class="course-time">日期 {{ course.startTime }}</text>
|
||||
</view>
|
||||
<view class="course-row">
|
||||
<text class="course-location">{{ course.location }}</text>
|
||||
<text class="course-capacity">{{ course.currentMembers }}/{{ course.maxMembers }}人</text>
|
||||
</view>
|
||||
<view class="course-bottom">
|
||||
<text class="course-price" :class="{ free: course.storedValueAmount === 0 }">
|
||||
{{ course.storedValueAmount > 0 ? course.storedValueAmount + '元/次' : '免费' }}
|
||||
</text>
|
||||
<button class="btn-book" :class="{ disabled: course.isFull }" :disabled="course.isFull"
|
||||
@click.stop="bookCourse(course)">
|
||||
{{ course.isFull ? '已约满' : '预约' }}
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="filteredCourses.length === 0" class="empty-state">
|
||||
<text class="empty-symbol">⊙</text>
|
||||
<text class="empty-text">暂无匹配的课程</text>
|
||||
</view>
|
||||
|
||||
<view class="bottom-safe"></view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
statusBarHeight: 0,
|
||||
navBarHeight: 44,
|
||||
totalHeaderHeight: 44,
|
||||
searchKeyword: '', startDate: '', endDate: '',
|
||||
currentPeriod: 'all', currentFilter: 'all', currentSort: 'time',
|
||||
periods: [
|
||||
{ label: '全部', value: 'all', symbol: '◴' },
|
||||
{ label: '早晨', value: 'morning', symbol: '☀' },
|
||||
{ label: '上午', value: 'forenoon', symbol: '☀' },
|
||||
{ label: '下午', value: 'afternoon', symbol: '☼' },
|
||||
{ label: '晚间', value: 'evening', symbol: '☾' }
|
||||
],
|
||||
filterTabs: [
|
||||
{ label: '全部', value: 'all' }, { label: '力量区', value: 'strength' },
|
||||
{ label: '有氧', value: 'cardio' }, { label: '瑜伽', value: 'yoga' },
|
||||
{ label: '私教', value: 'pt' }, { label: '团课', value: 'group' },
|
||||
{ label: '免费', value: 'free' }
|
||||
],
|
||||
sortOptions: [
|
||||
{ label: '时间', value: 'time' },
|
||||
{ label: '难度', value: 'difficulty' },
|
||||
{ label: '热度', value: 'popular' }
|
||||
],
|
||||
courses: [
|
||||
{ id: 1, courseName: '综合力量训练', coachName: '张教练', location: '力量区', category: 'strength', typeChar: '力', startTime: '07-15 10:00', endTime: '07-15 10:45', maxMembers: 20, currentMembers: 8, isFull: false, difficulty: 5, difficultyLevel: 'mid', difficultyLabel: '中等', period: 'forenoon', storedValueAmount: 0 },
|
||||
{ id: 2, courseName: '流瑜伽 · 中级', coachName: '李教练', location: '3号教室', category: 'yoga', typeChar: '瑜', startTime: '07-15 14:00', endTime: '07-15 15:00', maxMembers: 15, currentMembers: 15, isFull: true, difficulty: 5, difficultyLevel: 'mid', difficultyLabel: '中等', period: 'afternoon', storedValueAmount: 0 },
|
||||
{ id: 3, courseName: '动感单车 · 冲刺', coachName: '王教练', location: '单车房', category: 'cardio', typeChar: '车', startTime: '07-15 18:00', endTime: '07-15 18:40', maxMembers: 25, currentMembers: 12, isFull: false, difficulty: 4, difficultyLevel: 'low', difficultyLabel: '入门', period: 'evening', storedValueAmount: 0 },
|
||||
{ id: 4, courseName: 'HIIT训练', coachName: '赵教练', location: '多功能厅', category: 'cardio', typeChar: 'HI', startTime: '07-15 12:00', endTime: '07-15 12:30', maxMembers: 15, currentMembers: 10, isFull: false, difficulty: 7, difficultyLevel: 'high', difficultyLabel: '困难', period: 'forenoon', storedValueAmount: 0 },
|
||||
{ id: 5, courseName: '普拉提', coachName: '李教练', location: '2号教室', category: 'yoga', typeChar: '普', startTime: '07-15 16:00', endTime: '07-15 16:50', maxMembers: 12, currentMembers: 5, isFull: false, difficulty: 4, difficultyLevel: 'low', difficultyLabel: '入门', period: 'afternoon', storedValueAmount: 0 },
|
||||
{ id: 6, courseName: '搏击操', coachName: '刘教练', location: '搏击区', category: 'cardio', typeChar: '搏', startTime: '07-15 07:00', endTime: '07-15 07:45', maxMembers: 20, currentMembers: 6, isFull: false, difficulty: 5, difficultyLevel: 'mid', difficultyLabel: '中等', period: 'morning', storedValueAmount: 0 }
|
||||
]
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
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
|
||||
},
|
||||
computed: {
|
||||
filteredCourses() {
|
||||
let list = this.courses
|
||||
if (this.searchKeyword) {
|
||||
const kw = this.searchKeyword.toLowerCase()
|
||||
list = list.filter(c => c.courseName.toLowerCase().includes(kw) || c.coachName.toLowerCase().includes(kw) || c.location.toLowerCase().includes(kw))
|
||||
}
|
||||
if (this.currentFilter === 'free') list = list.filter(c => c.storedValueAmount === 0)
|
||||
else if (this.currentFilter !== 'all') list = list.filter(c => c.category === this.currentFilter)
|
||||
if (this.currentPeriod !== 'all') list = list.filter(c => c.period === this.currentPeriod)
|
||||
if (this.currentSort === 'difficulty') list = [...list].sort((a, b) => a.difficulty - b.difficulty)
|
||||
else if (this.currentSort === 'popular') list = [...list].sort((a, b) => b.currentMembers - a.currentMembers)
|
||||
return list
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSearchInput() {},
|
||||
clearSearch() { this.searchKeyword = '' },
|
||||
openStartDatePicker() { uni.showToast({ title: '选择开始日期', icon: 'none' }) },
|
||||
openEndDatePicker() { uni.showToast({ title: '选择结束日期', icon: 'none' }) },
|
||||
selectPeriod(value) { this.currentPeriod = value },
|
||||
switchFilter(value) { this.currentFilter = value },
|
||||
switchSort(value) { this.currentSort = value },
|
||||
goToDetail(course) { uni.navigateTo({ url: '/pages/course-detail/course-detail?id=' + course.id }) },
|
||||
bookCourse(course) { if (!course.isFull) uni.navigateTo({ url: '/pages/course-detail/course-detail?id=' + course.id }) }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.search-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; }
|
||||
.nav-title { font-size: 18px; font-weight: 700; color: #FFFFFF; }
|
||||
|
||||
.search-area { background: #1A1A1A; padding: 0 16px 20px; }
|
||||
.search-box { background: rgba(255,255,255,0.12); border-radius: 40px; padding: 0 16px; display: flex; align-items: center; height: 42px; margin-bottom: 14px; }
|
||||
.search-symbol { font-size: 15px; color: rgba(255,255,255,0.5); flex-shrink: 0; margin-right: 8px; }
|
||||
.search-input { flex: 1; font-size: 14px; color: #FFFFFF; height: 100%; }
|
||||
.clear-btn { font-size: 15px; color: rgba(255,255,255,0.5); padding: 4px; flex-shrink: 0; }
|
||||
|
||||
.date-range-row { display: flex; align-items: center; margin-bottom: 14px; }
|
||||
.date-range-item { flex: 1; background: rgba(255,255,255,0.1); border-radius: 12px; padding: 10px 14px; margin-right: 10px; }
|
||||
.range-label { font-size: 11px; color: rgba(255,255,255,0.5); display: block; margin-bottom: 2px; }
|
||||
.range-value { font-size: 14px; font-weight: 600; color: #FFFFFF; }
|
||||
.range-value.placeholder { color: rgba(255,255,255,0.35); font-weight: 400; }
|
||||
.range-sep { color: rgba(255,255,255,0.5); font-size: 14px; flex-shrink: 0; margin-right: 10px; }
|
||||
|
||||
.period-selector { display: flex; align-items: center; }
|
||||
.period-label { font-size: 13px; color: rgba(255,255,255,0.6); flex-shrink: 0; margin-right: 10px; }
|
||||
.period-scroll { flex: 1; display: flex; white-space: nowrap; }
|
||||
.period-item { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 40px; font-size: 13px; color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.08); margin-right: 8px; }
|
||||
.period-item.active { background: #00E676; color: #1A1A1A; font-weight: 600; }
|
||||
.period-symbol { font-size: 13px; margin-right: 4px; }
|
||||
|
||||
.filter-tabs { background: #FFFFFF; display: flex; white-space: nowrap; border-bottom: 1px solid #EEEEEE; }
|
||||
.filter-tabs-inner { padding: 14px 16px; display: flex; white-space: nowrap; }
|
||||
.filter-tab { display: inline-block; padding: 6px 16px; border-radius: 40px; font-size: 13px; color: #7A7E84; background: #F5F7FA; margin-right: 8px; }
|
||||
.filter-tab.active { background: #00E676; color: #1A1A1A; font-weight: 600; }
|
||||
|
||||
.sort-bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; background: #FFFFFF; border-bottom: 1px solid #EEEEEE; }
|
||||
.result-count { font-size: 13px; color: #7A7E84; }
|
||||
.sort-options { display: flex; }
|
||||
.sort-item { font-size: 13px; color: #7A7E84; margin-right: 16px; }
|
||||
.sort-item.active { color: #00C853; font-weight: 600; }
|
||||
|
||||
.course-list-inner { padding: 12px 16px 0; }
|
||||
.course-card { background: #FFFFFF; border-radius: 20px; padding: 14px; margin-bottom: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.06); display: flex; }
|
||||
.course-cover { width: 72px; height: 72px; border-radius: 12px; background: rgba(0,230,118,0.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-right: 14px; }
|
||||
.cover-text { font-size: 24px; font-weight: 700; color: #00C853; }
|
||||
.course-body { flex: 1; display: flex; flex-direction: column; }
|
||||
.course-name { font-size: 16px; font-weight: 700; color: #1E1E1E; }
|
||||
.course-row { display: flex; align-items: center; font-size: 12px; color: #7A7E84; }
|
||||
.course-row > * { margin-right: 12px; }
|
||||
.course-difficulty { padding: 1px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; }
|
||||
.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; }
|
||||
.course-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
|
||||
.course-price { font-size: 13px; font-weight: 600; color: #00C853; }
|
||||
.course-price.free { color: #00C853; }
|
||||
.btn-book { background: #00E676; color: #1A1A1A; border: none; padding: 6px 16px; border-radius: 40px; font-weight: 700; font-size: 13px; line-height: 1.4; box-shadow: 0 2px 6px rgba(0,230,118,0.3); }
|
||||
.btn-book::after { border: none; }
|
||||
.btn-book.disabled { background: #E0E0E0; color: #BDBDBD; box-shadow: none; }
|
||||
|
||||
.empty-state { display: flex; flex-direction: column; align-items: center; padding: 60px 0; }
|
||||
.empty-symbol { font-size: 40px; color: #BDBDBD; }
|
||||
.empty-text { font-size: 14px; color: #BDBDBD; }
|
||||
.bottom-safe { height: 30px; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user