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

整合api请求、添加购买会员卡页面、登陆页面

Browse Source
This commit is contained in:
future
2026-06-23 22:17:53 +08:00
parent 1c547a717e
commit 8d8c823616
70 changed files with 7666 additions and 2656 deletions
Download Patch File Download Diff File Expand all files Collapse all files
gym-manage-uniapp/pages/checkIn/checkIn.vue
+88 -243
View File
@@ -36,7 +36,7 @@
<image :src="image" mode="" :style="{width: Math.min(width, 500) + 'rpx',height: Math.min(height, 500) + 'rpx' } "></image>
</view>
<!-- 加载动画区域 - 设置最小尺寸确保进入页面时可见 -->
<view v-if="!image || STQRC" class="loadingBox" :style="{width: (width > 0 ? Math.min(width, 500) : 500) + 'rpx',height: (height > 0 ? Math.min(height, 500) : 500) + 'rpx' }">
<view v-if="(!image || STQRC) && isHaveCard" class="loadingBox" :style="{width: (width > 0 ? Math.min(width, 500) : 500) + 'rpx',height: (height > 0 ? Math.min(height, 500) : 500) + 'rpx' }">
<view class="loading-spinner">
<view v-if="!isCheckIn" class="spinner-circle"></view>
<view v-else>
@@ -47,7 +47,7 @@
</view>
<!-- 二维码装饰边框 -->
<view v-else class="qr-border" :style="{width: Math.min(width, 500) + 80 + 'rpx',height: Math.min(height, 500) + 80 + 'rpx' }">
<view v-else-if="image" class="qr-border" :style="{width: Math.min(width, 500) + 80 + 'rpx',height: Math.min(height, 500) + 80 + 'rpx' }">
<view class="corner top-left"></view>
<view class="corner top-right"></view>
<view class="corner bottom-left"></view>
@@ -57,7 +57,7 @@
<!-- 状态组件（传递状态和自定义错误文案）- 已签到时不显示 -->
<QrStatus
v-if="!isCheckIn"
v-if="isHaveCard && !isCheckIn"
:status="status"
:errorText="errorText"
/>
@@ -82,7 +82,7 @@
</view>
</view>
<!-- 底部按钮（仅保留刷新二维码，隐藏签到和清除缓存按钮） -->
<!-- 底部按钮 -->
<view class="bottom-actions">
<button class="btn-refresh" @tap="refreshQR">
<uni-icons type="refresh" size="36rpx" color="#5E6F8D"></uni-icons>
@@ -97,10 +97,8 @@ import { ref } from 'vue';
import { onLoad, onUnload } from '@dcloudio/uni-app'
// 引入状态组件（路径与你保持一致）
import QrStatus from '@/components/QRCode/StatusCard.vue'
import { getQRCode, getMyMemberCards } from '@/api/main.js'
// 测试模式配置
const TEST_MODE = true // 开启测试模式
let image = ref("")
let width = ref(0)
let height = ref(0)
@@ -110,6 +108,7 @@ import QrStatus from '@/components/QRCode/StatusCard.vue'
const QRStatus = ref("生成中...")
const STQRC = ref(false)//是否扫码
const isCheckIn = ref(false)
const isHaveCard = ref(true)
const webSoketURL = "ws://localhost:8084/webSocket/checkIn"
const qrcode = ref("")
@@ -204,198 +203,100 @@ import QrStatus from '@/components/QRCode/StatusCard.vue'
}
}
/**
* 清除所有与签到相关的缓存（用于测试阶段）
*/
const clearQRCache = () => {
try {
const keys = uni.getStorageInfoSync().keys || []
let clearedCount = 0
for (const key of keys) {
// 清除 QR_ 开头的缓存（页面内部缓存）
if (key.startsWith(CACHE_PREFIX)) {
uni.removeStorageSync(key)
clearedCount++
}
// 清除 API_CACHE_ 开头的缓存（通过 utils/cache.js 缓存的接口数据）
if (key.startsWith('API_CACHE_')) {
// 只清除与签到相关的 API 缓存
if (key.includes('checkIn') || key.includes('qrcode')) {
uni.removeStorageSync(key)
clearedCount++
}
}
}
console.log(`已清除 ${clearedCount} 个签到相关缓存`)
return clearedCount
} catch (e) {
console.error('清除 QR 缓存失败:', e)
return 0
}
}
/**
* 测试用：手动清除缓存按钮点击事件
*/
const handleClearCache = () => {
uni.showModal({
title: '清除缓存',
content: '确定要清除所有签到相关的缓存吗？（测试用）',
confirmText: '确定',
cancelText: '取消',
success: (res) => {
if (res.confirm) {
const clearedCount = clearQRCache()
// 重置页面状态
image.value = ""
width.value = 0
height.value = 0
status.value = 'loading'
QRStatus.value = "生成中..."
STQRC.value = false
isCheckIn.value = false
uni.showToast({
title: `已清除 ${clearedCount} 个缓存`,
icon: 'success',
duration: 2000
})
// 重置页面状态后不再自动请求二维码
uni.hideLoading()
}
}
onLoad(async () => {
uni.showLoading({
title: '加载中...',
mask: true
})
}
onLoad(() => {
// 测试模式下不显示全局loading，让页面内的加载动画显示
if (!TEST_MODE) {
try {
const memberInfo = uni.getStorageSync('memberInfo')
console.log(memberInfo)
const memberId = memberInfo?.id || memberInfo?.memberId
console.log('[签到页面] 会员ID:', memberId)
if (!memberId) {
throw new Error('未获取到会员ID')
}
const cardRes = await getMyMemberCards(memberId)
console.log('[签到页面] 查询会员卡结果:', JSON.stringify(cardRes, null, 2))
const hasCard = cardRes && cardRes.data && cardRes.data.length > 0
console.log('[签到页面] 查询会员卡 - hasCard:', hasCard)
if (!hasCard) {
isHaveCard.value = false
uni.hideLoading()
uni.showModal({
title: '提示',
content: '您还没有会员卡，无法进行签到。是否去购买会员卡？',
confirmText: '去购买',
cancelText: '取消',
success: (res) => {
if (res.confirm) {
uni.redirectTo({
url: '/pages/memberInfo/purchaseCard'
})
} else {
uni.switchTab({
url: '/pages/index/index'
})
}
},
fail: () => {
uni.switchTab({
url: '/pages/index/index'
})
}
})
return
}
isHaveCard.value = true
uni.showLoading({
title: '生成签到二维码...',
mask: true
})
}
// 测试模式：直接生成假二维码，内容为"欢迎来到活氧舱"
if (TEST_MODE) {
console.log("测试模式：生成假二维码")
generateTestQRCode()
return
}
// 读取签到状态缓存（自动检查过期）
// isCheckIn 代表签到状态，从缓存读取
const cachedIsCheckIn = getCacheData("isCheckIn")
// checkInTime 代表具体签到时间，从缓存读取（显示在 loading-text 中）
const cachedCheckInTime = getCacheData("checkInTime")
if(cachedIsCheckIn != null) {
console.log("进入缓存 - 签到状态")
isCheckIn.value = cachedIsCheckIn
STQRC.value = true
}
// 如果已经签到成功，直接显示成功状态，不需要请求后端
if(isCheckIn.value) {
console.log("已签到且有缓存，无需请求后端")
// 读取二维码图片缓存用于显示
const cachedQRInfo = getCacheData("QRInfo")
if(cachedQRInfo) {
image.value = cachedQRInfo.qrCodeBase64
width.value = cachedQRInfo.width * 2
height.value = cachedQRInfo.height * 2
const cachedIsCheckIn = getCacheData("isCheckIn")
const cachedCheckInTime = getCacheData("checkInTime")
if(cachedIsCheckIn != null) {
console.log("进入缓存 - 签到状态")
isCheckIn.value = cachedIsCheckIn
STQRC.value = true
}
// QRStatus 显示具体签到时间（从缓存读取，显示在 loading-text 中）
QRStatus.value = cachedCheckInTime || "已完成签到"
if(isCheckIn.value) {
console.log("已签到且有缓存，无需请求后端")
const cachedQRInfo = getCacheData("QRInfo")
if(cachedQRInfo) {
image.value = cachedQRInfo.qrCodeBase64
width.value = cachedQRInfo.width * 2
height.value = cachedQRInfo.height * 2
}
QRStatus.value = cachedCheckInTime || "已完成签到"
uni.hideLoading()
return
}
QRStatus.value = "生成中..."
getStorage(null)
} catch (err) {
console.error('[签到页面] 查询会员卡失败:', err)
uni.hideLoading()
return
uni.showToast({
title: '获取会员卡信息失败',
icon: 'none'
})
}
// 未签到或缓存失效，需要请求后端获取二维码
// QRStatus 重置为默认的请求状态
QRStatus.value = "生成中..."
getStorage(null)
})
// 测试模式：生成假二维码（内容为"欢迎来到活氧舱"）
// 不发送请求，使用缓存机制避免重复请求，二维码内容保持不变
// @param {boolean} isRefresh - 是否是刷新操作（true=点击刷新按钮，false=首次进入页面）
const generateTestQRCode = (isRefresh = false) => {
// 检查是否有缓存的二维码图片
const cachedQRImage = getCacheData("TestQRImage")
const qrContent = "欢迎来到活氧舱"
if (cachedQRImage) {
// 使用缓存的二维码图片，不发送请求
console.log("测试模式：使用缓存的二维码图片")
image.value = cachedQRImage.image
width.value = cachedQRImage.width
height.value = cachedQRImage.height
qrcode.value = qrContent
status.value = 'waiting'
QRStatus.value = '请出示二维码签到'
uni.hideLoading()
// 只有刷新操作才显示提示
if (isRefresh) {
uni.showToast({
title: '二维码已刷新',
icon: 'success',
duration: 1500
})
}
return
}
// 首次生成，发送一次请求并缓存
console.log("测试模式：首次生成二维码，发送请求并缓存")
setTimeout(() => {
qrcode.value = qrContent
const qrUrl = `https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=${encodeURIComponent(qrContent)}`
uni.request({
url: qrUrl,
method: 'GET',
responseType: 'arraybuffer',
success: (res) => {
const base64 = uni.arrayBufferToBase64(res.data)
const qrImage = `data:image/png;base64,${base64}`
image.value = qrImage
width.value = 500
height.value = 500
status.value = 'waiting'
QRStatus.value = '请出示二维码签到'
// 缓存二维码图片，后续刷新不再请求
setCacheData("TestQRImage", {
image: qrImage,
width: 500,
height: 500,
content: qrContent
})
uni.hideLoading()
},
fail: () => {
image.value = ''
width.value = 500
height.value = 500
status.value = 'waiting'
QRStatus.value = '测试模式 - 欢迎来到活氧舱'
uni.hideLoading()
}
})
}, 500)
}
// 页面卸载时关闭WebSocket连接（不清除缓存，让缓存自然过期）
onUnload(() => {
closeWebSocket()
// 缓存会在当日23:59:59自动过期，页面卸载时不主动清除
// 如需测试，使用页面上的"清除缓存"按钮手动清除
})
// 获取二维码接口
@@ -439,16 +340,6 @@ import QrStatus from '@/components/QRCode/StatusCard.vue'
image.value = ""
QRStatus.value = "正在刷新二维码..."
// 测试模式：重新生成二维码，但不发送请求，内容不变
if (TEST_MODE) {
// 延迟显示，让用户看到刷新效果
setTimeout(() => {
generateTestQRCode(true) // 传递 isRefresh=true
}, 300)
return
}
// 非测试模式：正常刷新逻辑
setTimeout(() => {
getStorage(null)
}, 500)
@@ -486,12 +377,6 @@ import QrStatus from '@/components/QRCode/StatusCard.vue'
scanType: ['qrCode'],
success: (res) => {
console.log('扫码结果:', res)
// 测试模式下，如果扫描的是我们生成的二维码内容，直接模拟签到成功
if (TEST_MODE && res.result === '欢迎来到活氧舱') {
console.log('测试模式：模拟签到成功')
handleTestModeCheckIn()
return
}
checkIn(res.result)
},
fail: (err) => {
@@ -504,28 +389,6 @@ import QrStatus from '@/components/QRCode/StatusCard.vue'
})
}
// 测试模式：模拟签到成功（不请求后端）
const handleTestModeCheckIn = () => {
closeWebSocket()
const now = new Date()
const dateTime = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`
status.value = 'scanned'
errorText.value = ''
QRStatus.value = `${dateTime} 成功签到`
isCheckIn.value = true
STQRC.value = true
setCacheData("checkInTime", QRStatus.value)
setCacheData("isCheckIn", isCheckIn.value)
uni.showToast({
title: '签到成功！',
icon: 'success',
duration: 2000
})
}
// 手动签到接口
const checkIn = (qrContent) => {
console.log(qrContent)
@@ -690,6 +553,7 @@ import QrStatus from '@/components/QRCode/StatusCard.vue'
socketTask = null
}
}
</script>
<style lang="scss" scoped>
@@ -1021,25 +885,6 @@ import QrStatus from '@/components/QRCode/StatusCard.vue'
}
}
/* 测试用：清除缓存按钮 */
.btn-clear-cache {
width: calc(100% - 96rpx);
height: 88rpx;
background: #FEF2F2;
color: #EF4444;
border: 1rpx solid #FECACA;
border-radius: 999px;
font-size: 29rpx;
display: flex;
align-items: center;
justify-content: center;
gap: 16rpx;
&:active {
background: #FEE2E2;
}
}
/* 旋转动画 */
@keyframes spin {
0% { transform: rotate(0deg); }
gym-manage-uniapp/pages/course/index.vue
+8 -6
View File
@@ -1,7 +1,6 @@
<!-- pages/course/index.vue -->
<template>
<!-- 滚动内容区域 -->
<scroll-view scroll-y="false" class="scroll-container">
<view class="scroll-container">
<view class="tab-page">
<PageHeader title="课程" subtitle="精品团课 · 私教 · 线上课" />
@@ -29,7 +28,7 @@
<view class="bottom-placeholder"></view>
</view>
</scroll-view>
</view>
<!-- 固定 TabBar -->
<view class="tabbar-fixed">
@@ -251,10 +250,13 @@ function goMyCourses() {
/* 滚动容器 */
.scroll-container {
position: relative;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
z-index: 1;
height: 100vh;
width: 100%;
}
/* 固定 TabBar */
gym-manage-uniapp/pages/index/index.vue
+18 -1
View File
@@ -1,6 +1,6 @@
<template>
<!-- 固定白色块（滚动时显示） -->
<view class="hand" :style="{height : handHeight + 'rpx'}" v-show="isShow"></view>
<view class="hand" :style="{height : handHeight + 50 + 'rpx',lineHeight: handHeight + 70 + 'rpx'}" v-show="isShow">活氧舱</view>
<!-- 滚动内容区域 -->
<scroll-view
@@ -33,6 +33,7 @@
<script setup>
import { ref, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import BannerSwiper from '@/components/index/BannerSwiper.vue'
import QuickEntry from '@/components/index/QuickEntry.vue'
import RecommendCourses from '@/components/index/RecommendCourses.vue'
@@ -95,7 +96,21 @@ const refreshData = () => {
})
}
onShow(() => {
// 页面显示时触发未读消息检查
uni.$emit('pageShow')
})
onMounted(() => {
// 设置测试token和userId（实际项目中由登录接口返回）
const testUserId = 1
uni.setStorageSync('userId', testUserId)
// 延迟触发未读消息检查，等待子组件挂载完成
setTimeout(() => {
uni.$emit('pageShow')
}, 500)
setTimeout(() => {
loading.value = false
}, 1500)
@@ -160,6 +175,8 @@ onMounted(() => {
z-index: 100;
background-color: white;
width: 100%;
text-align: center;
font-size: 34rpx;
}
/* 固定 TabBar */
gym-manage-uniapp/pages/memberInfo/bodyTestCompare.vue
+68 -69
View File
@@ -74,84 +74,83 @@
</view>
</template>
<script>
<script setup>
import { ref, computed } from 'vue'
import MemberInfoSubNav from '@/components/memberInfo/MemberInfoSubNav.vue'
import { PAGE, goBackOrTab } from '@/common/constants/routes.js'
import { loadMemberStore } from '@/common/memberInfo/store.js'
import { getBodyTestHistory, getCompareData } from '@/common/memberInfo/bodyTestStore.js'
export default {
components: { MemberInfoSubNav },
data() {
return {
records: [],
recordA: null,
recordB: null,
compareData: null
}
},
computed: {
scoreDiff() {
if (!this.compareData) return 0
return this.compareData.recordA.score - this.compareData.recordB.score
}
},
onShow() {
const store = loadMemberStore()
this.records = getBodyTestHistory(store)
if (this.records.length >= 2 && !this.recordA) {
this.recordA = this.records[0]
this.recordB = this.records[1]
this.refreshCompare()
}
},
methods: {
onBack() {
goBackOrTab(PAGE.BODY_TEST_HISTORY)
},
pickRecord(which) {
const labels = this.records.map(
(r) => `${r.date} · ${r.score}分 · ${r.gradeLabel}`
)
uni.showActionSheet({
itemList: labels,
success: (res) => {
const picked = this.records[res.tapIndex]
if (which === 'a') this.recordA = picked
else this.recordB = picked
this.refreshCompare()
}
})
},
refreshCompare() {
if (!this.recordA || !this.recordB) {
this.compareData = null
return
}
if (this.recordA.id === this.recordB.id) {
uni.showToast({ title: '请选择两条不同记录', icon: 'none' })
this.compareData = null
return
}
const store = loadMemberStore()
this.compareData = getCompareData(store, this.recordA.id, this.recordB.id)
},
formatDiff(diff, key) {
const sign = diff > 0 ? '+' : ''
const units = { bodyFat: '%', weight: '', bmi: '', muscleMass: '', visceralFat: '', bmr: '' }
return `${sign}${diff}${units[key] || ''}`
},
diffColor(row) {
const lowerBetter = ['weight', 'bodyFat', 'visceralFat'].includes(row.key)
const good = lowerBetter ? row.diff < 0 : row.diff > 0
if (row.diff === 0) return '#8A99B4'
return good ? '#2ECC71' : '#F39C12'
}
const records = ref([])
const recordA = ref(null)
const recordB = ref(null)
const compareData = ref(null)
const scoreDiff = computed(() => {
if (!compareData.value) return 0
return compareData.value.recordA.score - compareData.value.recordB.score
})
function refreshFromStore() {
const store = loadMemberStore()
records.value = getBodyTestHistory(store)
if (records.value.length >= 2 && !recordA.value) {
recordA.value = records.value[0]
recordB.value = records.value[1]
refreshCompare()
}
}
function onBack() {
goBackOrTab(PAGE.BODY_TEST_HISTORY)
}
function pickRecord(which) {
const labels = records.value.map(
(r) => `${r.date} · ${r.score}分 · ${r.gradeLabel}`
)
uni.showActionSheet({
itemList: labels,
success: (res) => {
const picked = records.value[res.tapIndex]
if (which === 'a') recordA.value = picked
else recordB.value = picked
refreshCompare()
}
})
}
function refreshCompare() {
if (!recordA.value || !recordB.value) {
compareData.value = null
return
}
if (recordA.value.id === recordB.value.id) {
uni.showToast({ title: '请选择两条不同记录', icon: 'none' })
compareData.value = null
return
}
const store = loadMemberStore()
compareData.value = getCompareData(store, recordA.value.id, recordB.value.id)
}
function formatDiff(diff, key) {
const sign = diff > 0 ? '+' : ''
const units = { bodyFat: '%', weight: '', bmi: '', muscleMass: '', visceralFat: '', bmr: '' }
return `${sign}${diff}${units[key] || ''}`
}
function diffColor(row) {
const lowerBetter = ['weight', 'bodyFat', 'visceralFat'].includes(row.key)
const good = lowerBetter ? row.diff < 0 : row.diff > 0
if (row.diff === 0) return '#8A99B4'
return good ? '#2ECC71' : '#F39C12'
}
refreshFromStore()
</script>
<style>
<style lang="scss">
@import '@/common/style/base.css';
@import '@/common/style/memberInfo/pages/page-reset.css';
@import '@/common/style/memberInfo/pages/sub-page-base.css';
gym-manage-uniapp/pages/memberInfo/bodyTestConnect.vue
+43 -42
View File
@@ -73,7 +73,8 @@
</view>
</template>
<script>
<script setup>
import { ref } from 'vue'
import MemberInfoSubNav from '@/components/memberInfo/MemberInfoSubNav.vue'
import { PAGE, navigateToPage, goBackOrTab } from '@/common/constants/routes.js'
import {
@@ -81,52 +82,52 @@ import {
persistMemberStore
} from '@/common/memberInfo/store.js'
import {
connectBodyTestDevice,
bodyTestMock
connectBodyTestDevice
} from '@/common/memberInfo/bodyTestStore.js'
export default {
components: { MemberInfoSubNav },
data() {
return {
device: {},
steps: bodyTestMock.connectSteps,
searching: false,
connected: false,
searchHint: '请保持手机蓝牙已开启'
}
},
onShow() {
const store = loadMemberStore()
this.device = { ...store.bodyTest.device }
this.connected = store.bodyTest.device.connected
},
methods: {
onBack() {
goBackOrTab(PAGE.BODY_TEST_HOME)
},
searchDevice() {
if (this.searching) return
this.searching = true
this.searchHint = '发现 InBody 270…'
setTimeout(() => {
const store = loadMemberStore()
connectBodyTestDevice(store)
persistMemberStore(store)
this.device = { ...store.bodyTest.device }
this.connected = true
this.searching = false
uni.showToast({ title: '设备已连接', icon: 'success' })
}, 1800)
},
goMeasuring() {
navigateToPage(PAGE.BODY_TEST_MEASURING)
}
}
const device = ref({})
const steps = ref([
{ step: 1, text: '打开体测仪电源' },
{ step: 2, text: '站在体测仪上' },
{ step: 3, text: '等待测量完成' }
])
const searching = ref(false)
const connected = ref(false)
const searchHint = ref('请保持手机蓝牙已开启')
function refreshFromStore() {
const store = loadMemberStore()
device.value = { ...store.bodyTest.device }
connected.value = store.bodyTest.device.connected
}
function onBack() {
goBackOrTab(PAGE.BODY_TEST_HOME)
}
function searchDevice() {
if (searching.value) return
searching.value = true
searchHint.value = '发现 InBody 270…'
setTimeout(() => {
const store = loadMemberStore()
connectBodyTestDevice(store)
persistMemberStore(store)
device.value = { ...store.bodyTest.device }
connected.value = true
searching.value = false
uni.showToast({ title: '设备已连接', icon: 'success' })
}, 1800)
}
function goMeasuring() {
navigateToPage(PAGE.BODY_TEST_MEASURING)
}
refreshFromStore()
</script>
<style>
<style lang="scss">
@import '@/common/style/base.css';
@import '@/common/style/memberInfo/pages/page-reset.css';
@import '@/common/style/memberInfo/pages/sub-page-base.css';
gym-manage-uniapp/pages/memberInfo/bodyTestHistory.vue
+39 -48
View File
@@ -59,53 +59,52 @@
</view>
</template>
<script>
<script setup>
import { ref, computed, watch } from 'vue'
import MemberInfoSubNav from '@/components/memberInfo/MemberInfoSubNav.vue'
import { PAGE, navigateToPage, goBackOrTab } from '@/common/constants/routes.js'
import { loadMemberStore } from '@/common/memberInfo/store.js'
import { getBodyTestHistory, getBodyTestYears, getBodyTestChangeBadge } from '@/common/memberInfo/bodyTestStore.js'
export default {
components: { MemberInfoSubNav },
data() {
return { activeYear: 'all', years: [], allRecords: [] }
},
computed: {
records() {
const list = this.activeYear === 'all'
? this.allRecords
: this.allRecords.filter((r) => r.date.startsWith(this.activeYear))
return list.map((item, index) => {
const previous = list[index + 1]
return {
...item,
changeBadge: getBodyTestChangeBadge(item, previous)
}
})
const activeYear = ref('all')
const years = ref([])
const allRecords = ref([])
const records = computed(() => {
const list = activeYear.value === 'all'
? allRecords.value
: allRecords.value.filter((r) => r.date.startsWith(activeYear.value))
return list.map((item, index) => {
const previous = list[index + 1]
return {
...item,
changeBadge: getBodyTestChangeBadge(item, previous)
}
},
watch: {
activeYear() { this.loadList() }
},
onShow() { this.loadList() },
methods: {
loadList() {
const store = loadMemberStore()
this.years = getBodyTestYears(store)
this.allRecords = getBodyTestHistory(store)
},
onBack() { goBackOrTab(PAGE.MEMBER) },
viewReport(item) {
navigateToPage(`${PAGE.BODY_TEST_REPORT}?id=${item.id}`)
},
goCompare() {
navigateToPage(PAGE.BODY_TEST_COMPARE)
}
}
})
})
function loadList() {
const store = loadMemberStore()
years.value = getBodyTestYears(store)
allRecords.value = getBodyTestHistory(store)
}
function onBack() { goBackOrTab(PAGE.MEMBER) }
function viewReport(item) {
navigateToPage(`${PAGE.BODY_TEST_REPORT}?id=${item.id}`)
}
function goCompare() {
navigateToPage(PAGE.BODY_TEST_COMPARE)
}
watch(activeYear, () => { loadList() })
loadList()
</script>
<style>
<style lang="scss">
@import '@/common/style/base.css';
@import '@/common/style/memberInfo/pages/page-reset.css';
@import '@/common/style/memberInfo/pages/sub-page-base.css';
@@ -196,15 +195,7 @@ export default {
background: rgba(46, 204, 113, 0.12);
}
.mi-timeline-card__badge--good text {
font-size: 10px;
color: var(--success-green, #2ECC71);
font-weight: 600;
}
.mi-timeline-card__badge--warn text {
font-size: 10px;
color: var(--warning-amber, #F39C12);
font-weight: 600;
.mi-timeline-card__badge--warn {
background: rgba(243, 156, 18, 0.12);
}
</style>
gym-manage-uniapp/pages/memberInfo/bodyTestHome.vue
+127 -143
View File
@@ -1,47 +1,28 @@
<template>
<view class="scroll-container theme-light">
<view class="bt-page">
<MemberInfoSubNav title="智能体测" @back="goBack" />
<view class="bt-page__action-bar bt-page__action-bar--end">
<text
class="bt-page__action-link"
hover-class="mi-tap--hover"
:hover-stay-time="150"
@tap="goSettings"
>
体测设置
</text>
</view>
<MemberInfoSubNav title="体测" @back="goBack" />
<view class="bt-page__body">
<view class="bt-hero">
<view class="bt-hero__top">
<text class="bt-hero__label">最新体测评分</text>
<view class="bt-hero__badge">
<text class="bt-hero__badge-text">{{ latest?.status || '暂无数据' }}</text>
<view v-if="latest" class="bt-hero">
<view class="bt-hero__time">
<image class="bt-hero__time-icon" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/clock.png" mode="aspectFit" />
<text class="bt-hero__time-text">{{ latest.testTime }}</text>
</view>
<view class="bt-hero__metrics">
<view
v-for="m in previewMetrics"
:key="m.key"
class="bt-hero__metric"
>
<text class="bt-hero__metric-value">{{ m.value }}</text>
<text class="bt-hero__metric-label">{{ m.label }}</text>
</view>
</view>
<view class="bt-hero__score-row">
<text class="bt-hero__score">{{ latest?.score ?? '--' }}</text>
<text class="bt-hero__grade">{{ latest?.grade ?? '' }} {{ latest?.gradeLabel ?? '' }}</text>
</view>
<text class="bt-hero__meta">
{{ latest ? `最近测量 · ${latest.date} ${latest.time}` : '完成首次体测，获取健康画像' }}
</text>
<view class="bt-hero__actions">
<view
class="bt-btn bt-btn--primary"
hover-class="mi-tap-btn--hover"
:hover-stay-time="150"
@tap="startMeasure"
>
<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
v-if="latest"
class="bt-btn bt-btn--ghost"
hover-class="mi-tap-btn--hover"
:hover-stay-time="150"
@tap="viewLatestReport"
>
<text class="bt-btn__text">查看报告</text>
@@ -50,142 +31,145 @@
</view>
<view class="bt-card">
<text class="bt-card__title">设备状态</text>
<view class="bt-device">
<view class="bt-device__icon-wrap">
<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>
<text
class="bt-device__status"
:class="{ 'bt-device__status--on': device.connected }"
>
{{ deviceStatusText }}
</text>
</view>
<view class="bt-card__header">
<text class="bt-card__title">快捷操作</text>
</view>
<view class="bt-quick-grid">
<view
class="bt-device__dot"
:class="{ 'bt-device__dot--on': device.connected }"
></view>
v-for="link in quickLinks"
:key="link.key"
class="bt-quick-item"
hover-class="mi-tap--hover"
:hover-stay-time="150"
@tap="onQuickLink(link.key)"
>
<image class="bt-quick-item__icon" :src="link.icon" mode="aspectFit" />
<text class="bt-quick-item__label">{{ link.label }}</text>
</view>
</view>
</view>
<view class="bt-card">
<text class="bt-card__title">快捷入口</text>
<view class="bt-grid">
<view class="bt-card__header">
<text class="bt-card__title">开始体测</text>
</view>
<view class="bt-device-status" @tap="startMeasure">
<view class="bt-device-status__icon-wrap">
<image
class="bt-device-status__icon"
src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/bluetooth.png"
mode="aspectFit"
/>
</view>
<view class="bt-device-status__info">
<text class="bt-device-status__name">{{ device.name || '体脂秤' }}</text>
<text class="bt-device-status__text">{{ deviceStatusText }}</text>
</view>
<image
class="bt-device-status__arrow"
src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/rightarrow.png"
mode="aspectFit"
/>
</view>
<view class="bt-card__actions">
<view
v-for="item in quickLinks"
:key="item.key"
class="bt-grid__item"
hover-class="mi-tap--hover"
class="bt-btn bt-btn--primary"
hover-class="mi-tap-btn--hover"
:hover-stay-time="150"
@tap="onQuickLink(item.key)"
@tap="startMeasure"
>
<image class="bt-grid__icon" :src="item.icon" mode="aspectFit" />
<text class="bt-grid__label">{{ item.label }}</text>
<text class="bt-btn__text">{{ device.connected ? '开始测量' : '连接设备' }}</text>
</view>
</view>
</view>
<view v-if="latest" class="bt-card">
<text class="bt-card__title">核心指标概览</text>
<view class="bt-metrics">
<view
v-for="m in previewMetrics"
:key="m.key"
class="bt-metric"
>
<text class="bt-metric__value">{{ m.value }}</text>
<text class="bt-metric__label">{{ m.label }}</text>
</view>
</view>
<view class="bt-settings-link" @tap="goSettings">
<text class="bt-settings-link__text">体测设置</text>
<image class="bt-settings-link__arrow" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/rightarrow.png" mode="aspectFit" />
</view>
</view>
</view>
</view>
</template>
<script>
<script setup>
import { ref, computed } from 'vue'
import MemberInfoSubNav from '@/components/memberInfo/MemberInfoSubNav.vue'
import { PAGE, navigateToPage } from '@/common/constants/routes.js'
import { PAGE, navigateToPage, backToMemberCenter } from '@/common/constants/routes.js'
import { loadMemberStore } from '@/common/memberInfo/store.js'
import { getLatestBodyTestRecord } from '@/common/memberInfo/bodyTestStore.js'
import { subPageMixin } from '@/common/memberInfo/mixins.js'
export default {
components: { MemberInfoSubNav },
mixins: [subPageMixin],
data() {
return {
latest: null,
device: {},
quickLinks: [
{ 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' }
]
}
},
computed: {
deviceStatusText() {
if (this.device.connected) {
return `已连接 · 电量 ${this.device.battery}%`
}
return '未连接 · 点击开始体测进行配对'
},
previewMetrics() {
if (!this.latest?.metrics) return []
const m = this.latest.metrics
return [
{ key: 'weight', label: '体重(kg)', value: m.weight },
{ key: 'bmi', label: 'BMI', value: m.bmi },
{ key: 'bodyFat', label: '体脂率(%)', value: m.bodyFat },
{ key: 'muscleMass', label: '肌肉量(kg)', value: m.muscleMass }
]
}
},
onShow() {
this.refreshFromStore()
},
methods: {
refreshFromStore() {
const store = loadMemberStore()
this.latest = getLatestBodyTestRecord(store)
this.device = { ...store.bodyTest.device }
},
startMeasure() {
const store = loadMemberStore()
if (store.bodyTest.device.connected) {
navigateToPage(PAGE.BODY_TEST_MEASURING)
} else {
navigateToPage(PAGE.BODY_TEST_CONNECT)
}
},
viewLatestReport() {
if (!this.latest) return
navigateToPage(`${PAGE.BODY_TEST_REPORT}?id=${this.latest.id}`)
},
goSettings() {
navigateToPage(PAGE.BODY_TEST_SETTINGS)
},
onQuickLink(key) {
const routes = {
history: PAGE.BODY_TEST_HISTORY,
compare: PAGE.BODY_TEST_COMPARE,
trend: PAGE.BODY_TEST_TREND,
report: this.latest
? `${PAGE.BODY_TEST_REPORT}?id=${this.latest.id}`
: PAGE.BODY_TEST_HISTORY
}
navigateToPage(routes[key] || PAGE.BODY_TEST_HOME)
}
const latest = ref(null)
const device = ref({})
const quickLinks = ref([
{ 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' }
])
const deviceStatusText = computed(() => {
if (device.value.connected) {
return `已连接 · 电量 ${device.value.battery}%`
}
return '未连接 · 点击开始体测进行配对'
})
const previewMetrics = computed(() => {
if (!latest.value?.metrics) return []
const m = latest.value.metrics
return [
{ key: 'weight', label: '体重(kg)', value: m.weight },
{ key: 'bmi', label: 'BMI', value: m.bmi },
{ key: 'bodyFat', label: '体脂率(%)', value: m.bodyFat },
{ key: 'muscleMass', label: '肌肉量(kg)', value: m.muscleMass }
]
})
function refreshFromStore() {
const store = loadMemberStore()
latest.value = getLatestBodyTestRecord(store)
device.value = { ...store.bodyTest.device }
}
function goBack() {
backToMemberCenter()
}
function startMeasure() {
const store = loadMemberStore()
if (store.bodyTest.device.connected) {
navigateToPage(PAGE.BODY_TEST_MEASURING)
} else {
navigateToPage(PAGE.BODY_TEST_CONNECT)
}
}
function viewLatestReport() {
if (!latest.value) return
navigateToPage(`${PAGE.BODY_TEST_REPORT}?id=${latest.value.id}`)
}
function goSettings() {
navigateToPage(PAGE.BODY_TEST_SETTINGS)
}
function onQuickLink(key) {
const routes = {
history: PAGE.BODY_TEST_HISTORY,
compare: PAGE.BODY_TEST_COMPARE,
trend: PAGE.BODY_TEST_TREND,
report: latest.value
? `${PAGE.BODY_TEST_REPORT}?id=${latest.value.id}`
: PAGE.BODY_TEST_HISTORY
}
navigateToPage(routes[key] || PAGE.BODY_TEST_HOME)
}
refreshFromStore()
</script>
<style>
<style lang="scss">
@import '@/common/style/base.css';
@import '@/common/style/memberInfo/pages/page-reset.css';
@import '@/common/style/memberInfo/pages/sub-page-base.css';
gym-manage-uniapp/pages/memberInfo/bodyTestMeasuring.vue
+95 -96
View File
@@ -38,7 +38,8 @@
</view>
</template>
<script>
<script setup>
import { ref, computed, onUnmounted } from 'vue'
import MemberInfoSubNav from '@/components/memberInfo/MemberInfoSubNav.vue'
import { PAGE, navigateToPage, goBackOrTab } from '@/common/constants/routes.js'
import {
@@ -57,108 +58,106 @@ const PHASES = [
{ until: 100, hint: '即将完成', text: '生成健康报告中…' }
]
export default {
components: { MemberInfoSubNav },
data() {
return {
progress: 0,
liveMetrics: {},
timer: null,
finished: false
}
},
computed: {
ringRotation() {
return -90 + (this.progress / 100) * 360
},
phaseHint() {
const phase = PHASES.find((p) => this.progress <= p.until)
return phase?.hint || '完成'
},
statusText() {
const phase = PHASES.find((p) => this.progress <= p.until)
return phase?.text || '测量完成'
},
liveDisplay() {
const m = this.liveMetrics
return [
{ key: 'weight', label: '体重(kg)', value: m.weight ?? '--' },
{ key: 'bodyFat', label: '体脂率(%)', value: m.bodyFat ?? '--' },
{ key: 'muscleMass', label: '肌肉量(kg)', value: m.muscleMass ?? '--' },
{ key: 'bmr', label: '基础代谢', value: m.bmr ?? '--' }
]
}
},
onLoad() {
const store = loadMemberStore()
if (!store.bodyTest.device.connected) {
uni.showToast({ title: '请先连接设备', icon: 'none' })
setTimeout(() => {
navigateToPage(PAGE.BODY_TEST_CONNECT)
}, 800)
const progress = ref(0)
const liveMetrics = ref({})
let timer = null
const finished = ref(false)
const ringRotation = computed(() => {
return -90 + (progress.value / 100) * 360
})
const phaseHint = computed(() => {
const phase = PHASES.find((p) => progress.value <= p.until)
return phase?.hint || '完成'
})
const statusText = computed(() => {
const phase = PHASES.find((p) => progress.value <= p.until)
return phase?.text || '测量完成'
})
const liveDisplay = computed(() => {
const m = liveMetrics.value
return [
{ key: 'weight', label: '体重(kg)', value: m.weight ?? '--' },
{ key: 'bodyFat', label: '体脂率(%)', value: m.bodyFat ?? '--' },
{ key: 'muscleMass', label: '肌肉量(kg)', value: m.muscleMass ?? '--' },
{ key: 'bmr', label: '基础代谢', value: m.bmr ?? '--' }
]
})
function clearTimer() {
if (timer) {
clearInterval(timer)
timer = null
}
}
function startMeasurement() {
const store = loadMemberStore()
liveMetrics.value = interpolateMeasuringMetrics(0, store.profile)
timer = setInterval(() => {
if (progress.value >= 100) {
completeMeasurement()
return
}
this.startMeasurement()
},
onUnload() {
this.clearTimer()
},
methods: {
clearTimer() {
if (this.timer) {
clearInterval(this.timer)
this.timer = null
progress.value = Math.min(100, progress.value + 2)
const s = loadMemberStore()
liveMetrics.value = interpolateMeasuringMetrics(progress.value, s.profile)
}, 120)
}
function completeMeasurement() {
if (finished.value) return
finished.value = true
clearTimer()
const store = loadMemberStore()
const record = saveSimulatedBodyTestRecord(store, {
...liveMetrics.value,
visceralFat: 6,
boneMass: 2.42,
bodyWater: liveMetrics.value.bodyWater || 52.8,
protein: 16.4
})
persistMemberStore(store)
uni.showToast({ title: '测量完成', icon: 'success' })
setTimeout(() => {
navigateToPage(`${PAGE.BODY_TEST_REPORT}?id=${record.id}&new=1`)
}, 600)
}
function onCancel() {
if (finished.value) return
uni.showModal({
title: '取消测量',
content: '确定要中断当前体测吗？',
success: (res) => {
if (res.confirm) {
clearTimer()
goBackOrTab(PAGE.BODY_TEST_HOME)
}
},
startMeasurement() {
const store = loadMemberStore()
this.liveMetrics = interpolateMeasuringMetrics(0, store.profile)
this.timer = setInterval(() => {
if (this.progress >= 100) {
this.completeMeasurement()
return
}
this.progress = Math.min(100, this.progress + 2)
const s = loadMemberStore()
this.liveMetrics = interpolateMeasuringMetrics(this.progress, s.profile)
}, 120)
},
completeMeasurement() {
if (this.finished) return
this.finished = true
this.clearTimer()
const store = loadMemberStore()
const record = saveSimulatedBodyTestRecord(store, {
...this.liveMetrics,
visceralFat: 6,
boneMass: 2.42,
bodyWater: this.liveMetrics.bodyWater || 52.8,
protein: 16.4
})
persistMemberStore(store)
uni.showToast({ title: '测量完成', icon: 'success' })
setTimeout(() => {
navigateToPage(`${PAGE.BODY_TEST_REPORT}?id=${record.id}&new=1`)
}, 600)
},
onCancel() {
if (this.finished) return
uni.showModal({
title: '取消测量',
content: '确定要中断当前体测吗？',
success: (res) => {
if (res.confirm) {
this.clearTimer()
goBackOrTab(PAGE.BODY_TEST_HOME)
}
}
})
}
}
})
}
onUnmounted(() => {
clearTimer()
})
// Initialize
const store = loadMemberStore()
if (!store.bodyTest.device.connected) {
uni.showToast({ title: '请先连接设备', icon: 'none' })
setTimeout(() => {
navigateToPage(PAGE.BODY_TEST_CONNECT)
}, 800)
} else {
startMeasurement()
}
</script>
<style>
<style lang="scss">
@import '@/common/style/base.css';
@import '@/common/style/memberInfo/pages/page-reset.css';
@import '@/common/style/memberInfo/pages/sub-page-base.css';
gym-manage-uniapp/pages/memberInfo/bodyTestReport.vue
+127 -114
View File
@@ -169,7 +169,8 @@
</view>
</template>
<script>
<script setup>
import { ref, computed } from 'vue'
import MemberInfoSubNav from '@/components/memberInfo/MemberInfoSubNav.vue'
import BodyTestRadarChart from '@/components/memberInfo/BodyTestRadarChart.vue'
import BodyTestTrendChart from '@/components/memberInfo/BodyTestTrendChart.vue'
@@ -180,127 +181,139 @@ import {
getBodyTestTrendData,
getRecommendedCourses,
computeChanges,
formatChangeValue,
bodyTestMock
formatChangeValue
} from '@/common/memberInfo/bodyTestStore.js'
export default {
components: { MemberInfoSubNav, BodyTestRadarChart, BodyTestTrendChart },
data() {
const recordId = ref(null)
const record = ref(null)
const previous = ref(null)
const chartWidth = ref(300)
const radarLabels = computed(() => {
return ['体重', 'BMI', '体脂率', '肌肉量', '内脏脂肪', '基础代谢']
})
const radarKeys = ['weight', 'bmi', 'bodyFat', 'muscleMass', 'visceralFat', 'bmr']
const radarValues = computed(() => {
if (!record.value?.radar) return []
return radarKeys.map((k) => record.value.radar[k] || 0)
})
const metricDefs = [
{ key: 'weight', label: '体重', unit: 'kg' },
{ key: 'bmi', label: 'BMI' },
{ key: 'bodyFat', label: '体脂率', unit: '%' },
{ key: 'muscleMass', label: '肌肉量', unit: 'kg' },
{ key: 'visceralFat', label: '内脏脂肪', unit: '级' },
{ key: 'bmr', label: '基础代谢', unit: 'kcal' },
{ key: 'bodyWater', label: '体水分', unit: '%' },
{ key: 'boneMass', label: '骨量', unit: 'kg' }
]
const metricCards = computed(() => {
if (!record.value?.metrics) return []
const changesVal = changes.value
const defs = metricDefs.slice(0, 8)
return defs.map((def) => {
const val = record.value.metrics[def.key]
const diff = changesVal[def.key]
let changeText = ''
let changeClass = ''
if (diff !== undefined && diff !== null) {
changeText = formatChangeValue(def.key, diff)
const lowerBetter = ['weight', 'bodyFat', 'visceralFat'].includes(def.key)
const isGood = lowerBetter ? diff < 0 : diff > 0
changeClass = isGood ? 'bt-metric__change--down' : 'bt-metric__change--up'
}
const display = def.unit ? `${val}${def.unit === '%' ? '%' : def.unit === 'kg' ? '' : ` ${def.unit}`}` : val
return {
recordId: null,
record: null,
previous: null,
chartWidth: 300
}
},
computed: {
radarLabels() {
return bodyTestMock.radarLabels.map((l) => l.label)
},
radarValues() {
if (!this.record?.radar) return []
const keys = bodyTestMock.radarLabels.map((l) => l.key)
return keys.map((k) => this.record.radar[k] || 0)
},
metricCards() {
if (!this.record?.metrics) return []
const changes = this.changes
const defs = bodyTestMock.metricDefs.slice(0, 8)
return defs.map((def) => {
const val = this.record.metrics[def.key]
const diff = changes[def.key]
let changeText = ''
let changeClass = ''
if (diff !== undefined && diff !== null) {
changeText = formatChangeValue(def.key, diff)
const lowerBetter = ['weight', 'bodyFat', 'visceralFat'].includes(def.key)
const isGood = lowerBetter ? diff < 0 : diff > 0
changeClass = isGood ? 'bt-metric__change--down' : 'bt-metric__change--up'
}
const display = def.unit ? `${val}${def.unit === '%' ? '%' : def.unit === 'kg' ? '' : ` ${def.unit}`}` : val
return {
key: def.key,
label: def.label + (def.unit && def.unit !== '%' && def.unit !== 'kg' ? `(${def.unit})` : def.unit === 'kg' ? '(kg)' : def.unit === '%' ? '(%)' : ''),
display: def.key === 'bodyFat' ? `${val}%` : def.key === 'bodyWater' ? `${val}%` : def.unit === 'kg' ? val : def.unit ? `${val}` : val,
changeText,
changeClass
}
})
},
changes() {
if (this.record?.changes) return this.record.changes
if (this.previous) return computeChanges(this.record, this.previous)
return {}
},
trendPreview() {
const store = loadMemberStore()
return getBodyTestTrendData(store, 'weight', 4)
},
courses() {
return getRecommendedCourses(this.record)
}
},
onLoad(options) {
this.recordId = options?.id ? Number(options.id) : null
this.chartWidth = uni.getSystemInfoSync().windowWidth - 64
this.loadRecord()
},
methods: {
loadRecord() {
const store = loadMemberStore()
const records = store.bodyTest.records
if (this.recordId) {
this.record = getBodyTestRecordById(store, this.recordId)
} else {
this.record = records.length ? { ...records[0] } : null
}
if (this.record) {
const idx = records.findIndex((r) => r.id === this.record.id)
this.previous = idx >= 0 && records[idx + 1] ? records[idx + 1] : null
}
},
onBack() {
goBackOrTab(PAGE.BODY_TEST_HOME)
},
goTrend() {
navigateToPage(`${PAGE.BODY_TEST_TREND}?metric=weight`)
},
exportReport() {
uni.showLoading({ title: '生成中…' })
setTimeout(() => {
uni.hideLoading()
uni.showToast({ title: '报告已保存到相册', icon: 'success' })
}, 1200)
},
shareReport() {
uni.showActionSheet({
itemList: ['分享给微信好友', '生成分享海报', '复制报告链接'],
success: (res) => {
const msgs = ['已唤起微信分享', '海报已生成', '链接已复制']
uni.showToast({ title: msgs[res.tapIndex] || '分享成功', icon: 'none' })
}
})
},
onCourseTap(course) {
uni.showModal({
title: course.title,
content: `${course.coach}\n${course.schedule}\n\n是否前往预约？`,
success: (res) => {
if (res.confirm) {
navigateToPage(PAGE.COURSE_LIST)
}
}
})
},
retest() {
navigateToPage(PAGE.BODY_TEST_HOME)
key: def.key,
label: def.label + (def.unit && def.unit !== '%' && def.unit !== 'kg' ? `(${def.unit})` : def.unit === 'kg' ? '(kg)' : def.unit === '%' ? '(%)' : ''),
display: def.key === 'bodyFat' ? `${val}%` : def.key === 'bodyWater' ? `${val}%` : def.unit === 'kg' ? val : def.unit ? `${val}` : val,
changeText,
changeClass
}
})
})
const changes = computed(() => {
if (record.value?.changes) return record.value.changes
if (previous.value) return computeChanges(record.value, previous.value)
return {}
})
const trendPreview = computed(() => {
const store = loadMemberStore()
return getBodyTestTrendData(store, 'weight', 4)
})
const courses = computed(() => {
return getRecommendedCourses(record.value)
})
function loadRecord() {
const store = loadMemberStore()
const records = store.bodyTest.records
if (recordId.value) {
record.value = getBodyTestRecordById(store, recordId.value)
} else {
record.value = records.length ? { ...records[0] } : null
}
if (record.value) {
const idx = records.findIndex((r) => r.id === record.value.id)
previous.value = idx >= 0 && records[idx + 1] ? records[idx + 1] : null
}
}
function onBack() {
goBackOrTab(PAGE.BODY_TEST_HOME)
}
function goTrend() {
navigateToPage(`${PAGE.BODY_TEST_TREND}?metric=weight`)
}
function exportReport() {
uni.showLoading({ title: '生成中…' })
setTimeout(() => {
uni.hideLoading()
uni.showToast({ title: '报告已保存到相册', icon: 'success' })
}, 1200)
}
function shareReport() {
uni.showActionSheet({
itemList: ['分享给微信好友', '生成分享海报', '复制报告链接'],
success: (res) => {
const msgs = ['已唤起微信分享', '海报已生成', '链接已复制']
uni.showToast({ title: msgs[res.tapIndex] || '分享成功', icon: 'none' })
}
})
}
function onCourseTap(course) {
uni.showModal({
title: course.title,
content: `${course.coach}\n${course.schedule}\n\n是否前往预约？`,
success: (res) => {
if (res.confirm) {
navigateToPage(PAGE.COURSE_LIST)
}
}
})
}
function retest() {
navigateToPage(PAGE.BODY_TEST_HOME)
}
// Initialize
chartWidth.value = uni.getSystemInfoSync().windowWidth - 64
loadRecord()
</script>
<style>
<style lang="scss">
@import '@/common/style/base.css';
@import '@/common/style/memberInfo/pages/page-reset.css';
@import '@/common/style/memberInfo/pages/sub-page-base.css';
gym-manage-uniapp/pages/memberInfo/bodyTestSettings.vue
+133 -136
View File
@@ -3,97 +3,99 @@
<view class="bt-page">
<MemberInfoSubNav title="体测设置" @back="onBack" />
<view class="bt-page__body">
<view class="bt-card">
<text class="bt-card__title">连接与同步</text>
<view class="bt-setting">
<view>
<text class="bt-setting__label">蓝牙自动连接</text>
<text class="bt-setting__desc">进入体测页时自动搜索已配对设备</text>
</view>
<switch
:checked="settings.bluetoothEnabled"
color="#FF6B35"
@change="onSwitch('bluetoothEnabled', $event)"
/>
</view>
<view class="bt-setting">
<view>
<text class="bt-setting__label">测量完成自动同步</text>
<text class="bt-setting__desc">结果自动保存至云端与本地</text>
</view>
<switch
:checked="settings.autoSync"
color="#FF6B35"
@change="onSwitch('autoSync', $event)"
/>
</view>
</view>
<view class="bt-card">
<text class="bt-card__title">通知与隐私</text>
<view class="bt-setting">
<view>
<text class="bt-setting__label">测量完成通知</text>
<text class="bt-setting__desc">体测结束后推送报告摘要</text>
</view>
<switch
:checked="settings.notifyOnComplete"
color="#FF6B35"
@change="onSwitch('notifyOnComplete', $event)"
/>
</view>
<view class="bt-setting">
<view>
<text class="bt-setting__label">分享时匿名化</text>
<text class="bt-setting__desc">隐藏姓名与手机号</text>
</view>
<switch
:checked="settings.shareAnonymous"
color="#FF6B35"
@change="onSwitch('shareAnonymous', $event)"
/>
</view>
</view>
<view class="bt-card">
<text class="bt-card__title">单位制</text>
<view class="bt-setting">
<view>
<text class="bt-setting__label">度量单位</text>
<text class="bt-setting__desc">{{ unitLabel }}</text>
</view>
<view
hover-class="mi-tap--hover"
:hover-stay-time="150"
@tap="toggleUnit"
>
<text style="font-size: 14px; color: #1A4A6F; font-weight: 600;">切换</text>
<view class="bt-setting-row" @tap="toggleUnit">
<text class="bt-setting-row__label">单位制</text>
<view class="bt-setting-row__value">
<text class="bt-setting-row__text">{{ unitLabel }}</text>
<image
class="bt-setting-row__arrow"
src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/rightarrow.png"
mode="aspectFit"
/>
</view>
</view>
</view>
<view class="bt-card">
<text class="bt-card__title">设备管理</text>
<view class="bt-device">
<view class="bt-device__icon-wrap">
<image class="bt-device__icon" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/mappin2.png" mode="aspectFit" />
<view class="bt-device-row">
<view class="bt-device-row__icon">
<image
src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/bluetooth.png"
mode="aspectFit"
/>
</view>
<view class="bt-device__info">
<text class="bt-device__name">{{ device.name }}</text>
<text class="bt-device__status">
{{ device.connected ? '已连接' : '未连接' }}
· 上次 {{ device.lastConnected || '--' }}
<view class="bt-device-row__info">
<text class="bt-device-row__name">{{ device.name || '未连接设备' }}</text>
<text class="bt-device-row__status">
{{ device.connected ? `已连接 · 电量 ${device.battery}%` : '点击连接体脂秤' }}
</text>
</view>
<view
v-if="device.connected"
class="bt-device-row__disconnect"
hover-class="mi-tap-btn--hover"
@tap="disconnect"
>
<text class="bt-device-row__disconnect-text">解除</text>
</view>
</view>
<view
class="bt-btn bt-btn--outline"
style="margin-top: 12px;"
hover-class="mi-tap-btn--hover"
:hover-stay-time="150"
@tap="disconnect"
>
<text class="bt-btn__text">解除设备配对</text>
</view>
<view class="bt-card">
<text class="bt-card__title">通知提醒</text>
<view class="bt-setting-row">
<text class="bt-setting-row__label">体测提醒</text>
<switch
:checked="settings.remindEnabled"
@change="(e) => onSwitch('remindEnabled', e)"
/>
</view>
<view v-if="settings.remindEnabled" class="bt-setting-row">
<text class="bt-setting-row__label">提醒周期</text>
<picker
mode="selector"
:range="['每周', '每两周', '每月']"
:value="settings.remindInterval"
@change="(e) => onSwitch('remindInterval', e)"
>
<view class="bt-setting-row__value">
<text class="bt-setting-row__text">
{{ ['每周', '每两周', '每月'][settings.remindInterval] }}
</text>
<image
class="bt-setting-row__arrow"
src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/rightarrow.png"
mode="aspectFit"
/>
</view>
</picker>
</view>
</view>
<view class="bt-card">
<text class="bt-card__title">隐私设置</text>
<view class="bt-setting-row">
<text class="bt-setting-row__label">数据可见性</text>
<picker
mode="selector"
:range="['仅本人', '教练可见', '完全公开']"
:value="settings.privacy"
@change="(e) => onSwitch('privacy', e)"
>
<view class="bt-setting-row__value">
<text class="bt-setting-row__text">
{{ ['仅本人', '教练可见', '完全公开'][settings.privacy] }}
</text>
<image
class="bt-setting-row__arrow"
src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/rightarrow.png"
mode="aspectFit"
/>
</view>
</picker>
</view>
</view>
</view>
@@ -101,7 +103,8 @@
</view>
</template>
<script>
<script setup>
import { ref, computed } from 'vue'
import MemberInfoSubNav from '@/components/memberInfo/MemberInfoSubNav.vue'
import { PAGE, goBackOrTab } from '@/common/constants/routes.js'
import {
@@ -113,65 +116,59 @@ import {
disconnectBodyTestDevice
} from '@/common/memberInfo/bodyTestStore.js'
export default {
components: { MemberInfoSubNav },
data() {
return {
settings: {},
device: {}
}
},
computed: {
unitLabel() {
return this.settings.unitSystem === 'imperial' ? '英制 (lb / in)' : '公制 (kg / cm)'
}
},
onShow() {
this.refreshFromStore()
},
methods: {
refreshFromStore() {
const store = loadMemberStore()
this.settings = { ...store.bodyTest.settings }
this.device = { ...store.bodyTest.device }
},
onBack() {
goBackOrTab(PAGE.BODY_TEST_HOME)
},
onSwitch(key, e) {
const store = loadMemberStore()
updateBodyTestSettings(store, { [key]: e.detail.value })
persistMemberStore(store)
this.settings = { ...store.bodyTest.settings }
uni.showToast({ title: '已保存', icon: 'success' })
},
toggleUnit() {
const store = loadMemberStore()
const next = this.settings.unitSystem === 'metric' ? 'imperial' : 'metric'
updateBodyTestSettings(store, { unitSystem: next })
persistMemberStore(store)
this.settings = { ...store.bodyTest.settings }
uni.showToast({ title: `已切换为${this.unitLabel}`, icon: 'none' })
},
disconnect() {
uni.showModal({
title: '解除配对',
content: '解除后下次体测需重新连接设备，确定继续？',
success: (res) => {
if (!res.confirm) return
const store = loadMemberStore()
disconnectBodyTestDevice(store)
persistMemberStore(store)
this.refreshFromStore()
uni.showToast({ title: '已解除配对', icon: 'success' })
}
})
}
}
const settings = ref({})
const device = ref({})
const unitLabel = computed(() => {
return settings.value.unitSystem === 'imperial' ? '英制 (lb / in)' : '公制 (kg / cm)'
})
function refreshFromStore() {
const store = loadMemberStore()
settings.value = { ...store.bodyTest.settings }
device.value = { ...store.bodyTest.device }
}
function onBack() {
goBackOrTab(PAGE.BODY_TEST_HOME)
}
function onSwitch(key, e) {
const store = loadMemberStore()
updateBodyTestSettings(store, { [key]: e.detail.value })
persistMemberStore(store)
refreshFromStore()
uni.showToast({ title: '已保存', icon: 'success' })
}
function toggleUnit() {
const store = loadMemberStore()
const next = settings.value.unitSystem === 'metric' ? 'imperial' : 'metric'
updateBodyTestSettings(store, { unitSystem: next })
persistMemberStore(store)
refreshFromStore()
uni.showToast({ title: `已切换为${unitLabel.value}`, icon: 'none' })
}
function disconnect() {
uni.showModal({
title: '解除配对',
content: '解除后下次体测需重新连接设备，确定继续？',
success: (res) => {
if (!res.confirm) return
const store = loadMemberStore()
disconnectBodyTestDevice(store)
persistMemberStore(store)
refreshFromStore()
uni.showToast({ title: '已解除配对', icon: 'success' })
}
})
}
refreshFromStore()
</script>
<style>
<style lang="scss">
@import '@/common/style/base.css';
@import '@/common/style/memberInfo/pages/page-reset.css';
@import '@/common/style/memberInfo/pages/sub-page-base.css';
gym-manage-uniapp/pages/memberInfo/bodyTestTrend.vue
+86 -77
View File
@@ -56,91 +56,100 @@
</view>
</template>
<script>
<script setup>
import { ref, computed, onMounted } from 'vue'
import MemberInfoSubNav from '@/components/memberInfo/MemberInfoSubNav.vue'
import BodyTestTrendChart from '@/components/memberInfo/BodyTestTrendChart.vue'
import { PAGE, goBackOrTab } from '@/common/constants/routes.js'
import { loadMemberStore } from '@/common/memberInfo/store.js'
import { getBodyTestTrendData, bodyTestMock } from '@/common/memberInfo/bodyTestStore.js'
import { getBodyTestTrendData } from '@/common/memberInfo/bodyTestStore.js'
export default {
components: { MemberInfoSubNav, BodyTestTrendChart },
data() {
return {
tabs: bodyTestMock.trendMetrics,
activeMetric: 'weight',
trendPoints: [],
chartWidth: 300
}
},
computed: {
activeLabel() {
return this.tabs.find((t) => t.key === this.activeMetric)?.label || ''
},
activeUnit() {
const units = {
weight: 'kg',
bodyFat: '%',
muscleMass: 'kg',
bmi: ''
}
return units[this.activeMetric] || ''
},
trendPointsReversed() {
return [...this.trendPoints].reverse()
},
summaryText() {
if (this.trendPoints.length < 2) return ''
const first = this.trendPoints[0].value
const last = this.trendPoints[this.trendPoints.length - 1].value
const diff = Math.round((last - first) * 10) / 10
const sign = diff > 0 ? '上升' : diff < 0 ? '下降' : '持平'
const abs = Math.abs(diff)
const lowerBetter = ['weight', 'bodyFat'].includes(this.activeMetric)
let advice = ''
if (diff !== 0) {
const good = lowerBetter ? diff < 0 : diff > 0
advice = good ? '，变化方向符合健康目标' : '，建议关注饮食与训练计划'
}
return `期间${this.activeLabel}${sign} ${abs}${this.activeUnit}${advice}`
}
},
onLoad(options) {
if (options?.metric) {
this.activeMetric = options.metric
}
this.chartWidth = uni.getSystemInfoSync().windowWidth - 64
this.loadTrend()
},
methods: {
onBack() {
goBackOrTab(PAGE.BODY_TEST_HOME)
},
switchMetric(key) {
this.activeMetric = key
this.loadTrend()
},
loadTrend() {
const store = loadMemberStore()
this.trendPoints = getBodyTestTrendData(store, this.activeMetric, 6)
},
rowDiffText(current, older) {
const diff = Math.round((current.value - older.value) * 10) / 10
const sign = diff > 0 ? '+' : ''
return `${sign}${diff}${this.activeUnit}`
},
rowDiffColor(current, older) {
const diff = current.value - older.value
if (diff === 0) return '#8A99B4'
const lowerBetter = ['weight', 'bodyFat'].includes(this.activeMetric)
const good = lowerBetter ? diff < 0 : diff > 0
return good ? '#2ECC71' : '#F39C12'
}
}
const tabs = ref([
{ key: 'weight', label: '体重' },
{ key: 'bodyFat', label: '体脂率' },
{ key: 'muscleMass', label: '肌肉量' },
{ key: 'bmi', label: 'BMI' }
])
const activeMetric = ref('weight')
const trendPoints = ref([])
const chartWidth = ref(300)
const units = {
weight: 'kg',
bodyFat: '%',
muscleMass: 'kg',
bmi: ''
}
const activeLabel = computed(() => {
return tabs.value.find((t) => t.key === activeMetric.value)?.label || ''
})
const activeUnit = computed(() => {
return units[activeMetric.value] || ''
})
const trendPointsReversed = computed(() => {
return [...trendPoints.value].reverse()
})
const summaryText = computed(() => {
if (trendPoints.value.length < 2) return ''
const first = trendPoints.value[0].value
const last = trendPoints.value[trendPoints.value.length - 1].value
const diff = Math.round((last - first) * 10) / 10
const sign = diff > 0 ? '上升' : diff < 0 ? '下降' : '持平'
const abs = Math.abs(diff)
const lowerBetter = ['weight', 'bodyFat'].includes(activeMetric.value)
let advice = ''
if (diff !== 0) {
const good = lowerBetter ? diff < 0 : diff > 0
advice = good ? '，变化方向符合健康目标' : '，建议关注饮食与训练计划'
}
return `期间${activeLabel.value}${sign} ${abs}${activeUnit.value}${advice}`
})
function onBack() {
goBackOrTab(PAGE.BODY_TEST_HOME)
}
function switchMetric(key) {
activeMetric.value = key
loadTrend()
}
function loadTrend() {
const store = loadMemberStore()
trendPoints.value = getBodyTestTrendData(store, activeMetric.value, 6)
}
function rowDiffText(current, older) {
const diff = Math.round((current.value - older.value) * 10) / 10
const sign = diff > 0 ? '+' : ''
return `${sign}${diff}${activeUnit.value}`
}
function rowDiffColor(current, older) {
const diff = current.value - older.value
if (diff === 0) return '#8A99B4'
const lowerBetter = ['weight', 'bodyFat'].includes(activeMetric.value)
const good = lowerBetter ? diff < 0 : diff > 0
return good ? '#2ECC71' : '#F39C12'
}
onMounted(() => {
const pages = getCurrentPages()
const currentPage = pages[pages.length - 1]
const options = currentPage?.options || {}
if (options?.metric) {
activeMetric.value = options.metric
}
chartWidth.value = uni.getSystemInfoSync().windowWidth - 64
loadTrend()
})
</script>
<style>
<style lang="scss">
@import '@/common/style/base.css';
@import '@/common/style/memberInfo/pages/page-reset.css';
@import '@/common/style/memberInfo/pages/sub-page-base.css';
gym-manage-uniapp/pages/memberInfo/booking.vue
+136 -75
View File
@@ -99,14 +99,25 @@
<view class="bk-card__footer">
<text class="bk-card__footer-info">{{ item.footerText }}</text>
<view
v-if="item.canCancel"
class="bk-card__cancel"
hover-class="mi-tap-btn--hover"
:hover-stay-time="150"
@tap.stop="cancelBooking(item)"
>
<text class="bk-card__cancel-text">取消预约</text>
<view class="bk-card__actions">
<view
v-if="item.canSignin"
class="bk-card__signin"
hover-class="mi-tap-btn--hover"
:hover-stay-time="150"
@tap.stop="signinCourse(item)"
>
<text class="bk-card__signin-text">签到</text>
</view>
<view
v-if="item.canCancel"
class="bk-card__cancel"
hover-class="mi-tap-btn--hover"
:hover-stay-time="150"
@tap.stop="cancelBooking(item)"
>
<text class="bk-card__cancel-text">取消预约</text>
</view>
</view>
</view>
</view>
@@ -122,83 +133,133 @@
</view>
</template>
<script>
<script setup>
import { ref, computed } from 'vue'
import MemberInfoSubNav from '@/components/memberInfo/MemberInfoSubNav.vue'
import { PAGE, navigateToPage } from '@/common/constants/routes.js'
import { bookingMock } from '@/common/memberInfo/mockData.js'
import { PAGE, navigateToPage, backToMemberCenter } from '@/common/constants/routes.js'
import {
loadMemberStore,
cancelOngoingBooking,
formatUpcomingAlert
} from '@/common/memberInfo/store.js'
import { canCancelBooking } from '@/common/memberInfo/bookingStore.js'
import { subPageMixin } from '@/common/memberInfo/mixins.js'
import { canCancelBooking, canSigninCourse } from '@/common/memberInfo/bookingStore.js'
import { signinGroupCourse, cancelBooking as cancelBookingApi } from '@/api/main.js'
export default {
components: { MemberInfoSubNav },
mixins: [subPageMixin],
data() {
return {
tabs: bookingMock.tabs,
ongoingBookings: [],
historyBookings: [],
activeTab: 'ongoing'
}
},
computed: {
displayedBookings() {
return this.activeTab === 'ongoing'
? this.ongoingBookings
: this.historyBookings
},
upcomingAlert() {
return formatUpcomingAlert(this.ongoingBookings[0])
}
},
onShow() {
this.refreshFromStore()
},
methods: {
refreshFromStore() {
const store = loadMemberStore()
this.ongoingBookings = store.ongoingBookings.map((item) => ({
...item,
canCancel: canCancelBooking(item)
}))
this.historyBookings = store.historyBookings.map((item) => ({ ...item }))
},
goCourseList() {
navigateToPage(PAGE.COURSE_LIST)
},
setActiveTab(tab) {
this.activeTab = tab
},
cancelBooking(item) {
if (!canCancelBooking(item)) {
uni.showToast({ title: '距开课不足2小时，无法取消', icon: 'none' })
return
}
uni.showModal({
title: '取消预约',
content: `确定要取消「${item.title}」吗？`,
success: (res) => {
if (!res.confirm) return
const store = loadMemberStore()
const result = cancelOngoingBooking(store, item.id)
if (!result.ok) {
uni.showToast({ title: result.message, icon: 'none' })
return
}
this.refreshFromStore()
uni.showToast({ title: '已取消', icon: 'success' })
}
})
}
}
const tabs = ref([])
const ongoingBookings = ref([])
const historyBookings = ref([])
const activeTab = ref('ongoing')
const displayedBookings = computed(() => {
return activeTab.value === 'ongoing'
? ongoingBookings.value
: historyBookings.value
})
const upcomingAlert = computed(() => {
return formatUpcomingAlert(ongoingBookings.value[0])
})
function refreshFromStore() {
const store = loadMemberStore()
ongoingBookings.value = store.ongoingBookings.map((item) => ({
...item,
canCancel: canCancelBooking(item),
canSignin: canSigninCourse(item)
}))
historyBookings.value = store.historyBookings.map((item) => ({ ...item }))
}
function goBack() {
backToMemberCenter()
}
function goCourseList() {
navigateToPage(PAGE.COURSE_LIST)
}
function setActiveTab(tab) {
activeTab.value = tab
}
// 签到团课
async function signinCourse(item) {
const store = loadMemberStore()
const memberId = store.memberProfile?.id || store.profile?.id
if (!memberId) {
uni.showToast({ title: '请先登录', icon: 'none' })
return
}
uni.showModal({
title: '确认签到',
content: `确认签到「${item.title}」吗？`,
success: async (res) => {
if (!res.confirm) return
uni.showLoading({ title: '签到中...', mask: true })
try {
const result = await signinGroupCourse(Number(memberId), Number(item.courseId || item.id))
uni.hideLoading()
if (result.code === 200 || result.success) {
uni.showToast({ title: '签到成功', icon: 'success' })
// 更新本地状态
refreshFromStore()
} else {
uni.showToast({ title: result.message || '签到失败', icon: 'none' })
}
} catch (e) {
uni.hideLoading()
console.error('[booking] 签到失败:', e)
uni.showToast({ title: e.message || '签到失败', icon: 'none' })
}
}
})
}
// 取消预约
async function cancelBooking(item) {
if (!canCancelBooking(item)) {
uni.showToast({ title: '距开课不足2小时，无法取消', icon: 'none' })
return
}
uni.showModal({
title: '取消预约',
content: `确定要取消「${item.title}」吗？`,
success: async (res) => {
if (!res.confirm) return
uni.showLoading({ title: '取消中...', mask: true })
try {
// 调用后端API取消预约
const result = await cancelBookingApi(Number(item.id))
uni.hideLoading()
if (result.code === 200 || result.success) {
// 更新本地状态
const store = loadMemberStore()
const localResult = cancelOngoingBooking(store, item.id)
if (localResult.ok) {
refreshFromStore()
}
uni.showToast({ title: '已取消', icon: 'success' })
} else {
uni.showToast({ title: result.message || '取消失败', icon: 'none' })
}
} catch (e) {
uni.hideLoading()
console.error('[booking] 取消预约失败:', e)
uni.showToast({ title: e.message || '取消失败', icon: 'none' })
}
}
})
}
refreshFromStore()
</script>
<style>
<style lang="scss">
@import '@/common/style/base.css';
@import '@/common/style/memberInfo/pages/page-reset.css';
@import '@/common/style/memberInfo/pages/sub-page-base.css';
gym-manage-uniapp/pages/memberInfo/checkInHistory.vue
+36 -33
View File
@@ -46,45 +46,48 @@
</view>
</template>
<script>
<script setup>
import { ref, computed } from 'vue'
import MemberInfoSubNav from '@/components/memberInfo/MemberInfoSubNav.vue'
import { moduleMock, getCheckInHistory } from '@/common/memberInfo/moduleStore.js'
import { getCheckInHistory } from '@/common/memberInfo/moduleStore.js'
import { loadMemberStore } from '@/common/memberInfo/store.js'
import { subPageMixin } from '@/common/memberInfo/mixins.js'
import { backToMemberCenter } from '@/common/constants/routes.js'
export default {
components: { MemberInfoSubNav },
mixins: [subPageMixin],
data() {
return {
tabs: moduleMock.checkInTabs,
activeFilter: 'all',
list: []
}
},
computed: {
filteredList() {
if (this.activeFilter === 'all') return this.list
return this.list.filter((i) => i.tagTheme === this.activeFilter)
}
},
onShow() {
const store = loadMemberStore()
this.list = getCheckInHistory(store, 'all')
},
methods: {
showDetail(item) {
uni.showModal({
title: item.title,
content: `${item.time}\n地点：${item.location}\n类型：${item.tag}`,
showCancel: false
})
}
}
const tabs = ref([
{ key: 'all', label: '全部' },
{ key: 'signin', label: '签到' },
{ key: 'trial', label: '体验' },
{ key: 'event', label: '活动' }
])
const activeFilter = ref('all')
const list = ref([])
const filteredList = computed(() => {
if (activeFilter.value === 'all') return list.value
return list.value.filter((i) => i.tagTheme === activeFilter.value)
})
function refresh() {
const store = loadMemberStore()
list.value = getCheckInHistory(store, 'all')
}
function goBack() {
backToMemberCenter()
}
function showDetail(item) {
uni.showModal({
title: item.title,
content: `${item.time}\n地点：${item.location}\n类型：${item.tag}`,
showCancel: false
})
}
refresh()
</script>
<style>
<style lang="scss">
@import '@/common/style/base.css';
@import '@/common/style/memberInfo/pages/page-reset.css';
@import '@/common/style/memberInfo/pages/sub-page-base.css';
gym-manage-uniapp/pages/memberInfo/couponCenter.vue
+22 -23
View File
@@ -33,38 +33,37 @@
</view>
</template>
<script>
<script setup>
import { ref, onMounted } from 'vue'
import MemberInfoSubNav from '@/components/memberInfo/MemberInfoSubNav.vue'
import { PAGE, goBackOrTab } from '@/common/constants/routes.js'
import { loadMemberStore, persistMemberStore } from '@/common/memberInfo/store.js'
import { getCouponCenterList, claimCouponFromCenter } from '@/common/memberInfo/moduleStore.js'
export default {
components: { MemberInfoSubNav },
data() {
return { list: [] }
},
onShow() {
const store = loadMemberStore()
this.list = getCouponCenterList(store)
},
methods: {
onBack() { goBackOrTab(PAGE.COUPONS) },
claim(item) {
if (item.claimed) return
const store = loadMemberStore()
const result = claimCouponFromCenter(store, item.id)
uni.showToast({ title: result.message, icon: result.ok ? 'success' : 'none' })
if (result.ok) {
persistMemberStore(store)
this.list = getCouponCenterList(store)
}
}
const list = ref([])
onMounted(() => {
const store = loadMemberStore()
list.value = getCouponCenterList(store)
})
function onBack() {
goBackOrTab(PAGE.COUPONS)
}
function claim(item) {
if (item.claimed) return
const store = loadMemberStore()
const result = claimCouponFromCenter(store, item.id)
uni.showToast({ title: result.message, icon: result.ok ? 'success' : 'none' })
if (result.ok) {
persistMemberStore(store)
list.value = getCouponCenterList(store)
}
}
</script>
<style>
<style lang="scss">
@import '@/common/style/base.css';
@import '@/common/style/memberInfo/pages/page-reset.css';
@import '@/common/style/memberInfo/pages/sub-page-base.css';
gym-manage-uniapp/pages/memberInfo/couponDetail.vue
+19 -17
View File
@@ -36,31 +36,33 @@
</view>
</template>
<script>
<script setup>
import { ref, onMounted } from 'vue'
import MemberInfoSubNav from '@/components/memberInfo/MemberInfoSubNav.vue'
import { PAGE, navigateToPage, goBackOrTab } from '@/common/constants/routes.js'
import { loadMemberStore } from '@/common/memberInfo/store.js'
import { getCouponById } from '@/common/memberInfo/moduleStore.js'
export default {
components: { MemberInfoSubNav },
data() {
return { coupon: null }
},
onLoad(options) {
const store = loadMemberStore()
this.coupon = getCouponById(store, options?.id)
},
methods: {
onBack() { goBackOrTab(PAGE.COUPONS) },
useNow() {
navigateToPage(PAGE.COURSE_LIST)
}
}
const coupon = ref(null)
onMounted(() => {
const pages = getCurrentPages()
const currentPage = pages[pages.length - 1]
const options = currentPage?.options || {}
const store = loadMemberStore()
coupon.value = getCouponById(store, options?.id)
})
function onBack() {
goBackOrTab(PAGE.COUPONS)
}
function useNow() {
navigateToPage(PAGE.COURSE_LIST)
}
</script>
<style>
<style lang="scss">
@import '@/common/style/base.css';
@import '@/common/style/memberInfo/pages/page-reset.css';
@import '@/common/style/memberInfo/pages/sub-page-base.css';
gym-manage-uniapp/pages/memberInfo/coupons.vue
+71 -68
View File
@@ -61,81 +61,84 @@
</view>
</template>
<script>
<script setup>
import { ref, computed } from 'vue'
import MemberInfoSubNav from '@/components/memberInfo/MemberInfoSubNav.vue'
import { PAGE, navigateToPage } from '@/common/constants/routes.js'
import { moduleMock, getCouponsByStatus, useCoupon, deleteExpiredCoupon } from '@/common/memberInfo/moduleStore.js'
import { PAGE, navigateToPage, backToMemberCenter } from '@/common/constants/routes.js'
import { getCouponsByStatus, useCoupon, deleteExpiredCoupon } from '@/common/memberInfo/moduleStore.js'
import { loadMemberStore, persistMemberStore } from '@/common/memberInfo/store.js'
import { subPageMixin } from '@/common/memberInfo/mixins.js'
export default {
components: { MemberInfoSubNav },
mixins: [subPageMixin],
data() {
return {
tabs: moduleMock.couponTabs,
activeTab: 'available',
coupons: []
}
},
computed: {
displayedCoupons() {
return this.coupons.filter((c) => c.status === this.activeTab)
},
countByTab() {
return {
available: this.coupons.filter((c) => c.status === 'available').length,
used: this.coupons.filter((c) => c.status === 'used').length,
expired: this.coupons.filter((c) => c.status === 'expired').length
}
},
activeTabLabel() {
return this.tabs.find((t) => t.key === this.activeTab)?.label || ''
}
},
onShow() {
this.refreshList()
},
methods: {
refreshList() {
const store = loadMemberStore()
this.coupons = [
...getCouponsByStatus(store, 'available'),
...getCouponsByStatus(store, 'used'),
...getCouponsByStatus(store, 'expired')
]
},
onCouponTap(item) {
navigateToPage(`${PAGE.COUPON_DETAIL}?id=${item.id}`)
},
useNow(item) {
uni.showModal({
title: '使用优惠券',
content: `确认使用「${item.title}」？`,
success: (res) => {
if (!res.confirm) return
const store = loadMemberStore()
useCoupon(store, item.id)
persistMemberStore(store)
this.refreshList()
navigateToPage(PAGE.COURSE_LIST)
}
})
},
removeExpired(item) {
const store = loadMemberStore()
deleteExpiredCoupon(store, item.id)
persistMemberStore(store)
this.refreshList()
},
goCenter() {
navigateToPage(PAGE.COUPON_CENTER)
}
const tabs = ref([
{ key: 'available', label: '可用' },
{ key: 'used', label: '已用' },
{ key: 'expired', label: '已失效' }
])
const activeTab = ref('available')
const coupons = ref([])
const displayedCoupons = computed(() => {
return coupons.value.filter((c) => c.status === activeTab.value)
})
const countByTab = computed(() => {
return {
available: coupons.value.filter((c) => c.status === 'available').length,
used: coupons.value.filter((c) => c.status === 'used').length,
expired: coupons.value.filter((c) => c.status === 'expired').length
}
})
const activeTabLabel = computed(() => {
return tabs.value.find((t) => t.key === activeTab.value)?.label || ''
})
function refreshList() {
const store = loadMemberStore()
coupons.value = [
...getCouponsByStatus(store, 'available'),
...getCouponsByStatus(store, 'used'),
...getCouponsByStatus(store, 'expired')
]
}
function goBack() {
backToMemberCenter()
}
function onCouponTap(item) {
navigateToPage(`${PAGE.COUPON_DETAIL}?id=${item.id}`)
}
function useNow(item) {
uni.showModal({
title: '使用优惠券',
content: `确认使用「${item.title}」？`,
success: (res) => {
if (!res.confirm) return
const store = loadMemberStore()
useCoupon(store, item.id)
persistMemberStore(store)
refreshList()
navigateToPage(PAGE.COURSE_LIST)
}
})
}
function removeExpired(item) {
const store = loadMemberStore()
deleteExpiredCoupon(store, item.id)
persistMemberStore(store)
refreshList()
}
function goCenter() {
navigateToPage(PAGE.COUPON_CENTER)
}
refreshList()
</script>
<style>
<style lang="scss">
@import '@/common/style/base.css';
@import '@/common/style/memberInfo/pages/page-reset.css';
@import '@/common/style/memberInfo/pages/sub-page-base.css';
gym-manage-uniapp/pages/memberInfo/login.vue
+569
View File
@@ -0,0 +1,569 @@
<template>
<view class="login-page">
<!-- 自定义Toast弹窗 -->
<view class="custom-toast" :class="{ show: toastShow }">
<text class="toast-text">{{ toastMessage }}</text>
</view>
<view class="login-header">
<view class="logo-wrapper">
<image class="logo-image" src="/static/logo.png" mode="aspectFit" />
<text class="app-name">活氧舱欢迎您</text>
<text class="app-slogan">享受运动，拥抱健康</text>
</view>
</view>
<view class="card-container">
<!-- 手机号+验证码登录卡片 -->
<view class="login-card sms-card" :class="{ active: activeCard === 'sms' }">
<view class="card-body">
<text class="phone-display">验证码登录</text>
<text class="auth-tip">认证服务由中国移动提供</text>
<view class="form-group">
<view class="input-wrapper" :class="{ focused: isSmsPhoneFocused }">
<input
v-model="smsPhone"
type="number"
placeholder="请输入手机号"
maxlength="11"
class="phone-input"
confirm-type="next"
@focus="isSmsPhoneFocused = true"
@blur="isSmsPhoneFocused = false"
/>
</view>
</view>
<view class="form-group">
<view class="input-wrapper code-input" :class="{ focused: isCodeFocused }">
<input
v-model="code"
type="number"
placeholder="请输入验证码"
maxlength="6"
class="phone-input"
confirm-type="done"
@focus="isCodeFocused = true"
@blur="isCodeFocused = false"
/>
<button
class="send-code-btn"
:class="{ disabled: countdown > 0 || isLoading }"
@tap="handleSendCode"
:disabled="countdown > 0 || isLoading"
>
<text>{{ countdown > 0 ? `${countdown}秒后重发` : '发送验证码' }}</text>
</button>
</view>
</view>
<button class="login-btn primary" :class="{ disabled: !canSmsSubmit, loading: isLoading }" @tap="handleSmsLogin" :disabled="!canSmsSubmit || isLoading">
<text>{{ isLoading ? '登录中...' : '验证码登录' }}</text>
</button>
<button class="login-btn secondary" @tap="switchToPhone">
<text>其他登录方式</text>
</button>
<view class="agreement-text" :class="{ shake: shakeAgreement }">
<checkbox-group @change="onAgreementChange">
<checkbox :checked="agreed" value="agreed" color="#FF8C42" />
</checkbox-group>
<text>登录即表示同意</text>
<text class="link" @tap="showAgreement">《用户协议》</text>
<text>和</text>
<text class="link" @tap="showPrivacy">《隐私政策》</text>
</view>
</view>
</view>
<!-- 手机号一键登录卡片 -->
<view class="login-card phone-card" :class="{ active: activeCard === 'phone' }">
<view class="card-body">
<text class="phone-display">本机号码登录</text>
<text class="auth-tip">认证服务由中国移动提供</text>
<view class="form-group phone-login">
<view class="input-wrapper" :class="{ focused: isInputFocused }">
<input
v-model="phone"
type="number"
placeholder="请输入手机号"
maxlength="11"
class="phone-input"
confirm-type="done"
@focus="isInputFocused = true"
@blur="isInputFocused = false"
/>
</view>
</view>
<button class="login-btn primary" :class="{ disabled: !canSubmit, loading: isLoading }" @tap="handlePhoneLogin" :disabled="!canSubmit || isLoading">
<text>{{ isLoading ? '登录中...' : '一键登录' }}</text>
</button>
<button class="login-btn secondary" @tap="switchToSms">
<text>其他登录方式</text>
</button>
<view class="agreement-text" :class="{ shake: shakeAgreement }">
<checkbox-group @change="onAgreementChange">
<checkbox :checked="agreed" value="agreed" color="#FF8C42" />
</checkbox-group>
<text>登录即表示同意</text>
<text class="link" @tap="showAgreement">《用户协议》</text>
<text>和</text>
<text class="link" @tap="showPrivacy">《隐私政策》</text>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
import { ref, computed, onUnmounted } from 'vue'
import { setToken } from '@/utils/request.js'
// 测试数据
const TEST_TOKEN = 'test_token_123456'
const TEST_MEMBER_INFO = {
memberId: 10001,
memberNo: 'M001',
phone: '13800138000',
nickname: '测试用户',
avatar: '/static/logo.png',
accessToken: TEST_TOKEN,
isNewUser: false
}
const activeCard = ref('phone')
const phone = ref('')
const isLoading = ref(false)
const isInputFocused = ref(false)
const agreed = ref(false)
const shakeAgreement = ref(false)
const smsPhone = ref('')
const isSmsPhoneFocused = ref(false)
const code = ref('')
const isCodeFocused = ref(false)
const countdown = ref(0)
let timer = null
// 自定义Toast
const toastShow = ref(false)
const toastMessage = ref('')
let toastTimer = null
function showToast(msg) {
if (toastTimer) clearTimeout(toastTimer)
toastMessage.value = msg
toastShow.value = true
toastTimer = setTimeout(() => {
toastShow.value = false
}, 2000)
}
const canSubmit = computed(() => {
return /^1[3-9]\d{9}$/.test(phone.value) && !isLoading.value
})
const canSmsSubmit = computed(() => {
return /^1[3-9]\d{9}$/.test(smsPhone.value) && /^\d{6}$/.test(code.value) && !isLoading.value
})
function onAgreementChange(e) {
agreed.value = e.detail.value.includes('agreed')
}
function switchToSms() {
activeCard.value = 'sms'
}
function switchToPhone() {
activeCard.value = 'phone'
phone.value = ''
phoneError.value = ''
}
function showAgreement() {
uni.showModal({ title: '用户协议', content: '这里是用户协议内容...', showCancel: false })
}
function showPrivacy() {
uni.showModal({ title: '隐私政策', content: '这里是隐私政策内容...', showCancel: false })
}
function validatePhone() {
if (!phone.value) {
showToast('请输入手机号')
return false
}
if (!/^1[3-9]\d{9}$/.test(phone.value)) {
showToast('请输入正确的手机号')
return false
}
return true
}
function validateSmsPhone() {
if (!smsPhone.value) {
showToast('请输入手机号')
return false
}
if (!/^1[3-9]\d{9}$/.test(smsPhone.value)) {
showToast('请输入正确的手机号')
return false
}
return true
}
async function handlePhoneLogin() {
if (!agreed.value) {
triggerAgreementShake()
return
}
if (!validatePhone()) return
isLoading.value = true
setTimeout(() => {
setToken(TEST_TOKEN)
uni.setStorageSync('memberInfo', TEST_MEMBER_INFO)
uni.setStorageSync('isLogin', true)
showToast('登录成功')
setTimeout(() => {
uni.switchTab({ url: '/pages/memberInfo/memberInfo' })
}, 1500)
isLoading.value = false
}, 500)
}
function triggerAgreementShake() {
shakeAgreement.value = true
showToast('请先同意用户协议和隐私政策')
setTimeout(() => {
shakeAgreement.value = false
}, 500)
}
async function handleSendCode() {
if (countdown.value > 0) {
showToast('验证码在有效期内，请勿重复发送')
return
}
if (!validateSmsPhone()) return
isLoading.value = true
setTimeout(() => {
countdown.value = 300
startCountdown()
showToast('验证码已发送')
isLoading.value = false
}, 300)
}
function startCountdown() {
if (timer) clearInterval(timer)
timer = setInterval(() => {
countdown.value--
if (countdown.value <= 0) {
clearInterval(timer)
timer = null
}
}, 1000)
}
async function handleSmsLogin() {
if (!agreed.value) {
triggerAgreementShake()
return
}
if (!validateSmsPhone()) return
if (!code.value) {
showToast('请输入验证码')
return
}
if (!/^\d{6}$/.test(code.value)) {
showToast('请输入6位验证码')
return
}
isLoading.value = true
setTimeout(() => {
setToken(TEST_TOKEN)
uni.setStorageSync('memberInfo', TEST_MEMBER_INFO)
showToast('登录成功')
setTimeout(() => {
uni.switchTab({ url: '/pages/memberInfo/memberInfo' })
}, 1500)
isLoading.value = false
}, 500)
}
onUnmounted(() => {
if (timer) clearInterval(timer)
})
</script>
<style lang="scss" scoped>
// 自定义Toast弹窗样式
.custom-toast {
position: fixed;
top: -100rpx;
left: 50%;
transform: translateX(-50%) translateY(0);
background: rgba(0, 0, 0, 0.8);
border-radius: $radius-lg;
padding: 24rpx 48rpx;
z-index: 9999;
opacity: 0;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
&.show {
top: 120rpx;
opacity: 1;
}
.toast-text {
color: $text-inverse;
font-size: 28rpx;
white-space: nowrap;
}
}
button::after {
display: none;
}
.login-page {
min-height: 100vh;
background: $bg-gradient-primary;
display: flex;
flex-direction: column;
padding: 48rpx;
}
.login-header {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 80rpx;
}
.logo-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
.logo-image {
width: 140rpx;
height: 140rpx;
border-radius: $radius-lg;
box-shadow: $shadow-lg;
}
.app-name {
margin-top: 24rpx;
font-size: 42rpx;
font-weight: $font-weight-extrabold;
color: $primary-dark;
letter-spacing: 4rpx;
}
.app-slogan {
margin-top: 12rpx;
font-size: 26rpx;
color: $text-light;
}
.card-container {
position: relative;
width: 100%;
height: 620rpx;
}
.login-card {
position: absolute;
height: 700rpx;
background: $bg-white;
border-radius: $radius-lg;
padding: 48rpx 40rpx;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform, z-index, filter;
}
.sms-card {
z-index: 1;
top: -60rpx;
left: -100rpx;
box-shadow: 0 16rpx 40rpx rgba(0, 0, 0, 0.12);
filter: blur(10rpx);
&.active {
z-index: 10;
top: 0;
left: 0;
box-shadow: 0 24rpx 60rpx rgba(0, 0, 0, 0.18), 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
filter: blur(0);
}
}
.phone-card {
z-index: 10;
top: 0;
left: 0;
box-shadow: 0 24rpx 60rpx rgba(0, 0, 0, 0.18), 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
filter: blur(0);
&:not(.active) {
z-index: 1;
top: -60rpx;
left: -100rpx;
box-shadow: 0 16rpx 40rpx rgba(0, 0, 0, 0.12);
filter: blur(10rpx);
}
}
.card-body {
display: flex;
flex-direction: column;
align-items: center;
}
.phone-display {
font-size: 48rpx;
font-weight: $font-weight-bold;
color: $text-dark;
margin-bottom: 12rpx;
}
.auth-tip {
font-size: 24rpx;
color: $text-light;
margin-bottom: 40rpx;
}
.form-group {
width: 100%;
margin-bottom: 24rpx;
}
.phone-login{
margin-bottom: 150rpx;
}
.input-wrapper {
display: flex;
align-items: center;
background: transparent;
padding: 0 32rpx;
height: 100rpx;
border-bottom: 2rpx solid $border-light;
&.code-input {
padding-right: 16rpx;
}
}
.phone-input {
flex: 1;
font-size: 34rpx;
color: $text-dark;
letter-spacing: 2rpx;
}
.send-code-btn {
width: 200rpx;
height: 72rpx;
background: $accent-orange;
color: $text-inverse;
font-size: 26rpx;
border-radius: $radius-sm;
border: none;
&.disabled {
background: $border-light;
color: $text-light;
}
}
.login-btn {
width: 100%;
height: 100rpx;
border-radius: $radius-md;
border: none;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease;
&.primary {
background: $gradient-orange;
color: $text-inverse;
font-size: 34rpx;
font-weight: $font-weight-bold;
box-shadow: $shadow-orange-glow;
&:active {
transform: scale(0.98);
opacity: 0.9;
}
&.disabled {
background: $border-light;
color: $text-light;
box-shadow: none;
}
&.loading {
background: $accent-orange;
}
}
&.secondary {
background: #F8F9FA;
color: $text-dark;
font-size: 30rpx;
font-weight: $font-weight-medium;
margin-top: 24rpx;
&:active {
background: #E9ECEF;
}
}
}
.agreement-text {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
font-size: 24rpx;
color: $text-light;
margin-top: 36rpx;
.link {
color: $accent-orange;
margin: 0 6rpx;
}
&.shake {
animation: shake 0.5s ease-in-out;
}
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-8rpx); }
20%, 40%, 60%, 80% { transform: translateX(8rpx); }
}
</style>
gym-manage-uniapp/pages/memberInfo/memberCard.vue
+57 -60
View File
@@ -117,77 +117,74 @@
</view>
</template>
<script>
<script setup>
import { ref, computed } from 'vue'
import MemberInfoSubNav from '@/components/memberInfo/MemberInfoSubNav.vue'
import { memberCardMock } from '@/common/memberInfo/mockData.js'
import {
loadMemberStore,
computeRemainingDays,
renewMemberCard
} from '@/common/memberInfo/store.js'
import { subPageMixin } from '@/common/memberInfo/mixins.js'
import { backToMemberCenter } from '@/common/constants/routes.js'
export default {
components: { MemberInfoSubNav },
mixins: [subPageMixin],
data() {
return {
card: {},
recordTabs: memberCardMock.recordTabs,
records: [],
rules: memberCardMock.rules,
activeFilter: 'all'
}
},
computed: {
filteredRecords() {
if (this.activeFilter === 'all') {
return this.records
}
return this.records.filter((item) => item.type === this.activeFilter)
},
remainingDays() {
return computeRemainingDays(this.card.validityEnd)
}
},
onShow() {
this.refreshFromStore()
},
methods: {
refreshFromStore() {
const store = loadMemberStore()
this.card = { ...store.card }
this.records = store.records.map((item) => ({ ...item }))
},
switchFilter(filter) {
this.activeFilter = filter
},
renewCard() {
uni.showModal({
title: '续费会员卡',
content: '确认续费 90 天？',
success: (res) => {
if (!res.confirm) return
const store = loadMemberStore()
renewMemberCard(store, 90)
this.activeFilter = 'all'
this.refreshFromStore()
uni.showToast({ title: '续费成功', icon: 'success' })
}
})
},
showRecordDetail(item) {
uni.showModal({
title: item.title,
content: `${item.time}\n变动：${item.value}`,
showCancel: false
})
}
const card = ref({})
const recordTabs = ref([])
const records = ref([])
const rules = ref([])
const activeFilter = ref('all')
const filteredRecords = computed(() => {
if (activeFilter.value === 'all') {
return records.value
}
return records.value.filter((item) => item.type === activeFilter.value)
})
const remainingDays = computed(() => {
return computeRemainingDays(card.value.validityEnd)
})
function refreshFromStore() {
const store = loadMemberStore()
card.value = { ...store.card }
records.value = store.records.map((item) => ({ ...item }))
}
function goBack() {
backToMemberCenter()
}
function switchFilter(filter) {
activeFilter.value = filter
}
function renewCard() {
uni.showModal({
title: '续费会员卡',
content: '确认续费 90 天？',
success: (res) => {
if (!res.confirm) return
const store = loadMemberStore()
renewMemberCard(store, 90)
activeFilter.value = 'all'
refreshFromStore()
uni.showToast({ title: '续费成功', icon: 'success' })
}
})
}
function showRecordDetail(item) {
uni.showModal({
title: item.title,
content: `${item.time}\n变动：${item.value}`,
showCancel: false
})
}
refreshFromStore()
</script>
<style>
<style lang="scss">
@import '@/common/style/base.css';
@import '@/common/style/memberInfo/pages/page-reset.css';
@import '@/common/style/memberInfo/pages/sub-page-base.css';
gym-manage-uniapp/pages/memberInfo/memberCenter.vue
+758
View File
@@ -0,0 +1,758 @@
<template>
<scroll-view scroll-y class="scroll-container theme-light">
<view class="member-page">
<!-- Header: 用户信息区 -->
<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">
<view class="profile-header__user" hover-class="mi-tap--hover" :hover-stay-time="150" @tap="goUserInfo">
<view class="profile-header__user-inner">
<view class="profile-header__avatar-wrap">
<view class="profile-header__avatar-ring">
<image
class="profile-header__avatar"
:key="userInfo.avatar"
:src="displayAvatar"
mode="aspectFill"
/>
</view>
<view class="profile-header__avatar-badge">
<image
class="profile-header__avatar-badge-icon"
src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/camera.png"
mode="aspectFit"
/>
</view>
</view>
<view class="profile-header__user-meta">
<view class="profile-header__user-meta-inner">
<text class="profile-header__name">{{ userInfo.name }}</text>
<text class="profile-header__phone">{{ userInfo.phone }}</text>
<view class="profile-header__badge">
<image
class="profile-header__badge-icon"
src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/crown0.png"
mode="aspectFit"
/>
<text class="profile-header__level">{{ userInfo.memberLevel }}</text>
</view>
</view>
</view>
</view>
</view>
<view class="profile-header__stats">
<view class="profile-header__stats-inner">
<view class="profile-header__stat">
<view class="profile-header__stat-inner">
<text class="profile-header__stat-value">{{ stats.checkInCount }}</text>
<text class="profile-header__stat-label">累计签到</text>
</view>
</view>
<view class="profile-header__stat-divider"></view>
<view class="profile-header__stat">
<view class="profile-header__stat-inner">
<text class="profile-header__stat-value">{{ stats.trainingHours }}</text>
<text class="profile-header__stat-label">训练时长</text>
</view>
</view>
<view class="profile-header__stat-divider"></view>
<view class="profile-header__stat">
<view class="profile-header__stat-inner">
<text class="profile-header__stat-value">{{ stats.pointsBalance }}</text>
<text class="profile-header__stat-label">累计积分</text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="member-page__body">
<view class="member-page__sections">
<!-- 会员卡区域 -->
<view class="member-card-section">
<view class="member-card-section__inner">
<view class="member-card-section__head">
<view class="member-card-section__head-inner">
<text class="member-card-section__title">我的会员卡</text>
<view class="member-card-section__link" hover-class="mi-tap--hover" :hover-stay-time="150" @tap="goMemberCard">
<text class="member-card-section__link-text">查看全部</text>
<image class="member-card-section__link-arrow" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/chevronright12.png" mode="aspectFit" />
</view>
</view>
</view>
<view class="member-card-preview" hover-class="mi-tap-card--hover" :hover-stay-time="150" @tap="goMemberCard">
<view class="member-card-preview__inner">
<view class="member-card-preview__head">
<view class="member-card-preview__head-inner">
<view class="member-card-preview__type-row">
<view class="member-card-preview__icon-wrap">
<view class="member-card-preview__icon-border">
<view class="member-card-preview__icon-bg"></view>
<view class="member-card-preview__icon-stroke"></view>
</view>
<image class="member-card-preview__icon-line" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/Line_2_468.png" mode="aspectFill" />
</view>
<text class="member-card-preview__name">{{ cardInfo.name }}</text>
</view>
<view class="member-card-preview__tag">
<text class="member-card-preview__tag-text">{{ cardInfo.detailTag || '详情' }}</text>
</view>
</view>
</view>
<text class="member-card-preview__expire">{{ cardInfo.expireDate }}</text>
<view class="member-card-preview__footer">
<view class="member-card-preview__footer-inner">
<view class="member-card-preview__days">
<text class="member-card-preview__days-num">{{ cardInfo.remainingDays }}</text>
<text class="member-card-preview__days-unit">天剩余</text>
</view>
<view class="member-card-preview__renew" hover-class="mi-tap-btn--hover" :hover-stay-time="150" @tap.stop="onRenewCard">
<text class="member-card-preview__renew-text">续费</text>
</view>
</view>
</view>
</view>
</view>
<view class="member-card-tip">
<view class="member-card-tip__inner">
<view class="member-card-tip__content">
<image class="member-card-tip__icon" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/clock1.png" mode="aspectFit" />
<text class="member-card-tip__text">{{ cardInfo.tip }}</text>
</view>
</view>
<view class="member-card-tip__border"></view>
</view>
</view>
</view>
<!-- 快捷操作区域 -->
<view class="quick-actions">
<view class="quick-actions__inner">
<view class="quick-actions__grid">
<view class="quick-actions__grid-inner">
<view v-for="item in quickActionsRow1" :key="item.key" class="quick-actions__item" hover-class="mi-tap--hover" :hover-stay-time="150" @tap="onQuickAction(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 quickActionsRow2" :key="item.key" class="quick-actions__item" hover-class="mi-tap--hover" :hover-stay-time="150" @tap="onQuickAction(item.key)">
<view class="quick-actions__item-inner">
<view class="quick-actions__icon-wrap">
<view class="quick-actions__icon-wrap-inner">
<image class="quick-actions__icon-img" :src="item.icon" mode="aspectFit" />
</view>
</view>
<text :class="item.textClass">{{ item.label }}</text>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 预约课程区域 -->
<view class="booking-section">
<view class="booking-section__inner">
<view class="booking-section__header">
<view class="booking-section__header-inner">
<text class="booking-section__title">我的预约</text>
<view class="booking-section__link" hover-class="mi-tap--hover" :hover-stay-time="150" @tap="goBooking">
<text class="booking-section__view-all">预约记录</text>
<image class="booking-section__link-arrow" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/chevronright4.png" mode="aspectFit" />
</view>
</view>
</view>
<view v-for="item in bookingPreview" :key="item.id" class="booking-section__item" hover-class="mi-tap-row--hover" :hover-stay-time="150" @tap="goBooking">
<view class="booking-section__item-inner">
<view class="booking-section__date">
<view class="booking-section__date-inner">
<text class="booking-section__num">{{ item.dateDay }}</text>
<text class="booking-section__date-sub">{{ item.dateMonth }}</text>
</view>
</view>
<view class="booking-section__content">
<view class="booking-section__content-inner">
<text class="booking-section__desc">{{ item.desc }}</text>
<view class="booking-section__meta">
<view class="booking-section__meta-inner">
<image class="booking-section__icon-coach" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/user2.png" mode="aspectFit" />
<text class="booking-section__coach">教练：{{ item.coach }}</text>
<image class="booking-section__icon-location" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/mappin1.png" mode="aspectFit" />
<text class="booking-section__text">{{ item.location }}</text>
</view>
</view>
</view>
</view>
<view class="booking-section__status-wrap">
<view class="booking-section__status-badge" :class="'booking-section__status-badge--' + item.status">
<text class="booking-section__status-text" :class="{ 'booking-section__status-text--pending': item.status === 'pending' }">{{ item.statusLabel }}</text>
</view>
</view>
</view>
</view>
<view v-if="!bookingPreview.length" class="booking-section__empty">
<text class="booking-section__empty-text">暂无进行中的预约</text>
</view>
</view>
</view>
<!-- 签到记录区域 -->
<view class="checkin-section">
<view class="checkin-section__inner">
<view class="checkin-section__header">
<view class="checkin-section__header-inner">
<text class="checkin-section__title">签到记录</text>
<view class="checkin-section__link" hover-class="mi-tap--hover" :hover-stay-time="150" @tap="goCheckInHistory">
<text class="checkin-section__view-all">查看全部</text>
<image class="checkin-section__link-arrow" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/chevronright2.png" mode="aspectFit" />
</view>
</view>
</view>
<view class="checkin-section__list">
<view class="checkin-section__list-inner">
<view v-for="(item, index) in checkIns" :key="item.id" class="checkin-section__row">
<view v-if="index > 0" class="checkin-section__divider"></view>
<view class="checkin-section__item" hover-class="mi-tap-row--hover" :hover-stay-time="150" @tap="onCheckInTap(item)">
<view class="checkin-section__item-inner">
<view class="checkin-section__dot" :class="'checkin-section__dot--' + item.tagTheme"></view>
<view class="checkin-section__content">
<view class="checkin-section__content-inner">
<text class="checkin-section__desc">{{ item.title }}</text>
<text class="checkin-section__text">{{ item.time }}</text>
</view>
</view>
<view class="checkin-section__tag-badge" :class="'checkin-section__tag-badge--' + item.tagTheme">
<text class="checkin-section__tag-text" :class="'checkin-section__tag-text--' + item.tagTheme">{{ item.tag }}</text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 体测报告区域 -->
<view class="body-report-section">
<view class="body-report-section__inner">
<view class="body-report-section__header">
<view class="body-report-section__header-inner">
<text class="body-report-section__title">体测报告</text>
<view class="body-report-section__link" hover-class="mi-tap--hover" :hover-stay-time="150" @tap="goBodyTestHistory">
<text class="body-report-section__history-link">历史记录</text>
<image class="body-report-section__link-arrow" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/chevronright3.png" mode="aspectFit" />
</view>
</view>
</view>
<view class="body-report-section__card">
<view class="body-report-section__card-inner">
<view class="body-report-section__card-head">
<view class="body-report-section__card-head-inner">
<text class="body-report-section__desc">最新数据 · {{ bodyReport.date }}</text>
<view class="body-report-section__view-btn" hover-class="mi-tap-btn--hover" :hover-stay-time="150" @tap="goBodyReport">
<image class="body-report-section__view-icon" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/filetext.png" mode="aspectFit" />
<text class="body-report-section__view-report">查看报告</text>
</view>
</view>
</view>
<view class="body-report-section__metrics">
<view class="body-report-section__metrics-inner">
<view class="body-report-section__metric">
<view class="body-report-section__metric-inner">
<text class="body-report-section__text">{{ bodyReport.weight }}</text>
<text class="body-report-section__metric-value">体重(kg)</text>
</view>
</view>
<view class="body-report-section__metric-divider"></view>
<view class="body-report-section__metric">
<view class="body-report-section__metric-inner">
<text class="body-report-section__text-2">{{ bodyReport.bmi }}</text>
<text class="body-report-section__text-3">BMI</text>
</view>
</view>
<view class="body-report-section__metric-divider"></view>
<view class="body-report-section__metric">
<view class="body-report-section__metric-inner">
<text class="body-report-section__text-4">{{ bodyReport.bodyFat }}</text>
<text class="body-report-section__metric-label">体脂率</text>
</view>
</view>
<view class="body-report-section__metric-divider"></view>
<view class="body-report-section__metric">
<view class="body-report-section__metric-inner">
<text class="body-report-section__num">{{ bodyReport.bmr }}</text>
<text class="body-report-section__text-5">BMR</text>
</view>
</view>
</view>
</view>
<view class="body-report-section__summary">
<view class="body-report-section__summary-inner">
<view class="body-report-section__goal">
<image class="body-report-section__goal-icon" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/target.png" mode="aspectFit" />
<text class="body-report-section__goal-text">状态：{{ bodyReport.status }}</text>
</view>
<view class="body-report-section__change">
<image class="body-report-section__change-icon" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/trendingdown.png" mode="aspectFit" />
<text class="body-report-section__metric-value-2">较上次 {{ bodyReport.change }}</text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 优惠券&积分区域 -->
<view class="coupon-section">
<view class="coupon-section__inner">
<view class="coupon-section__header">
<view class="coupon-section__header-inner">
<text class="coupon-section__title">优惠券 & 积分</text>
<view class="coupon-section__link" hover-class="mi-tap--hover" :hover-stay-time="150" @tap="goCoupons">
<text class="coupon-section__view-all">更多详情</text>
<image class="coupon-section__link-arrow" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/chevronright5.png" mode="aspectFit" />
</view>
</view>
</view>
<view class="coupon-section__cards">
<view class="coupon-section__cards-inner">
<view class="coupon-section__coupon" hover-class="mi-tap-card--hover" :hover-stay-time="150" @tap="goCoupons">
<view class="coupon-section__coupon-inner">
<text class="coupon-section__amount">{{ couponPoints.amount }}</text>
<text class="coupon-section__desc">{{ couponPoints.couponDesc }}</text>
<view class="coupon-section__coupon-status">
<text class="coupon-section__status">{{ couponPoints.couponAction }}</text>
</view>
</view>
</view>
<view class="coupon-section__points" hover-class="mi-tap-card--hover" :hover-stay-time="150" @tap="goPoints">
<view class="coupon-section__points-inner">
<text class="coupon-section__num">{{ couponPoints.points }}</text>
<text class="coupon-section__points-label">{{ couponPoints.pointsLabel }}</text>
<view class="coupon-section__points-action">
<text class="coupon-section__text">{{ couponPoints.pointsAction }}</text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 推荐奖励区域 -->
<view class="referral-section">
<view class="referral-section__inner">
<view class="referral-section__header">
<text class="referral-section__title">推荐奖励</text>
<view class="referral-section__link" hover-class="mi-tap--hover" :hover-stay-time="150" @tap="goReferral">
<text class="referral-section__records-link">规则说明</text>
<image class="referral-section__link-arrow" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/chevronright11.png" mode="aspectFit" />
</view>
</view>
<view class="referral-section__code-row">
<view class="referral-section__code-box">
<text class="referral-section__code-label">我的邀请码</text>
<text class="referral-section__code-value">{{ referral.code }}</text>
</view>
<view class="referral-section__copy-btn" hover-class="mi-tap-btn--hover" :hover-stay-time="150" @tap="copyReferralCode">
<view class="referral-section__copy-icon">
<view class="referral-section__copy-sheet referral-section__copy-sheet--back"></view>
<view class="referral-section__copy-sheet referral-section__copy-sheet--front"></view>
</view>
<text class="referral-section__copy-text">复制</text>
</view>
</view>
<view class="referral-section__stats">
<view class="referral-section__stat">
<text class="referral-section__stat-num referral-section__stat-num--orange">{{ referral.invited }}</text>
<text class="referral-section__stat-label">已推荐</text>
</view>
<view class="referral-section__stat-divider"></view>
<view class="referral-section__stat">
<text class="referral-section__stat-num referral-section__stat-num--green">{{ referral.registered }}</text>
<text class="referral-section__stat-label">已注册</text>
</view>
<view class="referral-section__stat-divider"></view>
<view class="referral-section__stat">
<text class="referral-section__stat-num referral-section__stat-num--amber">{{ referral.purchased }}</text>
<text class="referral-section__stat-label">已购课</text>
</view>
</view>
</view>
</view>
<!-- 设置区域 -->
<view class="settings-section">
<view class="settings-section__inner">
<text class="settings-section__title">设置与安全</text>
<view class="settings-section__list">
<view class="settings-section__list-inner">
<view v-for="(item, index) in settingsItems" :key="item.key">
<view v-if="index > 0" class="settings-section__item-divider"></view>
<view class="settings-section__item" :class="{ 'settings-section__item--tall': item.subtitle }" hover-class="mi-tap-row--hover" :hover-stay-time="150" @tap="onSetting(item.key)">
<view class="settings-section__item-inner">
<view class="settings-section__item-icon-wrap" :class="item.iconWrapClass">
<image class="settings-section__item-icon" :src="item.icon" mode="aspectFit" />
</view>
<view v-if="item.subtitle" class="settings-section__item-texts">
<text class="settings-section__item-title">{{ item.label }}</text>
<text class="settings-section__item-desc">{{ item.subtitle }}</text>
</view>
<text v-else class="settings-section__item-label" :class="item.labelClass">{{ item.label }}</text>
<image class="settings-section__item-arrow" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/chevronright10.png" mode="aspectFit" />
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 退出登录 -->
<view class="logout-section">
<view class="logout-section__btn" hover-class="mi-tap-btn--hover" :hover-stay-time="150" @tap="handleLogout">
<image class="logout-section__icon" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/logout.png" mode="aspectFit" />
<text class="logout-section__text">退出登录</text>
</view>
</view>
</view>
</view>
</view>
</scroll-view>
<!-- 固定 TabBar -->
<view class="tabbar-fixed">
<TabBar />
</view>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue'
import { PAGE, navigateToPage } from '@/common/constants/routes.js'
import { loadMemberStore, getCenterPageData, renewMemberCard } from '@/common/memberInfo/store.js'
import TabBar from '@/components/TabBar.vue'
// 页面数据
const userInfo = ref({})
const stats = ref({})
const cardInfo = ref({})
const bookingPreview = ref([])
const checkIns = ref([])
const bodyReport = ref({})
const couponPoints = ref({})
const referral = ref({})
// 导航栏样式
const toolbarStyle = ref({})
const toolbarSpacerStyle = ref({})
const navRightStyle = ref({})
// 快捷操作配置
const quickActionsRow1 = 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 quickActionsRow2 = 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 settingsItems = ref([
{
key: 'notify',
label: '通知设置',
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/bell.png',
iconWrapClass: ''
},
{
key: 'password',
label: '修改密码',
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/Vector_2_727.png',
iconWrapClass: 'settings-section__item-icon-wrap--blue'
},
{
key: 'privacy',
label: '隐私政策',
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: '注销账户',
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/userx.png',
iconWrapClass: 'settings-section__item-icon-wrap--red',
labelClass: 'settings-section__item-label--danger'
}
])
// 计算属性
const displayAvatar = computed(() => {
return userInfo.value.avatar || 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/AvatarEditWrap.png'
})
// 方法
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' }
}
}
function refreshFromStore() {
const store = loadMemberStore()
const pageData = getCenterPageData(store)
userInfo.value = pageData.userInfo
stats.value = pageData.stats
cardInfo.value = pageData.cardInfo
bookingPreview.value = pageData.bookingPreview
checkIns.value = pageData.checkIns
bodyReport.value = pageData.bodyReport
couponPoints.value = pageData.couponPoints
referral.value = pageData.referral
}
function goUserInfo() {
navigateToPage(PAGE.USER_INFO)
}
function goMemberCard() {
navigateToPage(PAGE.MEMBER_CARD)
}
function goBooking() {
navigateToPage(PAGE.BOOKING)
}
function goCheckInHistory() {
navigateToPage(PAGE.CHECK_IN_HISTORY)
}
function goBodyTestHistory() {
navigateToPage(PAGE.BODY_TEST_HISTORY)
}
function goBodyReport() {
const id = bodyReport.value?.recordId
const url = id ? `${PAGE.BODY_TEST_REPORT}?id=${id}` : PAGE.BODY_TEST_HISTORY
navigateToPage(url)
}
function goCoupons() {
navigateToPage(PAGE.COUPONS)
}
function goPoints() {
navigateToPage(PAGE.POINTS)
}
function goReferral() {
navigateToPage(PAGE.REFERRAL)
}
function onRenewCard() {
uni.showModal({
title: '续费会员卡',
content: '确认续费 90 天？',
success: (res) => {
if (!res.confirm) return
const store = loadMemberStore()
renewMemberCard(store, 90)
refreshFromStore()
uni.showToast({ title: '续费成功', icon: 'success' })
}
})
}
function onQuickAction(type) {
const routes = {
booking: PAGE.COURSE_LIST,
bodyTest: PAGE.BODY_TEST_HOME,
bodyReport: PAGE.BODY_TEST_HISTORY,
trainReport: PAGE.TRAIN_REPORT,
coupon: PAGE.COUPONS,
points: PAGE.POINTS,
referral: PAGE.REFERRAL,
course: PAGE.MY_COURSES
}
if (routes[type]) {
navigateToPage(routes[type])
}
}
function onCheckInTap(item) {
uni.showModal({
title: item.title,
content: item.time,
showCancel: false
})
}
function copyReferralCode() {
uni.setClipboardData({
data: referral.value.code,
success: () => {
uni.showToast({ title: '已复制', icon: 'success' })
}
})
}
function onSetting(key) {
const labels = {
notify: '通知设置',
password: '修改密码',
privacy: '隐私政策',
nfc: 'NFC 门禁卡',
delete: '注销账户'
}
if (key === 'delete') {
uni.showModal({
title: '注销账户',
content: '注销后数据将无法恢复，确定继续吗？',
confirmColor: '#E74C3C'
})
return
}
if (key === 'privacy') {
uni.showModal({
title: '隐私政策',
content: '我们重视您的隐私，详细政策请前往官网查看。',
showCancel: false
})
return
}
uni.showToast({
title: `${labels[key] || '设置'}开发中`,
icon: 'none'
})
}
function handleLogout() {
uni.showModal({
title: '退出登录',
content: '确定要退出登录吗？',
success: (res) => {
if (res.confirm) {
uni.showToast({ title: '已退出', icon: 'success' })
}
}
})
}
onMounted(() => {
syncNavSafeArea()
refreshFromStore()
})
</script>
<style lang="scss">
@import '@/common/style/base.css';
@import '@/common/style/memberInfo/member-info-component-reset.css';
@import '@/common/style/memberInfo/member-info-tap.css';
@import '@/common/style/memberInfo/member-info-page.css';
@import '@/common/style/memberInfo/member-info-header.css';
@import '@/common/style/memberInfo/member-info-member-card.css';
@import '@/common/style/memberInfo/member-info-quick-actions.css';
@import '@/common/style/memberInfo/member-info-booking-list.css';
@import '@/common/style/memberInfo/member-info-check-in-list.css';
@import '@/common/style/memberInfo/member-info-body-report.css';
@import '@/common/style/memberInfo/member-info-coupon-points.css';
@import '@/common/style/memberInfo/member-info-referral.css';
@import '@/common/style/memberInfo/member-info-settings.css';
@import '@/common/style/memberInfo/member-info-logout.css';
.tabbar-fixed {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
background-color: transparent;
}
.booking-section__empty {
display: flex;
align-items: center;
justify-content: center;
padding: 24px 16px;
}
.booking-section__empty-text {
font-size: 14px;
color: #8A99B4;
}
</style>
gym-manage-uniapp/pages/memberInfo/memberInfo.vue
+315 -152
View File
@@ -5,7 +5,9 @@
<MemberInfoHeader
:user-info="userInfo"
:stats="stats"
:isLogin="isLogin"
@user-info="goUserInfo"
@guest-login="handleGuestLogin"
/>
<view class="member-page__body">
<view class="member-page__sections">
@@ -13,35 +15,41 @@
:card-info="cardInfo"
@view-all="goMemberCard"
@renew="onRenewCard"
@purchase="goPurchaseCard"
/>
<MemberInfoQuickActions @action="onQuickAction" />
<MemberInfoBookingList
v-if="isLogin"
:items="bookingPreview"
@view-all="goBooking"
@item-tap="goBooking"
/>
<MemberInfoCheckInList
v-if="isLogin"
:items="checkIns"
@view-all="onCheckInViewAll"
@item-tap="onCheckInTap"
/>
<MemberInfoBodyReport
v-if="isLogin"
:report="bodyReport"
@view-history="onBodyReportHistory"
@view-report="onBodyReportView"
/>
<MemberInfoCouponPoints
v-if="isLogin"
:data="couponPoints"
@view-all="onCouponViewAll"
@use-coupon="onUseCoupon"
@redeem-points="onRedeemPoints"
/>
<MemberInfoReferral
v-if="isLogin"
:data="referral"
@view-rules="onReferralRules"
/>
<MemberInfoSettings @setting="onSetting" />
<MemberInfoLogout @logout="handleLogout" />
<MemberInfoSettings v-if="isLogin" @setting="onSetting" />
<MemberInfoLogout v-if="isLogin" @logout="handleLogout" />
</view>
</view>
</view>
@@ -53,13 +61,19 @@
</view>
</template>
<script>
<script setup>
import { ref, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { PAGE, navigateToPage } from '@/common/constants/routes.js'
import {
loadMemberStore,
getCenterPageData,
renewMemberCard
renewMemberCard,
saveMemberStore,
getDefaultStore
} from '@/common/memberInfo/store.js'
import { login as miniappLogin, getUserInfo, getMemberDetail, getCheckInStats, updateUserInfo } from '@/api/main.js'
import { setToken, getToken, clearToken } from '@/utils/request.js'
import MemberInfoHeader from '@/components/memberInfo/MemberInfoHeader.vue'
import MemberInfoMemberCard from '@/components/memberInfo/MemberInfoMemberCard.vue'
import MemberInfoQuickActions from '@/components/memberInfo/MemberInfoQuickActions.vue'
@@ -72,162 +86,311 @@ import MemberInfoSettings from '@/components/memberInfo/MemberInfoSettings.vue'
import MemberInfoLogout from '@/components/memberInfo/MemberInfoLogout.vue'
import TabBar from '@/components/TabBar.vue'
export default {
components: {
MemberInfoHeader,
MemberInfoMemberCard,
MemberInfoQuickActions,
MemberInfoBookingList,
MemberInfoCheckInList,
MemberInfoBodyReport,
MemberInfoCouponPoints,
MemberInfoReferral,
MemberInfoSettings,
MemberInfoLogout,
TabBar
},
data() {
return {
userInfo: {},
stats: {},
cardInfo: {},
bookingPreview: [],
checkIns: [],
bodyReport: {},
couponPoints: {},
referral: {}
}
},
onShow() {
this.refreshFromStore()
},
methods: {
refreshFromStore() {
const userInfo = ref({})
const stats = ref({})
const cardInfo = ref({})
const bookingPreview = ref([])
const checkIns = ref([])
const bodyReport = ref({})
const couponPoints = ref({})
const referral = ref({})
const loading = ref(false)
const hasActiveCard = ref(false)
const isLogin = ref(false)
// 页面加载时检查token
onMounted(() => {
const token = getToken()
const isLoginStorage = uni.getStorageSync('isLogin')
if (token || isLoginStorage) {
isLogin.value = true
}
})
async function fetchMemberInfo() {
if (loading.value) return
loading.value = true
console.log('[memberInfo] fetchMemberInfo 开始执行')
try {
const res = await getUserInfo({ cache: false })
console.log('[memberInfo] API返回，res =', res)
const apiData = res.data || res
console.log('[memberInfo] apiData =', apiData)
if (apiData && (apiData.nickname !== undefined || apiData.phone !== undefined || apiData.id !== undefined)) {
console.log('[memberInfo] 收到有效数据，更新store')
const store = loadMemberStore()
const pageData = getCenterPageData(store)
this.userInfo = pageData.userInfo
this.stats = pageData.stats
this.cardInfo = pageData.cardInfo
this.bookingPreview = pageData.bookingPreview
this.checkIns = pageData.checkIns
this.bodyReport = pageData.bodyReport
this.couponPoints = pageData.couponPoints
this.referral = pageData.referral
},
goMemberCard() {
navigateToPage(PAGE.MEMBER_CARD)
},
goBooking() {
navigateToPage(PAGE.BOOKING)
},
goUserInfo() {
navigateToPage(PAGE.USER_INFO)
},
onRenewCard() {
uni.showModal({
title: '续费会员卡',
content: '确认续费 90 天？',
success: (res) => {
if (!res.confirm) return
const store = loadMemberStore()
renewMemberCard(store, 90)
this.refreshFromStore()
uni.showToast({ title: '续费成功', icon: 'success' })
// 更新memberProfile
store.memberProfile = {
...store.memberProfile,
id: apiData.id,
name: apiData.nickname || apiData.name,
phone: apiData.phone,
avatar: apiData.avatar,
memberLevel: apiData.memberLevel || '普通会员'
}
// 更新profile
store.profile = {
...store.profile,
id: apiData.id,
name: apiData.nickname || apiData.name,
phone: apiData.phone,
avatar: apiData.avatar,
gender: apiData.gender,
genderDesc: apiData.genderDesc,
birthday: apiData.birthday,
height: apiData.height,
weight: apiData.weight,
hasPhone: apiData.hasPhone,
isSubscribed: apiData.isSubscribed,
memberLevel: apiData.memberLevel || '普通会员'
}
// 获取会员详细信息（会员卡、积分）
try {
const detailRes = await getMemberDetail()
console.log('[memberInfo] getMemberDetail 返回:', JSON.stringify(detailRes, null, 2))
const detailData = detailRes.data || {}
store.card = detailData.memberCards ? detailData.memberCards[0] || {} : {}
store.cardInfo = {
name: detailData.memberCards?.[0]?.memberCardName || '暂无会员卡',
type: detailData.memberCards?.[0]?.memberCardTypeDesc || '',
remainingTimes: detailData.memberCards?.[0]?.memberCardTotalTimes || 0,
status: detailData.memberCards?.[0]?.memberCardStatusDesc || ''
}
})
},
onQuickAction(type) {
const routes = {
booking: PAGE.COURSE_LIST,
bodyTest: PAGE.BODY_TEST_HOME,
bodyReport: PAGE.BODY_TEST_HISTORY,
trainReport: PAGE.TRAIN_REPORT,
coupon: PAGE.COUPONS,
points: PAGE.POINTS,
referral: PAGE.REFERRAL,
course: PAGE.MY_COURSES
}
if (routes[type]) {
navigateToPage(routes[type])
}
},
onCheckInViewAll() {
navigateToPage(PAGE.CHECK_IN_HISTORY)
},
onCheckInTap(item) {
uni.showModal({
title: item.title,
content: item.time,
showCancel: false
})
},
onBodyReportHistory() {
navigateToPage(PAGE.BODY_TEST_HISTORY)
},
onBodyReportView() {
const id = this.bodyReport?.recordId
const url = id
? `${PAGE.BODY_TEST_REPORT}?id=${id}`
: PAGE.BODY_TEST_HISTORY
navigateToPage(url)
},
onCouponViewAll() {
navigateToPage(PAGE.COUPONS)
},
onUseCoupon() {
navigateToPage(PAGE.COUPONS)
},
onRedeemPoints() {
navigateToPage(PAGE.POINTS)
},
onReferralRules() {
navigateToPage(PAGE.REFERRAL)
},
onSetting(key) {
const labels = {
notify: '通知设置',
password: '修改密码',
privacy: '隐私政策',
nfc: 'NFC 门禁卡',
delete: '注销账户'
}
if (key === 'delete') {
uni.showModal({
title: '注销账户',
content: '注销后数据将无法恢复，确定继续吗？',
confirmColor: '#E74C3C'
})
return
}
if (key === 'privacy') {
uni.showModal({
title: '隐私政策',
content: '我们重视您的隐私，详细政策请前往官网查看。',
showCancel: false
})
return
}
uni.showToast({
title: `${labels[key] || '设置'}开发中`,
icon: 'none'
})
},
handleLogout() {
uni.showModal({
title: '退出登录',
content: '确定要退出登录吗？',
success: (res) => {
if (res.confirm) {
uni.showToast({ title: '已退出', icon: 'success' })
}
hasActiveCard.value = (detailData.activeCardCount || 0) > 0
store.stats = {
...store.stats,
pointsBalance: detailData.pointsBalance || 0
}
})
} catch (e) {
console.error('[memberInfo] 获取会员详情失败:', e)
}
// 获取签到统计
try {
const statsRes = await getCheckInStats()
console.log('[memberInfo] getCheckInStats 返回:', JSON.stringify(statsRes, null, 2))
const statsData = statsRes.data || {}
store.stats.checkInCount = statsData.totalCount || 0
} catch (e) {
console.error('[memberInfo] 获取签到统计失败:', e)
store.stats.checkInCount = 0
}
saveMemberStore(store)
refreshFromStore()
console.log('[memberInfo] store已更新')
} else {
console.log('[memberInfo] 未登录或数据无效，使用默认空数据')
const store = loadMemberStore()
store.memberProfile = {}
store.profile = {}
store.stats.checkInCount = 0
hasActiveCard.value = false
saveMemberStore(store)
refreshFromStore()
}
} catch (err) {
console.error('[memberInfo] 获取会员信息失败:', err)
// 失败时使用默认空数据
const store = loadMemberStore()
store.memberProfile = {}
store.profile = {}
store.stats.checkInCount = 0
hasActiveCard.value = false
saveMemberStore(store)
refreshFromStore()
} finally {
loading.value = false
console.log('[memberInfo] fetchMemberInfo 执行完成')
}
}
function refreshFromStore() {
const store = loadMemberStore()
const pageData = getCenterPageData(store)
console.log('[memberInfo] refreshFromStore - pageData.userInfo:', JSON.stringify(pageData.userInfo))
userInfo.value = pageData.userInfo
stats.value = pageData.stats
cardInfo.value = pageData.cardInfo
bookingPreview.value = pageData.bookingPreview
checkIns.value = pageData.checkIns
bodyReport.value = pageData.bodyReport
couponPoints.value = pageData.couponPoints
referral.value = pageData.referral
console.log('[memberInfo] refreshFromStore - userInfo.value:', JSON.stringify(userInfo.value))
}
function goMemberCard() {
navigateToPage(PAGE.MEMBER_CARD)
}
function goPurchaseCard() {
navigateToPage(PAGE.PURCHASE_CARD)
}
function goBooking() {
navigateToPage(PAGE.BOOKING)
}
function goUserInfo() {
navigateToPage(PAGE.USER_INFO)
}
function handleGuestLogin() {
console.log('[memberInfo] 用户点击登录区域')
uni.navigateTo({
url: '/pages/memberInfo/login'
})
}
function onRenewCard() {
uni.showModal({
title: '续费会员卡',
content: '确认续费 90 天？',
success: (res) => {
if (!res.confirm) return
const store = loadMemberStore()
renewMemberCard(store, 90)
refreshFromStore()
uni.showToast({ title: '续费成功', icon: 'success' })
}
})
}
function onQuickAction(type) {
const routes = {
booking: PAGE.COURSE_LIST,
bodyTest: PAGE.BODY_TEST_HOME,
bodyReport: PAGE.BODY_TEST_HISTORY,
trainReport: PAGE.TRAIN_REPORT,
coupon: PAGE.COUPONS,
points: PAGE.POINTS,
referral: PAGE.REFERRAL,
course: PAGE.MY_COURSES
}
if (routes[type]) {
navigateToPage(routes[type])
}
}
function onCheckInViewAll() {
navigateToPage(PAGE.CHECK_IN_HISTORY)
}
function onCheckInTap(item) {
uni.showModal({
title: item.title,
content: item.time,
showCancel: false
})
}
function onBodyReportHistory() {
navigateToPage(PAGE.BODY_TEST_HISTORY)
}
function onBodyReportView() {
const id = bodyReport.value?.recordId
const url = id
? `${PAGE.BODY_TEST_REPORT}?id=${id}`
: PAGE.BODY_TEST_HISTORY
navigateToPage(url)
}
function onCouponViewAll() {
navigateToPage(PAGE.COUPONS)
}
function onUseCoupon() {
navigateToPage(PAGE.COUPONS)
}
function onRedeemPoints() {
navigateToPage(PAGE.POINTS)
}
function onReferralRules() {
navigateToPage(PAGE.REFERRAL)
}
function onSetting(key) {
const labels = {
notify: '通知设置',
password: '修改密码',
privacy: '隐私政策',
nfc: 'NFC 门禁卡',
delete: '注销账户'
}
if (key === 'delete') {
uni.showModal({
title: '注销账户',
content: '注销后数据将无法恢复，确定继续吗？',
confirmColor: '#E74C3C'
})
return
}
if (key === 'privacy') {
uni.showModal({
title: '隐私政策',
content: '我们重视您的隐私，详细政策请前往官网查看。',
showCancel: false
})
return
}
uni.showToast({
title: `${labels[key] || '设置'}开发中`,
icon: 'none'
})
}
function handleLogout() {
uni.showModal({
title: '退出登录',
content: '确定要退出登录吗？',
success: (res) => {
if (res.confirm) {
// 清除token
clearToken()
// 重置登录状态
isLogin.value = false
// 重置store为默认状态
const defaultStore = getDefaultStore()
saveMemberStore(defaultStore)
// 重置页面数据
userInfo.value = {}
stats.value = {}
cardInfo.value = {}
bookingPreview.value = []
checkIns.value = []
bodyReport.value = {}
couponPoints.value = {}
referral.value = {}
hasActiveCard.value = false
refreshFromStore()
uni.showToast({ title: '已退出', icon: 'success' })
}
}
})
}
refreshFromStore()
onShow(() => {
console.log('[memberInfo] onShow 被调用')
// 检查登录状态
const token = getToken()
const isLoginStorage = uni.getStorageSync('isLogin')
if (token || isLoginStorage) {
isLogin.value = true
} else {
isLogin.value = false
}
fetchMemberInfo()
})
</script>
<style>
<style lang="scss">
@import '@/common/style/base.css';
@import '@/common/style/memberInfo/member-info-component-reset.css';
@import '@/common/style/memberInfo/member-info-tap.css';
gym-manage-uniapp/pages/memberInfo/points.vue
+24 -22
View File
@@ -52,35 +52,37 @@
</view>
</template>
<script>
<script setup>
import { ref } from 'vue'
import MemberInfoSubNav from '@/components/memberInfo/MemberInfoSubNav.vue'
import { PAGE, navigateToPage } from '@/common/constants/routes.js'
import { PAGE, navigateToPage, backToMemberCenter } from '@/common/constants/routes.js'
import { getPointsPageData } from '@/common/memberInfo/moduleStore.js'
import { loadMemberStore } from '@/common/memberInfo/store.js'
import { subPageMixin } from '@/common/memberInfo/mixins.js'
export default {
components: { MemberInfoSubNav },
mixins: [subPageMixin],
data() {
return { balance: 0, config: {}, historyPreview: [] }
},
onShow() {
const data = getPointsPageData(loadMemberStore())
this.balance = data.balance
this.config = data.config
this.historyPreview = data.history.slice(0, 5)
},
methods: {
goMall() { navigateToPage(PAGE.POINTS_MALL) },
goHistory() { navigateToPage(PAGE.POINTS_HISTORY) },
goReferral() { navigateToPage(PAGE.REFERRAL) },
checkIn() { uni.showToast({ title: '签到成功 +10 积分', icon: 'success' }) }
}
const balance = ref(0)
const config = ref({})
const historyPreview = ref([])
function refresh() {
const data = getPointsPageData(loadMemberStore())
balance.value = data.balance
config.value = data.config
historyPreview.value = data.history.slice(0, 5)
}
function goBack() {
backToMemberCenter()
}
function goMall() { navigateToPage(PAGE.POINTS_MALL) }
function goHistory() { navigateToPage(PAGE.POINTS_HISTORY) }
function goReferral() { navigateToPage(PAGE.REFERRAL) }
function checkIn() { uni.showToast({ title: '签到成功 +10 积分', icon: 'success' }) }
refresh()
</script>
<style>
<style lang="scss">
@import '@/common/style/base.css';
@import '@/common/style/memberInfo/pages/page-reset.css';
@import '@/common/style/memberInfo/pages/sub-page-base.css';
gym-manage-uniapp/pages/memberInfo/pointsHistory.vue
+20 -26
View File
@@ -41,40 +41,34 @@
</view>
</template>
<script>
<script setup>
import { ref, watch } from 'vue'
import MemberInfoSubNav from '@/components/memberInfo/MemberInfoSubNav.vue'
import { PAGE, goBackOrTab } from '@/common/constants/routes.js'
import { loadMemberStore } from '@/common/memberInfo/store.js'
import { filterPointsHistory } from '@/common/memberInfo/moduleStore.js'
export default {
components: { MemberInfoSubNav },
data() {
return {
filter: 'all',
tabs: [
{ key: 'all', label: '全部' },
{ key: 'earn', label: '获取' },
{ key: 'spend', label: '消耗' }
],
list: []
}
},
watch: {
filter() { this.loadList() }
},
onShow() { this.loadList() },
methods: {
onBack() { goBackOrTab(PAGE.POINTS) },
loadList() {
const store = loadMemberStore()
this.list = filterPointsHistory(store, this.filter)
}
}
const filter = ref('all')
const tabs = ref([
{ key: 'all', label: '全部' },
{ key: 'earn', label: '获取' },
{ key: 'spend', label: '消耗' }
])
const list = ref([])
function onBack() { goBackOrTab(PAGE.POINTS) }
function loadList() {
const store = loadMemberStore()
list.value = filterPointsHistory(store, filter.value)
}
watch(filter, () => { loadList() })
loadList()
</script>
<style>
<style lang="scss">
@import '@/common/style/base.css';
@import '@/common/style/memberInfo/pages/page-reset.css';
@import '@/common/style/memberInfo/pages/sub-page-base.css';
gym-manage-uniapp/pages/memberInfo/pointsMall.vue
+36 -35
View File
@@ -39,49 +39,50 @@
</view>
</template>
<script>
<script setup>
import { ref } from 'vue'
import MemberInfoSubNav from '@/components/memberInfo/MemberInfoSubNav.vue'
import { PAGE, goBackOrTab } from '@/common/constants/routes.js'
import { loadMemberStore, persistMemberStore } from '@/common/memberInfo/store.js'
import { getPointsPageData, redeemPointsReward } from '@/common/memberInfo/moduleStore.js'
export default {
components: { MemberInfoSubNav },
data() {
return { balance: 0, rewards: [], redeemRecords: [] }
},
onShow() {
const data = getPointsPageData(loadMemberStore())
this.balance = data.balance
this.rewards = data.rewards
this.redeemRecords = data.redeemRecords
},
methods: {
onBack() { goBackOrTab(PAGE.POINTS) },
redeem(item) {
uni.showModal({
title: '确认兑换',
content: `使用 ${item.cost} 积分兑换「${item.name}」？`,
success: (res) => {
if (!res.confirm) return
const store = loadMemberStore()
const result = redeemPointsReward(store, item.id)
uni.showToast({ title: result.message, icon: result.ok ? 'success' : 'none' })
if (result.ok) {
persistMemberStore(store)
const data = getPointsPageData(store)
this.balance = data.balance
this.rewards = data.rewards
this.redeemRecords = data.redeemRecords
}
}
})
}
}
const balance = ref(0)
const rewards = ref([])
const redeemRecords = ref([])
function loadData() {
const data = getPointsPageData(loadMemberStore())
balance.value = data.balance
rewards.value = data.rewards
redeemRecords.value = data.redeemRecords
}
function onBack() { goBackOrTab(PAGE.POINTS) }
function redeem(item) {
uni.showModal({
title: '确认兑换',
content: `使用 ${item.cost} 积分兑换「${item.name}」？`,
success: (res) => {
if (!res.confirm) return
const store = loadMemberStore()
const result = redeemPointsReward(store, item.id)
uni.showToast({ title: result.message, icon: result.ok ? 'success' : 'none' })
if (result.ok) {
persistMemberStore(store)
const data = getPointsPageData(store)
balance.value = data.balance
rewards.value = data.rewards
redeemRecords.value = data.redeemRecords
}
}
})
}
loadData()
</script>
<style>
<style lang="scss">
@import '@/common/style/base.css';
@import '@/common/style/memberInfo/pages/page-reset.css';
@import '@/common/style/memberInfo/pages/sub-page-base.css';
gym-manage-uniapp/pages/memberInfo/purchaseCard.vue
+694
View File
@@ -0,0 +1,694 @@
<template>
<view class="scroll-container theme-light">
<view class="purchase-card-page">
<MemberInfoSubNav title="购买会员卡" @back="goBack" />
<view class="purchase-card-page__body">
<!-- 头部 -->
<view class="pc-intro">
<view class="pc-intro__icon">
<image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/crown0.png" mode="aspectFit" />
</view>
<text class="pc-intro__title">选择会员卡类型</text>
<text class="pc-intro__desc">购买后立即生效，享受专属会员权益</text>
</view>
<!-- 卡列表 -->
<view class="pc-list">
<view
v-for="card in cardTypes"
:key="card.id"
class="pc-card"
:class="{ 'pc-card--selected': selectedCardId === card.id }"
@tap="selectCard(card)"
>
<view class="pc-card__check">
<view
class="pc-card__check-inner"
:class="{ 'pc-card__check-inner--checked': selectedCardId === card.id }"
></view>
</view>
<view class="pc-card__content">
<view class="pc-card__header">
<text class="pc-card__name">{{ card.cardName }}</text>
<view class="pc-card__tag" :class="'pc-card__tag--' + getTagClass(card.cardType)">
<text class="pc-card__tag-text">{{ getCardTypeName(card.cardType) }}</text>
</view>
</view>
<view class="pc-card__info">
<view class="pc-card__info-row" v-if="card.validityDays">
<text class="pc-card__info-label">有效期</text>
<text class="pc-card__info-value">{{ card.validityDays }}天</text>
</view>
<view class="pc-card__info-row" v-if="card.cardType === 'COUNT' && card.totalTimes">
<text class="pc-card__info-label">总次数</text>
<text class="pc-card__info-value">{{ card.totalTimes }}次</text>
</view>
<view class="pc-card__info-row" v-if="card.cardType === 'BALANCE' && card.amount">
<text class="pc-card__info-label">储值金额</text>
<text class="pc-card__info-value">{{ card.amount }}元</text>
</view>
<view class="pc-card__info-row" v-if="card.description">
<text class="pc-card__info-label">说明</text>
<text class="pc-card__info-value">{{ card.description }}</text>
</view>
</view>
<view class="pc-card__footer">
<text class="pc-card__price">¥{{ card.price }}</text>
<text class="pc-card__original-price" v-if="card.originalPrice && card.originalPrice !== card.price">¥{{ card.originalPrice }}</text>
</view>
</view>
</view>
</view>
<!-- 支付方式 -->
<view class="pc-payment">
<text class="pc-payment__title">支付方式</text>
<view class="pc-payment__methods">
<view class="pc-payment__method pc-payment__method--selected">
<image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/alipay.png" mode="aspectFit" class="pc-payment__icon" />
<text class="pc-payment__name">支付宝支付</text>
<view class="pc-payment__check"></view>
</view>
</view>
</view>
<!-- 底部 -->
<view class="pc-bottom">
<view class="pc-bottom__total">
<text class="pc-bottom__total-label">合计</text>
<text class="pc-bottom__total-price">¥{{ selectedCard?.price || 0 }}</text>
</view>
<view
class="pc-bottom__btn"
:class="{ 'pc-bottom__btn--disabled': !selectedCard || loading }"
@tap="handlePurchase"
>
<text class="pc-bottom__btn-text">{{ loading ? '处理中...' : '立即购买' }}</text>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { onBackPress } from '@dcloudio/uni-app'
import MemberInfoSubNav from '@/components/memberInfo/MemberInfoSubNav.vue'
import { purchaseMemberCard, createPayment, getPaymentStatus } from '@/api/main.js'
import { loadMemberStore } from '@/common/memberInfo/store.js'
const cardTypes = ref([
{ id: 1, cardName: '月卡', cardType: 'DURATION', validityDays: 30, price: 1, originalPrice: 399 },
{ id: 2, cardName: '季卡', cardType: 'DURATION', validityDays: 90, price: 1, originalPrice: 999 },
{ id: 3, cardName: '年卡', cardType: 'DURATION', validityDays: 365, price: 1, originalPrice: 2999 },
{ id: 4, cardName: '10次卡', cardType: 'COUNT', validityDays: 90, totalTimes: 10, price: 1 },
{ id: 5, cardName: '50次卡', cardType: 'COUNT', validityDays: 180, totalTimes: 50, price: 1 },
{ id: 6, cardName: '100次卡', cardType: 'COUNT', validityDays: 365, totalTimes: 100, price: 1 },
{ id: 7, cardName: '储值500', cardType: 'BALANCE', validityDays: 365, amount: 500, price: 1 },
{ id: 8, cardName: '储值1000', cardType: 'BALANCE', validityDays: 365, amount: 1000, price: 1 },
])
const selectedCardId = ref(null)
const loading = ref(false)
const selectedCard = ref(null)
const pollingTimer = ref(null)
const isPolling = ref(false)
// 支付方式
const TRADE_TYPE = 'ALIPAY'
// ==================== 工具函数 ====================
function getCardTypeName(type) {
const map = { DURATION: '时长卡', COUNT: '次卡', BALANCE: '储值卡' }
return map[type] || type
}
function getTagClass(type) {
const map = { DURATION: 'time', COUNT: 'count', BALANCE: 'value' }
return map[type] || 'default'
}
function selectCard(card) {
selectedCardId.value = card.id
selectedCard.value = card
}
function goBack() {
uni.redirectTo({
url: '/pages/memberInfo/memberCard'
})
}
onBackPress(() => {
uni.redirectTo({
url: '/pages/memberInfo/memberCard'
})
return true
})
// ==================== 唤起支付宝 App ====================
function invokeAlipayApp(payUrl) {
return new Promise((resolve, reject) => {
if (!payUrl) {
reject(new Error('支付链接为空'))
return
}
console.log('[Alipay] 准备唤起支付宝:', payUrl)
// 检查是否在 App 环境
if (typeof plus === 'undefined') {
uni.showModal({
title: '提示',
content: '请在 App 内完成支付',
showCancel: false
})
reject(new Error('非 App 环境'))
return
}
// 使用 plus.runtime.openURL 唤起支付宝
plus.runtime.openURL(payUrl, function(err) {
console.error('[Alipay] 唤起支付宝失败:', err)
uni.showModal({
title: '提示',
content: '无法唤起支付宝，请确认已安装支付宝 App',
showCancel: false
})
reject(new Error('唤起支付宝失败: ' + (err?.message || '未知错误')))
})
// 直接 resolve，支付结果由轮询处理
resolve()
})
}
// ==================== 轮询支付状态 ====================
function startPolling(orderId) {
return new Promise((resolve, reject) => {
if (isPolling.value) return
isPolling.value = true
let pollCount = 0
const maxRetry = 60 // 60秒
let isResolved = false
// 监听 App 回到前台
const handleResume = () => {
if (isResolved) return
console.log('[Poll] App 回到前台，立即查询')
doQuery()
}
if (typeof plus !== 'undefined') {
plus.globalEvent.addEventListener('resume', handleResume)
}
function doQuery() {
if (isResolved) return
pollCount++
getPaymentStatus(orderId)
.then(res => {
if (res.code === 200 && res.data) {
const status = res.data.status || res.data.payStatus
console.log(`[Poll] 第 ${pollCount} 次查询，状态:`, status)
if (status === 'SUCCESS') {
isResolved = true
cleanup()
resolve(true)
return
} else if (status === 'FAIL' || status === 'CLOSED') {
isResolved = true
cleanup()
reject(new Error('支付失败'))
return
}
}
// 继续轮询
if (pollCount < maxRetry && !isResolved) {
pollingTimer.value = setTimeout(doQuery, 1000)
} else if (!isResolved) {
isResolved = true
cleanup()
reject(new Error('支付超时，请确认是否已完成支付'))
}
})
.catch(err => {
console.error('[Poll] 查询异常:', err)
if (pollCount < maxRetry && !isResolved) {
pollingTimer.value = setTimeout(doQuery, 1000)
} else if (!isResolved) {
isResolved = true
cleanup()
reject(new Error('支付超时，请确认是否已完成支付'))
}
})
}
function cleanup() {
isPolling.value = false
if (pollingTimer.value) {
clearTimeout(pollingTimer.value)
pollingTimer.value = null
}
if (typeof plus !== 'undefined') {
plus.globalEvent.removeEventListener('resume', handleResume)
}
}
// 延迟 1.5 秒开始轮询
pollingTimer.value = setTimeout(doQuery, 1500)
})
}
// ==================== 核心购买逻辑 ====================
async function handlePurchase() {
if (!selectedCard.value) {
uni.showToast({ title: '请选择会员卡', icon: 'none' })
return
}
if (loading.value) return
loading.value = true
try {
const store = loadMemberStore()
const memberId = store.memberProfile?.id || store.profile?.id
// if (!memberId) {
// uni.showToast({ title: '请先登录', icon: 'none' })
// loading.value = false
// return
// }
// 金额转换：元 -> 分
const transAmt = String(Math.round(selectedCard.value.price * 100))
const cardName = selectedCard.value.cardName
// 1. 创建支付订单
uni.showLoading({ title: '创建订单中...' })
const payRes = await createPayment({
memberId: memberId,
orderType: 'MEMBER_CARD',
goodsDesc: `购买${cardName}`,
transAmt: transAmt,
tradeType: TRADE_TYPE,
remark: `会员卡类型ID:${selectedCard.value.id}`
})
if (payRes.code !== 200) {
uni.hideLoading()
uni.showToast({ title: payRes.message || '创建支付订单失败', icon: 'none' })
loading.value = false
return
}
const payData = payRes.data
const orderId = payData.orderId
// 2. 获取支付链接
const payUrl = payData.payUrl || payData.payInfo || payData.h5PayUrl
if (!payUrl) {
uni.hideLoading()
uni.showToast({ title: '获取支付链接失败', icon: 'none' })
loading.value = false
return
}
// 3. 唤起支付宝 App
uni.hideLoading()
uni.showLoading({ title: '正在唤起支付宝...' })
try {
await invokeAlipayApp(payUrl)
} catch (err) {
uni.hideLoading()
uni.showToast({ title: '唤起支付宝失败，请确认已安装支付宝', icon: 'none' })
loading.value = false
return
}
// 4. 轮询支付状态
uni.showLoading({ title: '等待支付结果...' })
await startPolling(orderId)
// 5. 支付成功，购买会员卡
uni.hideLoading()
const memberRes = await purchaseMemberCard({
memberId: memberId,
memberCardId: selectedCard.value.id,
sourceOrderId: orderId
})
if (memberRes.code === 200) {
uni.showToast({ title: '购买成功 🎉', icon: 'success' })
setTimeout(() => {
uni.redirectTo({
url: '/pages/memberInfo/memberCard'
})
}, 1500)
} else {
uni.showToast({ title: memberRes.message || '会员卡购买失败', icon: 'none' })
}
} catch (e) {
console.error('[purchaseCard] 购买失败:', e)
uni.hideLoading()
const errorMsg = e.message || '购买失败'
uni.showToast({ title: errorMsg, icon: 'none' })
} finally {
loading.value = false
}
}
// ==================== 生命周期 ====================
onMounted(() => {
if (cardTypes.value.length > 0) {
selectCard(cardTypes.value[0])
}
})
onUnmounted(() => {
// 清理轮询
if (pollingTimer.value) {
clearTimeout(pollingTimer.value)
pollingTimer.value = null
}
isPolling.value = false
if (typeof plus !== 'undefined') {
plus.globalEvent.removeEventListener('resume', () => {})
}
})
</script>
<style lang="scss">
@import '@/common/style/base.css';
@import '@/common/style/memberInfo/pages/page-reset.css';
@import '@/common/style/memberInfo/pages/sub-page-base.css';
@import '@/common/style/memberInfo/member-info-component-reset.css';
@import '@/common/style/memberInfo/member-info-sub-nav.css';
@import '@/common/style/memberInfo/member-info-tap.css';
.purchase-card-page {
min-height: 100vh;
background: #F5F7FA;
}
.purchase-card-page__body {
padding-bottom: 100px;
}
.pc-intro {
display: flex;
flex-direction: column;
align-items: center;
padding: 32px 24px;
background: linear-gradient(135deg, #1A365D 0%, #2C5282 100%);
}
.pc-intro__icon {
width: 64px;
height: 64px;
margin-bottom: 16px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
image {
width: 40px;
height: 40px;
}
}
.pc-intro__title {
font-size: 20px;
font-weight: 600;
color: #FFFFFF;
margin-bottom: 8px;
}
.pc-intro__desc {
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
}
.pc-list {
padding: 16px;
}
.pc-payment {
padding: 16px;
margin: 0 16px;
background: #FFFFFF;
border-radius: 16px;
}
.pc-payment__title {
font-size: 16px;
font-weight: 600;
color: #1A202C;
margin-bottom: 16px;
}
.pc-payment__methods {
display: flex;
gap: 16px;
}
.pc-payment__method {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: 16px;
border: 2px solid #1677FF;
border-radius: 12px;
background: #F0F7FF;
position: relative;
&--selected {
border-color: #1677FF;
background: #F0F7FF;
}
}
.pc-payment__icon {
width: 40px;
height: 40px;
margin-bottom: 8px;
}
.pc-payment__name {
font-size: 14px;
color: #2D3748;
}
.pc-payment__check {
position: absolute;
top: 8px;
right: 8px;
width: 20px;
height: 20px;
background: #1677FF;
border-radius: 50%;
&::after {
content: '';
display: block;
width: 6px;
height: 6px;
background: #FFFFFF;
border-radius: 50%;
margin: 4px auto;
}
}
.pc-card {
display: flex;
align-items: flex-start;
background: #FFFFFF;
border-radius: 16px;
padding: 20px;
margin-bottom: 16px;
border: 2px solid transparent;
transition: all 0.2s;
&--selected {
border-color: #2C5282;
background: #F7FAFC;
}
}
.pc-card__check {
width: 24px;
height: 24px;
margin-right: 16px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.pc-card__check-inner {
width: 20px;
height: 20px;
border: 2px solid #CBD5E0;
border-radius: 50%;
transition: all 0.2s;
&--checked {
border-color: #2C5282;
background: #2C5282;
&::after {
content: '';
display: block;
width: 6px;
height: 6px;
background: #FFFFFF;
border-radius: 50%;
margin: 4px auto;
}
}
}
.pc-card__content {
flex: 1;
}
.pc-card__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.pc-card__name {
font-size: 18px;
font-weight: 600;
color: #1A202C;
}
.pc-card__tag {
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
&--time {
background: #EBF8FF;
.pc-card__tag-text { color: #2B6CB0; }
}
&--count {
background: #FEF3E2;
.pc-card__tag-text { color: #D69E2E; }
}
&--value {
background: #F0FFF4;
.pc-card__tag-text { color: #38A169; }
}
&--default {
background: #E2E8F0;
.pc-card__tag-text { color: #718096; }
}
}
.pc-card__tag-text {
font-size: 12px;
font-weight: 500;
}
.pc-card__info {
display: flex;
flex-wrap: wrap;
gap: 8px 24px;
margin-bottom: 12px;
}
.pc-card__info-row {
display: flex;
align-items: center;
gap: 8px;
}
.pc-card__info-label {
font-size: 13px;
color: #718096;
}
.pc-card__info-value {
font-size: 13px;
font-weight: 600;
color: #2D3748;
}
.pc-card__footer {
display: flex;
align-items: baseline;
gap: 8px;
}
.pc-card__price {
font-size: 24px;
font-weight: 700;
color: #E53E3E;
}
.pc-card__original-price {
font-size: 14px;
color: #A0AEC0;
text-decoration: line-through;
}
.pc-bottom {
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 24px;
padding-bottom: calc(16px + env(safe-area-inset-bottom));
background: #FFFFFF;
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
z-index: 100;
}
.pc-bottom__total {
display: flex;
align-items: baseline;
gap: 8px;
}
.pc-bottom__total-label {
font-size: 14px;
color: #718096;
}
.pc-bottom__total-price {
font-size: 28px;
font-weight: 700;
color: #E53E3E;
}
.pc-bottom__btn {
background: #1677FF;
border-radius: 12px;
padding: 16px 48px;
transition: all 0.2s;
&--disabled {
background: #A0AEC0;
}
}
.pc-bottom__btn-text {
font-size: 16px;
font-weight: 600;
color: #FFFFFF;
}
</style>
gym-manage-uniapp/pages/memberInfo/referral.vue
+23 -35
View File
@@ -104,45 +104,37 @@
</view>
</template>
<script>
<script setup>
import { ref } from 'vue'
import MemberInfoSubNav from '@/components/memberInfo/MemberInfoSubNav.vue'
import { getReferralPageData } from '@/common/memberInfo/moduleStore.js'
import { loadMemberStore } from '@/common/memberInfo/store.js'
import { subPageMixin } from '@/common/memberInfo/mixins.js'
import { backToMemberCenter } from '@/common/constants/routes.js'
export default {
components: { MemberInfoSubNav },
mixins: [subPageMixin],
data() {
return {
data: { code: '', invited: 0, registered: 0, purchased: 0, records: [], rules: [] }
const data = ref(getReferralPageData(loadMemberStore()))
function goBack() {
backToMemberCenter()
}
function copyCode() {
uni.setClipboardData({
data: data.value.code,
success: () => uni.showToast({ title: '已复制', icon: 'success' })
})
}
function shareInvite() {
uni.showActionSheet({
itemList: ['分享给微信好友', '生成分享海报'],
success: (res) => {
uni.showToast({ title: ['已唤起微信分享', '海报已生成'][res.tapIndex] || '分享成功', icon: 'none' })
}
},
onShow() {
const store = loadMemberStore()
this.data = getReferralPageData(store)
},
methods: {
copyCode() {
uni.setClipboardData({
data: this.data.code,
success: () => uni.showToast({ title: '邀请码已复制', icon: 'success' })
})
},
shareInvite() {
uni.showActionSheet({
itemList: ['分享给微信好友', '生成邀请海报', '复制分享链接'],
success: (res) => {
const msgs = ['已唤起分享', '海报已生成', '链接已复制']
uni.showToast({ title: msgs[res.tapIndex] || '分享成功', icon: 'none' })
}
})
}
}
})
}
</script>
<style>
<style lang="scss">
@import '@/common/style/base.css';
@import '@/common/style/memberInfo/pages/page-reset.css';
@import '@/common/style/memberInfo/pages/sub-page-base.css';
@@ -151,8 +143,4 @@ export default {
@import '@/common/style/memberInfo/member-info-tap.css';
@import '@/common/style/memberInfo/pages/body-test-common.css';
@import '@/common/style/memberInfo/pages/module-pages-common.css';
.mi-mod-referral-hero .bt-hero__actions {
margin-top: 16px;
}
</style>
gym-manage-uniapp/pages/memberInfo/trainReport.vue
+43 -50
View File
@@ -69,64 +69,57 @@
</view>
</template>
<script>
<script setup>
import { ref, computed } from 'vue'
import MemberInfoSubNav from '@/components/memberInfo/MemberInfoSubNav.vue'
import BodyTestTrendChart from '@/components/memberInfo/BodyTestTrendChart.vue'
import { PAGE, navigateToPage } from '@/common/constants/routes.js'
import { PAGE, navigateToPage, backToMemberCenter } from '@/common/constants/routes.js'
import { getTrainingReportData, filterTrainingSessions } from '@/common/memberInfo/moduleStore.js'
import { loadMemberStore } from '@/common/memberInfo/store.js'
import { subPageMixin } from '@/common/memberInfo/mixins.js'
export default {
components: { MemberInfoSubNav, BodyTestTrendChart },
mixins: [subPageMixin],
data() {
return {
period: 'week',
periods: [
{ key: 'week', label: '本周' },
{ key: 'month', label: '本月' }
],
typeFilter: 'all',
typeFilters: [
{ key: 'all', label: '全部' },
{ key: 'group', label: '团课' },
{ key: 'private', label: '私教' },
{ key: 'free', label: '自由' }
],
report: { summary: {}, trendHours: [], trendCalories: [], sessions: [] },
sessions: [],
chartWidth: 300
}
},
onLoad() {
this.chartWidth = uni.getSystemInfoSync().windowWidth - 64
this.refresh()
},
onShow() { this.refresh() },
methods: {
refresh() {
const store = loadMemberStore()
this.report = getTrainingReportData(store, this.period)
this.sessions = filterTrainingSessions(store, { type: this.typeFilter })
},
switchPeriod(key) {
this.period = key
this.refresh()
},
goSession(item) {
navigateToPage(`${PAGE.TRAIN_SESSION}?id=${item.id}`)
}
},
watch: {
typeFilter() {
this.sessions = filterTrainingSessions(loadMemberStore(), { type: this.typeFilter })
}
}
const period = ref('week')
const periods = ref([
{ key: 'week', label: '本周' },
{ key: 'month', label: '本月' }
])
const typeFilter = ref('all')
const typeFilters = ref([
{ key: 'all', label: '全部' },
{ key: 'group', label: '团课' },
{ key: 'private', label: '私教' },
{ key: 'free', label: '自由' }
])
const report = ref({ summary: {}, trendHours: [], trendCalories: [], sessions: [] })
const chartWidth = ref(300)
const sessions = computed(() => {
return filterTrainingSessions(report.value.sessions, typeFilter.value)
})
function switchPeriod(p) {
period.value = p
refresh()
}
function refresh() {
const store = loadMemberStore()
report.value = getTrainingReportData(store, period.value)
}
function goBack() {
backToMemberCenter()
}
function goSession(item) {
navigateToPage(`${PAGE.TRAIN_SESSION_DETAIL}?id=${item.id}`)
}
// Initialize
chartWidth.value = uni.getSystemInfoSync().windowWidth - 64
refresh()
</script>
<style>
<style lang="scss">
@import '@/common/style/base.css';
@import '@/common/style/memberInfo/pages/page-reset.css';
@import '@/common/style/memberInfo/pages/sub-page-base.css';
gym-manage-uniapp/pages/memberInfo/trainSessionDetail.vue
+14 -11
View File
@@ -31,25 +31,28 @@
</view>
</template>
<script>
<script setup>
import { ref, onMounted } from 'vue'
import MemberInfoSubNav from '@/components/memberInfo/MemberInfoSubNav.vue'
import { PAGE, goBackOrTab } from '@/common/constants/routes.js'
import { loadMemberStore } from '@/common/memberInfo/store.js'
import { getTrainingSessionById } from '@/common/memberInfo/moduleStore.js'
export default {
components: { MemberInfoSubNav },
data() { return { session: null } },
onLoad(options) {
this.session = getTrainingSessionById(loadMemberStore(), options?.id)
},
methods: {
onBack() { goBackOrTab(PAGE.TRAIN_REPORT) }
}
const session = ref(null)
onMounted(() => {
const pages = getCurrentPages()
const currentPage = pages[pages.length - 1]
const options = currentPage?.options || {}
session.value = getTrainingSessionById(loadMemberStore(), options?.id)
})
function onBack() {
goBackOrTab(PAGE.TRAIN_REPORT)
}
</script>
<style>
<style lang="scss">
@import '@/common/style/base.css';
@import '@/common/style/memberInfo/pages/page-reset.css';
@import '@/common/style/memberInfo/pages/sub-page-base.css';
gym-manage-uniapp/pages/memberInfo/userInfo.vue
+315 -231
View File
@@ -210,13 +210,13 @@
</view>
</template>
<script>
<script setup>
import { ref, computed, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import MemberInfoSubNav from '@/components/memberInfo/MemberInfoSubNav.vue'
import { fitnessGoalOptions } from '@/common/memberInfo/mockData.js'
import { loadMemberStore, saveUserProfile } from '@/common/memberInfo/store.js'
import { getUserInfo, updateUserInfo } from '@/api/main.js'
import { previewImage, persistChosenImage } from '@/common/memberInfo/media.js'
import { maskPhone, normalizePhoneForStore } from '@/common/memberInfo/format.js'
import { subPageMixin } from '@/common/memberInfo/mixins.js'
import {
validateName,
validatePhoneForRebind,
@@ -227,246 +227,330 @@ import {
validateUserProfile,
showValidationError
} from '@/common/memberInfo/validate.js'
import { backToMemberCenter } from '@/common/constants/routes.js'
const DEFAULT_AVATAR = 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/AvatarEditWrap.png'
export default {
components: { MemberInfoSubNav },
mixins: [subPageMixin],
data() {
return {
name: '',
phone: '',
gender: 'female',
birthday: '',
height: '',
weight: '',
fitnessGoals: [],
avatar: DEFAULT_AVATAR,
avatarKey: 0,
avatarDirty: false,
fitnessGoalOptions
}
},
computed: {
avatarSrc() {
return this.avatar || DEFAULT_AVATAR
},
displayPhone() {
return maskPhone(this.phone)
},
birthdayValue() {
const match = String(this.birthday).match(/(\d{4})年(\d{2})月(\d{2})日/)
if (match) {
return `${match[1]}-${match[2]}-${match[3]}`
}
return '1995-06-15'
}
},
onShow() {
// 从相册/相机返回会再次触发 onShow，不能覆盖刚选未保存的头像
this.loadProfile({ preserveLocalAvatar: true })
},
methods: {
loadProfile(options = {}) {
const store = loadMemberStore()
const profile = store.profile
this.name = profile.name
this.phone = profile.phone
this.gender = profile.gender
this.birthday = profile.birthday
this.height = profile.height
this.weight = profile.weight
this.fitnessGoals = [...(profile.fitnessGoals || [])]
const name = ref('')
const phone = ref('')
const gender = ref('female')
const birthday = ref('')
const height = ref('')
const weight = ref('')
const fitnessGoals = ref([])
const avatar = ref(DEFAULT_AVATAR)
const avatarKey = ref(0)
const avatarDirty = ref(false)
const fitnessGoalOptions = ref(['减脂1', '增肌', '塑形', '增重', '康复', '体能'])
const loading = ref(false)
const storedAvatar = profile.avatar || DEFAULT_AVATAR
const hasUnsavedLocalAvatar =
options.preserveLocalAvatar &&
this.avatarDirty &&
this.avatar &&
this.avatar !== storedAvatar
const avatarSrc = computed(() => {
return avatar.value || DEFAULT_AVATAR
})
if (!hasUnsavedLocalAvatar) {
this.setAvatar(storedAvatar)
this.avatarDirty = false
}
},
setAvatar(path) {
const next = path || DEFAULT_AVATAR
if (this.avatar !== next) {
this.avatar = next
this.avatarKey += 1
}
},
getProfilePayload() {
return {
name: this.name,
phone: normalizePhoneForStore(this.phone),
gender: this.gender,
birthday: this.birthday,
height: this.height,
weight: this.weight,
fitnessGoals: [...this.fitnessGoals],
avatar: this.avatar
}
},
handleSave() {
const result = validateUserProfile(
this.getProfilePayload(),
this.fitnessGoalOptions
)
if (!result.ok) {
showValidationError(result.message)
return
}
const displayPhone = computed(() => {
return maskPhone(phone.value)
})
const store = loadMemberStore()
saveUserProfile(store, result.value)
this.applyValidatedProfile(result.value)
this.avatarDirty = false
uni.showToast({ title: '保存成功', icon: 'success' })
setTimeout(() => this.goBack(), 600)
},
applyValidatedProfile(profile) {
this.name = profile.name
this.phone = profile.phone
this.gender = profile.gender
this.birthday = profile.birthday
this.height = profile.height
this.weight = profile.weight
this.fitnessGoals = [...profile.fitnessGoals]
},
changeAvatar() {
uni.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
const tempPath =
res.tempFilePaths?.[0] || res.tempFiles?.[0]?.tempFilePath
if (!tempPath) return
const birthdayValue = computed(() => {
const match = String(birthday.value).match(/(\d{4})年(\d{2})月(\d{2})日/)
if (match) {
return `${match[1]}-${match[2]}-${match[3]}`
}
return '1995-06-15'
})
// 真机先用 tempFilePath 立即展示，避免 saveFile 异步期间被 onShow 覆盖
this.setAvatar(tempPath)
this.avatarDirty = true
uni.showToast({ title: '头像已选择', icon: 'success' })
function goBack() {
backToMemberCenter()
}
persistChosenImage(tempPath).then((savedPath) => {
if (savedPath && savedPath !== this.avatar) {
this.setAvatar(savedPath)
}
})
}
})
},
previewAvatar() {
previewImage(this.avatarSrc, DEFAULT_AVATAR)
},
editName() {
uni.showModal({
title: '修改姓名',
editable: true,
placeholderText: '请输入姓名（2-8字）',
content: this.name,
success: (res) => {
if (!res.confirm) return
const result = validateName(res.content)
if (!result.ok) {
showValidationError(result.message)
return
}
this.name = result.value
}
})
},
rebindPhone() {
uni.showModal({
title: '换绑手机号',
editable: true,
placeholderText: '请输入11位手机号',
content: normalizePhoneForStore(this.phone) || this.phone,
success: (res) => {
if (!res.confirm) return
const result = validatePhoneForRebind(res.content)
if (!result.ok) {
showValidationError(result.message)
return
}
this.phone = result.value
uni.showToast({ title: '手机号已更新', icon: 'success' })
}
})
},
selectGender(gender) {
this.gender = gender
},
onBirthdayChange(e) {
const value = e.detail.value
const [y, m, d] = value.split('-')
const formatted = `${y}年${m}月${d}日`
const result = validateBirthday(formatted)
if (!result.ok) {
showValidationError(result.message)
return
}
this.birthday = result.value
},
editHeight() {
uni.showModal({
title: '修改身高',
editable: true,
placeholderText: '50-250，单位 cm',
content: String(this.height),
success: (res) => {
if (!res.confirm) return
const result = validateHeight(res.content)
if (!result.ok) {
showValidationError(result.message)
return
}
this.height = result.value
}
})
},
editWeight() {
uni.showModal({
title: '修改体重',
editable: true,
placeholderText: '20-300，单位 kg',
content: String(this.weight),
success: (res) => {
if (!res.confirm) return
const result = validateWeight(res.content)
if (!result.ok) {
showValidationError(result.message)
return
}
this.weight = result.value
}
})
},
toggleGoal(goal) {
const index = this.fitnessGoals.indexOf(goal)
if (index >= 0) {
this.fitnessGoals.splice(index, 1)
return
}
const preview = [...this.fitnessGoals, goal]
const result = validateFitnessGoals(preview, this.fitnessGoalOptions)
if (!result.ok) {
showValidationError(result.message)
return
}
this.fitnessGoals.push(goal)
},
isGoalSelected(goal) {
return this.fitnessGoals.includes(goal)
function mapApiToProfile(apiData) {
const genderMap = {
'MALE': 'male',
'FEMALE': 'female',
'UNKNOWN': 'female'
}
let birthdayVal = ''
if (apiData.birthday) {
const parts = apiData.birthday.split('-')
if (parts.length === 3) {
birthdayVal = `${parts[0]}年${parts[1]}月${parts[2]}日`
}
}
return {
name: apiData.nickname || '',
phone: apiData.phone || '',
gender: genderMap[apiData.gender] || 'female',
birthday: birthdayVal,
avatar: apiData.avatar || DEFAULT_AVATAR
}
}
function mapProfileToApi(profile) {
const genderMap = {
'male': 'MALE',
'female': 'FEMALE'
}
let birthdayVal = ''
if (profile.birthday) {
const match = String(profile.birthday).match(/(\d{4})年(\d{2})月(\d{2})日/)
if (match) {
birthdayVal = `${match[1]}-${match[2]}-${match[3]}`
}
}
return {
nickname: profile.name,
gender: genderMap[profile.gender] || 'UNKNOWN',
birthday: birthdayVal,
avatar: profile.avatar
}
}
async function fetchUserInfo() {
// 如果正在加载中，不重复请求
if (loading.value) {
console.log('[userInfo] 正在加载中，跳过重复请求')
return
}
loading.value = true
console.log('[userInfo] fetchUserInfo 开始执行')
console.log('[userInfo] 步骤1: 调用 getUserInfo API...')
try {
const res = await getUserInfo({ cache: false })
console.log('[userInfo] 步骤2: API返回，res =', res)
console.log('[userInfo] 步骤3: res类型 =', typeof res, 'res.data =', res?.data)
// 兼容两种数据格式：1.直接返回数据对象 2.返回 {code, data, message} 格式
const apiData = res.data || res
console.log('[userInfo] 步骤4: apiData =', apiData)
if (apiData && (apiData.nickname !== undefined || apiData.phone !== undefined)) {
console.log('[userInfo] 步骤5: 收到有效数据，更新页面')
const profile = mapApiToProfile(apiData)
console.log('[userInfo] 步骤6: 映射后数据 =', profile)
name.value = profile.name
phone.value = profile.phone
gender.value = profile.gender
birthday.value = profile.birthday
setAvatar(profile.avatar)
console.log('[userInfo] 步骤7: 页面数据已更新，name =', name.value)
} else {
console.log('[userInfo] 步骤5: 数据无效，跳过更新')
}
} catch (err) {
console.error('[userInfo] 获取用户信息失败:', err)
uni.showToast({ title: '获取信息失败: ' + (err.message || '网络错误'), icon: 'none' })
} finally {
loading.value = false
console.log('[userInfo] fetchUserInfo 执行完成')
}
}
function loadProfile(options = {}) {
// API模式下从data直接获取，不从store获取
}
function setAvatar(path) {
const next = path || DEFAULT_AVATAR
if (avatar.value !== next) {
avatar.value = next
avatarKey.value += 1
}
}
function getProfilePayload() {
return {
name: name.value,
phone: normalizePhoneForStore(phone.value),
gender: gender.value,
birthday: birthday.value,
height: height.value,
weight: weight.value,
fitnessGoals: [...fitnessGoals.value],
avatar: avatar.value
}
}
function handleSave() {
const result = validateUserProfile(
getProfilePayload(),
fitnessGoalOptions.value
)
if (!result.ok) {
showValidationError(result.message)
return
}
applyValidatedProfile(result.value)
avatarDirty.value = false
saveUserInfo(result.value)
}
async function saveUserInfo(profile) {
loading.value = true
try {
const apiData = mapProfileToApi(profile)
console.log('[userInfo] PUT /api/member/info 请求:', apiData)
const res = await updateUserInfo(apiData)
console.log('[userInfo] PUT /api/member/info 返回:', res)
uni.showToast({ title: '保存成功', icon: 'success' })
setTimeout(() => goBack(), 600)
} catch (err) {
console.error('保存用户信息失败', err)
uni.showToast({ title: '保存失败', icon: 'none' })
} finally {
loading.value = false
}
}
function applyValidatedProfile(profile) {
name.value = profile.name
phone.value = profile.phone
gender.value = profile.gender
birthday.value = profile.birthday
height.value = profile.height
weight.value = profile.weight
fitnessGoals.value = [...profile.fitnessGoals]
}
function changeAvatar() {
uni.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
const tempPath =
res.tempFilePaths?.[0] || res.tempFiles?.[0]?.tempFilePath
if (!tempPath) return
avatarDirty.value = true
setAvatar(tempPath)
persistChosenImage(tempPath)
}
})
}
function previewAvatar() {
previewImage(avatarSrc.value)
}
function editName() {
uni.showModal({
title: '修改姓名',
editable: true,
placeholderText: '请输入姓名',
content: String(name.value),
success: (res) => {
if (!res.confirm) return
const result = validateName(res.content)
if (!result.ok) {
showValidationError(result.message)
return
}
name.value = result.value
}
})
}
function rebindPhone() {
uni.showModal({
title: '换绑手机号',
editable: true,
placeholderText: '请输入新手机号',
content: '',
success: (res) => {
if (!res.confirm) return
const result = validatePhoneForRebind(res.content)
if (!result.ok) {
showValidationError(result.message)
return
}
phone.value = normalizePhoneForStore(result.value)
}
})
}
function selectGender(g) {
gender.value = g
}
function onBirthdayChange(e) {
const val = e.detail.value
if (!val) return
const parts = val.split('-')
if (parts.length === 3) {
birthday.value = `${parts[0]}年${parts[1]}月${parts[2]}日`
}
}
function editHeight() {
uni.showModal({
title: '修改身高',
editable: true,
placeholderText: '100-250，单位 cm',
content: String(height.value),
success: (res) => {
if (!res.confirm) return
const result = validateHeight(res.content)
if (!result.ok) {
showValidationError(result.message)
return
}
height.value = result.value
}
})
}
function editWeight() {
uni.showModal({
title: '修改体重',
editable: true,
placeholderText: '20-300，单位 kg',
content: String(weight.value),
success: (res) => {
if (!res.confirm) return
const result = validateWeight(res.content)
if (!result.ok) {
showValidationError(result.message)
return
}
weight.value = result.value
}
})
}
function toggleGoal(goal) {
const index = fitnessGoals.value.indexOf(goal)
if (index >= 0) {
fitnessGoals.value.splice(index, 1)
return
}
const preview = [...fitnessGoals.value, goal]
const result = validateFitnessGoals(preview, fitnessGoalOptions.value)
if (!result.ok) {
showValidationError(result.message)
return
}
fitnessGoals.value.push(goal)
}
function isGoalSelected(goal) {
return fitnessGoals.value.includes(goal)
}
onMounted(() => {
console.log('[userInfo] onMounted 被调用，开始获取用户信息')
fetchUserInfo()
})
onShow(() => {
console.log('[userInfo] onShow 被调用')
// 每次进入页面都尝试获取最新数据
fetchUserInfo()
})
</script>
<style>
<style lang="scss">
@import '@/common/style/base.css';
@import '@/common/style/memberInfo/pages/page-reset.css';
@import '@/common/style/memberInfo/pages/sub-page-base.css';
gym-manage-uniapp/pages/message/detail.vue
+391
View File
@@ -0,0 +1,391 @@
<template>
<view class="message-detail-page">
<!-- 顶部导航栏 -->
<view class="nav-header" :style="navStyle">
<view class="nav-left">
<view class="back-btn" @tap="goBack">
<text class="back-icon">‹</text>
</view>
<text class="nav-title">消息详情</text>
</view>
</view>
<!-- 内容区域 -->
<scroll-view
scroll-y
class="detail-content"
:style="contentStyle"
>
<!-- 消息卡片 -->
<view class="message-card">
<!-- 消息图标和类型 -->
<view class="message-header">
<view :class="['message-icon', message.type]">
<image :src="getMessageIcon(message.type)" mode="aspectFit" class="icon-img" />
</view>
<view class="header-info">
<view :class="['type-tag', message.type]">
<text>{{ getTypeLabel(message.type) }}</text>
</view>
<view v-if="!message.read" class="read-status">
<view class="status-dot"></view>
<text>未读</text>
</view>
<view v-else class="read-status read">
<view class="status-dot"></view>
<text>已读</text>
</view>
</view>
</view>
<!-- 消息标题 -->
<view class="message-title-wrap">
<text class="message-title">{{ message.title }}</text>
</view>
<!-- 消息内容 -->
<view class="message-body">
<text class="message-content">{{ message.content }}</text>
</view>
<!-- 消息时间 -->
<view class="message-footer">
<text class="message-time">{{ formatTime(message.timestamp) }}</text>
</view>
</view>
<!-- 底部占位 -->
<view class="bottom-placeholder"></view>
</scroll-view>
</view>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { markMessageAsRead } from '@/api/main.js'
const message = ref({
id: '',
title: '',
content: '',
type: 'system',
read: false,
timestamp: Date.now()
})
const statusBarHeight = ref(20)
const navBarHeight = ref(44)
const navStyle = computed(() => ({
paddingTop: `${statusBarHeight.value}px`,
height: `${statusBarHeight.value + navBarHeight.value}px`
}))
const contentStyle = computed(() => ({
paddingTop: `${statusBarHeight.value + navBarHeight.value + 58}px`,
height: `calc(100vh - ${statusBarHeight.value + navBarHeight.value}px)`
}))
onLoad((options) => {
if (options?.message) {
try {
message.value = JSON.parse(decodeURIComponent(options.message))
// 如果是未读状态，自动标记为已读
if (!message.value.read) {
autoMarkAsRead()
}
} catch (e) {
console.error('解析消息数据失败:', e)
}
}
})
onMounted(() => {
const sysInfo = uni.getSystemInfoSync()
statusBarHeight.value = sysInfo.statusBarHeight || 20
navBarHeight.value = 10
})
const getMessageIcon = (type) => {
const icons = {
course: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/course.png',
system: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/plan.png',
activity: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/data.png',
points: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/message.png'
}
return icons[type] || icons.system
}
const getTypeLabel = (type) => {
const labels = {
course: '课程通知',
system: '系统消息',
activity: '活动推送',
points: '积分动态'
}
return labels[type] || '通知'
}
const formatTime = (timestamp) => {
if (!timestamp) return ''
const num = typeof timestamp === 'number' ? timestamp : Number(timestamp)
const time = num.toString().length === 10 ? num * 1000 : num
const date = new Date(time)
const now = new Date()
const year = date.getFullYear()
const month = String(date.getMonth() + 1).padStart(2, '0')
const day = String(date.getDate()).padStart(2, '0')
const hours = String(date.getHours()).padStart(2, '0')
const minutes = String(date.getMinutes()).padStart(2, '0')
const today = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`
const msgDate = `${year}-${month}-${day}`
if (msgDate === today) {
return `今天 ${hours}:${minutes}`
}
return `${year}年${month}月${day}日 ${hours}:${minutes}`
}
const goBack = () => {
uni.navigateBack()
}
const autoMarkAsRead = async () => {
if (message.value.read) return
try {
await markMessageAsRead(message.value.id)
message.value.read = true
uni.$emit('messageRead', { id: message.value.id })
} catch (e) {
console.error('自动标记已读失败:', e)
}
}
</script>
<style lang="scss">
.message-detail-page {
min-height: 100vh;
background: #F5F7FA;
}
.nav-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(12px);
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 24rpx;
padding-right: 24rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
.nav-left {
display: flex;
align-items: center;
gap: 16rpx;
}
.back-btn {
width: 64rpx;
height: 64rpx;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.04);
border-radius: 50%;
transition: all 0.2s ease;
&:active {
transform: scale(0.9);
background: rgba(0, 0, 0, 0.08);
}
.back-icon {
font-size: 48rpx;
color: #333;
line-height: 1;
font-weight: 300;
}
}
.nav-title {
font-size: 32rpx;
font-weight: 600;
color: #333;
}
}
.detail-content {
padding-top: 8rpx;
}
.message-card {
margin: 0 24rpx;
padding: 32rpx;
background: white;
border-radius: 20rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
}
.message-header {
display: flex;
align-items: flex-start;
gap: 20rpx;
margin-bottom: 28rpx;
.message-icon {
width: 96rpx;
height: 96rpx;
border-radius: 24rpx;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.08);
&.course {
background: linear-gradient(135deg, #4A90D9 0%, #2E6BB5 100%);
}
&.system {
background: linear-gradient(135deg, #52C41A 0%, #389E0D 100%);
}
&.activity {
background: linear-gradient(135deg, #FF6B35 0%, #E85D2C 100%);
}
&.points {
background: linear-gradient(135deg, #667EEA 0%, #5A4BD1 100%);
}
.icon-img {
width: 48rpx;
height: 48rpx;
}
}
.header-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 12rpx;
.type-tag {
display: inline-flex;
align-items: center;
padding: 6rpx 16rpx;
border-radius: 20rpx;
font-size: 22rpx;
font-weight: 500;
&.course {
background: rgba(74, 144, 217, 0.1);
color: #4A90D9;
}
&.system {
background: rgba(82, 196, 26, 0.1);
color: #52C41A;
}
&.activity {
background: rgba(255, 107, 53, 0.1);
color: #FF6B35;
}
&.points {
background: rgba(102, 126, 234, 0.1);
color: #667EEA;
}
}
.read-status {
display: flex;
align-items: center;
gap: 8rpx;
.status-dot {
width: 12rpx;
height: 12rpx;
border-radius: 50%;
background: linear-gradient(135deg, #FF4757, #FF2D55);
animation: pulse 2s infinite;
}
text {
font-size: 22rpx;
color: #FF4757;
font-weight: 500;
}
&.read {
.status-dot {
background: #52C41A;
animation: none;
}
text {
color: #52C41A;
}
}
}
}
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.message-title-wrap {
margin-bottom: 24rpx;
padding-bottom: 24rpx;
border-bottom: 1rpx solid rgba(0, 0, 0, 0.06);
.message-title {
font-size: 34rpx;
font-weight: 600;
color: #1A1A1A;
line-height: 1.4;
}
}
.message-body {
margin-bottom: 24rpx;
.message-content {
font-size: 28rpx;
color: #666;
line-height: 1.8;
white-space: pre-wrap;
word-break: break-all;
}
}
.message-footer {
padding-top: 20rpx;
border-top: 1rpx solid rgba(0, 0, 0, 0.06);
.message-time {
font-size: 24rpx;
color: #999;
}
}
.bottom-placeholder {
height: 80rpx;
}
</style>
gym-manage-uniapp/pages/message/index.vue
+1594
View File
File diff suppressed because it is too large Load Diff
gym-manage-uniapp/pages/searchCourse/searchCourse.vue
+62 -232
View File
@@ -231,11 +231,7 @@
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { onPullDownRefresh } from '@dcloudio/uni-app'
// 测试模式
const TEST_MODE = true
import { getGroupCoursePage } from '@/api/main.js'
// 搜索关键词
const keyword = ref('')
@@ -395,6 +391,19 @@ const getCourseTypeName = (courseType) => {
return typeMap[courseType] || '其他'
}
/**
* 计算课程时长
*/
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}分钟`
}
/**
* 获取课程标签
*/
@@ -415,195 +424,6 @@ const getTagType = (course) => {
return 'default'
}
/**
* 生成单条课程数据
*/
const generateSingleCourse = (seed, filterParams) => {
// 使用确定性随机函数
const random = (n) => {
const x = Math.sin(seed + n) * 10000
return x - Math.floor(x)
}
const prefixes = [
'燃脂', '塑形', '增肌', '柔韧', '平衡', '协调', '爆发', '耐力', '核心', '康复',
'晨练', '午间', '晚训', '周末', '精品', '强化', '入门', '进阶', '突破', '蜕变',
'活力', '轻盈', '力量', '身心', '自由', '挑战', '超越', '燃烧', '唤醒', '放松',
'瑜伽', '普拉提', '舞蹈', '搏击', '骑行', '拉伸', '冥想'
]
const suffixes = [
'HIIT训练', '力量训练', '有氧操', '瑜伽课', '普拉提', '舞蹈课', '搏击操',
'动感单车', '杠铃课', '私教课', '团课', '课程', '训练营', '特训班', '体验课',
'拉伸课', '冥想课', '综合课', '专项课', '公开课'
]
const levels = ['初级', '中级', '高级']
const courseTypes = ['1', '2', '3', '4', '5']
const durations = [20, 25, 30, 35, 40, 45, 50, 55, 60, 70, 80, 90]
// 根据筛选条件调整数据生成
let levelValue = levels[Math.floor(random(1) * levels.length)]
let courseType = courseTypes[Math.floor(random(2) * courseTypes.length)]
let durationValue = durations[Math.floor(random(3) * durations.length)]
let prefix = prefixes[Math.floor(random(4) * prefixes.length)]
let suffix = suffixes[Math.floor(random(5) * suffixes.length)]
// 如果筛选了级别，强制匹配
if (filterParams.level) {
levelValue = filterParams.level
}
// 如果筛选了时长，强制匹配
if (filterParams.duration) {
switch (filterParams.duration) {
case 'short':
durationValue = Math.floor(random(6) * 11) + 20 // 20-30分钟
break
case 'medium':
durationValue = Math.floor(random(7) * 31) + 31 // 31-60分钟
break
case 'long':
durationValue = Math.floor(random(8) * 41) + 61 // 61-100分钟
break
}
}
// 如果筛选了快捷类型，调整课程名称和类型
if (filterParams.filter && filterParams.filter !== 'all') {
switch (filterParams.filter) {
case 'yoga':
prefix = '瑜伽'
suffix = '冥想课'
courseType = '1'
break
case 'strength':
prefix = '力量'
suffix = '训练课'
courseType = '3'
break
case 'cardio':
prefix = '有氧'
suffix = '燃脂课'
courseType = '2'
break
case 'dance':
prefix = '舞蹈'
suffix = '律动课'
courseType = '4'
break
case 'pilates':
prefix = '普拉提'
suffix = '核心课'
courseType = '5'
break
}
}
// 如果有关键词搜索，调整名称
let courseName = `${prefix}${suffix}`
if (filterParams.keyword && filterParams.keyword.trim()) {
if (courseName.includes(filterParams.keyword) || Math.random() > 0.5) {
courseName = `${filterParams.keyword}${courseName}`
}
}
const maxMembers = Math.floor(random(9) * 30) + 10
const currentMembers = Math.floor(random(10) * maxMembers)
const isNew = random(11) > 0.7
return {
id: Math.floor(seed),
courseName: courseName,
coverImage: `https://picsum.photos/id/${Math.floor(random(12) * 100) + 1}/400/300`,
duration: durationValue,
level: levelValue,
currentMembers: currentMembers,
maxMembers: maxMembers,
courseType: courseType,
status: '1',
isNew: isNew
}
}
/**
* 生成随机课程数据（保证每页都有数据）
*/
const generateMockDataForPage = (page, size, filterParams) => {
console.log(`[生成数据] 第 ${page} 页，每页 ${size} 条，筛选条件:`, filterParams)
const coursesData = []
const baseSeed = page * size * 10007 + Date.now()
// 生成指定数量的课程（确保每页都有数据）
for (let i = 0; i < size; i++) {
const seed = baseSeed + i * 12345
const course = generateSingleCourse(seed, filterParams)
coursesData.push(course)
}
// 应用关键词搜索（在已生成数据中过滤）
let filteredCourses = [...coursesData]
if (filterParams.keyword && filterParams.keyword.trim()) {
const kw = filterParams.keyword.trim().toLowerCase()
filteredCourses = filteredCourses.filter(c =>
(c.courseName || '').toLowerCase().includes(kw)
)
}
// 如果关键词过滤后没有数据，生成一些匹配关键词的数据
if (filteredCourses.length === 0 && filterParams.keyword && filterParams.keyword.trim()) {
console.log(`关键词 "${filterParams.keyword}" 无匹配数据，生成匹配数据`)
for (let i = 0; i < size; i++) {
filteredCourses.push({
id: Math.floor(Math.random() * 100000) + page * size + i,
courseName: `${filterParams.keyword}课程${i + 1}`,
coverImage: `https://picsum.photos/id/${(i % 50) + 1}/400/300`,
duration: filterParams.duration === 'short' ? 25 : (filterParams.duration === 'medium' ? 45 : 60),
level: filterParams.level || (i % 3 === 0 ? '初级' : (i % 3 === 1 ? '中级' : '高级')),
currentMembers: Math.floor(Math.random() * 30) + 1,
maxMembers: 30,
courseType: '1',
status: '1',
isNew: true
})
}
}
// 排序
filteredCourses.sort((a, b) => {
switch (filterParams.sort) {
case 'participants': return b.currentMembers - a.currentMembers
case 'startTime': return b.id - a.id
case 'duration': return a.duration - b.duration
default: return a.id - b.id
}
})
// 转换为显示格式
const formattedCourses = filteredCourses.map(c => ({
id: c.id,
image: c.coverImage,
tag: getTag(c),
tagType: getTagType(c),
courseType: getCourseTypeName(c.courseType),
name: c.courseName,
duration: `${c.duration}分钟`,
level: c.level,
participants: c.currentMembers,
rawData: c
}))
// 永远返回 true，实现真正的无限滚动
const hasMoreData = true
console.log(`[生成数据完成] 第 ${page} 页生成了 ${formattedCourses.length} 条数据, hasMore=${hasMoreData}`)
return {
content: formattedCourses,
hasMore: hasMoreData
}
}
// 获取课程列表
const fetchCourses = async (searchKeyword = '', filter = 'all', page = 0, size = 10, append = false) => {
// 防止重复请求
@@ -620,40 +440,39 @@ const fetchCourses = async (searchKeyword = '', filter = 'all', page = 0, size =
try {
let result
// 构建筛选参数对象
const filterParams = {
keyword: searchKeyword,
filter: filter,
level: selectedLevelValue.value,
duration: selectedDurationValue.value,
sort: selectedSortValue.value
// 构建请求参数
const params = {
page: page,
size: size,
sort: selectedSortValue.value || 'id',
order: 'desc',
keyword: searchKeyword
}
if (TEST_MODE) {
// 模拟网络延迟
const delay = 500 + Math.random() * 500
await new Promise(resolve => setTimeout(resolve, delay))
result = generateMockDataForPage(page, size, filterParams)
} else {
// TODO: 替换为真实API调用
await new Promise(resolve => setTimeout(resolve, 500))
result = generateMockDataForPage(page, size, filterParams)
}
// 调用真实API
result = await getGroupCoursePage(params)
// 检查是否为最后一页
const isLastPage = result.hasMore === false
if (result && result.content && result.content.length > 0) {
// 课程对象直接包含图片URL
const processedCourses = result.content.map(course => ({
// 筛选掉已结束和已满员的课程
const filteredCourses = result.content.filter(course => {
return course.status !== '2' && course.currentMembers < course.maxMembers
})
// 将后端返回的数据转换为前端需要的格式
const processedCourses = filteredCourses.map(course => ({
id: course.id,
image: course.image,
tag: course.tag,
tagType: course.tagType,
courseType: course.courseType,
name: course.name,
duration: course.duration,
level: course.level,
participants: course.participants,
rawData: course.rawData
image: course.coverImage || '',
tag: getTag(course),
tagType: getTagType(course),
courseType: getCourseTypeName(course.courseType),
name: course.courseName || '未知课程',
duration: calculateDuration(course.startTime, course.endTime),
level: course.level || '初级',
participants: course.currentMembers || 0,
rawData: course
}))
if (append) {
@@ -672,13 +491,28 @@ const fetchCourses = async (searchKeyword = '', filter = 'all', page = 0, size =
}
// 更新是否有更多数据
hasMore.value = result.hasMore !== false
hasMore.value = !isLastPage && processedCourses.length > 0
// 如果是最后一页且没有更多数据，显示提示
if (isLastPage) {
uni.showToast({
title: '已经到底了',
icon: 'none',
duration: 2000
})
}
} else {
// 没有数据时，确保不显示骨架屏
skeletonCount.value = 0
if (!append && courses.value.length === 0) {
// 没有数据时，确保显示空状态，但 hasMore 设为 false 防止无限加载
hasMore.value = false
hasMore.value = false
// 如果是最后一页，显示提示
if (isLastPage && courses.value.length > 0) {
uni.showToast({
title: '已经到底了',
icon: 'none',
duration: 2000
})
}
}
} catch (err) {
@@ -727,14 +561,10 @@ const loadMore = () => {
const nextPage = currentPage.value + 1
currentPage.value = nextPage
// 加载更多时添加骨架屏
skeletonCount.value += pageSize
fetchCourses(keyword.value, activeFilter.value, nextPage, pageSize, true)
.catch((err) => {
console.error('加载更多失败:', err)
loadingMore.value = false
skeletonCount.value = Math.max(0, skeletonCount.value - pageSize)
})
}
@@ -771,7 +601,7 @@ const toggleExpand = () => {
// 课程点击
const handleCourseClick = (course) => {
uni.navigateTo({
url: `/pages/course/detail?id=${course.id}`
url: `/pages/memberInfo/courseDetail?id=${course.id}`
})
}
gym-manage-uniapp/pages/webview/webview.vue
+41
View File
@@ -0,0 +1,41 @@
<template>
<view class="webview-container">
<web-view :src="url" @message="handleMessage"></web-view>
</view>
</template>
<script setup>
import { ref } from 'vue'
const url = ref('')
onLoad((options) => {
if (options.url) {
url.value = decodeURIComponent(options.url)
}
})
function handleMessage(e) {
console.log('[webview] 收到消息:', e.detail)
// 处理支付回调消息
const data = e.detail.data
if (data && data.payResult) {
if (data.payResult === 'success') {
// 支付成功
uni.showToast({ title: '支付成功', icon: 'success' })
setTimeout(() => {
uni.navigateBack()
}, 1500)
} else {
uni.showToast({ title: '支付失败', icon: 'none' })
}
}
}
</script>
<style scoped>
.webview-container {
width: 100%;
height: 100vh;
}
</style>