diff --git a/gym-manage-uniapp/App.vue b/gym-manage-uniapp/App.vue
index b72acaf..cc80391 100644
--- a/gym-manage-uniapp/App.vue
+++ b/gym-manage-uniapp/App.vue
@@ -4,80 +4,82 @@
   </view>
 </template>
 
-<script>
+<script setup>
+import { onLaunch, onShow, onHide } from '@dcloudio/uni-app'
 import GlobalLoading from '@/components/global/GlobalLoading.vue'
 
-export default {
-  components: {
-    GlobalLoading
-  },
-  onLaunch: function() {
-    console.log('App Launch')
-    this.preloadTabData()
-  },
-  onShow: function() {
-    console.log('App Show')
-    // #ifdef APP-PLUS
-    this.hideNativeTabBar()
-    // #endif
-  },
-  onHide: function() {
-    console.log('App Hide')
-  },
-  methods: {
-    // 隐藏原生 TabBar - 这里是核心修复
-    hideNativeTabBar() {
-      // 尝试多次执行，确保执行成功
-      const tryHide = (times = 0) => {
-        if (times > 10) return // 最多尝试10次
-        
-        uni.hideTabBar({
-          animation: false,
-          success: () => {
-            console.log('✅ 原生TabBar隐藏成功')
-            // 强制 CSS 覆盖（双重保险）
-            this.forceCSSHide()
-          },
-          fail: (err) => {
-            console.log(`❌ 第${times+1}次隐藏失败，1秒后重试`, err)
-            setTimeout(() => tryHide(times + 1), 1000)
-          }
-        })
-      }
-      
-      // 延迟 300ms 执行，确保页面挂载完成
-      setTimeout(() => tryHide(), 300)
-    },
+// 隐藏原生 TabBar - 这里是核心修复
+const hideNativeTabBar = () => {
+  // 尝试多次执行，确保执行成功
+  const tryHide = (times = 0) => {
+    if (times > 10) return // 最多尝试10次
     
-    // 强制 CSS 覆盖（最终保险）
-    forceCSSHide() {
-      // #ifdef APP-PLUS
-      const style = document.createElement('style')
-      style.innerHTML = `
-        uni-tabbar, 
-        uni-tabbar .uni-tabbar,
-        .uni-tabbar,
-        uni-tabbar > .uni-tabbar,
-        [class*="uni-tabbar"] {
-          display: none !important;
-          height: 0 !important;
-          opacity: 0 !important;
-          visibility: hidden !important;
-          pointer-events: none !important;
-        }
-      `
-      document.head.appendChild(style)
-      console.log('✅ CSS 强制覆盖已注入')
-      // #endif
-    },
-
-    // 预加载所有 Tab 页面的核心数据
-    preloadTabData() {
-      // 延迟执行，不阻塞首屏
-      setTimeout(() => {
-        // 预加载课程数据等...
-      }, 1000)
-    }
+    uni.hideTabBar({
+      animation: false,
+      success: () => {
+        console.log('✅ 原生TabBar隐藏成功')
+        // 强制 CSS 覆盖（双重保险）
+        forceCSSHide()
+      },
+      fail: (err) => {
+        console.log(`❌ 第${times+1}次隐藏失败，1秒后重试`, err)
+        setTimeout(() => tryHide(times + 1), 1000)
+      }
+    })
   }
+  
+  // 延迟 300ms 执行，确保页面挂载完成
+  setTimeout(() => tryHide(), 300)
 }
-</script>
\ No newline at end of file
+
+// 强制 CSS 覆盖（最终保险）
+const forceCSSHide = () => {
+  // #ifdef APP-PLUS
+  const style = document.createElement('style')
+  style.innerHTML = `
+    uni-tabbar, 
+    uni-tabbar .uni-tabbar,
+    .uni-tabbar,
+    uni-tabbar > .uni-tabbar,
+    [class*="uni-tabbar"] {
+      display: none !important;
+      height: 0 !important;
+      opacity: 0 !important;
+      visibility: hidden !important;
+      pointer-events: none !important;
+    }
+  `
+  document.head.appendChild(style)
+  console.log('✅ CSS 强制覆盖已注入')
+  // #endif
+}
+
+// 预加载所有 Tab 页面的核心数据
+const preloadTabData = () => {
+  // 延迟执行，不阻塞首屏
+  setTimeout(() => {
+    // 预加载课程数据等...
+  }, 1000)
+}
+
+onLaunch(() => {
+  console.log('App Launch')
+  preloadTabData()
+})
+
+onShow(() => {
+  console.log('App Show')
+  // #ifdef APP-PLUS
+  hideNativeTabBar()
+  // #endif
+})
+
+onHide(() => {
+  console.log('App Hide')
+})
+</script>
+
+<style lang="scss">
+/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
+@import "@/uni.scss";
+</style>
\ No newline at end of file
diff --git a/gym-manage-uniapp/api/main.js b/gym-manage-uniapp/api/main.js
index eb59c09..0a38907 100644
--- a/gym-manage-uniapp/api/main.js
+++ b/gym-manage-uniapp/api/main.js
@@ -4,6 +4,14 @@ export function login(params) {
   return request.post('/member/auth/miniapp/login', params)
 }
 
+export function sendCode(params) {
+  return request.post('/member/auth/send-code', params)
+}
+
+export function loginWithPhone(params) {
+  return request.post('/member/auth/phone-login', params)
+}
+
 export function logout() {
   return request.post('/member/auth/logout')
 }
@@ -16,14 +24,156 @@ export function checkIn(params) {
   return request.post('/checkIn/scan', params)
 }
 
+export function getCheckInRecords(params = {}, options = {}) {
+  const { page = 0, size = 5 } = params
+  return request.post('/checkIn/page', { page, size }, options)
+}
+
+export function getUnreadMessageCount(userId, options = {}) {
+  return request.get(`/messages/user/${userId}/unread`, {}, options)
+}
+
+// ========== 消息相关API ==========
+
+/**
+ * 获取用户消息列表（支持分页）
+ * @param {number} userId - 用户ID
+ * @param {object} params - 查询参数
+ * @param {number} params.page - 页码（从0开始）
+ * @param {number} params.size - 每页条数
+ * @param {object} options - 请求选项
+ * @returns {Promise} 消息列表
+ */
+export function getUserMessages(userId, params = {}, options = {}) {
+  const { page = 0, size = 10 } = params
+  return request.get(`/messages/user/${userId}/page`, { page, size }, options)
+}
+
+/**
+ * 获取未读消息列表（支持分页）
+ * @param {number} userId - 用户ID
+ * @param {object} params - 查询参数
+ * @param {number} params.page - 页码（从0开始）
+ * @param {number} params.size - 每页条数
+ * @param {object} options - 请求选项
+ * @returns {Promise} 未读消息列表
+ */
+export function getUnreadMessages(userId, params = {}, options = {}) {
+  const { page = 0, size = 10 } = params
+  return request.get(`/messages/user/${userId}/unread/page`, { page, size }, options)
+}
+
+/**
+ * 标记消息为已读
+ * @param {number|string} id - 消息ID
+ * @param {object} options - 请求选项
+ * @returns {Promise} 操作结果
+ */
+export function markMessageAsRead(id, options = {}) {
+  return request.put(`/messages/${id}/read`, {}, options)
+}
+
+/**
+ * 标记所有消息为已读
+ * @param {number} userId - 用户ID
+ * @param {object} options - 请求选项
+ * @returns {Promise} 操作结果
+ */
+export function markAllMessagesAsRead(userId, options = {}) {
+  return request.put(`/messages/user/${userId}/read`, {}, options)
+}
+
+/**
+ * 删除消息
+ * @param {number|string} id - 消息ID
+ * @param {object} options - 请求选项
+ * @returns {Promise} 操作结果
+ */
+export function deleteMessage(id, options = {}) {
+  return request.delete(`/messages/${id}`, {}, options)
+}
+
 export function getUserInfo(options = { cache: true, cacheTime: 30 * 60 * 1000 }) {
   return request.get('/member/info', {}, options)
 }
 
+/**
+ * 获取会员详细信息（包含会员卡、积分等）
+ */
+export function getMemberDetail(options = { cache: false }) {
+  return request.get('/member/info', {}, options)
+}
+
+/**
+ * 获取签到统计
+ * @param {object} params - 查询参数
+ * @param {string} params.startDate - 开始日期（yyyy-MM-dd）
+ * @param {string} params.endDate - 结束日期（yyyy-MM-dd）
+ */
+export function getCheckInStats(params = {}, options = { cache: false }) {
+  return request.get('/checkIn/statistics', params, options)
+}
+
 export function updateUserInfo(params) {
   return request.put('/member/info', params)
 }
 
+/**
+ * 购买会员卡
+ * @param {object} params - 购买参数
+ * @param {number} params.memberId - 会员ID
+ * @param {number} params.memberCardId - 会员卡类型ID
+ * @param {number} [params.sourceOrderId] - 来源订单ID
+ */
+export function purchaseMemberCard(params) {
+  return request.post('/member-card-records/purchase', params)
+}
+
+export function getMyMemberCards(memberId, options = { cache: false }) {
+  return request.get(`/member-card-records/my-cards/${memberId}`, {}, options)
+}
+
+// ========== 支付相关API ==========
+
+/**
+ * 创建支付订单
+ * @param {object} params - 支付参数
+ * @param {number} params.memberId - 会员ID
+ * @param {string} params.orderType - 订单类型 (MEMBER_CARD-会员卡, GROUP_COURSE-团课, GOODS-商品)
+ * @param {string} params.goodsDesc - 商品描述
+ * @param {string} params.transAmt - 交易金额（单位：分）
+ * @param {string} params.tradeType - 交易类型 (WECHAT-微信, ALIPAY-支付宝)
+ * @param {string} [params.remark] - 备注
+ * @param {string} [params.acctId] - 账户号
+ * @param {string} [params.timeExpire] - 过期时间 (yyyyMMddHHmmss)
+ * @param {string} [params.delayAcctFlag] - 延迟入账标识
+ * @param {number} [params.feeFlag] - 手续费标识
+ * @param {string} [params.limitPayType] - 禁用支付方式
+ * @param {string} [params.channelNo] - 渠道号
+ * @param {string} [params.payScene] - 支付场景
+ * @param {string} [params.notifyUrl] - 回调通知URL
+ */
+export function createPayment(params) {
+  return request.post('/payment/create', params)
+}
+
+/**
+ * 查询支付状态
+ * @param {string} orderId - 订单ID
+ */
+export function getPaymentStatus(orderId) {
+  return request.get(`/payment/${orderId}`, {})
+}
+
+/**
+ * 申请退款
+ * @param {string} orderId - 订单ID
+ * @param {string} refundAmt - 退款金额（单位：分）
+ */
+export function refundPayment(orderId, refundAmt) {
+  return request.post(`/payment/${orderId}/refund`, { refundAmt })
+}
+
 export function getRecommendCourses(options = { cache: true, cacheTime: 10 * 60 * 1000 }) {
   return request.get('/course/recommend', {}, options)
 }
@@ -37,14 +187,81 @@ export function getGroupCoursePage(params = {}, options = { cache: true, cacheTi
   return request.post('/groupCourse/page', { page, size, sort, order, keyword }, options)
 }
 
+// ========== 团课预约相关API ==========
+
+/**
+ * 预约团课
+ * @param {object} params - 预约参数
+ * @param {number} params.courseId - 团课ID
+ * @param {number} params.memberId - 会员ID
+ * @param {number} params.memberCardRecordId - 会员卡记录ID
+ */
+export function bookGroupCourse(params) {
+  return request.post('/groupCourse/book', params)
+}
+
+/**
+ * 取消预约
+ * @param {number} bookingId - 预约ID
+ */
+export function cancelBooking(bookingId) {
+  return request.delete(`/groupCourse/book/${bookingId}`, {})
+}
+
+/**
+ * 团课签到
+ * @param {number} memberId - 会员ID
+ * @param {number} courseId - 团课ID
+ */
+export function signinGroupCourse(memberId, courseId) {
+  return request.post(`/groupCourse/signin/${memberId}`, { courseId })
+}
+
+/**
+ * 查询会员预约记录
+ * @param {number} memberId - 会员ID
+ */
+export function getMemberBookings(memberId, options = { cache: false }) {
+  return request.get(`/groupCourse/bookings/member/${memberId}`, {}, options)
+}
+
+/**
+ * 查询课程预约记录
+ * @param {number} courseId - 团课ID
+ */
+export function getCourseBookings(courseId, options = { cache: false }) {
+  return request.get(`/groupCourse/bookings/course/${courseId}`, {}, options)
+}
+
 export default {
   login,
+  sendCode,
+  loginWithPhone,
   logout,
   getQRCode,
   checkIn,
+  getCheckInRecords,
+  getCheckInStats,
+  getUnreadMessageCount,
+  getUserMessages,
+  getUnreadMessages,
+  markMessageAsRead,
+  markAllMessagesAsRead,
+  deleteMessage,
   getUserInfo,
+  getMemberDetail,
   updateUserInfo,
+  purchaseMemberCard,
+  getMyMemberCards,
+  createPayment,
+  getPaymentStatus,
+  refundPayment,
   getRecommendCourses,
   getCourseDetail,
-  getGroupCoursePage
+  getGroupCoursePage,
+  bookGroupCourse,
+  cancelBooking,
+  signinGroupCourse,
+  getMemberBookings,
+  getCourseBookings
 }
diff --git a/gym-manage-uniapp/common/constants/routes.js b/gym-manage-uniapp/common/constants/routes.js
index 50300f5..dbb5494 100644
--- a/gym-manage-uniapp/common/constants/routes.js
+++ b/gym-manage-uniapp/common/constants/routes.js
@@ -32,7 +32,8 @@ export const PAGE = {
     POINTS: '/pages/memberInfo/points',
     REFERRAL: '/pages/memberInfo/referral',
     MY_COURSES: '/pages/memberInfo/myCourses',
-    CHECK_IN_HISTORY: '/pages/memberInfo/checkInHistory'
+    CHECK_IN_HISTORY: '/pages/memberInfo/checkInHistory',
+    PURCHASE_CARD: '/pages/memberInfo/purchaseCard'
 }
 
 /** 底部 TabBar 页面路径，顺序与 TabBar.vue 一致 */
diff --git a/gym-manage-uniapp/common/memberInfo/bodyTestStore.js b/gym-manage-uniapp/common/memberInfo/bodyTestStore.js
index 4347af5..86845ad 100644
--- a/gym-manage-uniapp/common/memberInfo/bodyTestStore.js
+++ b/gym-manage-uniapp/common/memberInfo/bodyTestStore.js
@@ -1,9 +1,3 @@
-import { bodyTestMock } from './mockData.js'
-
-function clone(value) {
-    return JSON.parse(JSON.stringify(value))
-}
-
 function formatRecordTime(date) {
     const y = date.getFullYear()
     const m = String(date.getMonth() + 1).padStart(2, '0')
@@ -28,9 +22,9 @@ function formatTime(date) {
 
 export function getDefaultBodyTestState() {
     return {
-        settings: { ...bodyTestMock.settings },
-        device: { ...bodyTestMock.device },
-        records: clone(bodyTestMock.records)
+        settings: {},
+        device: { connected: false, battery: 80 },
+        records: []
     }
 }
 
@@ -167,14 +161,26 @@ export function getBodyTestTrendData(store, metricKey, limit = 6) {
     }))
 }
 
+function getMetricDefs() {
+    return [
+        { key: 'weight', label: '体重' },
+        { key: 'bmi', label: 'BMI' },
+        { key: 'bodyFat', label: '体脂率' },
+        { key: 'muscleMass', label: '肌肉量' },
+        { key: 'visceralFat', label: '内脏脂肪' },
+        { key: 'bmr', label: '基础代谢' }
+    ]
+}
+
 export function getCompareData(store, idA, idB) {
     const a = getBodyTestRecordById(store, idA)
     const b = getBodyTestRecordById(store, idB)
     if (!a || !b) return null
+    const metricDefs = getMetricDefs()
     const keys = ['weight', 'bmi', 'bodyFat', 'muscleMass', 'visceralFat', 'bmr']
     const metrics = keys.map((key) => ({
         key,
-        label: bodyTestMock.metricDefs.find((m) => m.key === key)?.label || key,
+        label: metricDefs.find((m) => m.key === key)?.label || key,
         valueA: a.metrics[key],
         valueB: b.metrics[key],
         diff: Math.round((a.metrics[key] - b.metrics[key]) * 10) / 10
@@ -183,8 +189,7 @@ export function getCompareData(store, idA, idB) {
 }
 
 export function getRecommendedCourses(record) {
-    const ids = record?.recommendedCourseIds || []
-    return bodyTestMock.recommendedCourses.filter((c) => ids.includes(c.id))
+    return []
 }
 
 export function updateBodyTestSettings(store, patch) {
@@ -243,9 +248,9 @@ export function saveSimulatedBodyTestRecord(store, finalMetrics) {
         status,
         metrics,
         radar,
-        bodySegments: clone(bodyTestMock.records[0].bodySegments),
-        advice: clone(bodyTestMock.records[0].advice),
-        recommendedCourseIds: [1, 2]
+        bodySegments: [],
+        advice: [],
+        recommendedCourseIds: []
     }
 
     if (previous) {
@@ -279,5 +284,3 @@ export function interpolateMeasuringMetrics(progress, profile) {
         bodyWater: Math.round((51 + (target.bodyWater - 51) * ratio) * 10) / 10
     }
 }
-
-export { bodyTestMock }
diff --git a/gym-manage-uniapp/common/memberInfo/bookingStore.js b/gym-manage-uniapp/common/memberInfo/bookingStore.js
index 9b9b41e..7d07cbd 100644
--- a/gym-manage-uniapp/common/memberInfo/bookingStore.js
+++ b/gym-manage-uniapp/common/memberInfo/bookingStore.js
@@ -57,6 +57,14 @@ export function canCancelBooking(item) {
     return diff >= 2 * 3600000
 }
 
+export function canSigninCourse(item) {
+    if (!item?.courseDate || !item?.startTime) return false
+    if (item.status !== 'booked' && item.status !== 0) return false
+    const start = new Date(`${item.courseDate} ${item.startTime}`.replace(/-/g, '/'))
+    const diff = start - Date.now()
+    return diff <= 2 * 3600000 && diff >= -2 * 3600000
+}
+
 export function bookCourse(store, courseId) {
     const course = store.courseCatalog.find((c) => c.id === Number(courseId))
     if (!course) return { ok: false, message: '课程不存在' }
diff --git a/gym-manage-uniapp/common/memberInfo/index.js b/gym-manage-uniapp/common/memberInfo/index.js
index 580a06a..a3700d5 100644
--- a/gym-manage-uniapp/common/memberInfo/index.js
+++ b/gym-manage-uniapp/common/memberInfo/index.js
@@ -1,4 +1,3 @@
-export { memberCenterMock, userInfoMock, fitnessGoalOptions, bookingMock, memberCardMock, bodyTestMock, moduleMock, courseCatalogMock } from './mockData.js'
 export { statusBarTimeMixin, subPageMixin } from './mixins.js'
 export {
     loadMemberStore,
@@ -31,8 +30,7 @@ export {
     connectBodyTestDevice,
     disconnectBodyTestDevice,
     saveSimulatedBodyTestRecord,
-    interpolateMeasuringMetrics,
-    bodyTestMock
+    interpolateMeasuringMetrics
 } from './bodyTestStore.js'
 export {
     getTrainingReportData,
@@ -52,8 +50,7 @@ export {
     getMyCoursesByTab,
     getOnlineCourseById,
     updateOnlineProgress,
-    getCheckInHistory,
-    moduleMock
+    getCheckInHistory
 } from './moduleStore.js'
 export {
     filterCourses,
@@ -61,8 +58,7 @@ export {
     bookCourse,
     canCancelBooking,
     enrichCourseForDisplay,
-    getWeekDates,
-    courseCatalogMock
+    getWeekDates
 } from './bookingStore.js'
 export { previewImage, persistChosenImage, isLocalFilePath } from './media.js'
 export { maskPhone, formatMemberCenterPhone, normalizePhoneForStore } from './format.js'
diff --git a/gym-manage-uniapp/common/memberInfo/mockData.js b/gym-manage-uniapp/common/memberInfo/mockData.js
index e88bacc..16ea95c 100644
--- a/gym-manage-uniapp/common/memberInfo/mockData.js
+++ b/gym-manage-uniapp/common/memberInfo/mockData.js
@@ -1,6 +1,9 @@
 /** 个人中心模块 mock 数据（后续可替换为 API） */
 
-export const memberCenterMock = {
+// Mock 数据开关 - 设为 false 可关闭所有 mock 数据
+export const MOCK_ENABLED = false
+
+export const memberCenterMock = MOCK_ENABLED ? {
     userInfo: {
         name: '张小芳',
         phone: '13812345678  已绑定微信',
@@ -65,7 +68,7 @@ export const memberCenterMock = {
         registered: 3,
         purchased: 2
     }
-}
+} : null
 
 export const userInfoMock = {
     name: '张小芳',
diff --git a/gym-manage-uniapp/common/memberInfo/store.js b/gym-manage-uniapp/common/memberInfo/store.js
index 3d79750..68bb547 100644
--- a/gym-manage-uniapp/common/memberInfo/store.js
+++ b/gym-manage-uniapp/common/memberInfo/store.js
@@ -1,9 +1,3 @@
-import {
-    memberCenterMock,
-    userInfoMock,
-    memberCardMock,
-    bookingMock
-} from './mockData.js'
 import { formatMemberCenterPhone, normalizePhoneForStore } from './format.js'
 import {
     getDefaultBodyTestState,
@@ -24,10 +18,6 @@ import {
 
 const STORAGE_KEY = 'gym_member_info_v1'
 
-function clone(value) {
-    return JSON.parse(JSON.stringify(value))
-}
-
 export function buildCardTip(remainingDays) {
     return `距离下次到期还有${remainingDays}天，请及时续费`
 }
@@ -70,24 +60,26 @@ function finalizeStore(store) {
 
 function getDefaultStore() {
     return finalizeStore({
-        profile: { ...userInfoMock, avatar: memberCenterMock.userInfo.avatar },
-        memberProfile: { ...memberCenterMock.userInfo },
-        stats: { ...memberCenterMock.stats },
-        cardInfo: { ...memberCenterMock.cardInfo },
-        card: { ...memberCardMock.card },
-        records: clone(memberCardMock.records),
-        ongoingBookings: clone(bookingMock.ongoing),
-        historyBookings: clone(bookingMock.history),
-        checkIns: clone(memberCenterMock.checkIns),
-        bodyReport: { ...memberCenterMock.bodyReport },
+        profile: {},
+        memberProfile: {},
+        stats: {},
+        cardInfo: {},
+        card: {},
+        records: [],
+        ongoingBookings: [],
+        historyBookings: [],
+        checkIns: [],
+        bodyReport: {},
         bodyTest: getDefaultBodyTestState(),
         modules: getDefaultModuleState(),
         courseCatalog: getDefaultCourseCatalog(),
-        couponPoints: { ...memberCenterMock.couponPoints },
-        referral: { ...memberCenterMock.referral }
+        couponPoints: {},
+        referral: {}
     })
 }
 
+export { getDefaultStore }
+
 function mergeDefaults(saved) {
     const defaults = getDefaultStore()
     return finalizeStore({
@@ -204,7 +196,11 @@ export function getBookingPreview(store, limit = 2) {
 export function getCenterPageData(store) {
     return {
         userInfo: { ...store.memberProfile },
-        stats: { ...store.stats },
+        stats: {
+            checkInCount: store.stats?.checkInCount ?? 0,
+            trainingHours: store.stats?.trainingHours ?? 0,
+            pointsBalance: store.stats?.pointsBalance ?? 0
+        },
         cardInfo: { ...store.cardInfo },
         bookingPreview: getBookingPreview(store),
         checkIns: store.checkIns.map((item) => ({ ...item })),
@@ -234,6 +230,15 @@ export function cancelOngoingBooking(store, id) {
         const course = store.courseCatalog.find((c) => c.id === removed.courseId)
         if (course && course.enrolled > 0) course.enrolled -= 1
     }
+
+    // 同步从 myCourses.group.ongoing 中移除
+    if (store.modules?.myCourses?.group?.ongoing) {
+        const myCoursesIndex = store.modules.myCourses.group.ongoing.findIndex((c) => c.id === id)
+        if (myCoursesIndex >= 0) {
+            store.modules.myCourses.group.ongoing.splice(myCoursesIndex, 1)
+        }
+    }
+
     store.historyBookings.unshift({
         ...removed,
         status: 'cancelled',
diff --git a/gym-manage-uniapp/common/style/memberInfo/member-info-header.css b/gym-manage-uniapp/common/style/memberInfo/member-info-header.css
index 22b25ed..cb769f2 100644
--- a/gym-manage-uniapp/common/style/memberInfo/member-info-header.css
+++ b/gym-manage-uniapp/common/style/memberInfo/member-info-header.css
@@ -269,3 +269,63 @@
     flex-shrink: 0;
     background-color: rgba(255, 255, 255, 0.31);
 }
+
+.profile-header__user-inner--guest {
+    display: flex;
+    flex-direction: row;
+    gap: 16px;
+    align-items: center;
+    width: 100%;
+}
+
+.profile-header__avatar-wrap--guest {
+    width: 72px;
+    height: 72px;
+    flex-shrink: 0;
+    border-radius: 50%;
+    border: 2px solid rgba(255, 255, 255, 0.5);
+    overflow: hidden;
+    background-color: rgba(255, 255, 255, 0.9);
+}
+
+.profile-header__avatar--guest {
+    width: 100%;
+    height: 100%;
+    display: block;
+}
+
+.profile-header__user-meta--guest {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.profile-header__name--guest {
+    font-size: 18px;
+    font-weight: 600;
+    color: black;
+    white-space: nowrap;
+}
+
+.profile-header__phone--guest {
+    font-size: 14px;
+    font-weight: 400;
+    color: #999999;
+    white-space: nowrap;
+}
+
+.profile-header__user-inner--guest {
+    display: flex;
+    flex-direction: row;
+    gap: 16px;
+    align-items: center;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    background: none;
+    border: none;
+    outline: none;
+    box-shadow: none;
+    line-height: inherit;
+}
diff --git a/gym-manage-uniapp/common/style/memberInfo/pages/booking-page.css b/gym-manage-uniapp/common/style/memberInfo/pages/booking-page.css
index 774d479..4b4c409 100644
--- a/gym-manage-uniapp/common/style/memberInfo/pages/booking-page.css
+++ b/gym-manage-uniapp/common/style/memberInfo/pages/booking-page.css
@@ -239,6 +239,29 @@
     text-overflow: ellipsis;
 }
 
+.bk-card__actions {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
+}
+
+.bk-card__signin {
+    flex-shrink: 0;
+    padding: 6px 14px;
+    border-radius: 8px;
+    background-color: var(--accent-orange, #FF6B35);
+    box-sizing: border-box;
+}
+
+.bk-card__signin-text {
+    font-size: var(--font-size-base, 14px);
+    font-family: var(--font-family);
+    font-weight: 500;
+    color: var(--text-inverse, #ffffff);
+    white-space: nowrap;
+}
+
 .bk-card__cancel {
     flex-shrink: 0;
     padding: 6px 14px;
diff --git a/gym-manage-uniapp/components/Skeleton/MessageSkeleton.vue b/gym-manage-uniapp/components/Skeleton/MessageSkeleton.vue
new file mode 100644
index 0000000..e36852a
--- /dev/null
+++ b/gym-manage-uniapp/components/Skeleton/MessageSkeleton.vue
@@ -0,0 +1,89 @@
+<template>
+  <view class="message-skeleton">
+    <view v-for="i in 6" :key="i" class="skeleton-item">
+      <view class="skeleton-icon skeleton-shimmer"></view>
+      <view class="skeleton-content">
+        <view class="skeleton-title skeleton-shimmer"></view>
+        <view class="skeleton-desc skeleton-shimmer"></view>
+        <view class="skeleton-footer">
+          <view class="skeleton-tag skeleton-shimmer"></view>
+          <view class="skeleton-time skeleton-shimmer"></view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+</script>
+
+<style lang="scss" scoped>
+.message-skeleton {
+  padding: 8rpx 24rpx;
+}
+
+.skeleton-item {
+  display: flex;
+  align-items: center;
+  padding: 24rpx 0;
+  margin-bottom: 12rpx;
+  background: var(--bg-white);
+  border-radius: 16rpx;
+}
+
+.skeleton-icon {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 20rpx;
+  margin-right: 20rpx;
+  flex-shrink: 0;
+}
+
+.skeleton-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.skeleton-title {
+  height: 32rpx;
+  width: 60%;
+  border-radius: 8rpx;
+  margin-bottom: 12rpx;
+}
+
+.skeleton-desc {
+  height: 28rpx;
+  width: 85%;
+  border-radius: 8rpx;
+  margin-bottom: 16rpx;
+}
+
+.skeleton-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.skeleton-tag {
+  height: 24rpx;
+  width: 80rpx;
+  border-radius: 8rpx;
+}
+
+.skeleton-time {
+  height: 24rpx;
+  width: 100rpx;
+  border-radius: 8rpx;
+}
+
+:deep(.skeleton-shimmer) {
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+}
+
+@keyframes shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+</style>
diff --git a/gym-manage-uniapp/components/index/PageHeader.vue b/gym-manage-uniapp/components/index/PageHeader.vue
index 8fe980f..a85f91c 100644
--- a/gym-manage-uniapp/components/index/PageHeader.vue
+++ b/gym-manage-uniapp/components/index/PageHeader.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="tab-page__header">
+  <view class="tab-page__header" :style="{ padding: `${statusBarHeight}rpx`, height: `${statusBarHeight + 80}rpx` }">
     <view v-if="showBack" :class="['tab-page__back-btn', { 'tab-page__back-btn--animate': isAnimating }]" @tap="goBack">
       <text class="tab-page__back-icon">‹</text>
     </view>
@@ -29,8 +29,11 @@ const props = defineProps({
 })
 
 const isAnimating = ref(false)
+const statusBarHeight = ref(20)
 
 onMounted(() => {
+  const sysInfo = uni.getSystemInfoSync()
+  statusBarHeight.value = sysInfo.statusBarHeight || 20
   if (props.showBack) {
     isAnimating.value = true
   }
@@ -49,7 +52,7 @@ function goBack() {
 
 <style lang="scss" scoped>
 .tab-page__header {
-  padding: 48rpx 32rpx 16rpx;
+  padding: 0 32rpx;
   display: flex;
   align-items: center;
   position: relative;
@@ -89,7 +92,7 @@ function goBack() {
   font-size: 36rpx;
   color: $text-dark;
   font-weight: bold;
-  line-height: 1;
+  line-height: 28rpx;
 }
 
 .tab-page__title-wrap {
diff --git a/gym-manage-uniapp/components/index/QuickEntry.vue b/gym-manage-uniapp/components/index/QuickEntry.vue
index 6c09d1c..09720f7 100644
--- a/gym-manage-uniapp/components/index/QuickEntry.vue
+++ b/gym-manage-uniapp/components/index/QuickEntry.vue
@@ -4,24 +4,243 @@
       v-for="(item, index) in entries"
       :key="index"
       class="entry-item"
-	  @tap="QEClick(item.path)"
+	  @tap="handleEntryClick(item)"
     >
       <view :class="['entry-icon', { accent: item.accent }]">
         <image :src="item.icon" mode="aspectFit" class="icon-img" />
+        <view v-if="item.title === '消息' && hasUnread" class="badge-dot"></view>
       </view>
       <text class="entry-title">{{ item.title }}</text>
       <text class="entry-desc">{{ item.desc }}</text>
     </view>
+
+    <view v-if="showCheckInMenu" class="checkin-menu-overlay" @tap="showCheckInMenu = false">
+      <view class="checkin-menu" @tap.stop>
+        <view class="menu-item" @tap="handleStoreCheckIn">
+          <image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/checkIn.png" mode="aspectFit" class="menu-icon" />
+          <text class="menu-text">到店签到</text>
+        </view>
+        <view class="menu-item" @tap="handleGroupCourseCheckIn">
+          <image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/course.png" mode="aspectFit" class="menu-icon" />
+          <text class="menu-text">团课签到</text>
+        </view>
+      </view>
+    </view>
   </view>
 </template>
 
 <script setup>
+import { ref, computed, onMounted } from 'vue'
+import { getUnreadMessageCount } from '@/api/main.js'
 
-const QEClick = path => {
-	uni.navigateTo({
-		url:path
-	})
+const unreadCount = ref(0)
+const showCheckInMenu = ref(false)
+const TEST_MODE = false
+
+// 是否有未读消息（用于显示红点）
+const hasUnread = computed(() => unreadCount.value > 0)
+
+const loadUnreadCount = async () => {
+  if (TEST_MODE) {
+    unreadCount.value = 3
+    return
+  }
+
+  const token = uni.getStorageSync('token')
+  if (!token) {
+    console.log('[QuickEntry] token 不存在，跳过请求')
+    unreadCount.value = 0
+    return
+  }
+
+  try {
+    const userId = uni.getStorageSync('userId') || 1
+    console.log('[QuickEntry] 请求未读消息数量, userId:', userId)
+    const res = await getUnreadMessageCount(userId)
+    console.log('[QuickEntry] 未读消息数量响应数据:', res)
+    console.log('[QuickEntry] 响应完整类型:', typeof res, Object.prototype.toString.call(res))
+    
+    let count = 0
+    // 兼容多种响应格式
+    if (typeof res === 'number') {
+      count = res
+      console.log('[QuickEntry] 使用直接数字格式')
+    } else if (typeof res === 'string' && res.trim() !== '') {
+      // 处理字符串数字，如 "20"
+      count = parseInt(res, 10)
+      console.log('[QuickEntry] 使用字符串转数字格式:', count)
+    } else if (res !== null && typeof res === 'object') {
+      if (typeof res.count === 'number') {
+        count = res.count
+        console.log('[QuickEntry] 使用 res.count')
+      } else if (res.data !== undefined) {
+        if (typeof res.data === 'number') {
+          count = res.data
+          console.log('[QuickEntry] 使用 res.data')
+        } else if (typeof res.data?.count === 'number') {
+          count = res.data.count
+          console.log('[QuickEntry] 使用 res.data.count')
+        } else if (Array.isArray(res.data?.content)) {
+          count = res.data.content.length
+          console.log('[QuickEntry] 使用 res.data.content.length')
+        } else if (Array.isArray(res.content)) {
+          count = res.content.length
+          console.log('[QuickEntry] 使用 res.content.length')
+        } else if (typeof res.data?.total === 'number') {
+          count = res.data.total
+          console.log('[QuickEntry] 使用 res.data.total')
+        } else if (typeof res.total === 'number') {
+          count = res.total
+          console.log('[QuickEntry] 使用 res.total')
+        }
+      } else if (Array.isArray(res.content)) {
+        count = res.content.length
+        console.log('[QuickEntry] 使用 res.content.length')
+      } else if (typeof res.total === 'number') {
+        count = res.total
+        console.log('[QuickEntry] 使用 res.total')
+      }
+    } else {
+      console.log('[QuickEntry] 无法解析响应格式，res:', res)
+    }
+    
+    unreadCount.value = count
+    uni.setStorageSync('unreadMessageCount', count)
+    console.log('[QuickEntry] 最终未读数量:', count, 'hasUnread:', hasUnread.value)
+  } catch (e) {
+    console.error('[QuickEntry] 获取未读消息数失败:', e)
+    try {
+      const count = uni.getStorageSync('unreadMessageCount')
+      unreadCount.value = count || 0
+    } catch (e2) {
+      unreadCount.value = 0
+    }
+  }
 }
+
+const handleEntryClick = (item) => {
+  if (item.title === '消息' || item.title === '健身数据') {
+    if (TEST_MODE) {
+      uni.showLoading({
+        title: '加载中...',
+        mask: true
+      })
+      setTimeout(() => {
+        uni.hideLoading()
+        if (item.isTabBar) {
+          uni.switchTab({ url: item.path })
+        } else {
+          uni.navigateTo({ url: item.path })
+        }
+      }, 300)
+      return
+    }
+
+    const token = uni.getStorageSync('token')
+    if (!token) {
+      uni.showModal({
+        title: '请登录',
+        content: '是否跳转到登录页面？',
+        confirmText: '确定',
+        cancelText: '取消',
+        confirmColor: '#FF6B35',
+        success: (res) => {
+          if (res.confirm) {
+            uni.navigateTo({
+              url: '/pages/login/login'
+            })
+          }
+        }
+      })
+      return
+    }
+    
+    uni.showLoading({
+      title: '加载中...',
+      mask: true
+    })
+    setTimeout(() => {
+      uni.hideLoading()
+      if (item.title === '消息') {
+        uni.navigateTo({
+          url: `${item.path}?unreadCount=${unreadCount.value}`
+        })
+      } else if (item.isTabBar) {
+        uni.switchTab({ url: item.path })
+      } else {
+        uni.navigateTo({ url: item.path })
+      }
+    }, 300)
+  } else if (item.title === '签到') {
+    const token = uni.getStorageSync('token')
+    if (!token) {
+      uni.showModal({
+        title: '请登录',
+        content: '是否跳转到登录页面？',
+        confirmText: '确定',
+        cancelText: '取消',
+        confirmColor: '#FF6B35',
+        success: (res) => {
+          if (res.confirm) {
+            uni.navigateTo({
+              url: '/pages/login/login'
+            })
+          }
+        }
+      })
+      return
+    }
+    showCheckInMenu.value = !showCheckInMenu.value
+  } else if (item.path) {
+    // tabbar 页面使用 switchTab
+    if (item.isTabBar) {
+      uni.switchTab({
+        url: item.path
+      })
+    } else {
+      uni.navigateTo({
+        url: item.path
+      })
+    }
+  }
+}
+
+const handleStoreCheckIn = () => {
+  showCheckInMenu.value = false
+  uni.navigateTo({
+    url: '/pages/checkIn/checkIn'
+  })
+}
+
+const handleGroupCourseCheckIn = () => {
+  showCheckInMenu.value = false
+  uni.scanCode({
+    onlyFromCamera: true,
+    success: (res) => {
+      console.log('扫码结果:', res)
+      uni.showToast({
+        title: '扫码成功',
+        icon: 'success'
+      })
+    },
+    fail: (err) => {
+      console.error('扫码失败:', err)
+      uni.showToast({
+        title: '扫码失败',
+        icon: 'none'
+      })
+    }
+  })
+}
+
+onMounted(() => {
+  loadUnreadCount()
+})
+
+uni.$on('pageShow', () => {
+  loadUnreadCount()
+})
+
 const entries = [
 		{ 
 		  icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/course.png',
@@ -34,19 +253,23 @@ const entries = [
 		  icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/plan.png',
 		  title: '训练计划',
 		  desc: '个性定制',
-		  accent: true
+		  accent: true,
+		  path: "/pages/train/index",
+		  isTabBar: true
 	  },
 	  {
 		  icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/data.png',
 		  title: '健身数据',
 		  desc: '记录分析',
-		  accent: false
+		  accent: false,
+		  path: "/pages/memberInfo/bodyTestTrend"
 	  },
 	  {
 		  icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/message.png',
 		  title: '消息',
 		  desc: '通知消息',
-		  accent: true
+		  accent: true,
+		  path: "/pages/message/index"
 	  },
 	  {
 		  icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/checkIn.png',
@@ -91,6 +314,20 @@ const entries = [
   justify-content: center;
   margin-bottom: 16rpx;
   box-shadow: 0 6rpx 20rpx rgba(130, 220, 130, 0.35);
+  position: relative;
+}
+
+.badge-dot {
+  position: absolute;
+  top: 8rpx;
+  right: 8rpx;
+  width: 16rpx;
+  height: 16rpx;
+  background: linear-gradient(135deg, #FF4757, #FF2D55);
+  border-radius: 50%;
+  box-shadow: 0 2rpx 8rpx rgba(255, 71, 87, 0.5);
+  z-index: 99;
+  animation: pulse 2s infinite;
 }
 
 .icon-img {
@@ -113,4 +350,93 @@ const entries = [
   font-size: 22rpx;
   color: var(--tabbar-text-inactive);
 }
+
+.checkin-menu-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+  padding-top: 280rpx;
+  padding-right: 60rpx;
+  animation: fadeIn 0.2s ease;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.checkin-menu {
+  position: absolute;
+  right: 0;
+  top: 140rpx;
+  background: white;
+  border-radius: 24rpx;
+  box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.15);
+  padding: 16rpx;
+  min-width: 320rpx;
+  animation: slideDown 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  
+  &::before {
+    content: '';
+    position: absolute;
+    top: -24rpx;
+    right: 60rpx;
+    width: 0;
+    height: 0;
+    border-left: 24rpx solid transparent;
+    border-right: 24rpx solid transparent;
+    border-bottom: 24rpx solid white;
+  }
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-40rpx) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  padding: 24rpx 32rpx;
+  border-radius: 16rpx;
+  transition: all 0.2s ease;
+  
+  &:active {
+    background: rgba(0, 0, 0, 0.04);
+    transform: scale(0.98);
+  }
+  
+  & + .menu-item {
+    margin-top: 8rpx;
+  }
+}
+
+.menu-icon {
+  width: 48rpx;
+  height: 48rpx;
+  margin-right: 20rpx;
+}
+
+.menu-text {
+  font-size: 30rpx;
+  font-weight: 600;
+  color: #2D4A5A;
+}
 </style>
\ No newline at end of file
diff --git a/gym-manage-uniapp/components/index/RecommendCourses.vue b/gym-manage-uniapp/components/index/RecommendCourses.vue
index a882965..d0553c4 100644
--- a/gym-manage-uniapp/components/index/RecommendCourses.vue
+++ b/gym-manage-uniapp/components/index/RecommendCourses.vue
@@ -6,7 +6,7 @@
       <!-- 区域标题 -->
       <text class="section-title">推荐课程</text>
       <!-- 查看更多按钮 -->
-      <view class="view-more" @tap="goMore">
+      <view class="view-more" @click="handleViewMore">
         <text>查看更多</text>
         <text class="arrow">
 			<uni-icons type="right" size="20" color="#8CA0B0"/>
@@ -19,28 +19,68 @@
       <!-- 课程列表 -->
       <view class="courses-list">
         <!-- 课程卡片 -->
-        <CourseCard
-          v-for="(course, index) in displayCourses"
+        <view
+          v-for="(course, index) in courses"
           :key="course.id || index"
-          :course="course"
-          @join="handleJoinCourse"
-        />
+          class="course-card"
+        >
+          <!-- 课程图片区域 -->
+          <view class="course-image">
+            <!-- 课程封面图片 -->
+            <image :src="course.image" mode="aspectFill" class="img" />
+            <!-- 图片渐变遮罩 -->
+            <view class="course-overlay"></view>
+            <!-- 差几人提示（右上角） -->
+            <text v-if="course.remainingSlots > 0" class="remaining-slots">差{{ course.remainingSlots }}人</text>
+            <!-- 课程信息区域 -->
+            <view class="course-info">
+              <!-- 课程名称 -->
+              <text class="course-name">{{ course.name }}</text>
+              <!-- 课程元信息（时长、难度） -->
+              <view class="course-meta">
+                <view class="meta-left">
+                  <!-- 时长信息 -->
+                  <view class="meta-item time-tag">
+                    <image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/time.png" class="meta-icon" />
+                    <text>{{ course.duration }}</text>
+                  </view>
+                  <!-- 难度信息 -->
+                  <view class="meta-item level-tag">
+                    <image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/intensity.png" class="meta-icon" />
+                    <text>{{ course.level }}</text>
+                  </view>
+                </view>
+                <!-- 课程标签 -->
+                <view class="meta-item course-type-tag">
+                  <text :class="['tag', course.tagType]">{{ course.tag }}</text>
+                </view>
+              </view>
+            </view>
+          </view>
+          <!-- 课程底部区域 -->
+          <view class="course-footer">
+            <!-- 参与人数信息 -->
+            <view class="participants">
+              <image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/hot.png" class="fire-icon" />
+              <text>{{ course.participants }}人参与</text>
+            </view>
+            <!-- 去参与按钮 -->
+            <view class="join-btn" @click="handleJoinCourse(course)">
+              <text>去参与</text>
+            </view>
+          </view>
+        </view>
       </view>
     </scroll-view>
   </view>
 </template>
 
 <script setup>
-import { computed } from 'vue'
-import CourseCard from './CourseCard.vue'
+import { ref, onMounted } from 'vue'
+import { getGroupCoursePage } from '@/api/main.js'
 
-// 接收父组件传递的数据
-const props = defineProps({
-  data: {
-    type: Object,
-    default: () => ({ list: [] })
-  }
-})
+// 推荐课程数据列表
+const courses = ref([])
 
 // 课程类型映射（用于显示标签）
 const getCourseTypeName = (type) => {
@@ -54,16 +94,12 @@ const getCourseTypeName = (type) => {
 
 // 根据课程信息获取标签文本
 const getTag = (course) => {
-  if (course.currentMembers >= course.maxMembers) return '已满员'
-  if (course.status === '2') return '已结束'
   if (course.currentMembers / course.maxMembers >= 0.8) return '热门'
   return getCourseTypeName(course.courseType)
 }
 
 // 根据课程信息获取标签样式类型
 const getTagType = (course) => {
-  if (course.currentMembers >= course.maxMembers) return 'full'
-  if (course.status === '2') return 'ended'
   if (course.currentMembers / course.maxMembers >= 0.8) return 'hot'
   return 'default'
 }
@@ -73,7 +109,9 @@ const calculateDuration = (startTime, endTime) => {
   if (!startTime || !endTime) return '60分钟'
   const start = new Date(startTime)
   const end = new Date(endTime)
-  const durationMinutes = Math.floor((end - start) / (1000 * 60))
+  const diffMs = end - start
+  if (diffMs <= 0) return ''
+  const durationMinutes = Math.floor(diffMs / (1000 * 60))
   return `${durationMinutes}分钟`
 }
 
@@ -92,31 +130,51 @@ const getImageUrl = (coverImage) => {
   return `https://your-domain.com${coverImage}`
 }
 
-// 将原始课程数据转换为卡片需要的格式
-const displayCourses = computed(() => {
-  const list = props.data?.list || []
-  return list.map(course => ({
-    id: course.id,
-    image: getImageUrl(course.coverImage),
-    tag: getTag(course),
-    tagType: getTagType(course),
-    name: course.courseName || '未知课程',
-    duration: calculateDuration(course.startTime, course.endTime),
-    level: getCourseLevel(course),
-    participants: course.currentMembers || 0,
-    rawData: course
-  }))
-})
+// 获取推荐课程
+const fetchRecommendCourses = async () => {
+  try {
+    const res = await getGroupCoursePage({
+      page: 0, size: 10, sort: 'current_members', order: 'desc'
+    }, { cache: true, cacheTime: 5 * 60 * 1000 })
+    if (res && res.content && Array.isArray(res.content)) {
+      // 筛选掉已结束和已满员的课程
+      const filteredCourses = res.content.filter(course => {
+        return course.status !== '2' && course.currentMembers < course.maxMembers
+      })
+      
+      // 只取前5个符合条件的课程
+      courses.value = filteredCourses.slice(0, 5).map(course => {
+        const remainingSlots = course.maxMembers - course.currentMembers
+        return {
+          id: course.id,
+          image: getImageUrl(course.coverImage),
+          tag: getTag(course),
+          tagType: getTagType(course),
+          name: course.courseName || '未知课程',
+          duration: calculateDuration(course.startTime, course.endTime),
+          level: getCourseLevel(course),
+          participants: course.currentMembers || 0,
+          remainingSlots: remainingSlots,
+          rawData: course
+        }
+      })
+    }
+  } catch (err) {
+    console.error('获取推荐课程失败:', err)
+  }
+}
 
 const handleJoinCourse = (course) => {
   if (course.rawData.status === '2') { uni.showToast({ title: '课程已结束', icon: 'none' }); return }
   if (course.rawData.currentMembers >= course.rawData.maxMembers) { uni.showToast({ title: '课程已满员', icon: 'none' }); return }
-  uni.navigateTo({ url: `/pages/course/detail?id=${course.id}` })
+  uni.navigateTo({ url: `/pages/groupCourse/detail?id=${course.id}` })
 }
 
-function goMore(){
-	uni.navigateTo({ url: '/pages/recommendCourses/index' })
+const handleViewMore = () => {
+  uni.navigateTo({ url: '/pages/recommendCourses/index' })
 }
+
+onMounted(() => { fetchRecommendCourses() })
 </script>
 
 <style lang="scss">
@@ -158,6 +216,190 @@ function goMore(){
 
 .courses-list {
   display: inline-flex;
-  gap: 48rpx;
+  gap: 24rpx;
+  padding-right: 24rpx;
+}
+
+.course-card {
+  width: 338rpx;
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 24rpx;
+  overflow: hidden;
+  box-shadow: 0 8rpx 28rpx var(--shadow-blue-light);
+  border: 1rpx solid rgba(255, 255, 255, 0.6);
+  display: inline-block;
+  vertical-align: top;
+}
+
+.course-image {
+  height: 260rpx;
+  position: relative;
+}
+
+.img {
+  width: 100%;
+  height: 100%;
+}
+
+.course-overlay {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: linear-gradient(to top, rgba(45, 74, 90, 0.7) 0%, transparent 60%);
+}
+
+.remaining-slots {
+  position: absolute;
+  top: 16rpx;
+  right: 16rpx;
+  padding: 6rpx 12rpx;
+  border-radius: 10rpx;
+  font-size: 20rpx;
+  font-weight: 600;
+  color: #ffffff;
+  background: linear-gradient(135deg, #FF6B35, #FF8F66);
+  z-index: 3;
+}
+
+.course-tag {
+  position: absolute;
+  top: 16rpx;
+  right: 16rpx;
+  padding: 6rpx 12rpx;
+  border-radius: 10rpx;
+  font-size: 20rpx;
+  font-weight: 600;
+  color: #ffffff;
+  background: linear-gradient(135deg, #7AB5CC, #9CCFDF);
+  z-index: 2;
+  &.hot {
+    background: linear-gradient(135deg, #6BA8C0, #8CC5D5);
+  }
+  &.new {
+    background: linear-gradient(135deg, #6DB5C8, #90CEDD);
+  }
+  &.free {
+    background: linear-gradient(135deg, #7AB5CC, #9CCFDF);
+  }
+  &.full {
+    background: linear-gradient(135deg, #A0B8C8, #B8CCD8);
+  }
+  &.ended {
+    background: linear-gradient(135deg, #B0C0CC, #C4D2DC);
+  }
+  &.default {
+    background: linear-gradient(135deg, #7AB5CC, #9CCFDF);
+  }
+}
+
+.course-info {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 16rpx 20rpx;
+  z-index: 2;
+}
+
+.course-name {
+  display: block;
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #ffffff;
+  margin-bottom: 8rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.course-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8rpx;
+}
+
+.meta-left {
+  display: flex;
+  gap: 8rpx;
+}
+
+.meta-item {
+  display: flex;
+  align-items: center;
+  gap: 6rpx;
+  font-size: 20rpx;
+  color: rgba(255, 255, 255, 0.9);
+  padding: 6rpx 10rpx;
+  border-radius: 6rpx;
+  background: rgba(255, 255, 255, 0.2);
+  line-height: 1;
+  .meta-icon {
+	vertical-align: middle;
+  }
+}
+
+.time-tag {
+  background: rgba(255, 255, 255, 0.25);
+}
+
+.level-tag {
+  background: rgba(255, 255, 255, 0.25);
+}
+
+.course-type-tag {
+  background: transparent !important;
+  padding: 0 !important;
+  .tag {
+    padding: 4rpx 10rpx;
+    border-radius: 6rpx;
+    font-size: 20rpx;
+    font-weight: 600;
+    background: linear-gradient(135deg, #FF8F66, #FFB088);
+    color: #ffffff;
+    &.hot {
+      background: linear-gradient(135deg, #FF6B35, #FF8F66);
+    }
+  }
+}
+
+.meta-icon {
+  width: 22rpx;
+  height: 22rpx;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.course-footer {
+  padding: 16rpx 20rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.participants {
+  display: flex;
+  align-items: center;
+  gap: 6rpx;
+  font-size: 22rpx;
+  color: var(--tabbar-text-inactive);
+}
+
+.fire-icon {
+  width: 32rpx;
+  height: 32rpx;
+}
+
+.join-btn {
+  padding: 12rpx 28rpx;
+  background: rgba(130, 220, 130, 0.9);
+  border: none;
+  border-radius: 9999rpx;
+  font-size: 22rpx;
+  font-weight: 600;
+  color: #ffffff;
+  box-shadow: 0 6rpx 16rpx rgba(130, 220, 130, 0.35);
 }
 </style>
\ No newline at end of file
diff --git a/gym-manage-uniapp/components/index/TodayRecommend.vue b/gym-manage-uniapp/components/index/TodayRecommend.vue
index 286c387..cee8f5c 100644
--- a/gym-manage-uniapp/components/index/TodayRecommend.vue
+++ b/gym-manage-uniapp/components/index/TodayRecommend.vue
@@ -6,7 +6,7 @@
       <!-- 区域标题 -->
       <text class="section-title">今日推荐</text>
       <!-- 查看更多按钮 -->
-      <view class="view-more">
+      <view class="view-more" @click="handleViewMore">
         <text>查看更多</text>
         <text class="arrow">
 			<uni-icons type="right" size="20" color="#8CA0B0"></uni-icons>
@@ -50,6 +50,10 @@
 </template>
 
 <script setup>
+const handleViewMore = () => {
+  uni.navigateTo({ url: '/pages/discover/index' })
+}
+
 // 今日推荐数据列表
 const recommends = [
   {
diff --git a/gym-manage-uniapp/components/memberInfo/BodyTestRadarChart.vue b/gym-manage-uniapp/components/memberInfo/BodyTestRadarChart.vue
index 473375a..64ca8e2 100644
--- a/gym-manage-uniapp/components/memberInfo/BodyTestRadarChart.vue
+++ b/gym-manage-uniapp/components/memberInfo/BodyTestRadarChart.vue
@@ -10,62 +10,50 @@
     </view>
 </template>
 
-<script>
+<script setup>
+import { ref, watch, onMounted, nextTick } from 'vue'
 import { drawRadarChart } from '@/common/memberInfo/bodyTestChart.js'
 
-export default {
-    options: {
-        virtualHost: false,
-        styleIsolation: 'apply-shared'
-    },
-    props: {
-        labels: { type: Array, default: () => [] },
-        values: { type: Array, default: () => [] },
-        width: { type: Number, default: 280 },
-        height: { type: Number, default: 240 }
-    },
-    data() {
-        return {
-            canvasId: `bt-radar-${Math.random().toString(36).slice(2, 9)}`
-        }
-    },
-    watch: {
-        values: {
-            deep: true,
-            handler() {
-                this.renderChart()
-            }
-        }
-    },
-    mounted() {
-        this.renderChart()
-    },
-    methods: {
-        renderChart() {
-            this.$nextTick(() => {
-                const query = uni.createSelectorQuery().in(this)
-                query
-                    .select(`#${this.canvasId}`)
-                    .fields({ node: true, size: true })
-                    .exec((res) => {
-                        const node = res?.[0]?.node
-                        if (!node) return
-                        const dpr = uni.getSystemInfoSync().pixelRatio || 1
-                        drawRadarChart(node, {
-                            width: this.width,
-                            height: this.height,
-                            labels: this.labels,
-                            values: this.values,
-                            dpr
-                        })
-                    })
+const props = defineProps({
+    labels: { type: Array, default: () => [] },
+    values: { type: Array, default: () => [] },
+    width: { type: Number, default: 280 },
+    height: { type: Number, default: 240 }
+})
+
+const canvasId = ref(`bt-radar-${Math.random().toString(36).slice(2, 9)}`)
+
+function renderChart() {
+    nextTick(() => {
+        const query = uni.createSelectorQuery().in(getCurrentInstance())
+        query
+            .select(`#${canvasId.value}`)
+            .fields({ node: true, size: true })
+            .exec((res) => {
+                const node = res?.[0]?.node
+                if (!node) return
+                const dpr = uni.getSystemInfoSync().pixelRatio || 1
+                drawRadarChart(node, {
+                    width: props.width,
+                    height: props.height,
+                    labels: props.labels,
+                    values: props.values,
+                    dpr
+                })
             })
-        }
-    }
+    })
 }
+
+watch(() => props.values, () => {
+    renderChart()
+}, { deep: true })
+
+onMounted(() => {
+    renderChart()
+})
 </script>
 
-<style>
+<style lang="scss">
 .bt-radar {
     display: flex;
     align-items: center;
diff --git a/gym-manage-uniapp/components/memberInfo/BodyTestTrendChart.vue b/gym-manage-uniapp/components/memberInfo/BodyTestTrendChart.vue
index 16e9144..d36c98f 100644
--- a/gym-manage-uniapp/components/memberInfo/BodyTestTrendChart.vue
+++ b/gym-manage-uniapp/components/memberInfo/BodyTestTrendChart.vue
@@ -10,62 +10,50 @@
     </view>
 </template>
 
-<script>
+<script setup>
+import { ref, watch, onMounted, nextTick } from 'vue'
 import { drawTrendChart } from '@/common/memberInfo/bodyTestChart.js'
 
-export default {
-    options: {
-        virtualHost: false,
-        styleIsolation: 'apply-shared'
-    },
-    props: {
-        points: { type: Array, default: () => [] },
-        unit: { type: String, default: '' },
-        width: { type: Number, default: 300 },
-        height: { type: Number, default: 160 }
-    },
-    data() {
-        return {
-            canvasId: `bt-trend-${Math.random().toString(36).slice(2, 9)}`
-        }
-    },
-    watch: {
-        points: {
-            deep: true,
-            handler() {
-                this.renderChart()
-            }
-        }
-    },
-    mounted() {
-        this.renderChart()
-    },
-    methods: {
-        renderChart() {
-            this.$nextTick(() => {
-                const query = uni.createSelectorQuery().in(this)
-                query
-                    .select(`#${this.canvasId}`)
-                    .fields({ node: true, size: true })
-                    .exec((res) => {
-                        const node = res?.[0]?.node
-                        if (!node) return
-                        const dpr = uni.getSystemInfoSync().pixelRatio || 1
-                        drawTrendChart(node, {
-                            width: this.width,
-                            height: this.height,
-                            points: this.points,
-                            unit: this.unit,
-                            dpr
-                        })
-                    })
+const props = defineProps({
+    points: { type: Array, default: () => [] },
+    unit: { type: String, default: '' },
+    width: { type: Number, default: 300 },
+    height: { type: Number, default: 160 }
+})
+
+const canvasId = ref(`bt-trend-${Math.random().toString(36).slice(2, 9)}`)
+
+function renderChart() {
+    nextTick(() => {
+        const query = uni.createSelectorQuery().in(getCurrentInstance())
+        query
+            .select(`#${canvasId.value}`)
+            .fields({ node: true, size: true })
+            .exec((res) => {
+                const node = res?.[0]?.node
+                if (!node) return
+                const dpr = uni.getSystemInfoSync().pixelRatio || 1
+                drawTrendChart(node, {
+                    width: props.width,
+                    height: props.height,
+                    points: props.points,
+                    unit: props.unit,
+                    dpr
+                })
             })
-        }
-    }
+    })
 }
+
+watch(() => props.points, () => {
+    renderChart()
+}, { deep: true })
+
+onMounted(() => {
+    renderChart()
+})
 </script>
 
-<style>
+<style lang="scss">
 .bt-trend {
     display: flex;
     align-items: center;
diff --git a/gym-manage-uniapp/components/memberInfo/MemberInfoBodyReport.vue b/gym-manage-uniapp/components/memberInfo/MemberInfoBodyReport.vue
index d40ed16..69caf25 100644
--- a/gym-manage-uniapp/components/memberInfo/MemberInfoBodyReport.vue
+++ b/gym-manage-uniapp/components/memberInfo/MemberInfoBodyReport.vue
@@ -102,31 +102,26 @@
     </view>
 </template>
 
-<script>
-export default {
-    options: {
-        virtualHost: false,
-        styleIsolation: 'apply-shared'
-    },
-    props: {
-        report: {
-            type: Object,
-            default: () => ({
-                date: '2024-07-01',
-                weight: '63.5',
-                bmi: '22.1',
-                bodyFat: '24.8%',
-                bmr: '165',
-                status: '比较健康',
-                change: '-1.2kg'
-            })
-        }
-    },
-    emits: ['view-history', 'view-report']
-}
+<script setup>
+defineProps({
+    report: {
+        type: Object,
+        default: () => ({
+            date: '2024-07-01',
+            weight: '63.5',
+            bmi: '22.1',
+            bodyFat: '24.8%',
+            bmr: '165',
+            status: '比较健康',
+            change: '-1.2kg'
+        })
+    }
+})
+
+defineEmits(['view-history', 'view-report'])
 </script>
 
-<style>
+<style lang="scss">
 @import '@/common/style/memberInfo/member-info-component-reset.css';
 @import '@/common/style/memberInfo/member-info-body-report.css';
 @import '@/common/style/memberInfo/member-info-tap.css';
diff --git a/gym-manage-uniapp/components/memberInfo/MemberInfoBookingList.vue b/gym-manage-uniapp/components/memberInfo/MemberInfoBookingList.vue
index f783ca2..1c3ea2d 100644
--- a/gym-manage-uniapp/components/memberInfo/MemberInfoBookingList.vue
+++ b/gym-manage-uniapp/components/memberInfo/MemberInfoBookingList.vue
@@ -77,28 +77,24 @@
     </view>
 </template>
 
-<script>
-export default {
-    options: {
-        virtualHost: false,
-        styleIsolation: 'apply-shared'
-    },
-    props: {
-        items: {
-            type: Array,
-            default: () => []
-        }
-    },
-    emits: ['view-all', 'item-tap'],
-    computed: {
-        previewItems() {
-            return this.items
-        }
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+    items: {
+        type: Array,
+        default: () => []
     }
-}
+})
+
+defineEmits(['view-all', 'item-tap'])
+
+const previewItems = computed(() => {
+    return props.items
+})
 </script>
 
-<style>
+<style lang="scss">
 @import '@/common/style/memberInfo/member-info-component-reset.css';
 @import '@/common/style/memberInfo/member-info-booking-list.css';
 @import '@/common/style/memberInfo/member-info-tap.css';
diff --git a/gym-manage-uniapp/components/memberInfo/MemberInfoCheckInList.vue b/gym-manage-uniapp/components/memberInfo/MemberInfoCheckInList.vue
index 49b0411..97d1a95 100644
--- a/gym-manage-uniapp/components/memberInfo/MemberInfoCheckInList.vue
+++ b/gym-manage-uniapp/components/memberInfo/MemberInfoCheckInList.vue
@@ -64,23 +64,18 @@
     </view>
 </template>
 
-<script>
-export default {
-    options: {
-        virtualHost: false,
-        styleIsolation: 'apply-shared'
-    },
-    props: {
-        items: {
-            type: Array,
-            default: () => []
-        }
-    },
-    emits: ['view-all', 'item-tap']
-}
+<script setup>
+defineProps({
+    items: {
+        type: Array,
+        default: () => []
+    }
+})
+
+defineEmits(['view-all', 'item-tap'])
 </script>
 
-<style>
+<style lang="scss">
 @import '@/common/style/memberInfo/member-info-component-reset.css';
 @import '@/common/style/memberInfo/member-info-check-in-list.css';
 @import '@/common/style/memberInfo/member-info-tap.css';
diff --git a/gym-manage-uniapp/components/memberInfo/MemberInfoCouponPoints.vue b/gym-manage-uniapp/components/memberInfo/MemberInfoCouponPoints.vue
index b764791..3581507 100644
--- a/gym-manage-uniapp/components/memberInfo/MemberInfoCouponPoints.vue
+++ b/gym-manage-uniapp/components/memberInfo/MemberInfoCouponPoints.vue
@@ -55,30 +55,25 @@
     </view>
 </template>
 
-<script>
-export default {
-    options: {
-        virtualHost: false,
-        styleIsolation: 'apply-shared'
-    },
-    props: {
-        data: {
-            type: Object,
-            default: () => ({
-                amount: '¥50',
-                couponDesc: '满500可用 · 1张',
-                couponAction: '去使用',
-                points: 1250,
-                pointsLabel: '我的积分',
-                pointsAction: '去兑换'
-            })
-        }
-    },
-    emits: ['view-all', 'use-coupon', 'redeem-points']
-}
+<script setup>
+defineProps({
+    data: {
+        type: Object,
+        default: () => ({
+            amount: '¥50',
+            couponDesc: '满500可用 · 1张',
+            couponAction: '去使用',
+            points: 1250,
+            pointsLabel: '我的积分',
+            pointsAction: '去兑换'
+        })
+    }
+})
+
+defineEmits(['view-all', 'use-coupon', 'redeem-points'])
 </script>
 
-<style>
+<style lang="scss">
 @import '@/common/style/memberInfo/member-info-component-reset.css';
 @import '@/common/style/memberInfo/member-info-coupon-points.css';
 @import '@/common/style/memberInfo/member-info-tap.css';
diff --git a/gym-manage-uniapp/components/memberInfo/MemberInfoHeader.vue b/gym-manage-uniapp/components/memberInfo/MemberInfoHeader.vue
index 2e4c6b0..c2c40b3 100644
--- a/gym-manage-uniapp/components/memberInfo/MemberInfoHeader.vue
+++ b/gym-manage-uniapp/components/memberInfo/MemberInfoHeader.vue
@@ -22,8 +22,8 @@
         <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="$emit('user-info')">
+            <view class="profile-header__inner" v-if="isLogin">
+                <view class="profile-header__user" hover-class="mi-tap--hover" :hover-stay-time="150" @tap="handleUserTap">
                     <view class="profile-header__user-inner">
                         <view class="profile-header__avatar-wrap">
                             <view class="profile-header__avatar-ring">
@@ -44,7 +44,7 @@
                         </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__name">{{ userInfo.name || "活氧舱用户" }}</text>
                                 <text class="profile-header__phone">{{ userInfo.phone }}</text>
                                 <view class="profile-header__badge">
                                     <image
@@ -82,69 +82,95 @@
                         </view>
                     </view>
                 </view>
+				
             </view>
+			<view class="profile-header__inner" v-else>
+				<view class="profile-header__user" hover-class="mi-tap--hover" :hover-stay-time="150" @tap="handleUserTap">
+					<view
+						class="profile-header__user-inner--guest"
+						@tap="handleGuestLogin"
+					>
+						<view class="profile-header__avatar-wrap--guest">
+							<image
+								class="profile-header__avatar--guest"
+								src="/static/OIP-C.png"
+								mode="aspectFill"
+							/>
+						</view>
+						<view class="profile-header__user-meta--guest">
+							<text class="profile-header__name--guest">小伙伴，点我登录</text>
+							<text class="profile-header__phone--guest">陪你遇见更好的自己 ~</text>
+						</view>
+					</view>
+				</view>
+			</view>
         </view>
     </view>
 </template>
 
-<script>
-export default {
-    options: {
-        virtualHost: false,
-        styleIsolation: 'apply-shared'
-    },
-    props: {
-        userInfo: { type: Object, required: true },
-        stats: { type: Object, required: true }
-    },
-    emits: ['user-info'],
-    computed: {
-        displayAvatar() {
-            return this.userInfo.avatar || 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/AvatarEditWrap.png'
-        }
-    },
-    data() {
-        return {
-            toolbarStyle: {},
-            toolbarSpacerStyle: {},
-            navRightStyle: {}
-        }
-    },
-    mounted() {
-        this.syncNavSafeArea()
-    },
-    methods: {
-        syncNavSafeArea() {
-            try {
-                const sys = uni.getSystemInfoSync()
-                const statusBarHeight = sys.statusBarHeight || 0
-                const navHeight = 44
-                const menu = uni.getMenuButtonBoundingClientRect?.()
+<script setup>
+import { ref, computed, onMounted } from 'vue'
 
-                this.toolbarStyle = {
-                    paddingTop: `${statusBarHeight}px`
-                }
+const props = defineProps({
+    userInfo: { type: Object, required: true },
+    stats: { type: Object, required: true },
+	isLogin: { type: Boolean }
+})
 
-                this.toolbarSpacerStyle = {
-                    height: `${statusBarHeight + navHeight}px`
-                }
 
-                if (menu && menu.width) {
-                    const capsuleGap = sys.windowWidth - menu.left + 8
-                    this.navRightStyle = {
-                        width: `${capsuleGap}px`,
-                        minWidth: `${capsuleGap}px`
-                    }
-                }
-            } catch (e) {
-                this.toolbarSpacerStyle = { height: '44px' }
-            }
-        }
+const emit = defineEmits(['user-info', 'guest-login'])
+
+const displayAvatar = computed(() => {
+    return props.userInfo.avatar || '/static/OC-default-headIamge.png'
+})
+
+function handleUserTap() {
+    if (props.isLogin) {
+        emit('user-info')
     }
 }
+
+function handleGuestLogin() {
+    emit('guest-login')
+}
+
+const toolbarStyle = ref({})
+const toolbarSpacerStyle = ref({})
+const navRightStyle = ref({})
+
+function syncNavSafeArea() {
+    try {
+        const sys = uni.getSystemInfoSync()
+        const statusBarHeight = sys.statusBarHeight || 0
+        const navHeight = 44
+        const menu = uni.getMenuButtonBoundingClientRect?.()
+
+        toolbarStyle.value = {
+            paddingTop: `${statusBarHeight}px`
+        }
+
+        toolbarSpacerStyle.value = {
+            height: `${statusBarHeight + navHeight}px`
+        }
+
+        if (menu && menu.width) {
+            const capsuleGap = sys.windowWidth - menu.left + 8
+            navRightStyle.value = {
+                width: `${capsuleGap}px`,
+                minWidth: `${capsuleGap}px`
+            }
+        }
+    } catch (e) {
+        toolbarSpacerStyle.value = { height: '44px' }
+    }
+}
+
+onMounted(() => {
+    syncNavSafeArea()
+})
 </script>
 
-<style>
+<style lang="scss">
 @import '@/common/style/memberInfo/member-info-component-reset.css';
 @import '@/common/style/memberInfo/member-info-header.css';
 @import '@/common/style/memberInfo/member-info-tap.css';
diff --git a/gym-manage-uniapp/components/memberInfo/MemberInfoLogout.vue b/gym-manage-uniapp/components/memberInfo/MemberInfoLogout.vue
index 7ad019b..8b3df4d 100644
--- a/gym-manage-uniapp/components/memberInfo/MemberInfoLogout.vue
+++ b/gym-manage-uniapp/components/memberInfo/MemberInfoLogout.vue
@@ -16,16 +16,10 @@
     </view>
 </template>
 
-<script>
-export default {
-    options: {
-        virtualHost: false,
-        styleIsolation: 'apply-shared'
-    },
-    emits: ['logout']
-}
+<script setup>
+defineEmits(['logout'])
 </script>
 
-<style>
+<style lang="scss">
 @import '@/common/style/memberInfo/member-info-logout.css';
 </style>
diff --git a/gym-manage-uniapp/components/memberInfo/MemberInfoMemberCard.vue b/gym-manage-uniapp/components/memberInfo/MemberInfoMemberCard.vue
index c9964cb..8a18cfe 100644
--- a/gym-manage-uniapp/components/memberInfo/MemberInfoMemberCard.vue
+++ b/gym-manage-uniapp/components/memberInfo/MemberInfoMemberCard.vue
@@ -35,7 +35,7 @@
                                     >
                                         <view
                                             class="member-card-preview__icon-wrap"
-                                        >
+                                            >
                                             <view
                                                 class="member-card-preview__icon-border"
                                             >
@@ -94,6 +94,18 @@
                                             续费
                                         </text>
                                     </view>
+                                    <view
+                                        class="member-card-preview__purchase"
+                                        hover-class="mi-tap-btn--hover"
+                                        :hover-stay-time="150"
+                                        @tap.stop="$emit('purchase')"
+                                    >
+                                        <text
+                                            class="member-card-preview__purchase-text"
+                                        >
+                                            购买新卡
+                                        </text>
+                                    </view>
                                 </view>
                             </view>
                         </view>
@@ -115,20 +127,15 @@
             </view>
 </template>
 
-<script>
-export default {
-    options: {
-        virtualHost: false,
-        styleIsolation: 'apply-shared'
-    },
-    props: {
-        cardInfo: { type: Object, required: true }
-    },
-    emits: ['view-all', 'renew'],
-}
+<script setup>
+defineProps({
+    cardInfo: { type: Object, required: true }
+})
+
+defineEmits(['view-all', 'renew', 'purchase'])
 </script>
 
-<style>
+<style lang="scss">
 @import '@/common/style/memberInfo/member-info-component-reset.css';
 @import '@/common/style/memberInfo/member-info-member-card.css';
 @import '@/common/style/memberInfo/member-info-tap.css';
diff --git a/gym-manage-uniapp/components/memberInfo/MemberInfoQuickActions.vue b/gym-manage-uniapp/components/memberInfo/MemberInfoQuickActions.vue
index 64a5e83..3ee7816 100644
--- a/gym-manage-uniapp/components/memberInfo/MemberInfoQuickActions.vue
+++ b/gym-manage-uniapp/components/memberInfo/MemberInfoQuickActions.vue
@@ -83,33 +83,27 @@
     </view>
 </template>
 
-<script>
-export default {
-    options: {
-        virtualHost: false,
-        styleIsolation: 'apply-shared'
-    },
-    emits: ['action'],
-    data() {
-        return {
-            row1: [
-                { 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' }
-            ],
-            row2: [
-                { 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' }
-            ]
-        }
-    }
-}
+<script setup>
+import { ref } from 'vue'
+
+defineEmits(['action'])
+
+const row1 = ref([
+    { key: 'booking', label: '预约课程', textClass: 'quick-actions__title', icon: '' },
+    { key: 'bodyTest', label: '智能体测', textClass: 'quick-actions__title-2', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/mappin2.png' },
+    { key: 'bodyReport', label: '体测报告', textClass: 'quick-actions__title-3', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/activity.png' },
+    { key: 'trainReport', label: '训练报告', textClass: 'quick-actions__coach', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/usercheck.png' }
+])
+
+const row2 = ref([
+    { key: 'coupon', label: '我的优惠券', textClass: 'quick-actions__text', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/ticket.png' },
+    { key: 'points', label: '我的积分', textClass: 'quick-actions__points-desc', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/star.png' },
+    { key: 'referral', label: '邀请好友', textClass: 'quick-actions__title-4', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/share2.png' },
+    { key: 'course', label: '我的课程', textClass: 'quick-actions__text-2', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/play.png' }
+])
 </script>
 
-<style>
+<style lang="scss">
 @import '@/common/style/memberInfo/member-info-component-reset.css';
 @import '@/common/style/memberInfo/member-info-quick-actions.css';
 @import '@/common/style/memberInfo/member-info-tap.css';
diff --git a/gym-manage-uniapp/components/memberInfo/MemberInfoReferral.vue b/gym-manage-uniapp/components/memberInfo/MemberInfoReferral.vue
index 49ef64d..0929384 100644
--- a/gym-manage-uniapp/components/memberInfo/MemberInfoReferral.vue
+++ b/gym-manage-uniapp/components/memberInfo/MemberInfoReferral.vue
@@ -63,38 +63,34 @@
     </view>
 </template>
 
-<script>
-export default {
-    options: {
-        virtualHost: false,
-        styleIsolation: 'apply-shared'
-    },
-    props: {
-        data: {
-            type: Object,
-            default: () => ({
-                code: 'FIT-ZXF-2024',
-                invited: 5,
-                registered: 3,
-                purchased: 2
-            })
-        }
-    },
-    emits: ['view-rules'],
-    methods: {
-        copyCode() {
-            uni.setClipboardData({
-                data: this.data.code,
-                success: () => {
-                    uni.showToast({ title: '已复制', icon: 'success' })
-                }
-            })
-        }
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps({
+    data: {
+        type: Object,
+        default: () => ({
+            code: 'FIT-ZXF-2024',
+            invited: 5,
+            registered: 3,
+            purchased: 2
+        })
     }
+})
+
+defineEmits(['view-rules'])
+
+function copyCode() {
+    uni.setClipboardData({
+        data: props.data.code,
+        success: () => {
+            uni.showToast({ title: '已复制', icon: 'success' })
+        }
+    })
 }
 </script>
 
-<style>
+<style lang="scss">
 @import '@/common/style/memberInfo/member-info-component-reset.css';
 @import '@/common/style/memberInfo/member-info-referral.css';
 @import '@/common/style/memberInfo/member-info-tap.css';
diff --git a/gym-manage-uniapp/components/memberInfo/MemberInfoSettings.vue b/gym-manage-uniapp/components/memberInfo/MemberInfoSettings.vue
index 7063220..ef3b63b 100644
--- a/gym-manage-uniapp/components/memberInfo/MemberInfoSettings.vue
+++ b/gym-manage-uniapp/components/memberInfo/MemberInfoSettings.vue
@@ -55,55 +55,48 @@
     </view>
 </template>
 
-<script>
-export default {
-    options: {
-        virtualHost: false,
-        styleIsolation: 'apply-shared'
+<script setup>
+import { ref } from 'vue'
+
+defineEmits(['setting'])
+
+const items = ref([
+    {
+        key: 'notify',
+        label: '通知设置',
+        icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/bell.png',
+        iconWrapClass: ''
     },
-    emits: ['setting'],
-    data() {
-        return {
-            items: [
-                {
-                    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'
-                }
-            ]
-        }
+    {
+        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'
     }
-}
+])
 </script>
 
-<style>
+<style lang="scss">
 @import '@/common/style/memberInfo/member-info-component-reset.css';
 @import '@/common/style/memberInfo/member-info-settings.css';
 </style>
diff --git a/gym-manage-uniapp/components/memberInfo/MemberInfoStatusBar.vue b/gym-manage-uniapp/components/memberInfo/MemberInfoStatusBar.vue
index d14ef34..f754eaa 100644
--- a/gym-manage-uniapp/components/memberInfo/MemberInfoStatusBar.vue
+++ b/gym-manage-uniapp/components/memberInfo/MemberInfoStatusBar.vue
@@ -7,14 +7,8 @@
     </view>
 </template>
 
-<script>
-export default {
-    options: {
-        virtualHost: true,
-        styleIsolation: 'apply-shared'
-    },
-    props: {
-        statusBarTime: { type: String, default: '9:41' }
-    },
-}
+<script setup>
+defineProps({
+    statusBarTime: { type: String, default: '9:41' }
+})
 </script>
diff --git a/gym-manage-uniapp/components/memberInfo/MemberInfoSubNav.vue b/gym-manage-uniapp/components/memberInfo/MemberInfoSubNav.vue
index dd0f9c6..cb43d7d 100644
--- a/gym-manage-uniapp/components/memberInfo/MemberInfoSubNav.vue
+++ b/gym-manage-uniapp/components/memberInfo/MemberInfoSubNav.vue
@@ -27,80 +27,75 @@
     </view>
 </template>
 
-<script>
-export default {
-    options: {
-        virtualHost: false,
-        styleIsolation: 'apply-shared'
-    },
-    props: {
-        title: { type: String, required: true },
-        rightText: { type: String, default: '' },
-        actionButton: { type: Boolean, default: false }
-    },
-    emits: ['back', 'right-action'],
-    data() {
-        return {
-            toolbarStyle: {},
-            toolbarSpacerStyle: {},
-            capsuleStyle: {},
-            isH5: false
+<script setup>
+import { ref, onMounted, nextTick } from 'vue'
+
+const props = defineProps({
+    title: { type: String, required: true },
+    rightText: { type: String, default: '' },
+    actionButton: { type: Boolean, default: false }
+})
+
+defineEmits(['back', 'right-action'])
+
+const toolbarStyle = ref({})
+const toolbarSpacerStyle = ref({})
+const capsuleStyle = ref({})
+const isH5 = ref(false)
+
+function syncNavSafeArea() {
+    try {
+        const sys = uni.getSystemInfoSync()
+        const statusBarHeight = sys.statusBarHeight || 0
+        const navHeight = 44
+        const extraGap = 4
+        const menu = uni.getMenuButtonBoundingClientRect?.()
+        
+        // #ifdef H5
+        isH5.value = true
+        // #endif
+        // #ifndef H5
+        isH5.value = false
+        // #endif
+        if (!isH5.value && typeof window !== 'undefined' && !menu?.width) {
+            isH5.value = sys.uniPlatform === 'web' || sys.platform === 'web'
         }
-    },
-    mounted() {
-        this.syncNavSafeArea()
-        this.$nextTick(() => {
-            setTimeout(() => this.syncNavSafeArea(), 50)
-        })
-    },
-    methods: {
-        syncNavSafeArea() {
-            try {
-                const sys = uni.getSystemInfoSync()
-                const statusBarHeight = sys.statusBarHeight || 0
-                const navHeight = 44
-                const extraGap = 4
-                const menu = uni.getMenuButtonBoundingClientRect?.()
-                // #ifdef H5
-                this.isH5 = true
-                // #endif
-                // #ifndef H5
-                this.isH5 = false
-                // #endif
-                if (!this.isH5 && typeof window !== 'undefined' && !menu?.width) {
-                    this.isH5 = sys.uniPlatform === 'web' || sys.platform === 'web'
-                }
 
-                this.toolbarStyle = {
-                    paddingTop: `${statusBarHeight}px`
-                }
+        toolbarStyle.value = {
+            paddingTop: `${statusBarHeight}px`
+        }
 
-                this.toolbarSpacerStyle = {
-                    height: `${statusBarHeight + navHeight + extraGap}px`
-                }
+        toolbarSpacerStyle.value = {
+            height: `${statusBarHeight + navHeight + extraGap}px`
+        }
 
-                if (!this.isH5 && menu && menu.width) {
-                    const capsuleGap = sys.windowWidth - menu.left + 8
-                    this.capsuleStyle = {
-                        width: `${capsuleGap}px`,
-                        minWidth: `${capsuleGap}px`
-                    }
-                } else {
-                    this.capsuleStyle = {
-                        width: '0px',
-                        minWidth: '0px'
-                    }
-                }
-            } catch (e) {
-                this.toolbarSpacerStyle = { height: '44px' }
-                this.isH5 = true
-                this.capsuleStyle = { width: '0px', minWidth: '0px' }
+        if (!isH5.value && menu && menu.width) {
+            const capsuleGap = sys.windowWidth - menu.left + 8
+            capsuleStyle.value = {
+                width: `${capsuleGap}px`,
+                minWidth: `${capsuleGap}px`
+            }
+        } else {
+            capsuleStyle.value = {
+                width: '0px',
+                minWidth: '0px'
             }
         }
+    } catch (e) {
+        toolbarSpacerStyle.value = { height: '44px' }
+        isH5.value = true
+        capsuleStyle.value = { width: '0px', minWidth: '0px' }
     }
 }
+
+onMounted(() => {
+    syncNavSafeArea()
+    nextTick(() => {
+        setTimeout(() => syncNavSafeArea(), 50)
+    })
+})
 </script>
 
-<style>
+<style lang="scss">
 @import '@/common/style/memberInfo/member-info-sub-nav.css';
 </style>
diff --git a/gym-manage-uniapp/manifest.json b/gym-manage-uniapp/manifest.json
index ecc7130..e592805 100644
--- a/gym-manage-uniapp/manifest.json
+++ b/gym-manage-uniapp/manifest.json
@@ -17,7 +17,9 @@
             "delay" : 0
         },
         /* 模块配置 */
-        "modules" : {},
+        "modules" : {
+            "OAuth" : {}
+        },
         /* 应用发布信息 */
         "distribute" : {
             /* android打包配置 */
@@ -45,7 +47,14 @@
                 "dSYMs" : false
             },
             /* SDK配置 */
-            "sdkConfigs" : {},
+            "sdkConfigs" : {
+                "oauth" : {
+                    "weixin" : {
+                        "appid" : "wx8f0d644d1d8985f6",
+                        "UniversalLinks" : ""
+                    }
+                }
+            },
             "icons" : {
                 "android" : {
                     "hdpi" : "unpackage/res/icons/72x72.png",
diff --git a/gym-manage-uniapp/pages.json b/gym-manage-uniapp/pages.json
index 152613b..8e3833b 100644
--- a/gym-manage-uniapp/pages.json
+++ b/gym-manage-uniapp/pages.json
@@ -53,6 +53,13 @@
         }
 			}
 		},
+		{
+			"path": "pages/memberInfo/login",
+			"style": {
+				"navigationStyle": "custom",
+				"navigationBarTitleText": "登录"
+			}
+		},
 		{
 			"path": "pages/memberInfo/memberCard",
 			"style": {
@@ -207,6 +214,13 @@
 				"navigationBarTitleText": "签到记录"
 			}
 		},
+		{
+			"path": "pages/memberInfo/purchaseCard",
+			"style": {
+				"navigationStyle": "custom",
+				"navigationBarTitleText": "购买会员卡"
+			}
+		},
 		{
 			"path": "pages/memberInfo/courseList",
 			"style": {
@@ -280,6 +294,25 @@
 			"style": {
 				"navigationBarTitleText": ""
 			}
+		},
+		{
+			"path": "pages/message/index",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/message/detail",
+			"style": {
+				"navigationStyle": "custom",
+				"navigationBarTitleText": "消息详情"
+			}
+		},
+		{
+			"path": "pages/webview/webview",
+			"style": {
+				"navigationBarTitleText": ""
+			}
 		}
 	],
 	"globalStyle": {
diff --git a/gym-manage-uniapp/pages/checkIn/checkIn.vue b/gym-manage-uniapp/pages/checkIn/checkIn.vue
index 74ce4f5..049b89e 100644
--- a/gym-manage-uniapp/pages/checkIn/checkIn.vue
+++ b/gym-manage-uniapp/pages/checkIn/checkIn.vue
@@ -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); }
diff --git a/gym-manage-uniapp/pages/course/index.vue b/gym-manage-uniapp/pages/course/index.vue
index 279ac43..dcbbaba 100644
--- a/gym-manage-uniapp/pages/course/index.vue
+++ b/gym-manage-uniapp/pages/course/index.vue
@@ -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 */
diff --git a/gym-manage-uniapp/pages/index/index.vue b/gym-manage-uniapp/pages/index/index.vue
index f7f0585..8a90ec6 100644
--- a/gym-manage-uniapp/pages/index/index.vue
+++ b/gym-manage-uniapp/pages/index/index.vue
@@ -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 */
diff --git a/gym-manage-uniapp/pages/memberInfo/bodyTestCompare.vue b/gym-manage-uniapp/pages/memberInfo/bodyTestCompare.vue
index dc437ce..7ca6c49 100644
--- a/gym-manage-uniapp/pages/memberInfo/bodyTestCompare.vue
+++ b/gym-manage-uniapp/pages/memberInfo/bodyTestCompare.vue
@@ -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';
diff --git a/gym-manage-uniapp/pages/memberInfo/bodyTestConnect.vue b/gym-manage-uniapp/pages/memberInfo/bodyTestConnect.vue
index 5529199..02b9c3a 100644
--- a/gym-manage-uniapp/pages/memberInfo/bodyTestConnect.vue
+++ b/gym-manage-uniapp/pages/memberInfo/bodyTestConnect.vue
@@ -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';
diff --git a/gym-manage-uniapp/pages/memberInfo/bodyTestHistory.vue b/gym-manage-uniapp/pages/memberInfo/bodyTestHistory.vue
index 9bf6e1c..8ad9a90 100644
--- a/gym-manage-uniapp/pages/memberInfo/bodyTestHistory.vue
+++ b/gym-manage-uniapp/pages/memberInfo/bodyTestHistory.vue
@@ -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>
diff --git a/gym-manage-uniapp/pages/memberInfo/bodyTestHome.vue b/gym-manage-uniapp/pages/memberInfo/bodyTestHome.vue
index d524f23..d3b43bf 100644
--- a/gym-manage-uniapp/pages/memberInfo/bodyTestHome.vue
+++ b/gym-manage-uniapp/pages/memberInfo/bodyTestHome.vue
@@ -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';
diff --git a/gym-manage-uniapp/pages/memberInfo/bodyTestMeasuring.vue b/gym-manage-uniapp/pages/memberInfo/bodyTestMeasuring.vue
index 55f3e34..9b121bb 100644
--- a/gym-manage-uniapp/pages/memberInfo/bodyTestMeasuring.vue
+++ b/gym-manage-uniapp/pages/memberInfo/bodyTestMeasuring.vue
@@ -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';
diff --git a/gym-manage-uniapp/pages/memberInfo/bodyTestReport.vue b/gym-manage-uniapp/pages/memberInfo/bodyTestReport.vue
index 5a49e91..4cda9a8 100644
--- a/gym-manage-uniapp/pages/memberInfo/bodyTestReport.vue
+++ b/gym-manage-uniapp/pages/memberInfo/bodyTestReport.vue
@@ -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';
diff --git a/gym-manage-uniapp/pages/memberInfo/bodyTestSettings.vue b/gym-manage-uniapp/pages/memberInfo/bodyTestSettings.vue
index d917ca6..5e929cc 100644
--- a/gym-manage-uniapp/pages/memberInfo/bodyTestSettings.vue
+++ b/gym-manage-uniapp/pages/memberInfo/bodyTestSettings.vue
@@ -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';
diff --git a/gym-manage-uniapp/pages/memberInfo/bodyTestTrend.vue b/gym-manage-uniapp/pages/memberInfo/bodyTestTrend.vue
index 97f9ebc..b42a0dc 100644
--- a/gym-manage-uniapp/pages/memberInfo/bodyTestTrend.vue
+++ b/gym-manage-uniapp/pages/memberInfo/bodyTestTrend.vue
@@ -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';
diff --git a/gym-manage-uniapp/pages/memberInfo/booking.vue b/gym-manage-uniapp/pages/memberInfo/booking.vue
index f3543d6..1d66abf 100644
--- a/gym-manage-uniapp/pages/memberInfo/booking.vue
+++ b/gym-manage-uniapp/pages/memberInfo/booking.vue
@@ -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';
diff --git a/gym-manage-uniapp/pages/memberInfo/checkInHistory.vue b/gym-manage-uniapp/pages/memberInfo/checkInHistory.vue
index 844eb0c..c9fb638 100644
--- a/gym-manage-uniapp/pages/memberInfo/checkInHistory.vue
+++ b/gym-manage-uniapp/pages/memberInfo/checkInHistory.vue
@@ -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';
diff --git a/gym-manage-uniapp/pages/memberInfo/couponCenter.vue b/gym-manage-uniapp/pages/memberInfo/couponCenter.vue
index 4246b8e..bb77753 100644
--- a/gym-manage-uniapp/pages/memberInfo/couponCenter.vue
+++ b/gym-manage-uniapp/pages/memberInfo/couponCenter.vue
@@ -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';
diff --git a/gym-manage-uniapp/pages/memberInfo/couponDetail.vue b/gym-manage-uniapp/pages/memberInfo/couponDetail.vue
index 2b32f94..7059257 100644
--- a/gym-manage-uniapp/pages/memberInfo/couponDetail.vue
+++ b/gym-manage-uniapp/pages/memberInfo/couponDetail.vue
@@ -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';
diff --git a/gym-manage-uniapp/pages/memberInfo/coupons.vue b/gym-manage-uniapp/pages/memberInfo/coupons.vue
index fa6ed34..a34569b 100644
--- a/gym-manage-uniapp/pages/memberInfo/coupons.vue
+++ b/gym-manage-uniapp/pages/memberInfo/coupons.vue
@@ -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';
diff --git a/gym-manage-uniapp/pages/memberInfo/login.vue b/gym-manage-uniapp/pages/memberInfo/login.vue
new file mode 100644
index 0000000..feedbb1
--- /dev/null
+++ b/gym-manage-uniapp/pages/memberInfo/login.vue
@@ -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>
\ No newline at end of file
diff --git a/gym-manage-uniapp/pages/memberInfo/memberCard.vue b/gym-manage-uniapp/pages/memberInfo/memberCard.vue
index eaca6de..4049d4a 100644
--- a/gym-manage-uniapp/pages/memberInfo/memberCard.vue
+++ b/gym-manage-uniapp/pages/memberInfo/memberCard.vue
@@ -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';
diff --git a/gym-manage-uniapp/pages/memberInfo/memberCenter.vue b/gym-manage-uniapp/pages/memberInfo/memberCenter.vue
new file mode 100644
index 0000000..b5fa423
--- /dev/null
+++ b/gym-manage-uniapp/pages/memberInfo/memberCenter.vue
@@ -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>
diff --git a/gym-manage-uniapp/pages/memberInfo/memberInfo.vue b/gym-manage-uniapp/pages/memberInfo/memberInfo.vue
index 74abe62..d4b0cf0 100644
--- a/gym-manage-uniapp/pages/memberInfo/memberInfo.vue
+++ b/gym-manage-uniapp/pages/memberInfo/memberInfo.vue
@@ -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';
diff --git a/gym-manage-uniapp/pages/memberInfo/points.vue b/gym-manage-uniapp/pages/memberInfo/points.vue
index e42710f..f456c7d 100644
--- a/gym-manage-uniapp/pages/memberInfo/points.vue
+++ b/gym-manage-uniapp/pages/memberInfo/points.vue
@@ -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';
diff --git a/gym-manage-uniapp/pages/memberInfo/pointsHistory.vue b/gym-manage-uniapp/pages/memberInfo/pointsHistory.vue
index e97accc..801c096 100644
--- a/gym-manage-uniapp/pages/memberInfo/pointsHistory.vue
+++ b/gym-manage-uniapp/pages/memberInfo/pointsHistory.vue
@@ -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';
diff --git a/gym-manage-uniapp/pages/memberInfo/pointsMall.vue b/gym-manage-uniapp/pages/memberInfo/pointsMall.vue
index 9734d41..7a92b29 100644
--- a/gym-manage-uniapp/pages/memberInfo/pointsMall.vue
+++ b/gym-manage-uniapp/pages/memberInfo/pointsMall.vue
@@ -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';
diff --git a/gym-manage-uniapp/pages/memberInfo/purchaseCard.vue b/gym-manage-uniapp/pages/memberInfo/purchaseCard.vue
new file mode 100644
index 0000000..8b6e8c0
--- /dev/null
+++ b/gym-manage-uniapp/pages/memberInfo/purchaseCard.vue
@@ -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>
\ No newline at end of file
diff --git a/gym-manage-uniapp/pages/memberInfo/referral.vue b/gym-manage-uniapp/pages/memberInfo/referral.vue
index 0c65979..a2b5248 100644
--- a/gym-manage-uniapp/pages/memberInfo/referral.vue
+++ b/gym-manage-uniapp/pages/memberInfo/referral.vue
@@ -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>
diff --git a/gym-manage-uniapp/pages/memberInfo/trainReport.vue b/gym-manage-uniapp/pages/memberInfo/trainReport.vue
index 0f2f870..ba2ad60 100644
--- a/gym-manage-uniapp/pages/memberInfo/trainReport.vue
+++ b/gym-manage-uniapp/pages/memberInfo/trainReport.vue
@@ -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';
diff --git a/gym-manage-uniapp/pages/memberInfo/trainSessionDetail.vue b/gym-manage-uniapp/pages/memberInfo/trainSessionDetail.vue
index 7af0261..201721f 100644
--- a/gym-manage-uniapp/pages/memberInfo/trainSessionDetail.vue
+++ b/gym-manage-uniapp/pages/memberInfo/trainSessionDetail.vue
@@ -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';
diff --git a/gym-manage-uniapp/pages/memberInfo/userInfo.vue b/gym-manage-uniapp/pages/memberInfo/userInfo.vue
index a2fe8e0..8e23541 100644
--- a/gym-manage-uniapp/pages/memberInfo/userInfo.vue
+++ b/gym-manage-uniapp/pages/memberInfo/userInfo.vue
@@ -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';
diff --git a/gym-manage-uniapp/pages/message/detail.vue b/gym-manage-uniapp/pages/message/detail.vue
new file mode 100644
index 0000000..800d92b
--- /dev/null
+++ b/gym-manage-uniapp/pages/message/detail.vue
@@ -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>
diff --git a/gym-manage-uniapp/pages/message/index.vue b/gym-manage-uniapp/pages/message/index.vue
new file mode 100644
index 0000000..43e774d
--- /dev/null
+++ b/gym-manage-uniapp/pages/message/index.vue
@@ -0,0 +1,1594 @@
+<template>
+  <view class="message-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 v-if="unreadCount > 0" class="unread-tip">
+          <text>{{ unreadCount }}</text>
+        </view>
+      </view>
+      <view class="nav-right">
+        <view 
+          v-if="unreadCount > 0" 
+          class="action-btn" 
+          @tap="markAllAsRead"
+          hover-class="action-btn-hover"
+        >
+          <text class="action-icon">✓</text>
+          <text class="action-text">全部已读</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- Tab 切换 -->
+    <view class="tabs-wrapper" :style="tabsWrapperStyle">
+      <scroll-view scroll-x class="tabs-scroll" :show-scrollbar="false">
+        <view class="tabs-container">
+          <view 
+            v-for="tab in tabs" 
+            :key="tab.value"
+            :class="['tab-item', { active: currentTab === tab.value }]"
+            @tap="switchTab(tab.value)"
+          >
+            <text class="tab-label">{{ tab.label }}</text>
+            <view v-if="tab.value === 'unread' && unreadCount > 0" class="tab-badge">
+              <text>{{ unreadCount > 99 ? '99+' : unreadCount }}</text>
+            </view>
+            <view v-if="currentTab === tab.value" class="tab-indicator"></view>
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+
+    <!-- 消息列表 -->
+    <scroll-view 
+      scroll-y 
+      class="message-list" 
+      :style="listStyle"
+      :refresher-enabled="true"
+      :refresher-triggered="refreshing"
+      @refresherrefresh="onRefresh"
+      @scrolltolower="onScrollToLower"
+      refresher-background="#F5F7FA"
+      refresher-default-style="black"
+      lower-threshold="100"
+    >
+      <!-- 消息列表区域 -->
+      <view class="message-list-content">
+        <!-- 真实消息数据 -->
+        <template v-if="groupedMessages.length > 0">
+          <view v-for="(group, groupIndex) in groupedMessages" :key="groupIndex">
+            <view class="group-date">
+              <view class="group-date-line"></view>
+              <text>{{ group.date }}</text>
+              <view class="group-date-line"></view>
+            </view>
+            <view 
+              v-for="message in group.items" 
+              :key="message.id" 
+              :class="['message-item', { read: message.read }]"
+              @tap="openMessage(message)"
+              hover-class="message-item-hover"
+            >
+              <view :class="['message-icon', message.type]">
+                <image :src="getMessageIcon(message.type)" mode="aspectFit" class="icon-img" />
+                <view v-if="!message.read" class="icon-dot">
+                  <view class="dot-inner"></view>
+                </view>
+              </view>
+              <view class="message-content">
+                <view class="message-header">
+                  <view class="title-wrapper">
+                    <text class="message-title">{{ message.title }}</text>
+                    <view v-if="!message.read" class="unread-tag">NEW</view>
+                  </view>
+                  <text class="message-time">{{ message.time }}</text>
+                </view>
+                <text class="message-desc">{{ message.content }}</text>
+                <view class="message-footer">
+                  <text class="message-type">{{ getTypeLabel(message.type) }}</text>
+                  <view class="message-actions" v-if="!message.read">
+                    <text class="action-mark" @tap.stop="markSingleAsRead(message)">标记已读</text>
+                  </view>
+                </view>
+              </view>
+              <view class="message-arrow">
+                <text>›</text>
+              </view>
+            </view>
+          </view>
+        </template>
+        
+        <!-- 骨架屏项（混在列表中） -->
+        <view v-for="i in skeletonCount" :key="'skeleton-' + i" class="message-item skeleton-item">
+          <view class="message-icon skeleton-icon"></view>
+          <view class="message-content">
+            <view class="skeleton-title"></view>
+            <view class="skeleton-desc"></view>
+            <view class="skeleton-footer"></view>
+          </view>
+        </view>
+      </view>
+      
+      <!-- 加载更多指示器 -->
+      <view class="loading-more-state" v-if="loadingMore">
+        <view class="loading-spinner small">
+          <view class="spinner"></view>
+        </view>
+        <text class="loading-text">加载更多...</text>
+      </view>
+
+      <!-- 空状态 -->
+      <view class="message-empty" v-if="filteredMessages.length === 0 && skeletonCount === 0 && !loading && !loadingMore">
+        <view class="empty-icon-wrapper">
+          <image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/message.png" class="empty-icon" />
+        </view>
+        <text class="empty-text">{{ emptyText }}</text>
+        <text class="empty-desc">{{ emptyDesc }}</text>
+        <view v-if="currentTab === 'unread'" class="empty-action" @tap="switchTab('all')">
+          <text>查看全部消息 →</text>
+        </view>
+      </view>
+
+      <!-- 已经到底啦 -->
+      <view class="no-more" v-if="!hasMore && filteredMessages.length > 0 && !loadingMore">
+        <text>已经到底啦~</text>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { 
+  getUserMessages, 
+  getUnreadMessages, 
+  getUnreadMessageCount,
+  markMessageAsRead,
+  markAllMessagesAsRead 
+} from '@/api/main.js'
+
+const messages = ref([])
+const currentTab = ref('all')
+const refreshing = ref(false)
+const loading = ref(false)
+const loadingMore = ref(false)
+const hasMore = ref(true)
+const currentPage = ref(0)
+const pageSize = ref(10)
+const skeletonCount = ref(10) // 骨架屏数量
+const allRawMessages = ref([]) // 存储后端返回的所有原始数据
+const TEST_MODE = false
+
+// ============ 小程序胶囊适配 ============
+const statusBarHeight = ref(20)
+const navBarHeight = ref(44)
+const menuButtonInfo = ref(null)
+
+// 获取胶囊按钮信息
+const getMenuButtonInfo = () => {
+  // #ifdef MP-WEIXIN
+  try {
+    const info = uni.getMenuButtonBoundingClientRect()
+    if (info) {
+      menuButtonInfo.value = info
+      return info
+    }
+  } catch (e) {
+    console.warn('获取胶囊信息失败', e)
+  }
+  // #endif
+  return null
+}
+
+// 获取系统信息
+const getSystemInfo = () => {
+  try {
+    const info = uni.getSystemInfoSync()
+    statusBarHeight.value = info.statusBarHeight || 20
+    return info
+  } catch (e) {
+    return { statusBarHeight: 20 }
+  }
+}
+
+// 初始化导航栏高度
+const initNavBar = () => {
+  const systemInfo = getSystemInfo()
+  const menuButton = getMenuButtonInfo()
+  
+  if (menuButton) {
+    const capsuleBottom = menuButton.top + menuButton.height
+    navBarHeight.value = capsuleBottom + 8 - statusBarHeight.value
+  } else {
+    navBarHeight.value = 44
+  }
+}
+
+// 导航栏样式
+const navStyle = computed(() => {
+  return {
+    paddingTop: statusBarHeight.value + 'px',
+    paddingRight: menuButtonInfo.value ? (menuButtonInfo.value.width + 12) + 'px' : '32rpx',
+    minHeight: (statusBarHeight.value + navBarHeight.value) + 'px',
+    height: (statusBarHeight.value + navBarHeight.value) + 'px'
+  }
+})
+
+// Tab栏外层样式
+const tabsWrapperStyle = computed(() => {
+  const top = statusBarHeight.value + navBarHeight.value
+  return {
+    top: top + 'px'
+  }
+})
+
+// 列表高度样式
+const listStyle = computed(() => {
+  const top = statusBarHeight.value + navBarHeight.value + 70
+  return {
+    height: `calc(100vh - ${top}px)`,
+    paddingTop: '8rpx'
+  }
+})
+// ============ 小程序胶囊适配结束 ============
+
+const tabs = [
+  { label: '全部', value: 'all' },
+  { label: '未读', value: 'unread' },
+  { label: '已读', value: 'read' }
+]
+
+// ============ 工具函数：时间戳字符串转数字 ============
+/**
+ * 将后端返回的时间戳字符串转换为数字
+ * @param {string|number} timestamp - 时间戳字符串或数字
+ * @returns {number} 数字类型的时间戳
+ */
+const parseTimestamp = (timestamp) => {
+  if (!timestamp) return Date.now()
+  
+  // 如果是数字，直接返回
+  if (typeof timestamp === 'number') {
+    return timestamp
+  }
+  
+  // 如果是字符串
+  if (typeof timestamp === 'string') {
+    // 尝试解析日期字符串格式，如 "2026-06-20 20:14:07"
+    const dateStr = timestamp.replace(/-/g, '/').replace('T', ' ')
+    const parsed = Date.parse(dateStr)
+    if (!isNaN(parsed)) {
+      return parsed
+    }
+    
+    // 尝试转换为数字
+    const num = Number(timestamp)
+    if (isNaN(num)) {
+      return Date.now()
+    }
+    
+    // 如果是秒级时间戳（10位），转换为毫秒
+    if (timestamp.length === 10) {
+      return num * 1000
+    }
+    
+    // 如果是毫秒级时间戳（13位），直接返回
+    return num
+  }
+  
+  return Date.now()
+}
+// ============ 工具函数结束 ============
+
+// ============ 日期格式化 ============
+/**
+ * 格式化日期为 "6月17日 星期三" 或 "2025年6月17日 星期三" 格式
+ * @param {string|number} timestamp - 时间戳字符串或数字
+ * @returns {string} 格式化后的日期字符串
+ */
+const formatDate = (timestamp) => {
+  // 解析时间戳
+  const ts = parseTimestamp(timestamp)
+  const date = new Date(ts)
+  const now = new Date()
+  
+  // 检查日期是否有效
+  if (isNaN(date.getTime())) {
+    return '未知日期'
+  }
+  
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
+  const messageDate = new Date(date.getFullYear(), date.getMonth(), date.getDate())
+  
+  const diffDays = Math.floor((today - messageDate) / (1000 * 60 * 60 * 24))
+  
+  // 月份、日期、星期
+  const month = date.getMonth() + 1
+  const day = date.getDate()
+  const year = date.getFullYear()
+  const currentYear = now.getFullYear()
+  const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
+  const weekday = weekdays[date.getDay()]
+  
+  // 判断是否为今年
+  const isThisYear = year === currentYear
+  
+  if (diffDays === 0) {
+    return '今天'
+  } else if (diffDays === 1) {
+    return '昨天'
+  } else {
+    // 2天及以上显示日期
+    if (isThisYear) {
+      // 今年：显示 "6月17日 星期三"
+      return `${month}月${day}日 ${weekday}`
+    } else {
+      // 不是今年：显示 "2025年6月17日 星期三"
+      return `${year}年${month}月${day}日 ${weekday}`
+    }
+  }
+}
+
+/**
+ * 格式化时间为 "HH:MM" 格式
+ * @param {string|number} timestamp - 时间戳字符串或数字
+ * @returns {string} 格式化后的时间字符串
+ */
+const formatTime = (timestamp) => {
+  // 解析时间戳
+  const ts = parseTimestamp(timestamp)
+  const date = new Date(ts)
+  
+  // 检查日期是否有效
+  if (isNaN(date.getTime())) {
+    return '--:--'
+  }
+  
+  const hours = String(date.getHours()).padStart(2, '0')
+  const minutes = String(date.getMinutes()).padStart(2, '0')
+  return `${hours}:${minutes}`
+}
+// ============ 日期格式化结束 ============
+
+// ============ 消息类型映射 ============
+/**
+ * 将后端消息类型映射为前端显示类型
+ * @param {string} type - 后端消息类型
+ * @returns {string} 前端显示类型
+ */
+const mapMessageType = (type) => {
+  const typeMap = {
+    'COURSE': 'course',
+    'SYSTEM': 'system',
+    'ACTIVITY': 'activity',
+    'POINTS': 'points',
+    'course': 'course',
+    'system': 'system',
+    'activity': 'activity',
+    'points': 'points'
+  }
+  return typeMap[type] || 'system'
+}
+
+/**
+ * 将后端消息数据转换为前端格式
+ * @param {object} msg - 后端消息对象
+ * @returns {object} 前端消息对象
+ */
+const transformMessage = (msg) => {
+  console.log('[transformMessage] 原始消息:', msg.id, 'createTime:', msg.createTime, 'createdAt:', msg.createdAt)
+  return {
+    id: msg.id,
+    type: mapMessageType(msg.type),
+    title: msg.title,
+    content: msg.content,
+    timestamp: msg.createTime || msg.createdAt || Date.now(),
+    read: msg.isRead === true || msg.isRead === 1 || msg.isRead === '1'
+  }
+}
+// ============ 消息类型映射结束 ============
+
+// ============ 测试模式假数据 ============
+const mockTemplates = [
+  { type: 'course', title: '课程开始提醒', content: '您预约的「{course}」课程将在10分钟后开始，请提前到达训练场地。' },
+  { type: 'course', title: '课程取消通知', content: '抱歉，您预约的「{course}」课程因教练临时有事已取消。' },
+  { type: 'course', title: '课程预约成功', content: '您已成功预约「{course}」课程，请准时参加。' },
+  { type: 'activity', title: '新活动上线', content: '「{activity}」火热开启，参与即有机会赢取健身礼包！' },
+  { type: 'activity', title: '活动报名成功', content: '恭喜您成功报名「{activity}」，期待您的参与！' },
+  { type: 'activity', title: '活动即将开始', content: '您报名的「{activity}」将在明天开始，请做好准备。' },
+  { type: 'points', title: '积分到账通知', content: '您的运动积分已到账 +{points}，累计积分可兑换精美礼品。' },
+  { type: 'points', title: '积分兑换成功', content: '您已成功兑换「{gift}」，请在有效期内使用。' },
+  { type: 'points', title: '积分即将过期', content: '您有 {points} 积分将于月底过期，请尽快使用。' },
+  { type: 'system', title: '系统维护通知', content: '系统将于今晚22:00-24:00进行维护升级，期间可能影响部分功能使用。' },
+  { type: 'system', title: '账户安全提醒', content: '检测到您的账户在新设备上登录，如非本人操作请及时修改密码。' },
+  { type: 'system', title: '密码修改成功', content: '您的账户密码已成功修改，如非本人操作请联系客服。' }
+]
+
+const mockCourses = ['晨间活力唤醒跑', '全身力量塑形', '瑜伽放松课', '动感单车', '拳击有氧', '普拉提核心', 'HIIT燃脂', '游泳训练']
+const mockActivities = ['夏日减脂挑战赛', '端午健身派对', '会员感恩周', '新人打卡活动', '周末运动嘉年华', '健身达人挑战赛']
+const mockGifts = ['周卡体验券', '月卡优惠券', '私教体验课', '运动水壶', '健身手套', '蛋白粉试用装']
+
+const generateMockMessages = (page, size) => {
+  // 模拟3页数据，每页10条，共30条
+  const maxPages = 3
+  if (page >= maxPages) {
+    return [] // 模拟到底
+  }
+  
+  const messages = []
+  for (let i = 0; i < size; i++) {
+    const template = mockTemplates[Math.floor(Math.random() * mockTemplates.length)]
+    let content = template.content
+    
+    // 替换占位符
+    content = content.replace('{course}', mockCourses[Math.floor(Math.random() * mockCourses.length)])
+    content = content.replace('{activity}', mockActivities[Math.floor(Math.random() * mockActivities.length)])
+    content = content.replace('{points}', Math.floor(Math.random() * 200 + 50))
+    content = content.replace('{gift}', mockGifts[Math.floor(Math.random() * mockGifts.length)])
+    
+    // 生成时间戳：当前时间往前推随机天数
+    const daysAgo = page * size + i + Math.floor(Math.random() * 3)
+    const timestamp = Date.now() - daysAgo * 86400000 - Math.floor(Math.random() * 3600000)
+    
+    messages.push({
+      id: `mock_${page}_${i}`,
+      type: template.type,
+      title: template.title,
+      content: content,
+      createdAt: timestamp,
+      isRead: Math.random() > 0.4 // 60%概率未读
+    })
+  }
+  
+  return messages
+}
+// ============ 测试模式假数据结束 ============
+
+const unreadCount = computed(() => {
+  if (propsUnreadCount.value !== null && propsUnreadCount.value !== undefined) {
+    return propsUnreadCount.value
+  }
+  return messages.value.filter(msg => !msg.read).length
+})
+
+const filteredMessages = computed(() => {
+  if (currentTab.value === 'all') {
+    return messages.value
+  } else if (currentTab.value === 'unread') {
+    return messages.value.filter(msg => !msg.read)
+  } else if (currentTab.value === 'read') {
+    return messages.value.filter(msg => msg.read)
+  }
+  return messages.value
+})
+
+const emptyText = computed(() => {
+  if (currentTab.value === 'unread') return '🎉 暂无未读消息'
+  if (currentTab.value === 'read') return '📭 暂无已读消息'
+  return '📬 暂无消息'
+})
+
+const emptyDesc = computed(() => {
+  if (currentTab.value === 'unread') return '您已读完所有消息，继续保持哦！'
+  if (currentTab.value === 'read') return '还没有已读的消息，快去查看吧！'
+  return '您还没有收到任何通知'
+})
+
+const groupedMessages = computed(() => {
+  const processedMessages = filteredMessages.value.map(msg => ({
+    ...msg,
+    date: formatDate(msg.timestamp),
+    time: formatTime(msg.timestamp)
+  }))
+  
+  const groups = {}
+  processedMessages.forEach(msg => {
+    if (!groups[msg.date]) {
+      groups[msg.date] = []
+    }
+    groups[msg.date].push(msg)
+  })
+  
+  // 自定义排序：今天 > 昨天 > 其他日期（按时间倒序）
+  const dateOrder = ['今天', '昨天']
+  const sortedDates = Object.keys(groups).sort((a, b) => {
+    const indexA = dateOrder.indexOf(a)
+    const indexB = dateOrder.indexOf(b)
+    
+    if (indexA !== -1 && indexB !== -1) {
+      return indexA - indexB
+    }
+    if (indexA !== -1) return -1
+    if (indexB !== -1) return 1
+    
+    // 按日期倒序排列
+    // 从日期字符串中提取日期进行比较
+    const dateA = new Date(a.replace(/[年月日]/g, '/'))
+    const dateB = new Date(b.replace(/[年月日]/g, '/'))
+    return dateB - dateA
+  })
+  
+  return sortedDates.map(date => ({
+    date,
+    items: groups[date]
+  }))
+})
+
+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 goBack = () => {
+  uni.reLaunch({
+    url: '/pages/index/index'
+  })
+}
+
+const switchTab = (tab) => {
+  if (currentTab.value === tab) return
+  currentTab.value = tab
+  if (uni.vibrateShort) {
+    uni.vibrateShort({
+      type: 'light'
+    })
+  }
+}
+
+const openMessage = async (message) => {
+  uni.showLoading({
+    title: '加载中...',
+    mask: true
+  })
+  
+  const startTime = Date.now()
+  
+  try {
+    if (!message.read && !TEST_MODE) {
+      await markMessageAsRead(message.id)
+      message.read = true
+      updateUnreadCount()
+    } else if (!message.read && TEST_MODE) {
+      message.read = true
+      updateUnreadCount()
+    }
+  } catch (e) {
+    console.error('标记已读失败:', e)
+  } finally {
+    const elapsed = Date.now() - startTime
+    const minDelay = 300
+    if (elapsed < minDelay) {
+      await new Promise(resolve => setTimeout(resolve, minDelay - elapsed))
+    }
+    uni.hideLoading()
+  }
+  
+  if (uni.vibrateShort) {
+    uni.vibrateShort({
+      type: 'light'
+    })
+  }
+  const messageData = encodeURIComponent(JSON.stringify(message))
+  uni.navigateTo({
+    url: `/pages/message/detail?message=${messageData}`
+  })
+}
+
+const markSingleAsRead = async (message) => {
+  if (TEST_MODE) {
+    message.read = true
+    updateUnreadCount()
+    uni.showToast({
+      title: '已标记为已读',
+      icon: 'success',
+      duration: 1200
+    })
+    return
+  }
+  
+  try {
+    await markMessageAsRead(message.id)
+    message.read = true
+    updateUnreadCount()
+    uni.showToast({
+      title: '已标记为已读',
+      icon: 'success',
+      duration: 1200
+    })
+  } catch (e) {
+    console.error('标记已读失败:', e)
+    uni.showToast({
+      title: '操作失败',
+      icon: 'none',
+      duration: 1200
+    })
+  }
+}
+
+const markAllAsRead = () => {
+  uni.showModal({
+    title: '确认操作',
+    content: '确定要将所有未读消息标记为已读吗？',
+    confirmColor: '#FF6B35',
+    success: async (res) => {
+      if (res.confirm) {
+        if (TEST_MODE) {
+          messages.value.forEach(msg => {
+            if (!msg.read) {
+              msg.read = true
+            }
+          })
+          updateUnreadCount()
+          uni.showToast({
+            title: '已全部标为已读',
+            icon: 'success',
+            duration: 1500
+          })
+          return
+        }
+        
+        try {
+          const userId = uni.getStorageSync('userId') || 1
+          console.log('请求标记全部已读, userId:', userId)
+          const res = await markAllMessagesAsRead(userId)
+          console.log('标记全部已读响应数据:', res)
+          messages.value.forEach(msg => {
+            if (!msg.read) {
+              msg.read = true
+            }
+          })
+          updateUnreadCount()
+          uni.showToast({
+            title: '已全部标为已读',
+            icon: 'success',
+            duration: 1500
+          })
+        } catch (e) {
+          console.error('全部标记已读失败:', e)
+          uni.showToast({
+            title: '操作失败',
+            icon: 'none',
+            duration: 1500
+          })
+        }
+      }
+    }
+  })
+}
+
+const onRefresh = async () => {
+  refreshing.value = true
+  currentPage.value = 0
+  hasMore.value = true
+  try {
+    await loadMessages(true)
+    uni.showToast({
+      title: '刷新成功',
+      icon: 'success',
+      duration: 1000
+    })
+  } catch (e) {
+    console.error('刷新失败:', e)
+    uni.showToast({
+      title: '刷新失败',
+      icon: 'none',
+      duration: 1000
+    })
+  } finally {
+    refreshing.value = false
+  }
+}
+
+const onScrollToLower = () => {
+  if (loadingMore.value || !hasMore.value || loading.value) return
+  loadMore()
+}
+
+const loadMore = async () => {
+  // 检查是否可以加载更多
+  if (!hasMore.value) {
+    console.log('没有更多数据了')
+    return
+  }
+  
+  if (loading.value) {
+    console.log('正在加载中，跳过')
+    return
+  }
+  
+  if (loadingMore.value) {
+    console.log('正在加载更多中，跳过')
+    return
+  }
+  
+  console.log('触发加载更多，当前页:', currentPage.value, '已有消息数:', messages.value.length)
+  
+  loadingMore.value = true
+  // 加载更多时添加骨架屏（用户滑多少就显示多少个）
+  skeletonCount.value += pageSize.value
+  
+  try {
+    await loadMessages(false)
+  } catch (e) {
+    console.error('加载更多失败:', e)
+  } finally {
+    loadingMore.value = false
+  }
+}
+
+const updateUnreadCount = () => {
+  const count = messages.value.filter(msg => !msg.read).length
+  try {
+    uni.setStorageSync('unreadMessageCount', count)
+  } catch (e) {
+    console.error('保存未读消息数失败:', e)
+  }
+}
+
+// ============ 加载消息数据 ============
+
+/**
+ * 加载消息列表
+ * @param {boolean} isRefresh - 是否刷新（true=重置数据，false=追加数据）
+ */
+const loadMessages = async (isRefresh = true) => {
+  // 防止重复请求
+  if (loading.value) return
+  
+  loading.value = true
+  
+  // 处理骨架屏：初始加载时显示骨架屏
+  if (isRefresh) {
+    skeletonCount.value = pageSize.value
+    messages.value = []
+    allRawMessages.value = []
+    currentPage.value = 0
+    hasMore.value = true
+  }
+  // 加载更多时，skeletonCount 已在 loadMore 中累加，这里不需要重置
+  
+  // 记录开始时间，用于计算最小延迟
+  const startTime = Date.now()
+  const minDelay = 1500 // 最小延迟 1500ms，确保骨架屏可见
+  
+  try {
+    if (TEST_MODE) {
+      // 模拟网络延迟，确保骨架屏可见
+      await new Promise(resolve => setTimeout(resolve, 2000))
+      
+      const mockData = generateMockMessages(currentPage.value, pageSize.value)
+      const processedMessages = mockData.map(transformMessage)
+      
+      // 模拟后端分页结构
+      const mockRes = {
+        content: mockData,
+        totalPages: 3,
+        totalElements: 30,
+        currentPage: currentPage.value,
+        pageSize: pageSize.value,
+        first: currentPage.value === 0,
+        last: currentPage.value >= 2 || mockData.length < pageSize.value
+      }
+      console.log('[测试模式] 分页响应:', mockRes)
+      
+      // 等待最小延迟后再添加数据（确保骨架屏显示）
+      const elapsed = Date.now() - startTime
+      if (elapsed < minDelay) {
+        await new Promise(resolve => setTimeout(resolve, minDelay - elapsed))
+      }
+      
+      if (processedMessages.length > 0) {
+        // 一次性添加所有数据
+        messages.value.push(...processedMessages)
+        // 清空骨架屏
+        skeletonCount.value = 0
+        
+        // 使用 last 判断是否有更多数据
+        hasMore.value = !mockRes.last
+        currentPage.value++
+        
+        updateUnreadCount()
+      } else {
+        // 没有数据时，清空剩余骨架屏
+        skeletonCount.value = 0
+        hasMore.value = false
+      }
+      return
+    }
+    
+    const userId = uni.getStorageSync('userId') || 1
+    const params = { page: currentPage.value, size: pageSize.value }
+    console.log('请求消息列表, userId:', userId, 'params:', params)
+    const res = await getUserMessages(userId, params)
+    console.log('消息列表响应数据:', res)
+    
+    // 解析后端响应
+    let content = []
+    let last = true
+    let isPaged = false // 标记后端是否返回分页结构
+    
+    if (res && Array.isArray(res)) {
+      // 直接返回数组（兼容旧接口）
+      content = res
+    } else if (res && res.content && Array.isArray(res.content)) {
+      // 标准分页结构
+      content = res.content
+      last = res.last === true
+      isPaged = true
+    } else if (res && res.data && res.data.content && Array.isArray(res.data.content)) {
+      // 嵌套在 data 中的分页结构
+      content = res.data.content
+      last = res.data.last === true
+      isPaged = true
+    } else if (res && res.data && Array.isArray(res.data)) {
+      // 直接返回数组在 data 中
+      content = res.data
+    }
+    
+    // 等待最小延迟后再添加数据（确保骨架屏显示）
+    const elapsed = Date.now() - startTime
+    if (elapsed < minDelay) {
+      await new Promise(resolve => setTimeout(resolve, minDelay - elapsed))
+    }
+    
+    // 判断后端是否真的分页：如果返回的数据量大于 pageSize，说明后端返回了所有数据
+    const backendReturnedAll = content.length > pageSize.value
+    
+    if ((!isPaged || backendReturnedAll) && content.length > 0) {
+      // 后端返回了所有数据（或没有分页结构），前端自己做分页
+      if (allRawMessages.value.length === 0) {
+        allRawMessages.value = content
+        console.log('后端返回所有数据，共', content.length, '条，前端将做分页切片')
+      }
+      
+      // 计算当前页应该显示的数据
+      const start = currentPage.value * pageSize.value
+      const end = start + pageSize.value
+      const pageData = allRawMessages.value.slice(start, end)
+      
+      console.log('前端分页:', { start, end, pageDataLength: pageData.length, total: allRawMessages.value.length })
+      
+      const newMessages = pageData.map(transformMessage)
+      
+      if (newMessages.length > 0) {
+        // 一次性添加所有数据
+        messages.value.push(...newMessages)
+        // 清空骨架屏
+        skeletonCount.value = 0
+        
+        // 判断是否还有更多（前端分页）
+        hasMore.value = end < allRawMessages.value.length
+        currentPage.value++
+        
+        updateUnreadCount()
+      } else {
+        // 当前页没有数据，清空骨架屏
+        skeletonCount.value = 0
+        hasMore.value = false
+      }
+    } else {
+      // 后端支持分页，直接使用返回的数据
+      const newMessages = content.map(transformMessage)
+      
+      if (newMessages.length > 0) {
+        // 一次性添加所有数据
+        messages.value.push(...newMessages)
+        // 清空骨架屏
+        skeletonCount.value = 0
+        
+        // 使用 last 判断是否有更多数据
+        hasMore.value = !last
+        currentPage.value++
+        
+        updateUnreadCount()
+      } else {
+        // 没有数据时，清空剩余骨架屏
+        skeletonCount.value = 0
+        hasMore.value = false
+      }
+    }
+  } catch (e) {
+    console.error('获取消息列表失败:', e)
+    skeletonCount.value = 0
+    if (isRefresh) {
+      try {
+        const cachedMessages = uni.getStorageSync('cachedMessages')
+        if (cachedMessages && Array.isArray(cachedMessages)) {
+          messages.value = cachedMessages
+        }
+      } catch (e2) {
+        console.error('读取缓存消息失败:', e2)
+      }
+    }
+  } finally {
+    loading.value = false
+    loadingMore.value = false
+  }
+}
+
+/**
+ * 加载未读消息数量
+ */
+const loadUnreadCount = async () => {
+  // 测试模式下不请求后端
+  if (TEST_MODE) {
+    return
+  }
+  
+  try {
+    const userId = uni.getStorageSync('userId') || 1
+    console.log('请求未读消息数量, userId:', userId)
+    const res = await getUnreadMessageCount(userId)
+    console.log('未读消息数量响应数据:', res)
+    if (res && typeof res === 'number') {
+      uni.setStorageSync('unreadMessageCount', res)
+    } else if (res && typeof res.count === 'number') {
+      uni.setStorageSync('unreadMessageCount', res.count)
+    } else if (res && res.data && typeof res.data === 'number') {
+      uni.setStorageSync('unreadMessageCount', res.data)
+    } else if (res && res.data && typeof res.data.count === 'number') {
+      uni.setStorageSync('unreadMessageCount', res.data.count)
+    }
+  } catch (e) {
+    console.error('获取未读消息数失败:', e)
+  }
+}
+// ============ 加载消息数据结束 ============
+
+const propsUnreadCount = ref(null)
+
+onLoad((options) => {
+  if (options?.unreadCount) {
+    propsUnreadCount.value = parseInt(options.unreadCount, 10) || null
+    console.log('[Message] 从URL接收未读数量:', propsUnreadCount.value)
+  }
+  loadMessages()
+})
+
+onMounted(() => {
+  initNavBar()
+})
+
+onUnmounted(() => {
+  uni.$emit('pageShow')
+})
+</script>
+
+<style lang="scss" scoped>
+.message-page {
+  min-height: 100vh;
+  background: #F5F7FA;
+}
+
+// ============ 导航栏 ============
+.nav-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-left: 32rpx;
+  padding-right: 32rpx;
+  background: var(--bg-white);
+  border-bottom: 1rpx solid rgba(0, 0, 0, 0.04);
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  box-sizing: border-box;
+  
+  .nav-left {
+    display: flex;
+    align-items: center;
+    gap: 12rpx;
+    
+    .back-btn {
+      width: 56rpx;
+      height: 56rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      background: rgba(0, 0, 0, 0.03);
+      transition: all 0.2s ease;
+      flex-shrink: 0;
+      
+      .back-icon {
+        font-size: 48rpx;
+        color: var(--text-dark);
+        font-weight: 300;
+        line-height: 1;
+        margin-top: -4rpx;
+      }
+      
+      &:active {
+        background: rgba(0, 0, 0, 0.06);
+        transform: scale(0.92);
+      }
+    }
+    
+    .nav-title {
+      font-size: 38rpx;
+      font-weight: 700;
+      color: var(--text-dark);
+      letter-spacing: 0.5rpx;
+      white-space: nowrap;
+    }
+    
+    .unread-tip {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 36rpx;
+      height: 36rpx;
+      padding: 0 12rpx;
+      background: rgba(255, 71, 87, 0.12);
+      border-radius: 18rpx;
+      border: 1rpx solid rgba(255, 71, 87, 0.1);
+      flex-shrink: 0;
+      
+      text {
+        font-size: 22rpx;
+        color: #FF4757;
+        font-weight: 600;
+        line-height: 1;
+        text-align: center;
+      }
+    }
+  }
+
+  .nav-right {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    
+    .action-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6rpx;
+      padding: 10rpx 24rpx;
+      height: 56rpx;
+      background: linear-gradient(135deg, rgba(255, 107, 53, 0.12), rgba(255, 107, 53, 0.06));
+      border-radius: 28rpx;
+      transition: all 0.2s ease;
+      border: 1rpx solid rgba(255, 107, 53, 0.1);
+      box-sizing: border-box;
+      
+      .action-icon {
+        font-size: 22rpx;
+        color: var(--accent-orange);
+        font-weight: 700;
+      }
+      
+      .action-text {
+        font-size: 24rpx;
+        color: var(--accent-orange);
+        font-weight: 500;
+        white-space: nowrap;
+      }
+    }
+    
+    .action-btn-hover {
+      opacity: 0.7;
+      transform: scale(0.95);
+    }
+  }
+}
+
+// ============ Tab 栏 ============
+.tabs-wrapper {
+  position: sticky;
+  z-index: 10;
+  background: var(--bg-white);
+  border-bottom: 1rpx solid rgba(0, 0, 0, 0.04);
+}
+
+.tabs-scroll {
+  white-space: nowrap;
+  
+  .tabs-container {
+    display: inline-flex;
+    padding: 0 32rpx;
+    height: 70rpx;
+    align-items: center;
+    gap: 8rpx;
+  }
+}
+
+.tab-item {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 28rpx;
+  height: 56rpx;
+  position: relative;
+  border-radius: 28rpx;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  
+  .tab-label {
+    font-size: 26rpx;
+    color: var(--text-muted);
+    transition: all 0.3s ease;
+    font-weight: 500;
+  }
+  
+  .tab-badge {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 28rpx;
+    height: 28rpx;
+    padding: 0 8rpx;
+    margin-left: 6rpx;
+    background: linear-gradient(135deg, #FF4757, #FF2D55);
+    border-radius: 14rpx;
+    box-shadow: 0 4rpx 12rpx rgba(255, 71, 87, 0.3);
+    animation: badgePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+    
+    text {
+      font-size: 18rpx;
+      color: white;
+      font-weight: 700;
+      line-height: 1;
+      text-align: center;
+    }
+  }
+  
+  .tab-indicator {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%) scaleX(0);
+    width: 28rpx;
+    height: 4rpx;
+    border-radius: 2rpx;
+    background: linear-gradient(90deg, #FF6B35, #FF8A5C);
+    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
+  }
+  
+  &.active {
+    .tab-label {
+      color: var(--accent-orange);
+      font-weight: 600;
+      font-size: 28rpx;
+    }
+    
+    .tab-indicator {
+      transform: translateX(-50%) scaleX(1);
+      width: 36rpx;
+    }
+  }
+  
+  &:active {
+    opacity: 0.7;
+  }
+}
+
+@keyframes badgePop {
+  0% { transform: scale(0); opacity: 0; }
+  60% { transform: scale(1.3); opacity: 1; }
+  100% { transform: scale(1); opacity: 1; }
+}
+
+// ============ 消息列表 ============
+.message-list {
+  background: #F5F7FA;
+}
+
+.message-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 200rpx 48rpx;
+
+  .empty-icon-wrapper {
+    width: 200rpx;
+    height: 200rpx;
+    background: linear-gradient(135deg, rgba(120, 185, 215, 0.06), rgba(120, 185, 215, 0.12));
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 40rpx;
+    transition: all 0.3s ease;
+    animation: float 3s ease-in-out infinite;
+    
+    .empty-icon {
+      width: 120rpx;
+      height: 120rpx;
+      opacity: 0.5;
+    }
+  }
+
+  @keyframes float {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-12rpx); }
+  }
+
+  .empty-text {
+    font-size: 32rpx;
+    font-weight: 600;
+    color: var(--text-muted);
+    margin-bottom: 12rpx;
+  }
+
+  .empty-desc {
+    font-size: 26rpx;
+    color: var(--text-light);
+  }
+  
+  .empty-action {
+    margin-top: 32rpx;
+    padding: 12rpx 32rpx;
+    background: rgba(255, 107, 53, 0.08);
+    border-radius: 30rpx;
+    
+    text {
+      font-size: 26rpx;
+      color: var(--accent-orange);
+      font-weight: 500;
+    }
+    
+    &:active {
+      opacity: 0.7;
+    }
+  }
+}
+
+.group-date {
+  padding: 24rpx 32rpx 16rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 20rpx;
+  
+  .group-date-line {
+    flex: 0 0 60rpx;
+    height: 1rpx;
+    background: linear-gradient(to right, transparent, rgba(0,0,0,0.06), transparent);
+  }
+
+  text {
+    font-size: 24rpx;
+    color: var(--text-light);
+    background: rgba(0, 0, 0, 0.04);
+    padding: 6rpx 24rpx;
+    border-radius: 20rpx;
+    letter-spacing: 1rpx;
+    font-weight: 500;
+  }
+}
+
+.message-item {
+  display: flex;
+  align-items: center;
+  padding: 24rpx 28rpx;
+  margin: 0 24rpx 12rpx;
+  background: var(--bg-white);
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  border: 1rpx solid rgba(0, 0, 0, 0.03);
+
+  &.message-item-hover {
+    transform: scale(0.98);
+    background: #F8FAFB;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
+  }
+
+  &.read {
+    .message-title {
+      color: var(--text-muted);
+      font-weight: 400;
+    }
+    
+    .message-desc {
+      color: var(--text-light);
+    }
+    
+    .message-icon {
+      filter: grayscale(0.3);
+      opacity: 0.7;
+    }
+  }
+
+  .message-icon {
+    width: 80rpx;
+    height: 80rpx;
+    border-radius: 20rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 20rpx;
+    flex-shrink: 0;
+    position: relative;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+    transition: all 0.3s ease;
+
+    &.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: 40rpx;
+      height: 40rpx;
+    }
+    
+    .icon-dot {
+      position: absolute;
+      top: -4rpx;
+      right: -4rpx;
+      width: 20rpx;
+      height: 20rpx;
+      border-radius: 50%;
+      background: linear-gradient(135deg, #FF4757, #FF2D55);
+      border: 2.5rpx solid white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      animation: pulse 2s ease-in-out infinite;
+      box-shadow: 0 0 0 3rpx rgba(255, 71, 87, 0.15);
+      
+      .dot-inner {
+        width: 6rpx;
+        height: 6rpx;
+        border-radius: 50%;
+        background: white;
+        opacity: 0.9;
+      }
+    }
+  }
+
+  @keyframes pulse {
+    0%, 100% { 
+      transform: scale(1);
+      box-shadow: 0 0 0 3rpx rgba(255, 71, 87, 0.15);
+    }
+    50% { 
+      transform: scale(1.1);
+      box-shadow: 0 0 0 6rpx rgba(255, 71, 87, 0.08);
+    }
+  }
+
+  .message-content {
+    flex: 1;
+    min-width: 0;
+
+    .message-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 6rpx;
+      
+      .title-wrapper {
+        display: flex;
+        align-items: center;
+        gap: 8rpx;
+        flex: 1;
+        min-width: 0;
+
+        .message-title {
+          font-size: 28rpx;
+          font-weight: 600;
+          color: var(--text-dark);
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        
+        .unread-tag {
+          flex-shrink: 0;
+          font-size: 16rpx;
+          color: #FF4757;
+          background: rgba(255, 71, 87, 0.08);
+          padding: 2rpx 10rpx;
+          border-radius: 8rpx;
+          font-weight: 700;
+          animation: tagPop 0.3s ease;
+          border: 1rpx solid rgba(255, 71, 87, 0.08);
+          letter-spacing: 0.5rpx;
+          line-height: 1.4;
+        }
+      }
+
+      .message-time {
+        font-size: 22rpx;
+        color: var(--text-light);
+        flex-shrink: 0;
+        margin-left: 12rpx;
+        font-weight: 400;
+      }
+    }
+
+    .message-desc {
+      font-size: 26rpx;
+      color: var(--text-muted);
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      line-height: 1.5;
+      margin-bottom: 8rpx;
+    }
+    
+    .message-footer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      
+      .message-type {
+        font-size: 20rpx;
+        color: var(--text-light);
+        opacity: 0.6;
+        background: rgba(0, 0, 0, 0.03);
+        padding: 2rpx 12rpx;
+        border-radius: 8rpx;
+      }
+      
+      .message-actions {
+        .action-mark {
+          font-size: 20rpx;
+          color: var(--accent-orange);
+          opacity: 0.7;
+          padding: 2rpx 12rpx;
+          background: rgba(255, 107, 53, 0.06);
+          border-radius: 8rpx;
+          
+          &:active {
+            opacity: 0.4;
+          }
+        }
+      }
+    }
+  }
+  
+  .message-arrow {
+    margin-left: 12rpx;
+    flex-shrink: 0;
+    width: 36rpx;
+    height: 36rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background: rgba(0, 0, 0, 0.02);
+    transition: all 0.2s ease;
+    
+    text {
+      color: var(--text-light);
+      font-size: 28rpx;
+      opacity: 0.25;
+      font-weight: 300;
+    }
+  }
+}
+
+@keyframes tagPop {
+  0% { transform: scale(0.5); opacity: 0; }
+  70% { transform: scale(1.1); }
+  100% { transform: scale(1); opacity: 1; }
+}
+
+/* 骨架屏项样式 */
+.skeleton-item {
+  .skeleton-icon {
+    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+    background-size: 200% 100%;
+    animation: shimmer 1.5s infinite;
+  }
+  
+  .skeleton-title {
+    height: 32rpx;
+    width: 60%;
+    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+    background-size: 200% 100%;
+    animation: shimmer 1.5s infinite;
+    border-radius: 8rpx;
+    margin-bottom: 16rpx;
+  }
+  
+  .skeleton-desc {
+    height: 28rpx;
+    width: 85%;
+    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+    background-size: 200% 100%;
+    animation: shimmer 1.5s infinite;
+    border-radius: 8rpx;
+    margin-bottom: 16rpx;
+  }
+  
+  .skeleton-footer {
+    height: 24rpx;
+    width: 40%;
+    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+    background-size: 200% 100%;
+    animation: shimmer 1.5s infinite;
+    border-radius: 8rpx;
+  }
+}
+
+@keyframes shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+/* 加载更多状态 */
+.loading-more-state {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 30rpx 0;
+  gap: 16rpx;
+  
+  .loading-spinner {
+    width: 36rpx;
+    height: 36rpx;
+    
+    .spinner {
+      width: 100%;
+      height: 100%;
+      border: 4rpx solid #f3f3f3;
+      border-top: 4rpx solid #FF6B35;
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+    }
+    
+    &.small {
+      width: 32rpx;
+      height: 32rpx;
+    }
+  }
+  
+  .loading-text {
+    font-size: 26rpx;
+    color: #94a3b8;
+  }
+}
+
+/* 已经到底啦 */
+.no-more {
+  padding: 32rpx 0;
+  text-align: center;
+  
+  text {
+    font-size: 24rpx;
+    color: #94a3b8;
+  }
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+</style>
\ No newline at end of file
diff --git a/gym-manage-uniapp/pages/searchCourse/searchCourse.vue b/gym-manage-uniapp/pages/searchCourse/searchCourse.vue
index 6f3a534..4dcc4c9 100644
--- a/gym-manage-uniapp/pages/searchCourse/searchCourse.vue
+++ b/gym-manage-uniapp/pages/searchCourse/searchCourse.vue
@@ -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}`
   })
 }
 
diff --git a/gym-manage-uniapp/pages/webview/webview.vue b/gym-manage-uniapp/pages/webview/webview.vue
new file mode 100644
index 0000000..f631cd4
--- /dev/null
+++ b/gym-manage-uniapp/pages/webview/webview.vue
@@ -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>
\ No newline at end of file
diff --git a/gym-manage-uniapp/scripts/convert-pixso-pages.js b/gym-manage-uniapp/scripts/convert-pixso-pages.js
index 2730a12..0b4519b 100644
--- a/gym-manage-uniapp/scripts/convert-pixso-pages.js
+++ b/gym-manage-uniapp/scripts/convert-pixso-pages.js
@@ -191,16 +191,14 @@ function convertPage(pageName, config) {
 
     const extraMethods = (config.extraMethods || '').replace(/^\s*,\s*/, '');
     const extraDataBlock = (config.extraData || '').replace(/^\s*,\s*/, '');
-    const dataBody = pageName === 'userInfo'
-        ? '...userInfoMock'
-        : extraDataBlock;
+    const dataBody = extraDataBlock;
 
     const vueOutput = `<template>
 ${template}
 </template>
 
 <script>
-import { statusBarTimeMixin, subPageMixin } from '@/common/memberInfo/mixins.js'${pageName === 'userInfo' ? "\nimport { userInfoMock } from '@/common/memberInfo/mockData.js'" : ''}
+import { statusBarTimeMixin, subPageMixin } from '@/common/memberInfo/mixins.js'
 
 export default {
     mixins: [statusBarTimeMixin, subPageMixin],
diff --git a/gym-manage-uniapp/static/OC-default-headIamge.png b/gym-manage-uniapp/static/OC-default-headIamge.png
new file mode 100644
index 0000000..f838beb
Binary files /dev/null and b/gym-manage-uniapp/static/OC-default-headIamge.png differ
diff --git a/gym-manage-uniapp/static/OC-default-headIamge.webp b/gym-manage-uniapp/static/OC-default-headIamge.webp
new file mode 100644
index 0000000..a8bb5c5
Binary files /dev/null and b/gym-manage-uniapp/static/OC-default-headIamge.webp differ
diff --git a/gym-manage-uniapp/static/OIP-C.png b/gym-manage-uniapp/static/OIP-C.png
new file mode 100644
index 0000000..0fddddf
Binary files /dev/null and b/gym-manage-uniapp/static/OIP-C.png differ
diff --git a/gym-manage-uniapp/static/logo.png b/gym-manage-uniapp/static/logo.png
index b5771e2..5004655 100644
Binary files a/gym-manage-uniapp/static/logo.png and b/gym-manage-uniapp/static/logo.png differ
diff --git a/gym-manage-uniapp/utils/request.js b/gym-manage-uniapp/utils/request.js
index 1316ef0..5f6aeda 100644
--- a/gym-manage-uniapp/utils/request.js
+++ b/gym-manage-uniapp/utils/request.js
@@ -1,4 +1,5 @@
-const BASE_URL = '/api'
+// const BASE_URL = '/api'
+const BASE_URL = 'http://192.168.43.89:8084/api'
 
 // 缓存相关常量
 const CACHE_PREFIX = 'API_CACHE_'
@@ -171,7 +172,7 @@ export const request = (options) => {
 
     console.log(`[API] 请求开始: ${method} ${BASE_URL + url}`)
     console.log(`[API] 请求参数:`, data)
-    console.log(`[API] 请求头:`, requestHeader)
+    console.log(`[API] needToken:`, needToken, 'cache:', cache)
 
     uni.request({
       url: BASE_URL + url,
diff --git a/gym-manage-uniapp/vite.config.js b/gym-manage-uniapp/vite.config.js
index cf4c3c8..626105b 100644
--- a/gym-manage-uniapp/vite.config.js
+++ b/gym-manage-uniapp/vite.config.js
@@ -5,6 +5,10 @@ import path from 'path'
 // 用来匹配地址,解决跨域问题
 export default defineConfig({
   plugins: [uni()],
+  // 配置源目录为根目录，不使用src
+  uni: {
+    inputDir: path.resolve(__dirname, '.')
+  },
   resolve: {
 	alias: {
 	  '@': path.resolve(__dirname, '.')
@@ -13,7 +17,7 @@ export default defineConfig({
   server: {
     proxy: {
       '/api': {
-        target: 'https://www.gymmanage.xyz',
+        target: 'http://192.168.43.89:8084',
         changeOrigin: true,
         secure: true,
         bypass: function(req, res, proxyOptions) {