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-06-24 08:13:12 +08:00
parent 8d8c823616
commit 0bebce3dc1
24 changed files with 2677 additions and 2796 deletions
Download Patch File Download Diff File Expand all files Collapse all files
gym-manage-uniapp/components/TabBar.vue
-15
View File
@@ -48,7 +48,6 @@ const HIDE_TABBAR_PAGES = [
'pages/memberInfo/bodyTestReport',
'pages/groupCourse/list',
'pages/groupCourse/detail',
'pages/searchCourse/searchCourse',
'pages/checkIn/checkIn',
'pages/memberInfo/myCourses',
'pages/memberInfo/coupons',
@@ -162,20 +161,6 @@ const tabs = [
useFontIcon: true,
fontSize:"36rpx"
},
{
path: PAGE.TRAIN,
icon: 'icon-train',
label: '训练',
useFontIcon: true,
fontSize:"48rpx"
},
{
path: PAGE.DISCOVER,
icon: 'icon-discover',
label: '发现',
useFontIcon: true,
fontSize:"48rpx"
},
{
path: PAGE.MEMBER,
icon: 'icon-profile',
gym-manage-uniapp/components/groupCourse/TimeRangePicker.vue
+22 -4
View File
@@ -121,6 +121,8 @@ const weekdays = ['日', '一', '二', '三', '四', '五', '六']
const quickOptions = [
{ label: '近7天', value: '7d' },
{ label: '近30天', value: '30d' },
{ label: '未来7天', value: 'future7d' },
{ label: '未来30天', value: 'future30d' },
{ label: '本月', value: 'month' },
{ label: '上月', value: 'lastMonth' }
]
@@ -218,12 +220,14 @@ function isToday(year, month, day) {
day === today.getDate()
}
// 判断是否是未来日期
// 判断是否是未来日期（限制最多选择未来90天）
function isFuture(year, month, day) {
const today = new Date()
today.setHours(0, 0, 0, 0)
const maxFuture = new Date(today)
maxFuture.setDate(maxFuture.getDate() + 90) // 最多允许选择未来90天
const date = new Date(year, month - 1, day)
return date > today
return date > maxFuture
}
// 切换日期选择器
@@ -273,7 +277,7 @@ const selectDate = (day) => {
console.log(`[TimeRangePicker] ${pickerType.value === 'start' ? '开始' : '结束'}日期变更:`, day.date)
}
// 应用快捷选项
// 应用快捷选项（所有日期计算基于当前真实时间）
const applyQuickOption = (value) => {
quickSelected.value = value
const today = new Date()
@@ -281,18 +285,32 @@ const applyQuickOption = (value) => {
switch (value) {
case '7d':
// 近7天：以今天为终点，往前推7天
startDate = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000)
endDate = today
break
case '30d':
// 近30天：以今天为终点，往前推30天
startDate = new Date(today.getTime() - 30 * 24 * 60 * 60 * 1000)
endDate = today
break
case 'future7d':
// 未来7天：以今天为起点，往后推7天
startDate = today
endDate = new Date(today.getTime() + 7 * 24 * 60 * 60 * 1000)
break
case 'future30d':
// 未来30天：以今天为起点，往后推30天
startDate = today
endDate = new Date(today.getTime() + 30 * 24 * 60 * 60 * 1000)
break
case 'month':
// 本月：当月1号到当月最后一天
startDate = new Date(today.getFullYear(), today.getMonth(), 1)
endDate = today
endDate = new Date(today.getFullYear(), today.getMonth() + 1, 0)
break
case 'lastMonth':
// 上月：上月1号到上月最后一天
startDate = new Date(today.getFullYear(), today.getMonth() - 1, 1)
endDate = new Date(today.getFullYear(), today.getMonth(), 0)
break
gym-manage-uniapp/components/index/QuickEntry.vue
+3 -171
View File
@@ -8,7 +8,6 @@
>
<view :class="['entry-icon', { accent: item.accent }]">
<image :src="item.icon" mode="aspectFit" class="icon-img" />
<view v-if="item.title === '消息' && hasUnread" class="badge-dot"></view>
</view>
<text class="entry-title">{{ item.title }}</text>
<text class="entry-desc">{{ item.desc }}</text>
@@ -30,148 +29,12 @@
</template>
<script setup>
import { ref, computed, onMounted } from 'vue'
import { getUnreadMessageCount } from '@/api/main.js'
import { ref } from 'vue'
const unreadCount = ref(0)
const showCheckInMenu = ref(false)
const TEST_MODE = false
// 是否有未读消息（用于显示红点）
const hasUnread = computed(() => unreadCount.value > 0)
const loadUnreadCount = async () => {
if (TEST_MODE) {
unreadCount.value = 3
return
}
const token = uni.getStorageSync('token')
if (!token) {
console.log('[QuickEntry] token 不存在，跳过请求')
unreadCount.value = 0
return
}
try {
const userId = uni.getStorageSync('userId') || 1
console.log('[QuickEntry] 请求未读消息数量, userId:', userId)
const res = await getUnreadMessageCount(userId)
console.log('[QuickEntry] 未读消息数量响应数据:', res)
console.log('[QuickEntry] 响应完整类型:', typeof res, Object.prototype.toString.call(res))
let count = 0
// 兼容多种响应格式
if (typeof res === 'number') {
count = res
console.log('[QuickEntry] 使用直接数字格式')
} else if (typeof res === 'string' && res.trim() !== '') {
// 处理字符串数字，如 "20"
count = parseInt(res, 10)
console.log('[QuickEntry] 使用字符串转数字格式:', count)
} else if (res !== null && typeof res === 'object') {
if (typeof res.count === 'number') {
count = res.count
console.log('[QuickEntry] 使用 res.count')
} else if (res.data !== undefined) {
if (typeof res.data === 'number') {
count = res.data
console.log('[QuickEntry] 使用 res.data')
} else if (typeof res.data?.count === 'number') {
count = res.data.count
console.log('[QuickEntry] 使用 res.data.count')
} else if (Array.isArray(res.data?.content)) {
count = res.data.content.length
console.log('[QuickEntry] 使用 res.data.content.length')
} else if (Array.isArray(res.content)) {
count = res.content.length
console.log('[QuickEntry] 使用 res.content.length')
} else if (typeof res.data?.total === 'number') {
count = res.data.total
console.log('[QuickEntry] 使用 res.data.total')
} else if (typeof res.total === 'number') {
count = res.total
console.log('[QuickEntry] 使用 res.total')
}
} else if (Array.isArray(res.content)) {
count = res.content.length
console.log('[QuickEntry] 使用 res.content.length')
} else if (typeof res.total === 'number') {
count = res.total
console.log('[QuickEntry] 使用 res.total')
}
} else {
console.log('[QuickEntry] 无法解析响应格式，res:', res)
}
unreadCount.value = count
uni.setStorageSync('unreadMessageCount', count)
console.log('[QuickEntry] 最终未读数量:', count, 'hasUnread:', hasUnread.value)
} catch (e) {
console.error('[QuickEntry] 获取未读消息数失败:', e)
try {
const count = uni.getStorageSync('unreadMessageCount')
unreadCount.value = count || 0
} catch (e2) {
unreadCount.value = 0
}
}
}
const handleEntryClick = (item) => {
if (item.title === '消息' || item.title === '健身数据') {
if (TEST_MODE) {
uni.showLoading({
title: '加载中...',
mask: true
})
setTimeout(() => {
uni.hideLoading()
if (item.isTabBar) {
uni.switchTab({ url: item.path })
} else {
uni.navigateTo({ url: item.path })
}
}, 300)
return
}
const token = uni.getStorageSync('token')
if (!token) {
uni.showModal({
title: '请登录',
content: '是否跳转到登录页面？',
confirmText: '确定',
cancelText: '取消',
confirmColor: '#FF6B35',
success: (res) => {
if (res.confirm) {
uni.navigateTo({
url: '/pages/login/login'
})
}
}
})
return
}
uni.showLoading({
title: '加载中...',
mask: true
})
setTimeout(() => {
uni.hideLoading()
if (item.title === '消息') {
uni.navigateTo({
url: `${item.path}?unreadCount=${unreadCount.value}`
})
} else if (item.isTabBar) {
uni.switchTab({ url: item.path })
} else {
uni.navigateTo({ url: item.path })
}
}, 300)
} else if (item.title === '签到') {
if (item.title === '签到') {
const token = uni.getStorageSync('token')
if (!token) {
uni.showModal({
@@ -192,7 +55,6 @@ const handleEntryClick = (item) => {
}
showCheckInMenu.value = !showCheckInMenu.value
} else if (item.path) {
// tabbar 页面使用 switchTab
if (item.isTabBar) {
uni.switchTab({
url: item.path
@@ -233,44 +95,14 @@ const handleGroupCourseCheckIn = () => {
})
}
onMounted(() => {
loadUnreadCount()
})
uni.$on('pageShow', () => {
loadUnreadCount()
})
const entries = [
{
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/course.png',
title: '找课程',
desc: '精品课程',
accent: false,
path: "/pages/searchCourse/searchCourse"
path: "/pages/groupCourse/list"
},
{
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/plan.png',
title: '训练计划',
desc: '个性定制',
accent: true,
path: "/pages/train/index",
isTabBar: true
},
{
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/data.png',
title: '健身数据',
desc: '记录分析',
accent: false,
path: "/pages/memberInfo/bodyTestTrend"
},
{
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/message.png',
title: '消息',
desc: '通知消息',
accent: true,
path: "/pages/message/index"
},
{
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/checkIn.png',
title: '签到',
gym-manage-uniapp/components/index/RecommendCourses.vue
+4 -94
View File
@@ -23,6 +23,7 @@
v-for="(course, index) in courses"
:key="course.id || index"
class="course-card"
@click="handleJoinCourse(course)"
>
<!-- 课程图片区域 -->
<view class="course-image">
@@ -30,8 +31,6 @@
<image :src="course.image" mode="aspectFill" class="img" />
<!-- 图片渐变遮罩 -->
<view class="course-overlay"></view>
<!-- 差几人提示（右上角） -->
<text v-if="course.remainingSlots > 0" class="remaining-slots">差{{ course.remainingSlots }}人</text>
<!-- 课程信息区域 -->
<view class="course-info">
<!-- 课程名称 -->
@@ -50,10 +49,6 @@
<text>{{ course.level }}</text>
</view>
</view>
<!-- 课程标签 -->
<view class="meta-item course-type-tag">
<text :class="['tag', course.tagType]">{{ course.tag }}</text>
</view>
</view>
</view>
</view>
@@ -65,7 +60,7 @@
<text>{{ course.participants }}人参与</text>
</view>
<!-- 去参与按钮 -->
<view class="join-btn" @click="handleJoinCourse(course)">
<view class="join-btn" @click.stop="handleJoinCourse(course)">
<text>去参与</text>
</view>
</view>
@@ -82,28 +77,6 @@ import { getGroupCoursePage } from '@/api/main.js'
// 推荐课程数据列表
const courses = ref([])
// 课程类型映射（用于显示标签）
const getCourseTypeName = (type) => {
const typeMap = {
'1': '瑜伽',
'2': '搏击',
'3': '塑形'
}
return typeMap[type] || '课程'
}
// 根据课程信息获取标签文本
const getTag = (course) => {
if (course.currentMembers / course.maxMembers >= 0.8) return '热门'
return getCourseTypeName(course.courseType)
}
// 根据课程信息获取标签样式类型
const getTagType = (course) => {
if (course.currentMembers / course.maxMembers >= 0.8) return 'hot'
return 'default'
}
// 计算课程时长
const calculateDuration = (startTime, endTime) => {
if (!startTime || !endTime) return '60分钟'
@@ -142,19 +115,15 @@ const fetchRecommendCourses = async () => {
return course.status !== '2' && course.currentMembers < course.maxMembers
})
// 只取前5个符合条件的课程
courses.value = filteredCourses.slice(0, 5).map(course => {
const remainingSlots = course.maxMembers - course.currentMembers
// 只取前3个符合条件的课程
courses.value = filteredCourses.slice(0, 3).map(course => {
return {
id: course.id,
image: getImageUrl(course.coverImage),
tag: getTag(course),
tagType: getTagType(course),
name: course.courseName || '未知课程',
duration: calculateDuration(course.startTime, course.endTime),
level: getCourseLevel(course),
participants: course.currentMembers || 0,
remainingSlots: remainingSlots,
rawData: course
}
})
@@ -250,50 +219,6 @@ onMounted(() => { fetchRecommendCourses() })
background: linear-gradient(to top, rgba(45, 74, 90, 0.7) 0%, transparent 60%);
}
.remaining-slots {
position: absolute;
top: 16rpx;
right: 16rpx;
padding: 6rpx 12rpx;
border-radius: 10rpx;
font-size: 20rpx;
font-weight: 600;
color: #ffffff;
background: linear-gradient(135deg, #FF6B35, #FF8F66);
z-index: 3;
}
.course-tag {
position: absolute;
top: 16rpx;
right: 16rpx;
padding: 6rpx 12rpx;
border-radius: 10rpx;
font-size: 20rpx;
font-weight: 600;
color: #ffffff;
background: linear-gradient(135deg, #7AB5CC, #9CCFDF);
z-index: 2;
&.hot {
background: linear-gradient(135deg, #6BA8C0, #8CC5D5);
}
&.new {
background: linear-gradient(135deg, #6DB5C8, #90CEDD);
}
&.free {
background: linear-gradient(135deg, #7AB5CC, #9CCFDF);
}
&.full {
background: linear-gradient(135deg, #A0B8C8, #B8CCD8);
}
&.ended {
background: linear-gradient(135deg, #B0C0CC, #C4D2DC);
}
&.default {
background: linear-gradient(135deg, #7AB5CC, #9CCFDF);
}
}
.course-info {
position: absolute;
left: 0;
@@ -349,21 +274,6 @@ onMounted(() => { fetchRecommendCourses() })
background: rgba(255, 255, 255, 0.25);
}
.course-type-tag {
background: transparent !important;
padding: 0 !important;
.tag {
padding: 4rpx 10rpx;
border-radius: 6rpx;
font-size: 20rpx;
font-weight: 600;
background: linear-gradient(135deg, #FF8F66, #FFB088);
color: #ffffff;
&.hot {
background: linear-gradient(135deg, #FF6B35, #FF8F66);
}
}
}
.meta-icon {
width: 22rpx;
gym-manage-uniapp/components/index/TodayRecommend.vue
+65 -46
View File
@@ -5,13 +5,6 @@
<view class="section-header">
<!-- 区域标题 -->
<text class="section-title">今日推荐</text>
<!-- 查看更多按钮 -->
<view class="view-more" @click="handleViewMore">
<text>查看更多</text>
<text class="arrow">
<uni-icons type="right" size="20" color="#8CA0B0"></uni-icons>
</text>
</view>
</view>
<!-- 推荐列表 -->
@@ -19,8 +12,9 @@
<!-- 推荐项 -->
<view
v-for="(item, index) in recommends"
:key="index"
:key="item.id || index"
class="recommend-item"
@click="handleItemClick(item)"
>
<!-- 推荐项图片 -->
<image :src="item.image" mode="aspectFill" class="item-image" />
@@ -38,7 +32,7 @@
<!-- 推荐项操作区域 -->
<view class="item-action">
<!-- 开始训练按钮 -->
<view class="start-btn">
<view class="start-btn" @click.stop="handleItemClick(item)">
<text class="start-btn-text">开始训练</text>
</view>
<!-- 参与人数 -->
@@ -50,34 +44,71 @@
</template>
<script setup>
const handleViewMore = () => {
uni.navigateTo({ url: '/pages/discover/index' })
}
import { ref, onMounted } from 'vue'
import { getGroupCoursePage } from '@/api/main.js'
// 今日推荐数据列表
const recommends = [
{
image: 'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=300&q=80',
title: '晨间活力唤醒跑',
tags: ['20分钟', '初级'],
desc: '唤醒身体，开启活力一天',
participants: '2784'
},
{
image: 'https://images.unsplash.com/photo-1517836357463-d25dfeac3438?w=300&q=80',
title: '全身力量塑形',
tags: ['50分钟', '中级'],
desc: '全身综合训练，塑造完美线条',
participants: '4126'
},
{
image: 'https://images.unsplash.com/photo-1490645935967-10de6ba17061?w=300&q=80',
title: '蛋白增肌饮食指南',
tags: ['营养饮食', '12分钟'],
desc: '科学饮食搭配，助力肌肉增长',
participants: '1865'
const recommends = ref([])
// 计算课程时长
const calculateDuration = (startTime, endTime) => {
if (!startTime || !endTime) return '60分钟'
const start = new Date(startTime)
const end = new Date(endTime)
const diffMs = end - start
if (diffMs <= 0) return ''
const durationMinutes = Math.floor(diffMs / (1000 * 60))
return `${durationMinutes}分钟`
}
// 获取课程难度
const getCourseLevel = (course) => {
if (course.courseType === '2') return '中级'
if (course.courseType === '3') return '高级'
if (course.courseType === '1') return '初级'
return '初级'
}
// 处理图片URL
const getImageUrl = (coverImage) => {
if (!coverImage) return 'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=300&q=80'
if (coverImage.startsWith('http')) return coverImage
return `https://your-domain.com${coverImage}`
}
// 获取今日推荐
const fetchTodayRecommend = async () => {
try {
const res = await getGroupCoursePage({
page: 0, size: 10, sort: 'current_members', order: 'desc'
}, { cache: true, cacheTime: 5 * 60 * 1000 })
if (res && res.content && Array.isArray(res.content)) {
const filteredCourses = res.content.filter(course => {
return course.status !== '2' && course.currentMembers < course.maxMembers
})
recommends.value = filteredCourses.slice(0, 3).map(course => {
return {
id: course.id,
image: getImageUrl(course.coverImage),
title: course.courseName || '未知课程',
tags: [calculateDuration(course.startTime, course.endTime), getCourseLevel(course)],
desc: course.description || '精彩课程，不容错过',
participants: String(course.currentMembers || 0)
}
})
}
} catch (err) {
console.error('获取今日推荐失败:', err)
}
]
}
const handleItemClick = (item) => {
if (!item.id) { uni.showToast({ title: '课程信息不完整', icon: 'none' }); return }
uni.navigateTo({ url: `/pages/groupCourse/detail?id=${item.id}` })
}
onMounted(() => { fetchTodayRecommend() })
</script>
<style lang="scss" scoped>
@@ -100,18 +131,6 @@ const recommends = [
color: #2D4A5A;
}
.view-more {
display: flex;
align-items: center;
gap: 4rpx;
font-size: 26rpx;
color: var(--tabbar-text-inactive);
}
.arrow {
font-size: 32rpx;
}
.recommend-list {
display: flex;
flex-direction: column;
gym-manage-uniapp/components/memberInfo/MemberInfoHeader.vue
+1 -56
View File
@@ -1,25 +1,5 @@
<template>
<view class="profile-header">
<!-- 顶栏：白底居中标题，左侧放通知/设置，右侧留胶囊安全区 -->
<view class="profile-header__toolbar" :style="toolbarStyle">
<view class="profile-header__nav">
<view class="profile-header__nav-left">
<image
class="profile-header__icon-bell"
src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/bell.png"
mode="aspectFit"
/>
<image
class="profile-header__icon-settings"
src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/settings.png"
mode="aspectFit"
/>
</view>
<text class="profile-header__title">个人中心</text>
<view class="profile-header__nav-right" :style="navRightStyle"></view>
</view>
</view>
<view class="profile-header__toolbar-spacer" :style="toolbarSpacerStyle"></view>
<!-- 用户信息区：深蓝渐变 -->
<view class="profile-header__hero">
<view class="profile-header__inner" v-if="isLogin">
@@ -109,7 +89,7 @@
</template>
<script setup>
import { ref, computed, onMounted } from 'vue'
import { computed } from 'vue'
const props = defineProps({
userInfo: { type: Object, required: true },
@@ -133,41 +113,6 @@ function handleUserTap() {
function handleGuestLogin() {
emit('guest-login')
}
const toolbarStyle = ref({})
const toolbarSpacerStyle = ref({})
const navRightStyle = ref({})
function syncNavSafeArea() {
try {
const sys = uni.getSystemInfoSync()
const statusBarHeight = sys.statusBarHeight || 0
const navHeight = 44
const menu = uni.getMenuButtonBoundingClientRect?.()
toolbarStyle.value = {
paddingTop: `${statusBarHeight}px`
}
toolbarSpacerStyle.value = {
height: `${statusBarHeight + navHeight}px`
}
if (menu && menu.width) {
const capsuleGap = sys.windowWidth - menu.left + 8
navRightStyle.value = {
width: `${capsuleGap}px`,
minWidth: `${capsuleGap}px`
}
}
} catch (e) {
toolbarSpacerStyle.value = { height: '44px' }
}
}
onMounted(() => {
syncNavSafeArea()
})
</script>
<style lang="scss">
gym-manage-uniapp/components/memberInfo/MemberInfoQuickActions.vue
+4 -66
View File
@@ -4,60 +4,7 @@
<view class="quick-actions__grid">
<view class="quick-actions__grid-inner">
<view
v-for="item in row1"
:key="item.key"
class="quick-actions__item"
hover-class="mi-tap--hover"
:hover-stay-time="150"
@tap="$emit('action', item.key)"
>
<view class="quick-actions__item-inner">
<view class="quick-actions__icon-wrap">
<view class="quick-actions__icon-wrap-inner">
<view v-if="item.key === 'booking'" class="quick-actions__icon">
<image
class="quick-actions__icon-part"
src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/Vector_2_490.png"
mode="aspectFit"
/>
<image
class="quick-actions__icon-part"
src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/Vector_2_491.png"
mode="aspectFit"
/>
<view class="quick-actions__border-wrap">
<view class="quick-actions__rect"></view>
<view class="quick-actions__border"></view>
</view>
<image
class="quick-actions__icon-part"
src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/Vector_2_493.png"
mode="aspectFit"
/>
<image
class="quick-actions__icon-part"
src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/Vector_2_494.png"
mode="aspectFit"
/>
</view>
<image
v-else
class="quick-actions__icon-img"
:src="item.icon"
mode="aspectFit"
/>
</view>
</view>
<text :class="item.textClass">{{ item.label }}</text>
</view>
</view>
</view>
</view>
<view class="quick-actions__divider"></view>
<view class="quick-actions__grid">
<view class="quick-actions__grid-inner">
<view
v-for="item in row2"
v-for="item in actions"
:key="item.key"
class="quick-actions__item"
hover-class="mi-tap--hover"
@@ -88,18 +35,9 @@ import { ref } from 'vue'
defineEmits(['action'])
const row1 = ref([
{ key: 'booking', label: '预约课程', textClass: 'quick-actions__title', icon: '' },
{ key: 'bodyTest', label: '智能体测', textClass: 'quick-actions__title-2', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/mappin2.png' },
{ key: 'bodyReport', label: '体测报告', textClass: 'quick-actions__title-3', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/activity.png' },
{ key: 'trainReport', label: '训练报告', textClass: 'quick-actions__coach', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/usercheck.png' }
])
const row2 = ref([
{ key: 'coupon', label: '我的优惠券', textClass: 'quick-actions__text', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/ticket.png' },
{ key: 'points', label: '我的积分', textClass: 'quick-actions__points-desc', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/star.png' },
{ key: 'referral', label: '邀请好友', textClass: 'quick-actions__title-4', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/share2.png' },
{ key: 'course', label: '我的课程', textClass: 'quick-actions__text-2', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/play.png' }
const actions = ref([
{ key: 'coupon', label: '我的优惠券', textClass: 'quick-actions__title', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/ticket.png' },
{ key: 'points', label: '我的积分', textClass: 'quick-actions__points-desc', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/star.png' }
])
</script>
gym-manage-uniapp/components/memberInfo/MemberInfoSettings.vue
-13
View File
@@ -61,12 +61,6 @@ import { ref } from 'vue'
defineEmits(['setting'])
const items = ref([
{
key: 'notify',
label: '通知设置',
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/bell.png',
iconWrapClass: ''
},
{
key: 'password',
label: '修改密码',
@@ -79,13 +73,6 @@ const items = ref([
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/shield.png',
iconWrapClass: 'settings-section__item-icon-wrap--green'
},
{
key: 'nfc',
label: 'NFC 门禁卡',
subtitle: '已绑定',
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/ticket.png',
iconWrapClass: ''
},
{
key: 'delete',
label: '注销账户',
gym-manage-uniapp/components/recommendCourses/RecommendCourseCard.vue
+102 -162
View File
@@ -1,60 +1,43 @@
<template>
<!-- 推荐团课卡片 -->
<view class="recommend-card" :style="cardStyle" @click="handleCardClick">
<!-- 卡片头部：推荐信息 -->
<!-- 卡片头部：图片 + 推荐标题 -->
<view class="card-header">
<text class="recommend-title">{{ recommend.recommendTitle || '推荐课程' }}</text>
<text class="recommend-content">{{ recommend.recommendContent }}</text>
<view class="recommend-reason" v-if="recommend.recommendReason">
<text class="reason-label">推荐理由：</text>
<text class="reason-text">{{ recommend.recommendReason }}</text>
</view>
</view>
<!-- 分割线 -->
<view class="divider"></view>
<!-- 卡片主体：团课信息 -->
<view class="card-body">
<!-- 团课封面 -->
<view class="course-image-wrapper">
<image :src="courseImage" mode="aspectFill" class="course-image" />
<view class="image-overlay"></view>
<!-- 状态标签 -->
<text :class="['status-tag', tagType]">{{ tagText }}</text>
</view>
<!-- 团课详情 -->
<view class="course-info">
<text class="course-name">{{ courseName }}</text>
<!-- 课程标签 -->
<view class="course-tags">
<text :class="['course-tag', tagType]">{{ tagText }}</text>
<text class="course-type">{{ courseTypeName }}</text>
</view>
<!-- 课程时间 -->
<view class="course-time" v-if="courseStartTime">
<text class="time-icon">📅</text>
<text class="time-text">{{ formattedTime }}</text>
</view>
<!-- 地点 -->
<view class="course-location" v-if="courseLocation">
<text class="location-icon">📍</text>
<text class="location-text">{{ courseLocation }}</text>
</view>
<!-- 参与人数 -->
<view class="course-members">
<text class="members-icon">🔥</text>
<text class="members-text">{{ courseCurrentMembers || 0 }}/{{ courseMaxMembers || 0 }}人</text>
</view>
<!-- 课程描述 -->
<text class="course-description" v-if="courseDescription">{{ courseDescription }}</text>
<!-- 推荐标题区 -->
<view class="header-info">
<text class="recommend-title">{{ recommend.recommendTitle || '推荐课程' }}</text>
<text class="recommend-content">{{ recommend.recommendContent }}</text>
</view>
</view>
<!-- 课程信息栏 -->
<view class="info-bar">
<view class="info-item">
<image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/time.png" class="info-icon" />
<text class="info-text">{{ formattedTime }}</text>
</view>
<view class="info-item" v-if="courseLocation">
<image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/intensity.png" class="info-icon" />
<text class="info-text">{{ courseLocation }}</text>
</view>
<view class="info-item">
<image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/hot.png" class="info-icon" />
<text class="info-text">{{ courseCurrentMembers || 0 }}/{{ courseMaxMembers || 0 }}人</text>
</view>
</view>
<!-- 推荐理由 -->
<view class="card-reason" v-if="recommend.recommendReason">
<text class="reason-text">{{ recommend.recommendReason }}</text>
</view>
<!-- 卡片底部：操作按钮 -->
<view class="card-footer" @click.stop="handleJoinCourse">
<view class="action-btn">
@@ -98,13 +81,11 @@ const cardStyle = computed(() => {
})
// 团课信息
const courseName = computed(() => props.recommend.groupCourse?.courseName || '未知课程')
const courseStartTime = computed(() => props.recommend.groupCourse?.startTime)
const courseEndTime = computed(() => props.recommend.groupCourse?.endTime)
const courseMaxMembers = computed(() => props.recommend.groupCourse?.maxMembers)
const courseCurrentMembers = computed(() => props.recommend.groupCourse?.currentMembers)
const courseLocation = computed(() => props.recommend.groupCourse?.location)
const courseDescription = computed(() => props.recommend.groupCourse?.description)
const courseId = computed(() => props.recommend.groupCourse?.id)
// 课程封面图片
@@ -115,16 +96,6 @@ const courseImage = computed(() => {
return `https://your-domain.com${coverImage}`
})
// 课程类型映射
const courseTypeName = computed(() => {
const typeMap = {
1: '瑜伽',
2: '搏击',
3: '塑形'
}
return typeMap[props.recommend.groupCourse?.courseType] || '课程'
})
// 课程标签文本
const tagText = computed(() => {
const current = courseCurrentMembers.value || 0
@@ -194,6 +165,7 @@ const handleJoinCourse = () => {
<style lang="scss">
.recommend-card {
width: 100%;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
@@ -204,63 +176,16 @@ const handleJoinCourse = () => {
margin-bottom: 24rpx;
}
// 卡片头部
// 卡片头部：左图右文
.card-header {
padding: 24rpx;
background: linear-gradient(135deg, rgba(124, 181, 204, 0.1), rgba(156, 207, 223, 0.05));
}
.recommend-title {
font-size: 32rpx;
font-weight: 700;
color: #2D4A5A;
margin-bottom: 12rpx;
display: block;
}
.recommend-content {
display: block;
font-size: 26rpx;
color: #5A7A8A;
line-height: 1.6;
margin-bottom: 12rpx;
}
.recommend-reason {
display: flex;
align-items: flex-start;
gap: 8rpx;
}
.reason-label {
font-size: 24rpx;
color: #8CA0B0;
flex-shrink: 0;
}
.reason-text {
font-size: 24rpx;
color: #6A8A9A;
line-height: 1.5;
}
// 分割线
.divider {
height: 1rpx;
background: linear-gradient(90deg, transparent, rgba(124, 181, 204, 0.3), transparent);
margin: 0 24rpx;
}
// 卡片主体
.card-body {
padding: 24rpx;
display: flex;
gap: 24rpx;
padding: 24rpx;
}
.course-image-wrapper {
width: 200rpx;
height: 200rpx;
width: 160rpx;
height: 160rpx;
border-radius: 16rpx;
overflow: hidden;
position: relative;
@@ -278,33 +203,17 @@ const handleJoinCourse = () => {
right: 0;
top: 0;
bottom: 0;
background: linear-gradient(to top, rgba(45, 74, 90, 0.4) 0%, transparent 50%);
background: linear-gradient(to top, rgba(45, 74, 90, 0.3) 0%, transparent 60%);
}
// 团课详情
.course-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 12rpx;
}
.course-name {
font-size: 30rpx;
font-weight: 600;
color: #2D4A5A;
}
.course-tags {
display: flex;
align-items: center;
gap: 12rpx;
}
.course-tag {
padding: 6rpx 16rpx;
border-radius: 10rpx;
font-size: 20rpx;
// 状态标签（图片左下角）
.status-tag {
position: absolute;
left: 8rpx;
bottom: 8rpx;
padding: 4rpx 12rpx;
border-radius: 8rpx;
font-size: 18rpx;
font-weight: 600;
color: #ffffff;
background: linear-gradient(135deg, #7CB5CC, #9CCFDF);
@@ -319,41 +228,72 @@ const handleJoinCourse = () => {
}
}
.course-type {
font-size: 22rpx;
color: #8CA0B0;
}
.course-time,
.course-location,
.course-members {
// 推荐标题区
.header-info {
flex: 1;
display: flex;
align-items: center;
gap: 8rpx;
flex-direction: column;
justify-content: center;
min-width: 0;
}
.time-icon,
.location-icon,
.members-icon {
font-size: 24rpx;
}
.time-text,
.location-text,
.members-text {
font-size: 24rpx;
color: #5A7A8A;
}
.course-description {
font-size: 24rpx;
color: #8CA0B0;
line-height: 1.5;
.recommend-title {
font-size: 32rpx;
font-weight: 700;
color: #2D4A5A;
margin-bottom: 8rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.recommend-content {
font-size: 24rpx;
color: #5A7A8A;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
// 信息栏：时间 | 地点 | 人数
.info-bar {
display: flex;
align-items: center;
gap: 24rpx;
padding: 0 24rpx 16rpx;
}
.info-item {
display: flex;
align-items: center;
gap: 6rpx;
}
.info-icon {
width: 28rpx;
height: 28rpx;
}
.info-text {
font-size: 22rpx;
color: #5A7A8A;
}
// 推荐理由
.card-reason {
margin: 0 24rpx;
padding: 16rpx;
background: rgba(124, 181, 204, 0.06);
border-radius: 12rpx;
border-left: 4rpx solid #7CB5CC;
}
.reason-text {
font-size: 22rpx;
color: #6A8A9A;
line-height: 1.5;
}
// 卡片底部
@@ -363,9 +303,9 @@ const handleJoinCourse = () => {
.action-btn {
width: 100%;
height: 80rpx;
height: 72rpx;
background: linear-gradient(135deg, #82DC82, #66CC66);
border-radius: 40rpx;
border-radius: 36rpx;
display: flex;
align-items: center;
justify-content: center;