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

优化会员信息模块及首页组件，清理冗余图片资源

Browse Source
This commit is contained in:
future
2026-06-07 22:41:55 +08:00
committed by liwentao
parent 5bc31f8936
commit c909b023c7
111 changed files with 667 additions and 523 deletions
Download Patch File Download Diff File Expand all files Collapse all files
gym-manage-uniapp/pages/index/index.vue
+180 -27
View File
@@ -1,28 +1,43 @@
<template>
<view class="home-page">
<!-- 骨架屏 -->
<HomeSkeleton v-if="loading" />
<!-- 水波纹背景 - 顶层显示 -->
<view class="bg-wrapper">
<image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/wave_top.png" mode="widthFix" class="wave-bg wave-top" />
<image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/wave_bottom.png" mode="widthFix" class="wave-bg wave-bottom" />
</view>
<!-- 固定白色块（滚动时显示） -->
<view class="hand" :style="{height : handHeight + 'rpx'}" v-show="isShow"></view>
<!-- 滚动内容区域 -->
<scroll-view
scroll-y
refresher-enabled
:refresher-triggered="isRefreshing"
refresher-default-style="none"
@refresherrefresh="onRefresh"
@scroll="handleScroll"
class="scroll-container"
>
<!-- 实际内容 -->
<template v-else>
<!-- Banner轮播 -->
<BannerSwiper />
<!-- 功能入口 -->
<QuickEntry />
<!-- 推荐课程 -->
<RecommendCourses />
<!-- 今日推荐 -->
<TodayRecommend />
<!-- 底部占位 -->
<view class="bottom-placeholder"></view>
<!-- TabBar -->
<TabBar />
</template>
<!-- 主内容 -->
<view class="home-page">
<!-- 骨架屏 -->
<HomeSkeleton v-if="loading" />
<!-- 实际内容 -->
<template v-else>
<BannerSwiper />
<QuickEntry />
<RecommendCourses />
<TodayRecommend />
<!-- 底部占位，给 TabBar 留出空间 -->
<view class="bottom-placeholder"></view>
</template>
</view>
</scroll-view>
<!-- TabBar 固定在底部，不参与滚动 -->
<view class="tabbar-fixed">
<TabBar />
</view>
</template>
@@ -36,23 +51,161 @@ import TabBar from '@/components/TabBar.vue'
import HomeSkeleton from '@/components/Skeleton/HomeSkeleton.vue'
const loading = ref(true)
const isShow = ref(false)
const handHeight = ref(0)
const scrollDistance = ref(0)
const isRefreshing = ref(false)
// 滚动监听
const handleScroll = (e) => {
const distance = e.detail.scrollTop
scrollDistance.value = distance
// 控制白色块显示/隐藏
isShow.value = distance > 238
}
// 下拉刷新处理
const onRefresh = async () => {
console.log('开始下拉刷新')
isRefreshing.value = true
try {
await refreshData()
isRefreshing.value = false
uni.showToast({
title: '刷新成功',
icon: 'success'
})
} catch (error) {
console.error('刷新失败', error)
isRefreshing.value = false
uni.showToast({
title: '刷新失败',
icon: 'error'
})
}
}
// 刷新数据
const refreshData = () => {
return new Promise((resolve) => {
setTimeout(() => {
console.log('数据已刷新')
resolve()
}, 1500)
})
}
onMounted(() => {
setTimeout(() => {
loading.value = false
}, 1500)
// 获取胶囊按钮高度
const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
const navTotalHeight = menuButtonInfo.top + menuButtonInfo.height
handHeight.value = navTotalHeight * 2
})
</script>
<style lang="scss" scoped>
/* 背景包装器 - 固定在最底层 */
.bg-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
}
.wave-bg {
position: fixed;
left: 0;
width: 100%;
pointer-events: none;
opacity: 0.6;
}
.wave-top {
top: 0;
opacity: 0.5;
}
.wave-bottom {
bottom: 100rpx;
opacity: 0.35;
}
/* 滚动容器 */
.scroll-container {
position: relative;
z-index: 1;
height: 100vh;
width: 100%;
background: linear-gradient(180deg, #D6EEF8 0%, #E4F2FA 15%, #EEF6FB 30%, #F5FAFD 50%, #FAFCFE 70%, #FFFFFF 100%);
}
/* 主内容区域 */
.home-page {
min-height: 100vh;
background-color: #f0f4f8;
padding-bottom: 160rpx;
padding-bottom: 160rpx; /* 为 TabBar 留出空间 */
}
/* 固定白色块 */
.hand {
position: fixed;
top: 0;
left: 0;
z-index: 100;
background-color: white;
width: 100%;
}
/* 固定 TabBar */
.tabbar-fixed {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 20;
background-color: transparent;
}
.bottom-placeholder {
height: 40rpx;
height: 120rpx; /* 调整高度，避免内容被 TabBar 遮挡 */
}
</style>
/* 其他样式保持不变 */
.glow {
position: absolute;
border-radius: 50%;
pointer-events: none;
z-index: 0;
}
.glow-1 {
width: 400rpx;
height: 400rpx;
top: 60rpx;
right: -100rpx;
background: radial-gradient(circle, rgba(160, 210, 235, 0.35) 0%, transparent 70%);
}
.glow-2 {
width: 300rpx;
height: 300rpx;
top: 500rpx;
left: -80rpx;
background: radial-gradient(circle, rgba(180, 220, 240, 0.3) 0%, transparent 70%);
}
.glow-3 {
width: 250rpx;
height: 250rpx;
top: 900rpx;
right: -60rpx;
background: radial-gradient(circle, rgba(170, 215, 238, 0.25) 0%, transparent 70%);
}
</style>
gym-manage-uniapp/pages/memberInfo/bodyTestConnect.vue
+1 -1
View File
@@ -35,7 +35,7 @@
<view v-if="connected" class="bt-card">
<view class="bt-device">
<view class="bt-device__icon-wrap">
<image class="bt-device__icon" src="/static/images/shield.png" mode="aspectFit" />
<image class="bt-device__icon" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/shield.png" mode="aspectFit" />
</view>
<view class="bt-device__info">
<text class="bt-device__name">连接成功</text>
gym-manage-uniapp/pages/memberInfo/bodyTestHome.vue
+6 -6
View File
@@ -34,7 +34,7 @@
:hover-stay-time="150"
@tap="startMeasure"
>
<image class="bt-btn__icon" src="/static/images/activity.png" mode="aspectFit" />
<image class="bt-btn__icon" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/activity.png" mode="aspectFit" />
<text class="bt-btn__text">开始体测</text>
</view>
<view
@@ -53,7 +53,7 @@
<text class="bt-card__title">设备状态</text>
<view class="bt-device">
<view class="bt-device__icon-wrap">
<image class="bt-device__icon" src="/static/images/mappin2.png" mode="aspectFit" />
<image class="bt-device__icon" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/mappin2.png" mode="aspectFit" />
</view>
<view class="bt-device__info">
<text class="bt-device__name">{{ device.name }}</text>
@@ -121,10 +121,10 @@ export default {
latest: null,
device: {},
quickLinks: [
{ key: 'history', label: '历史记录', icon: '/static/images/clock.png' },
{ key: 'compare', label: '历史对比', icon: '/static/images/trendingdown.png' },
{ key: 'trend', label: '趋势分析', icon: '/static/images/activity.png' },
{ key: 'report', label: '体测报告', icon: '/static/images/filetext.png' }
{ key: 'history', label: '历史记录', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/clock.png' },
{ key: 'compare', label: '历史对比', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/trendingdown.png' },
{ key: 'trend', label: '趋势分析', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/activity.png' },
{ key: 'report', label: '体测报告', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/filetext.png' }
]
}
},
gym-manage-uniapp/pages/memberInfo/bodyTestReport.vue
+3 -3
View File
@@ -94,7 +94,7 @@
<text class="bt-trend-link__text">查看完整趋势分析</text>
<image
class="bt-trend-link__arrow"
src="/static/images/chevronright3.png"
src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/chevronright3.png"
mode="aspectFit"
/>
</view>
@@ -140,7 +140,7 @@
:hover-stay-time="150"
@tap="exportReport"
>
<image class="bt-btn__icon" src="/static/images/filetext.png" mode="aspectFit" />
<image class="bt-btn__icon" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/filetext.png" mode="aspectFit" />
<text class="bt-btn__text">导出 PDF</text>
</view>
<view
@@ -149,7 +149,7 @@
:hover-stay-time="150"
@tap="shareReport"
>
<image class="bt-btn__icon" src="/static/images/share2.png" mode="aspectFit" />
<image class="bt-btn__icon" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/share2.png" mode="aspectFit" />
<text class="bt-btn__text">分享</text>
</view>
<view
gym-manage-uniapp/pages/memberInfo/bodyTestSettings.vue
+1 -1
View File
@@ -76,7 +76,7 @@
<text class="bt-card__title">设备管理</text>
<view class="bt-device">
<view class="bt-device__icon-wrap">
<image class="bt-device__icon" src="/static/images/mappin2.png" mode="aspectFit" />
<image class="bt-device__icon" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/mappin2.png" mode="aspectFit" />
</view>
<view class="bt-device__info">
<text class="bt-device__name">{{ device.name }}</text>
gym-manage-uniapp/pages/memberInfo/booking.vue
+3 -3
View File
@@ -44,7 +44,7 @@
>
<image
class="booking-page__alert-icon"
src="/static/images/clock1.png"
src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/clock1.png"
mode="aspectFit"
/>
<text class="booking-page__alert-text">{{ upcomingAlert }}</text>
@@ -82,7 +82,7 @@
<view class="bk-card__meta-row">
<image
class="bk-card__meta-icon"
src="/static/images/clock0.png"
src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/clock0.png"
mode="aspectFit"
/>
<text class="bk-card__meta-text">{{ item.schedule }}</text>
@@ -90,7 +90,7 @@
<view class="bk-card__meta-row">
<image
class="bk-card__meta-icon"
src="/static/images/user0.png"
src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/user0.png"
mode="aspectFit"
/>
<text class="bk-card__meta-text">{{ item.coach }}</text>
gym-manage-uniapp/pages/memberInfo/checkInHistory.vue
+1 -1
View File
@@ -27,7 +27,7 @@
@tap="showDetail(item)"
>
<view class="mi-mod-checkin-row__icon" :class="'mi-mod-checkin-row__icon--' + item.tagTheme">
<image class="mi-mod-checkin-row__icon-img" src="/static/images/usercheck.png" mode="aspectFit" />
<image class="mi-mod-checkin-row__icon-img" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/usercheck.png" mode="aspectFit" />
</view>
<view class="mi-mod-checkin-row__info">
<text class="mi-mod-checkin-row__title">{{ item.title }}</text>
gym-manage-uniapp/pages/memberInfo/courseList.vue
+3 -3
View File
@@ -39,13 +39,13 @@
<picker :range="coaches" @change="onCoachChange">
<view class="mi-course-list__picker">
<text>{{ coach }}</text>
<image class="mi-course-list__arrow" src="/static/images/chevronright3.png" mode="aspectFit" />
<image class="mi-course-list__arrow" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/chevronright3.png" mode="aspectFit" />
</view>
</picker>
<picker :range="periodLabels" @change="onPeriodChange">
<view class="mi-course-list__picker">
<text>{{ periodLabel }}</text>
<image class="mi-course-list__arrow" src="/static/images/chevronright3.png" mode="aspectFit" />
<image class="mi-course-list__arrow" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/chevronright3.png" mode="aspectFit" />
</view>
</picker>
</view>
@@ -103,7 +103,7 @@
hover-class="mi-tap-btn--hover"
@tap="goMyBooking"
>
<image class="mi-course-list__fab-icon" src="/static/images/clock.png" mode="aspectFit" />
<image class="mi-course-list__fab-icon" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/clock.png" mode="aspectFit" />
<text class="mi-course-list__fab-text">我的预约</text>
</view>
</view>
gym-manage-uniapp/pages/memberInfo/memberCard.vue
+2 -2
View File
@@ -8,7 +8,7 @@
<view class="mc-hero__title-row">
<image
class="mc-hero__crown"
src="/static/images/crown.png"
src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/crown.png"
mode="aspectFit"
/>
<text class="mc-hero__name">{{ card.name }}</text>
@@ -31,7 +31,7 @@
>
<image
class="mc-hero__renew-icon"
src="/static/images/refreshcw.png"
src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/refreshcw.png"
mode="aspectFit"
/>
<text class="mc-hero__renew-text">立即续费</text>
gym-manage-uniapp/pages/memberInfo/onlineCourseDetail.vue
+1 -1
View File
@@ -16,7 +16,7 @@
<view class="bt-card">
<text class="bt-card__title">视频播放</text>
<view class="mi-online-player">
<image class="mi-online-player__play" src="/static/images/play.png" mode="aspectFit" />
<image class="mi-online-player__play" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/play.png" mode="aspectFit" />
<text class="mi-online-player__hint">点击播放（支持倍速与拖拽）</text>
</view>
<view class="mi-online-controls">
gym-manage-uniapp/pages/memberInfo/points.vue
+4 -4
View File
@@ -13,19 +13,19 @@
<text class="bt-card__title">快捷入口</text>
<view class="bt-grid">
<view class="bt-grid__item" hover-class="mi-tap--hover" @tap="goMall">
<image class="bt-grid__icon" src="/static/images/star.png" mode="aspectFit" />
<image class="bt-grid__icon" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/star.png" mode="aspectFit" />
<text class="bt-grid__label">积分商城</text>
</view>
<view class="bt-grid__item" hover-class="mi-tap--hover" @tap="goHistory">
<image class="bt-grid__icon" src="/static/images/clock.png" mode="aspectFit" />
<image class="bt-grid__icon" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/clock.png" mode="aspectFit" />
<text class="bt-grid__label">积分明细</text>
</view>
<view class="bt-grid__item" hover-class="mi-tap--hover" @tap="checkIn">
<image class="bt-grid__icon" src="/static/images/usercheck.png" mode="aspectFit" />
<image class="bt-grid__icon" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/usercheck.png" mode="aspectFit" />
<text class="bt-grid__label">签到赚积分</text>
</view>
<view class="bt-grid__item" hover-class="mi-tap--hover" @tap="goReferral">
<image class="bt-grid__icon" src="/static/images/share2.png" mode="aspectFit" />
<image class="bt-grid__icon" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/share2.png" mode="aspectFit" />
<text class="bt-grid__label">邀请赚积分</text>
</view>
</view>
gym-manage-uniapp/pages/memberInfo/referral.vue
+1 -1
View File
@@ -25,7 +25,7 @@
:hover-stay-time="150"
@tap="shareInvite"
>
<image class="bt-btn__icon" src="/static/images/share2.png" mode="aspectFit" />
<image class="bt-btn__icon" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/share2.png" mode="aspectFit" />
<text class="bt-btn__text">分享给好友</text>
</view>
</view>
gym-manage-uniapp/pages/memberInfo/userInfo.vue
+7 -7
View File
@@ -21,7 +21,7 @@
>
<image
class="avatar-block__icon"
src="/static/images/camera.png"
src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/camera.png"
mode="aspectFit"
/>
<text class="avatar-block__text">更换</text>
@@ -41,7 +41,7 @@
<text class="Pixso-paragraph-2_813">{{ name }}</text>
<image
class="Pixso-vector-2_814"
src="/static/images/chevronright1.png"
src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/chevronright1.png"
mode="aspectFit"
/>
</view>
@@ -70,7 +70,7 @@
</view>
<image
class="Pixso-vector-2_823"
src="/static/images/chevronright.png"
src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/chevronright.png"
mode="aspectFit"
/>
</view>
@@ -90,7 +90,7 @@
>
<image
class="gender-btn__icon"
src="/static/images/venus.png"
src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/venus.png"
mode="aspectFit"
/>
<text class="gender-btn__text">女</text>
@@ -104,7 +104,7 @@
>
<image
class="gender-btn__icon"
src="/static/images/mars.png"
src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/mars.png"
mode="aspectFit"
/>
<text class="gender-btn__text">男</text>
@@ -125,7 +125,7 @@
<text class="Pixso-paragraph-2_844">{{ birthday }}</text>
<image
class="Pixso-vector-2_845"
src="/static/images/chevronright0.png"
src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/chevronright0.png"
mode="aspectFit"
/>
</view>
@@ -228,7 +228,7 @@ import {
showValidationError
} from '@/common/memberInfo/validate.js'
const DEFAULT_AVATAR = '/static/images/AvatarEditWrap.png'
const DEFAULT_AVATAR = 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/AvatarEditWrap.png'
export default {
components: { MemberInfoSubNav },