perf: 优化个人中心会员卡进度展示

2026-09-09 11:27:03 +08:00
parent 726c65f0f0
commit 57107c02dc
6 changed files with 213 additions and 120 deletions
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -98,3 +98,9 @@ pnpm deploy:server   # 部署后端到生产环境
 - 当前无老师归属字段，统计范围是工作室；operatorId 不是授课老师。COMPLETED 是系统完成状态，不代表签到。
 - 已上课程按时段去重，时长按已完成时段累加；上课人次按 COMPLETED 预约计数，学员按 userId 去重。取消、未出席、待确认、已确认独立计数。无日期补录不参与。
 - 月历、学员排行和会员卡分布统计已完成记录；明细可组合日期、学员、状态筛选。新增测试目录只放该服务的 *.spec.ts。
+
+### 个人中心会员卡包
+- 个人中心资料区域以单行展示持有卡种和张数，下方每张卡以单行浅色进度槽承载卡名和用量文字，不使用大卡片或轮播；点击进入我的会员卡。`OwnedMembershipCard.vue` 在我的会员卡页面展示余额、已用进度和到期日。
+- 累计上课、本月上课、剩余课时集中在我的会员卡页面，个人资料卡不重复展示汇总。
+- 次数限制以 remainingTimes 是否为 null 判断，不能按卡种推断。次数进度表示已用占总次数，已用包括预约占用；不限次卡不伪造耗课数。
+- 会员卡加载失败显示重试，不当作无卡；会话变化时丢弃旧请求结果。
--- a/packages/app/src/components/OwnedMembershipCard.vue
+++ b/packages/app/src/components/OwnedMembershipCard.vue
@@ -0,0 +1,54 @@
+<template>
+  <view class="pass" :class="[tone, { 'pass--compact': compact }]">
+    <view class="pass-heading">
+      <view class="pass-identity"><text class="pass-kind">{{ getCardTypeLabel(membership.cardType.type) }} · MEMBERSHIP</text><text class="pass-name">{{ membership.cardType.name }}</text></view>
+      <text class="pass-mark">{{ compact ? '查看 ›' : '有效' }}</text>
+    </view>
+    <view class="pass-balance">
+      <text class="balance-label">{{ unlimited ? '有效期内' : '剩余' }}</text>
+      <text class="balance-number">{{ unlimited ? '不限次' : membership.remainingTimes }}</text>
+      <text v-if="!unlimited" class="balance-unit">次</text>
+      <text v-if="!unlimited && total !== null" class="usage-label">已用 {{ used }} / {{ total }} 次</text>
+      <text v-else-if="unlimited" class="usage-label">{{ days }} 天后到期</text>
+    </view>
+    <view v-if="!unlimited && total !== null && total > 0" class="usage-track" :aria-label="`已用${used}次，共${total}次`"><view class="usage-fill" :style="{ width: `${progress}%` }" /></view>
+    <view v-else class="pass-rule" />
+    <view class="pass-dates"><text v-if="!compact">{{ membership.startDate.slice(0, 10).replace(/-/g, '.') }} 起</text><text :class="{ 'expiry-soon': days <= 7 }">{{ membership.expireDate.slice(0, 10).replace(/-/g, '.') }} 到期</text></view>
+    <slot />
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { CardTypeCategory, type MembershipWithCardType } from '@mp-pilates/shared'
+import { getCardTypeLabel, getMembershipTotalTimes, getMembershipUsedTimes } from '../utils/format'
+
+const props = defineProps<{ membership: MembershipWithCardType; compact?: boolean; now: number }>()
+const unlimited = computed(() => props.membership.remainingTimes === null)
+const total = computed(() => getMembershipTotalTimes(props.membership))
+const used = computed(() => getMembershipUsedTimes(props.membership))
+const progress = computed(() => total.value && total.value > 0 ? Math.min(100, Math.max(0, used.value / total.value * 100)) : 0)
+const days = computed(() => Math.max(0, Math.ceil((new Date(props.membership.expireDate).getTime() - props.now) / 86400000)))
+const tone = computed(() => props.membership.cardType.type === CardTypeCategory.DURATION ? 'pass--sage' : props.membership.cardType.type === CardTypeCategory.TRIAL ? 'pass--clay' : 'pass--sand')
+</script>
+
+<style scoped lang="scss">
+.pass { --pass-bg: #f0e6d8; --pass-ink: #655240; --pass-line: #d7c3a9; --pass-track: #e3d4c1; box-sizing: border-box; padding: 30rpx; border-radius: 24rpx; background: var(--pass-bg); color: var(--pass-ink); border: 1rpx solid var(--pass-line); }
+.pass--sage { --pass-bg: #e7eee4; --pass-ink: #465f4d; --pass-line: #b8c9b3; --pass-track: #d4dfce; }
+.pass--clay { --pass-bg: #f2e5df; --pass-ink: #845c4a; --pass-line: #d9b9aa; --pass-track: #e7d0c4; }
+.pass-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20rpx; }
+.pass-identity { min-width: 0; flex: 1; }
+.pass-kind { display: block; font-size: 18rpx; letter-spacing: 2rpx; }
+.pass-name { display: block; margin-top: 12rpx; font-family: 'Songti SC', 'STSong', serif; font-size: 34rpx; line-height: 1.4; overflow-wrap: anywhere; }
+.pass-mark { flex-shrink: 0; font-size: 21rpx; padding-top: 4rpx; }
+.pass-balance { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10rpx; margin-top: 30rpx; }
+.balance-label, .balance-unit { font-size: 23rpx; }
+.balance-number { font-family: 'Baskerville', 'Times New Roman', serif; font-size: 60rpx; line-height: 1.2; font-variant-numeric: tabular-nums; }
+.usage-label { font-size: 23rpx; margin-left: auto; }
+.usage-track { height: 7rpx; border-radius: 8rpx; background: var(--pass-track); overflow: hidden; margin-top: 22rpx; }
+.usage-fill { height: 100%; background: var(--pass-ink); border-radius: 8rpx; }
+.pass-rule { height: 1rpx; margin-top: 22rpx; background: var(--pass-line); }
+.pass-dates { display: flex; justify-content: space-between; gap: 16rpx; margin-top: 18rpx; font-size: 22rpx; font-variant-numeric: tabular-nums; }
+.expiry-soon { font-weight: 600; }
+.pass--compact { height: 100%; padding: 24rpx; border-radius: 20rpx; .pass-name { font-size: 30rpx; margin-top: 8rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pass-balance { margin-top: 18rpx; } .balance-number { font-size: 42rpx; } .usage-label { font-size: 21rpx; } .pass-dates { justify-content: flex-end; font-size: 21rpx; margin-top: 14rpx; } .usage-track, .pass-rule { margin-top: 16rpx; } }
+</style>
--- a/packages/app/src/components/UserCard.vue
+++ b/packages/app/src/components/UserCard.vue
@@ -49,36 +49,35 @@
      </view>
    </view>

-    <!-- Stats row: shown only when profile is loaded -->
-    <view v-if="loggedIn && hasProfile" class="user-card__stats">
-      <view class="user-card__stat-item">
-        <text class="user-card__stat-value">{{ stats?.totalBookings ?? '—' }}</text>
-        <text class="user-card__stat-label">累计上课 · 节</text>
-      </view>
-      <view class="user-card__stat-divider" />
-      <view class="user-card__stat-item">
-        <text class="user-card__stat-value">{{ stats?.monthBookings ?? '—' }}</text>
-        <text class="user-card__stat-label">本月上课 · 节</text>
-      </view>
-      <view class="user-card__stat-divider" />
-      <view class="user-card__stat-item">
-        <text class="user-card__stat-value">{{ remainingSessions }}</text>
-        <text class="user-card__stat-label">剩余课时 · 节</text>
-      </view>
+    <button v-if="loggedIn && hasProfile" class="membership-row" @tap="handleMembershipTap">
+      <text class="membership-row__label">会员卡</text>
+      <text class="membership-row__value">{{ membershipLabel }}</text>
+      <text v-if="!membershipsError && membershipsLoaded && activeMemberships.length > 1" class="membership-row__count">{{ activeMemberships.length }} 张</text>
+      <text class="membership-row__arrow">›</text>
+    </button>
+    <view v-if="loggedIn && hasProfile && membershipsLoaded && !membershipsError && activeMemberships.length" class="mini-progress-list">
+      <button v-for="item in cardProgress" :key="item.id" class="mini-progress" :aria-label="`${item.name}，${item.label}`" @tap="handleMembershipTap">
+        <view v-if="item.percent !== null" class="mini-progress__fill" :style="{ width: `${item.percent}%` }" />
+        <view class="mini-progress__heading"><text class="mini-progress__name">{{ item.name }}</text><text class="mini-progress__usage">{{ item.label }}</text></view>
+      </button>
    </view>
  </view>
 </template>

 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
-import type { UserProfileResponse, UserStatsResponse, MembershipWithCardType } from '@mp-pilates/shared'
+import type { UserProfileResponse, MembershipWithCardType } from '@mp-pilates/shared'
 import { MembershipStatus } from '@mp-pilates/shared'
+import { getCardTypeLabel, getMembershipTotalTimes, getMembershipUsedTimes } from '../utils/format'

 const props = defineProps<{
  loggedIn: boolean
  hasProfile: boolean
  user: UserProfileResponse | null
-  stats: UserStatsResponse | null
+  now: number
+  membershipsLoading?: boolean
+  membershipsLoaded?: boolean
+  membershipsError?: boolean
  memberships?: readonly MembershipWithCardType[]
  loading?: boolean
 }>()
@@ -86,6 +85,7 @@ const props = defineProps<{
 const emit = defineEmits<{
  (e: 'login'): void
  (e: 'edit'): void
+  (e: 'refresh-memberships'): void
 }>()

 const avatarFailed = ref(false)
@@ -123,16 +123,32 @@ const activeMembershipCount = computed(

 const hasMembership = computed(() => activeMembershipCount.value > 0)

-function toSafeCount(value: number | null | undefined): number {
-  return typeof value === 'number' && Number.isFinite(value) ? value : 0
-}
+const membershipLabel = computed(() => {
+  if (props.membershipsError) return '暂未更新，点击重试'
+  if (!props.membershipsLoaded) return '加载中…'
+  if (!activeMemberships.value.length) return '暂无有效卡'
+  return [...new Set(activeMemberships.value.map(m => getCardTypeLabel(m.cardType.type)))].join(' · ')
+})
+const cardProgress = computed(() => activeMemberships.value.map(m => {
+  const total = getMembershipTotalTimes(m)
+  if (m.remainingTimes !== null) {
+    const used = getMembershipUsedTimes(m)
+    return { id: m.id, name: m.cardType.name,
+      label: total && total > 0 ? `已用 ${used}/${total} 次 · 余 ${m.remainingTimes}` : `剩余 ${m.remainingTimes} 次`,
+      percent: total && total > 0 ? Math.max(0, Math.min(100, used / total * 100)) : null }
+  }
+  const start = new Date(m.startDate).getTime()
+  const end = new Date(m.expireDate).getTime()
+  const remainingDays = Math.max(0, Math.ceil((end - props.now) / 86400000))
+  return { id: m.id, name: m.cardType.name,
+    label: `不限次 · 有效期剩 ${remainingDays} 天`,
+    percent: end > start ? Math.max(0, Math.min(100, (end - props.now) / (end - start) * 100)) : null }
+}))

-// Sum remaining sessions from all active count-limited memberships.
-const remainingSessions = computed(() =>
-  activeMemberships.value
-    .filter((m) => m.remainingTimes !== null)
-    .reduce((sum, m) => sum + toSafeCount(m.remainingTimes), 0),
-)
+function handleMembershipTap() {
+  if (props.membershipsError) { emit('refresh-memberships'); return }
+  uni.navigateTo({ url: '/pages/profile/membership' })
+}

 function onAvatarError() {
  avatarFailed.value = true
@@ -155,11 +171,6 @@ function handleLogin() {
  &__member-label { flex-shrink: 0; font-size: 19rpx; color: #8b6c5b; background: #fbf5ef; padding: 4rpx 12rpx; border-radius: 999rpx; }
  &__phone { font-size: 24rpx; color: #8b7b70; }
  &__edit { flex-shrink: 0; font-size: 22rpx; color: #8b7b70; padding: 16rpx 0 16rpx 8rpx; }
-  &__stats { display: flex; align-items: stretch; margin-top: 28rpx; padding-top: 26rpx; border-top: 1rpx solid #e3d7ce; }
-  &__stat-item { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 10rpx; }
-  &__stat-value { font-size: 40rpx; font-weight: 400; color: #6f5c50; line-height: 1.15; font-variant-numeric: tabular-nums; }
-  &__stat-label { font-size: 20rpx; color: #8b7b70; }
-  &__stat-divider { width: 1rpx; margin: 6rpx 0; background: #e3d7ce; }
  &__guest { display: flex; align-items: center; flex-wrap: wrap; gap: 20rpx; }
  &__guest-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10rpx; }
  &__guest-title { font-size: 32rpx; font-weight: 500; color: #514943; }
@@ -169,4 +180,15 @@ function handleLogin() {
  &__nickname-skeleton { width: 150rpx; height: 32rpx; border-radius: 8rpx; background: #e6d9ce; }
  &__phone-skeleton { width: 180rpx; height: 22rpx; border-radius: 6rpx; background: #e6d9ce; }
 }
+.membership-row { display: flex; align-items: center; gap: 12rpx; width: 100%; margin: 20rpx 0 0; padding: 18rpx 0 0; min-height: 62rpx; border-radius: 0; border-top: 1rpx solid #e3d7ce; background: transparent; text-align: left; line-height: 1.5; font-size: 23rpx; color: #796759; &::after { border: none; } }
+.membership-row__label { flex-shrink: 0; color: #8b7b70; }
+.membership-row__value { flex: 1; min-width: 0; text-align: right; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.membership-row__count { flex-shrink: 0; font-size: 21rpx; color: #8b7b70; }
+.membership-row__arrow { flex-shrink: 0; font-size: 28rpx; color: #8b7b70; }
+.mini-progress-list { margin-top: 12rpx; display: flex; flex-direction: column; gap: 8rpx; }
+.mini-progress { position: relative; display: block; width: 100%; height: 48rpx; margin: 0; padding: 0 16rpx; overflow: hidden; border: 1rpx solid #d6d9ca; border-radius: 10rpx; background: #eeece4; text-align: left; line-height: 46rpx; &::after { border: none; } &:active { opacity: .8; } }
+.mini-progress__heading { position: relative; z-index: 1; display: flex; align-items: center; gap: 12rpx; height: 100%; font-size: 20rpx; color: #46513f; }
+.mini-progress__name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.mini-progress__usage { flex-shrink: 0; font-variant-numeric: tabular-nums; }
+.mini-progress__fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #dce3d3, #c9d7bf); border-right: 1rpx solid rgba(109, 135, 91, .16); }
 </style>
--- a/packages/app/src/pages/profile/index.vue
+++ b/packages/app/src/pages/profile/index.vue
@@ -5,8 +5,9 @@
    </view>

    <!-- User card -->
-    <UserCard :logged-in="loggedIn" :has-profile="hasProfile" :user="user" :stats="stats" :memberships="memberships"
-      :loading="loginLoading" @login="handleLogin" @edit="goToInfo" />
+    <UserCard :logged-in="loggedIn" :has-profile="hasProfile" :user="user" :memberships="memberships" :now="membershipNow"
+      :memberships-loading="membershipsLoading" :memberships-loaded="membershipsLoaded" :memberships-error="membershipsError"
+      :loading="loginLoading" @login="handleLogin" @edit="goToInfo" @refresh-memberships="userStore.fetchMemberships()" />

    <InviteCard />

@@ -47,10 +48,11 @@ import ProfileMenu from '../../components/ProfileMenu.vue'
 const invite = useInviteStore()
 const userStore = useUserStore()
 const bookingStore = useBookingStore()
-const { loggedIn, hasProfile, user, stats, memberships, isAdmin } = storeToRefs(userStore)
+const { loggedIn, hasProfile, user, memberships, membershipsLoading, membershipsLoaded, membershipsError, isAdmin } = storeToRefs(userStore)
 const { upcomingBookings } = storeToRefs(bookingStore)

 const activityRefreshKey = ref(0)
+const membershipNow = ref(Date.now())
 const loginLoading = ref(false)
 const navBarHeight = ref(getSystemLayout().navBarHeight)
 const statusBarHeight = getSystemLayout().statusBarHeight
@@ -84,13 +86,13 @@ onMounted(() => {
 })

 onShow(async () => {
+  membershipNow.value = Date.now()
  activityRefreshKey.value += 1
  if (loggedIn.value) {
    await Promise.all([
      invite.refresh().catch(() => {}),
      invite.refreshActivity().catch(() => {}),
      userStore.fetchProfile(),
-      userStore.fetchStats(),
      userStore.fetchMemberships(),
      bookingStore.fetchUpcomingBookings(),
    ])
@@ -105,7 +107,6 @@ async function handleLogin() {
    if (!isNewUser) {
      await Promise.all([
        invite.refreshActivity().catch(() => {}),
-        userStore.fetchStats(),
        bookingStore.fetchUpcomingBookings(),
      ])
    }
--- a/packages/app/src/pages/profile/membership.vue
+++ b/packages/app/src/pages/profile/membership.vue
@@ -2,7 +2,19 @@
  <view class="membership-page" :style="{ paddingTop: navBarHeight, height: pageHeight }">
    <CustomNavBar title="我的会员卡" show-back />
    <scroll-view class="scroll" scroll-y refresher-enabled :refresher-triggered="refreshing" @refresherrefresh="onRefresh">
-      <view v-if="loading && !refreshing && !allMemberships.length" class="loading-wrap">
+      <view v-if="userStore.loggedIn" class="practice-summary">
+        <view class="summary-heading"><text class="summary-kicker">MY PRACTICE</text><text class="summary-title">每一次练习，都在积累。</text></view>
+        <view class="summary-grid">
+          <view><text class="summary-value">{{ userStore.statsError ? '—' : userStore.stats?.totalBookings ?? '—' }}</text><text class="summary-label">累计上课 · 节</text></view>
+          <view><text class="summary-value">{{ userStore.statsError ? '—' : userStore.stats?.monthBookings ?? '—' }}</text><text class="summary-label">本月上课 · 节</text></view>
+          <view><text class="summary-value">{{ remainingLabel }}</text><text class="summary-label">剩余课时{{ finiteBalance > 0 || !unlimitedCount ? ' · 次' : '' }}</text></view>
+        </view>
+        <text v-if="unlimitedCount && finiteBalance > 0 && !userStore.membershipsError" class="summary-note">另有 {{ unlimitedCount }} 张有效不限次卡，可在有效期内预约</text>
+        <button v-if="userStore.statsError" class="summary-retry" @tap="userStore.fetchStats()">练习统计暂时无法更新，点击重试 ›</button>
+      </view>
+      <view v-if="!userStore.loggedIn" class="empty-wrap"><view class="empty-card"><text class="empty-title">登录后查看会员卡</text><button class="empty-btn" @tap="goProfile">前往个人中心</button></view></view>
+      <view v-else-if="userStore.membershipsError" class="empty-wrap"><view class="empty-card"><text class="empty-title">会员卡暂时未能更新</text><text class="empty-sub">请重试后查看最新余额和有效期。</text><button class="empty-btn" @tap="loadMemberships">重新加载</button></view></view>
+      <view v-else-if="loading && !refreshing && !allMemberships.length" class="loading-wrap">
        <view v-for="i in 2" :key="i" class="skeleton-card" />
      </view>

@@ -20,40 +32,15 @@
            <text class="group-title">正在使用</text>
            <text class="group-count">{{ activeMemberships.length }} 张有效卡</text>
          </view>
-          <view v-for="m in activeMemberships" :key="m.id" class="mc" :class="cardBgClass(m.cardType.type)">
-            <view class="mc-top">
-              <view class="mc-name-area">
-                <text class="mc-name">{{ m.cardType.name }}</text>
-                <text class="mc-type-text">{{ getCardTypeLabel(m.cardType.type) }}</text>
-              </view>
-              <text class="mc-status mc-status--active">有效</text>
-            </view>
-            <view class="mc-balance">
-              <view class="mc-number-row">
-                <text class="mc-big-num">{{ m.remainingTimes !== null ? m.remainingTimes : daysRemaining(m) }}</text>
-                <text class="mc-big-unit">{{ m.remainingTimes !== null ? '次可用' : '天剩余' }}</text>
-              </view>
-              <text v-if="m.remainingTimes === null" class="mc-duration-note">有效期内不限次数</text>
-              <view v-else-if="getMembershipTotalTimes(m)" class="mc-progress">
-                <view class="mc-progress-track"><view class="mc-progress-fill" :style="{ width: getMembershipProgressWidth(m) }" /></view>
-                <text class="mc-progress-label">已用 {{ getMembershipUsedTimes(m) }} / {{ getMembershipTotalTimes(m) }} 次</text>
-              </view>
-            </view>
-            <view class="mc-bottom">
-              <view class="mc-date-item">
-                <text class="mc-date-label">开始日期</text>
-                <text class="mc-date-value">{{ m.startDate.slice(0, 10) }}</text>
-              </view>
-              <view class="mc-date-item mc-date-item--end">
-                <text class="mc-date-label">有效期至</text>
-                <text class="mc-date-value">{{ m.expireDate.slice(0, 10) }}</text>
-              </view>
-            </view>
+          <view v-for="m in activeMemberships" :key="m.id" class="owned-card-wrap">
+            <OwnedMembershipCard :membership="m" :now="membershipNow">
              <view class="mc-actions">
                <button v-if="canRenewMembership(m)" class="mc-renew" @tap="goRenew(m)">续卡</button>
                <button class="mc-book" @tap="goBooking">预约课程</button>
              </view>
+            </OwnedMembershipCard>
          </view>
+          <text class="usage-note">已用次数包含预约扣次，不等同于已完成上课；进度条表示已用次数占比。</text>
        </view>

        <view v-if="inactiveMemberships.length" class="group-section">
@@ -81,7 +68,7 @@
      </view>
      <view class="scroll-bottom-spacer" />
    </scroll-view>
-    <view v-if="allMemberships.length" class="purchase-dock">
+    <view v-if="userStore.loggedIn && allMemberships.length" class="purchase-dock">
      <button class="purchase-btn" @tap="goStore">选购会员卡</button>
    </view>
  </view>
@@ -94,15 +81,17 @@ import type { MembershipWithCardType } from '@mp-pilates/shared'
 import { MembershipStatus, CardTypeCategory } from '@mp-pilates/shared'
 import { useUserStore } from '../../stores/user'
 import { getSystemLayout } from '../../utils/system'
-import { getCardTypeLabel, getMembershipProgressWidth, getMembershipUsedTimes, getMembershipTotalTimes } from '../../utils/format'
+import { getCardTypeLabel } from '../../utils/format'
 import CustomNavBar from '../../components/CustomNavBar.vue'
+import OwnedMembershipCard from '../../components/OwnedMembershipCard.vue'

 const userStore = useUserStore()

 const navBarHeight = `${getSystemLayout().navBarHeight}px`
 const pageHeight = ref(`${uni.getWindowInfo().windowHeight}px`)
 onResize(() => { pageHeight.value = `${uni.getWindowInfo().windowHeight}px` })
-const loading = ref(false)
+const loading = computed(() => userStore.membershipsLoading)
+const membershipNow = ref(Date.now())
 const refreshing = ref(false)

 const allMemberships = computed(() => userStore.memberships as MembershipWithCardType[])
@@ -129,36 +118,23 @@ function inactiveStatusClass(status: MembershipStatus): string {
  return 'mc-status--expired'
 }

-function cardBgClass(type: CardTypeCategory): string {
-  if (type === CardTypeCategory.TRIAL) return 'mc--trial'
-  if (type === CardTypeCategory.DURATION) return 'mc--duration'
-  return 'mc--times'
-}
-
-function daysRemaining(m: MembershipWithCardType): number {
-  const diff = new Date(m.expireDate).getTime() - Date.now()
-  return Math.max(0, Math.ceil(diff / 86_400_000))
-}
+const finiteBalance = computed(() => activeMemberships.value.reduce((sum, m) => sum + Math.max(0, m.remainingTimes ?? 0), 0))
+const unlimitedCount = computed(() => activeMemberships.value.filter(m => m.remainingTimes === null).length)
+const remainingLabel = computed(() => !userStore.membershipsLoaded || userStore.membershipsError ? '—' : finiteBalance.value > 0 ? finiteBalance.value : unlimitedCount.value ? '不限次' : 0)

 async function loadMemberships() {
-  loading.value = true
-  try {
-    await userStore.fetchMemberships()
-  } catch {
-    uni.showToast({ title: '加载失败，请下拉刷新', icon: 'none' })
-  } finally {
-    loading.value = false
-  }
+  membershipNow.value = Date.now()
+  if (!userStore.loggedIn) return
+  await Promise.all([userStore.fetchMemberships(), userStore.fetchStats()])
 }

 async function onRefresh() {
+  if (refreshing.value) return
  refreshing.value = true
-  try {
-    await userStore.fetchMemberships()
-  } finally {
-    refreshing.value = false
-  }
+  try { await loadMemberships() }
+  finally { refreshing.value = false }
 }
+function goProfile() { uni.switchTab({ url: '/pages/profile/index' }) }

 function goBooking() {
  uni.switchTab({ url: '/pages/booking/index' })
@@ -196,28 +172,12 @@ onShow(loadMemberships)
 .group-title { font-size: 28rpx; font-weight: 500; }
 .group-count { font-size: 22rpx; color: #8b817b; }
 .mc { --balance-bg: #f3ebe3; --balance-ink: #8b6c5b; padding: 28rpx; margin-bottom: 20rpx; border: 1rpx solid #eee8e3; border-radius: 28rpx; background: #fff; }
-.mc--duration { --balance-bg: #edf2e9; --balance-ink: #617d63; }
-.mc--trial { --balance-bg: #f5e9e5; --balance-ink: #9b7768; }
 .mc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20rpx; }
 .mc-name-area { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8rpx; }
 .mc-name { font-size: 30rpx; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; }
 .mc-type-text { font-size: 22rpx; color: #8b817b; }
 .mc-status { flex-shrink: 0; padding: 6rpx 16rpx; border-radius: 999rpx; background: #ede9e4; color: #8b817b; font-size: 21rpx; line-height: 1.4; }
-.mc-status--active { background: #edf2ec; color: #617d73; }
-.mc-balance { margin-top: 24rpx; padding: 22rpx 24rpx; background: var(--balance-bg); border-radius: 20rpx; }
-.mc-number-row { display: flex; align-items: baseline; gap: 10rpx; }
-.mc-big-num { font-size: 56rpx; font-weight: 400; line-height: 1.1; color: var(--balance-ink); font-variant-numeric: tabular-nums; }
-.mc-big-unit { font-size: 23rpx; color: var(--balance-ink); }
-.mc-duration-note { display: block; font-size: 21rpx; color: #7b8775; margin-top: 12rpx; }
-.mc-progress { margin-top: 18rpx; }
-.mc-progress-track { height: 6rpx; border-radius: 6rpx; overflow: hidden; background: rgba(255,255,255,0.8); }
-.mc-progress-fill { height: 100%; border-radius: 6rpx; background: #b9a38f; }
-.mc-progress-label { display: block; margin-top: 10rpx; font-size: 21rpx; color: #8b7b70; }
-.mc-bottom { display: flex; justify-content: space-between; gap: 20rpx; margin-top: 22rpx; }
-.mc-date-item { min-width: 0; display: flex; flex-direction: column; gap: 8rpx; }
-.mc-date-item--end { text-align: right; }
 .mc-date-label { font-size: 21rpx; color: #8b817b; line-height: 1.6; }
-.mc-date-value { font-size: 24rpx; color: #6f655e; font-variant-numeric: tabular-nums; }
 .mc-actions { display: flex; gap: 16rpx; margin-top: 26rpx; }
 .mc-renew, .mc-book { flex: 1; margin: 0; padding: 0 24rpx; height: 72rpx; line-height: 72rpx; border: none; border-radius: 999rpx; font-size: 25rpx; font-weight: 400; &::after { border: none; } }
 .mc-renew { background: #f3eee8; color: #8b7160; }
@@ -229,4 +189,16 @@ onShow(loadMemberships)
 .purchase-dock { flex-shrink: 0; padding: 20rpx 32rpx calc(20rpx + env(safe-area-inset-bottom)); border-top: 1rpx solid #eee8e3; background: #fbf9f6; }
 .purchase-btn { display: block; width: 100%; margin: 0; padding: 0; height: 84rpx; line-height: 84rpx; border: none; border-radius: 999rpx; background: #6b8276; color: #fff; font-size: 28rpx; font-weight: 400; &::after { border: none; } }
 .scroll-bottom-spacer { height: 20rpx; }
+.practice-summary { padding: 32rpx; margin: 24rpx 32rpx 0; border-radius: 24rpx; background: #eef1e9; border: 1rpx solid #dce3d4; color: #465c4a; }
+.summary-heading { display: flex; flex-direction: column; gap: 12rpx; }
+.summary-kicker { font-size: 18rpx; letter-spacing: 3rpx; color: #6d7d64; }
+.summary-title { font-size: 32rpx; font-family: 'Songti SC', 'STSong', serif; }
+.summary-grid { display: flex; margin-top: 30rpx; padding-top: 24rpx; border-top: 1rpx solid #d4dec9; }
+.summary-grid > view { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12rpx; text-align: center; }
+.summary-grid > view + view { border-left: 1rpx solid #d4dec9; }
+.summary-value { font-size: 42rpx; font-family: 'Baskerville', 'Times New Roman', serif; line-height: 1.3; font-variant-numeric: tabular-nums; }
+.summary-label { font-size: 20rpx; color: #6d7d64; }
+.summary-note, .usage-note { display: block; font-size: 21rpx; line-height: 1.8; color: #78816f; margin-top: 18rpx; }
+.summary-retry { padding: 16rpx 0 0; margin: 0; color: #6d7d64; text-align: left; background: transparent; font-size: 23rpx; &::after { border: 0; } }
+.owned-card-wrap { margin-bottom: 20rpx; }
 </style>
--- a/packages/app/src/stores/user.ts
+++ b/packages/app/src/stores/user.ts
@@ -26,6 +26,13 @@ export const useUserStore = defineStore('user', () => {
  const user = ref<UserProfileResponse | null>(null)
  const stats = ref<UserStatsResponse | null>(null)
  const memberships = ref<readonly MembershipWithCardType[]>([])
+  const membershipsLoading = ref(false)
+  const membershipsLoaded = ref(false)
+  const membershipsError = ref(false)
+  const statsLoading = ref(false)
+  const statsError = ref(false)
+  let membershipRequestId = 0
+  let statsRequestId = 0
  const token = ref<string>(uni.getStorageSync('token') as string || '')

  // Getters
@@ -82,23 +89,42 @@ export const useUserStore = defineStore('user', () => {
    }
  }

-  async function fetchStats() {
-    if (!isLoggedIn()) return
+  async function fetchStats(): Promise<boolean> {
+    if (!isLoggedIn()) return false
+    const id = ++statsRequestId
+    const session = token.value
+    statsLoading.value = true
+    statsError.value = false
    try {
-      stats.value = await get<UserStatsResponse>('/user/stats')
-    } catch (err) {
-      console.error('Fetch stats failed:', err)
+      const result = await get<UserStatsResponse>('/user/stats')
+      if (id !== statsRequestId || session !== token.value) return false
+      stats.value = result
+      return true
+    } catch {
+      if (id === statsRequestId && session === token.value) statsError.value = true
+      return false
+    } finally {
+      if (id === statsRequestId && session === token.value) statsLoading.value = false
    }
  }

  async function fetchMemberships(): Promise<boolean> {
    if (!isLoggedIn()) return false
+    const id = ++membershipRequestId
+    const session = token.value
+    membershipsLoading.value = true
+    membershipsError.value = false
    try {
-      memberships.value = await get<MembershipWithCardType[]>('/membership/my')
+      const result = await get<MembershipWithCardType[]>('/membership/my')
+      if (id !== membershipRequestId || session !== token.value) return false
+      memberships.value = [...result]
+      membershipsLoaded.value = true
      return true
-    } catch (err) {
-      console.error('Fetch memberships failed:', err)
+    } catch {
+      if (id === membershipRequestId && session === token.value) membershipsError.value = true
      return false
+    } finally {
+      if (id === membershipRequestId && session === token.value) membershipsLoading.value = false
    }
  }

@@ -122,6 +148,13 @@ export const useUserStore = defineStore('user', () => {
  }

  function clearSession() {
+    membershipRequestId++
+    statsRequestId++
+    membershipsLoading.value = false
+    membershipsLoaded.value = false
+    membershipsError.value = false
+    statsLoading.value = false
+    statsError.value = false
    token.value = ''
    useInviteStore().reset()
    user.value = null
@@ -138,6 +171,11 @@ export const useUserStore = defineStore('user', () => {
  setUnauthorizedHandler(clearSession)

  return {
+    membershipsLoading,
+    membershipsLoaded,
+    membershipsError,
+    statsLoading,
+    statsError,
    user,
    stats,
    memberships,