cfc/cfc-frontend/pages/profile-main/profile.vue

<template>
  <view class="container">

    <!-- 未登录 -->
    <view v-if="!isLoggedIn">
      <view class="login-prompt">
        <text class="prompt-icon">👤</text>
        <text class="prompt-title">登录浠艾福</text>
        <text class="prompt-desc">登录后查看个人资料、积分记录、能量数据与家庭管理</text>
        <button class="login-btn" @click="goLogin">登录 / 注册</button>
        <text class="skip-link" @click="goSkip">暂不登录，先逛逛 ›</text>
      </view>

      <!-- 理念卡 -->
      <view class="philosophy-card">
        <text class="philosophy-title">照顾家庭，从照顾好自己开始</text>
        <text class="philosophy-desc">你的状态，就是家的状态。先安顿好自己，才有余力温暖家人。</text>
      </view>
    </view>

    <!-- 已登录 -->
    <template v-else>
      <!-- 退出切换 -->
      <view class="exit-switch" v-if="isSwitchedChild" @click="onExitSwitch">
        <text>🔄 退出切换</text>
      </view>

      <!-- 用户身份卡片 -->
      <view class="user-card">
        <view class="user-card-left">
          <view class="avatar-wrap" @click="goToEditInfo">
            <image v-if="userInfo.avatar" class="avatar-img" :src="userInfo.avatar" mode="aspectFill" />
            <text v-else class="avatar-text">{{ nickname.charAt(0) || '👤' }}</text>
          </view>
          <view class="user-meta">
            <view class="user-name-row">
              <text class="nickname">{{ nickname || '未设置昵称' }}</text>
              <text class="role-tag">{{ roleLabel }}</text>
            </view>
            <view class="user-sub" v-if="memberLevel">
              <view class="level-badge" :class="'level-' + memberLevel">{{ memberLevelText }}</view>
              <text v-if="isLifetime" class="days-left">永久有效</text>
              <text v-else-if="membershipDays > 0 && membershipDays <= 30" class="days-left">剩余 {{ membershipDays }} 天</text>
              <view v-if="hasUpgradeSpace" class="upgrade-btn" @click="goUpgrade">
                <text class="upgrade-btn-text">{{ upgradeBtnText }}</text>
              </view>
            </view>
            <view class="user-sub" v-else>
              <text class="days-left">开通会员解锁更多权益</text>
              <view class="upgrade-btn" @click="goUpgrade">
                <text class="upgrade-btn-text">立即开通</text>
              </view>
            </view>
          </view>
        </view>
        <view class="user-card-right">
          <view class="points-box" @click="goToPoints">
            <text class="points-num">{{ totalPoints }}</text>
            <text class="points-label">积分</text>
          </view>
        </view>
      </view>

      <!-- 核心数据概览 -->
      <view class="stats-bar">
        <view class="stat-item" @click="goToTasks">
          <text class="stat-num">{{ pendingTasks }}</text>
          <text class="stat-label">待完成任务</text>
        </view>
        <view class="stat-divider"></view>
        <view class="stat-item" @click="goToCheckin">
          <text class="stat-num">{{ streakDays }}</text>
          <text class="stat-label">连续打卡</text>
        </view>
        <view class="stat-divider"></view>
        <view class="stat-item" @click="goToFamily">
          <text class="stat-num">{{ familyCount }}</text>
          <text class="stat-label">家庭成员</text>
        </view>
        <view class="stat-divider"></view>
        <view class="stat-item" @click="goToChallenges">
          <text class="stat-num">{{ activeChallenges }}</text>
          <text class="stat-label">进行中挑战</text>
        </view>
      </view>

      <!-- 商城订单快捷 -->
      <view class="mall-section" v-if="totalPoints > 0">
        <view class="mall-header" @click="goToOrders">
          <text class="mall-title">🛒 商城订单</text>
          <text class="mall-more">全部订单 ›</text>
        </view>
        <view class="mall-grid">
          <view class="mall-item" @click="goToOrders">
            <text class="mall-item-num" v-if="orderPending > 0">{{ orderPending }}</text>
            <text class="mall-item-num" v-else>0</text>
            <text class="mall-item-label">待审核</text>
          </view>
          <view class="mall-item" @click="goToOrders">
            <text class="mall-item-num" v-if="orderUnpaid > 0">{{ orderUnpaid }}</text>
            <text class="mall-item-num" v-else>0</text>
            <text class="mall-item-label">待付款</text>
          </view>
          <view class="mall-item" @click="goToOrders">
            <text class="mall-item-num" v-if="orderShipped > 0">{{ orderShipped }}</text>
            <text class="mall-item-num" v-else>0</text>
            <text class="mall-item-label">待发货</text>
          </view>
          <view class="mall-item" @click="goToOrders">
            <text class="mall-item-num" v-if="orderAfterSale > 0">{{ orderAfterSale }}</text>
            <text class="mall-item-num" v-else>0</text>
            <text class="mall-item-label">售后</text>
          </view>
        </view>
      </view>

      <!-- 推广中心快捷 -->
      <view class="mall-section" v-if="commissionBalance > 0 || referralCount > 0 || teamCount > 0">
        <view class="mall-header" @click="goToPromotion">
          <text class="mall-title">💰 推广中心</text>
          <text class="mall-more">进入 ›</text>
        </view>
        <view class="mall-grid">
          <view class="mall-item" @click="goToPromotion">
            <text class="mall-item-num">{{ commissionBalance }}</text>
            <text class="mall-item-label">可提现</text>
          </view>
          <view class="mall-item" @click="goToPromotion">
            <text class="mall-item-num">{{ referralCount }}</text>
            <text class="mall-item-label">邀请人数</text>
          </view>
          <view class="mall-item" @click="goToPromotion">
            <text class="mall-item-num">{{ teamCount }}</text>
            <text class="mall-item-label">团队人数</text>
          </view>
        </view>
      </view>

      <!-- 待办提醒 -->
      <view class="reminders-section" v-if="hasReminders">
        <view class="section-header">
          <text class="section-title">📌 待办提醒</text>
        </view>
        <view class="reminder-item" v-if="pendingTasks > 0" @click="goToTasks">
          <text class="reminder-icon">📋</text>
          <text class="reminder-text">有 {{ pendingTasks }} 个任务待完成</text>
          <text class="reminder-arrow">›</text>
        </view>
        <view class="reminder-item" v-if="activeChallenges > 0" @click="goToChallenges">
          <text class="reminder-icon">🔥</text>
          <text class="reminder-text">{{ activeChallenges }} 个挑战进行中</text>
          <text class="reminder-arrow">›</text>
        </view>
        <view class="reminder-item" v-if="profileProgress < 14" @click="goToEditInfo">
          <text class="reminder-icon">📝</text>
          <text class="reminder-text">个人信息待完善（{{ profileProgress }}/14）</text>
          <text class="reminder-arrow">›</text>
        </view>
      </view>

      <!-- 功能菜单 -->
      <view class="menu-section">
        <!-- 家庭 -->
        <view class="menu-group">
          <view class="menu-group-title">家庭</view>
          <view class="menu-item" @click="goToFamily">
            <text class="menu-icon">👨‍👩‍👧‍👦</text>
            <text class="menu-text">家庭成员</text>
            <text class="arrow">›</text>
          </view>
          <view class="menu-item" @click="goToChildren">
            <text class="menu-icon">👶</text>
            <text class="menu-text">孩子管理</text>
            <text class="arrow">›</text>
          </view>
          <view class="menu-item" v-if="role === 'parent'" @click="goToAppointments">
            <text class="menu-icon">📅</text>
            <text class="menu-text">测评预约</text>
            <text class="arrow">›</text>
          </view>
          <view class="menu-item" @click="goToChallenges">
            <text class="menu-icon">🔥</text>
            <text class="menu-text">家庭挑战</text>
            <text class="arrow">›</text>
          </view>
        </view>

        <!-- 成长 -->
        <view class="menu-group">
          <view class="menu-group-title">成长</view>
          <view class="menu-item" @click="goToTasks">
            <text class="menu-icon">📋</text>
            <text class="menu-text">每日任务</text>
            <text class="arrow">›</text>
          </view>
          <view class="menu-item" @click="goToGrowth">
            <text class="menu-icon">📈</text>
            <text class="menu-text">成长记录</text>
            <text class="arrow">›</text>
          </view>
          <view class="menu-item" @click="goToReport">
            <text class="menu-icon">📊</text>
            <text class="menu-text">健康报告</text>
            <text class="arrow">›</text>
          </view>
        </view>

        <!-- 商城 -->
        <view class="menu-group" v-if="showServices">
          <view class="menu-group-title">商城</view>
          <view class="menu-item" @click="goToPromotion">
            <text class="menu-icon">💰</text>
            <text class="menu-text">推广中心</text>
            <text class="arrow">›</text>
          </view>
          <view class="menu-item" @click="goToOrders">
            <text class="menu-icon">🛒</text>
            <text class="menu-text">我的订单</text>
            <text class="badge" v-if="orderPending + orderUnpaid + orderShipped + orderAfterSale > 0">{{ orderPending + orderUnpaid + orderShipped + orderAfterSale }}</text>
            <text class="arrow">›</text>
          </view>
          <view class="menu-item" @click="goToCart">
            <text class="menu-icon">🛍️</text>
            <text class="menu-text">购物车</text>
            <text class="badge" v-if="cartCount > 0">{{ cartCount }}</text>
            <text class="arrow">›</text>
          </view>
          <view class="menu-item" @click="goToCoupons">
            <text class="menu-icon">🎫</text>
            <text class="menu-text">优惠券</text>
            <text class="arrow">›</text>
          </view>
        </view>

        <!-- 更多 -->
        <view class="menu-group">
          <view class="menu-group-title">更多</view>
          <view class="menu-item" v-if="role === 'parent'" @click="showInviteActionSheet">
            <text class="menu-icon">📨</text>
            <text class="menu-text">邀请加入</text>
            <text class="arrow">›</text>
          </view>
          <view class="menu-item" @click="goToSettings">
            <text class="menu-icon">⚙️</text>
            <text class="menu-text">设置</text>
            <text class="arrow">›</text>
          </view>
          <view class="menu-item" @click="logout">
            <text class="menu-icon">🚪</text>
            <text class="menu-text">退出登录</text>
            <text class="arrow">›</text>
          </view>
        </view>
      </view>
    </template>
    <AIFloatingAvatar />
  </view>
</template>

<script>
import AIFloatingAvatar from '../../components/AIFloatingAvatar.vue'
import {
  getChildren, getVisibleFamilyMembers,
  getTodayTasksByCategory, getChallengeList, getMyMembership,
  verifyPassword, getPointsBalance, getUserInfo,
  cartCount, getOrderCounts, getCommissionSummary, getReferralSummary
} from '../../utils/api.js'

export default {
  components: { AIFloatingAvatar },
  data() {
    return {
      isLoggedIn: false,
      nickname: '',
      role: 'parent',
      isSwitchedChild: false,
      userInfo: {},
      memberLevel: null,
      membershipDays: 0,
      totalPoints: 0,
      pendingTasks: 0,
      streakDays: 0,
      familyCount: 0,
      activeChallenges: 0,
      profileProgress: 0,
      // 商城
      cartCount: 0,
      orderPending: 0,
      orderUnpaid: 0,
      orderShipped: 0,
      orderAfterSale: 0,
      // 推广中心
      commissionBalance: 0,
      referralCount: 0,
      teamCount: 0
    }
  },
  computed: {
    roleLabel() {
      var map = { parent: '家长', child: '孩子', teacher: '规划师' }
      return map[this.role] || '用户'
    },
    memberLevelText() {
      var map = { FREE: '免费用户', FAMILY: '家庭会员', PREMIUM: '高级会员', LIFETIME: '终身会员' }
      return map[this.memberLevel] || this.memberLevel || ''
    },
    isLifetime() {
      return this.memberLevel === 'LIFETIME'
    },
    // 有升级空间：FREE(开通) / FAMILY(升PREMIUM)；PREMIUM已是最高可购买等级，LIFETIME永久有效
    hasUpgradeSpace() {
      return this.memberLevel === 'FREE' || this.memberLevel === 'FAMILY'
    },
    upgradeBtnText() {
      return this.memberLevel === 'FAMILY' ? '升级' : '立即开通'
    },
    hasReminders() {
      return this.pendingTasks > 0 || this.activeChallenges > 0 || this.profileProgress < 14
    }
  },
  onShow() {
    this.isLoggedIn = !!uni.getStorageSync('token')
    if (!this.isLoggedIn) {
      // 未登录：不调用任何需登录接口，仅显示登录引导
      return
    }
    var role = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || 'parent'
    if (role === 'teacher') {
      uni.redirectTo({ url: '/pages/teacher/teacher-profile' })
      return
    }
    this.role = role
    this.isSwitchedChild = uni.getStorageSync('isSwitchedChild') || false
    this.nickname = (uni.getStorageSync('userInfo') || {}).nickname || ''
    this.loadAllData()
  },
  methods: {
    loadAllData() {
      this.loadUserInfo()
      this.loadMembership()
      this.loadPoints()
      this.loadFamily()
      this.loadTasks()
      this.loadChallenges()
      this.loadOrderCounts()
      this.loadCartCount()
      this.loadPromotion()
    },
    loadUserInfo() {
      var self = this
      getUserInfo().then(function(res) {
        if (res && res.code === 200 && res.data) {
          self.userInfo = res.data
          if (!self.nickname) self.nickname = res.data.nickname || ''
          // 个人信息完整度：统计 14 个字段（与 user-edit.vue 表单一致）
          var d = res.data
          var fields = [
            d.avatar, d.nickname, d.realName, d.gender, d.idCard,
            d.birthday, d.birthHour, d.ethnicity, d.bloodType,
            d.highestEducation, d.maritalStatus, d.hobbies, d.dietPreferences,
            d.address
          ]
          var count = 0
          fields.forEach(function(v) {
            if (v !== undefined && v !== null && String(v).trim() !== '') {
              count += 1
            }
          })
          self.profileProgress = count
        }
      }).catch(function() {})
    },
    loadMembership() {
      var self = this
      getMyMembership().then(function(res) {
        if (res && res.data) {
          self.memberLevel = res.data.memberLevel || res.data.levelCode || null
          self.membershipDays = res.data.membershipDays || res.data.daysRemaining || 0
        }
      }).catch(function() {})
    },
    loadPoints() {
      var self = this
      var memberId = uni.getStorageSync('currentChildId') || uni.getStorageSync('userId')
      if (!memberId) return
      getPointsBalance(memberId).then(function(res) {
        if (res && res.data) {
          self.totalPoints = res.data.totalPoints || res.data.points || 0
        }
      }).catch(function() {})
    },
    loadFamily() {
      var self = this
      var childrenRes = getChildren()
      var membersRes = getVisibleFamilyMembers()
      Promise.all([childrenRes, membersRes]).then(function(results) {
        var children = results[0].data || []
        var members = results[1].data || []
        self.familyCount = members.length || children.length
        self.streakDays = parseInt(uni.getStorageSync('streakDays') || 0)
      }).catch(function() {
        self.familyCount = 0
      })
    },
    loadTasks() {
      var self = this
      var memberId = uni.getStorageSync('currentChildId') || uni.getStorageSync('userId')
      if (!memberId) return
      if (self.role === 'child' && memberId) {
        getTodayTasksByCategory(memberId, 'action').then(function(res) {
          if (res && res.data) {
            self.pendingTasks = Array.isArray(res.data) ? res.data.length : 0
          }
        }).catch(function() {})
      }
      self.pendingTasks = parseInt(uni.getStorageSync('pendingTaskCount') || 0)
    },
    loadChallenges() {
      var self = this
      getChallengeList({}).then(function(res) {
        if (res && res.data) {
          self.activeChallenges = Array.isArray(res.data) ? res.data.length : 0
        }
      }).catch(function() {})
    },
    loadOrderCounts() {
      var self = this
      getOrderCounts().then(function(res) {
        if (res && res.data) {
          self.orderPending = res.data.pending || 0
          self.orderUnpaid = res.data.unpaid || res.data.paid || 0
          self.orderShipped = res.data.shipped || 0
          self.orderAfterSale = res.data.refunding || res.data.afterSale || 0
        }
      }).catch(function() {})
    },
    loadCartCount() {
      var self = this
      cartCount().then(function(res) {
        if (res && res.data != null) {
          self.cartCount = res.data || 0
        }
      }).catch(function() {})
    },
    loadPromotion() {
      var self = this
      getCommissionSummary().then(function(res) {
        if (res && res.data) {
          self.commissionBalance = res.data.availableAmount || res.data.balance || 0
        }
      }).catch(function() {})
      getReferralSummary().then(function(res) {
        if (res && res.data) {
          self.referralCount = res.data.totalCount || res.data.count || 0
        }
      }).catch(function() {})
    },
    getDimColor: function(code) {
      var map = {
        body: '#FF8C42', mind: '#FF6B9D', wisdom: '#6366F1',
        action: '#10B981', wealth: '#F59E0B'
      }
      return map[code] || '#999'
    },
    goLogin: function() {
      uni.navigateTo({ url: '/pages/login/login' })
    },
    goSkip: function() {
      uni.switchTab({ url: '/pages/index-home/index' })
    },
    goToEditInfo: function() {
      uni.navigateTo({ url: '/pages/user-edit/user-edit' })
    },
    goToPoints: function() {
      uni.navigateTo({ url: '/pages/points/points' })
    },
    goToTasks: function() {
      uni.navigateTo({ url: '/pages/tasks/tasks' })
    },
    goToCheckin: function() {
      uni.navigateTo({ url: '/pages/health/daily-checkin' })
    },
    goToFamily: function() {
      uni.navigateTo({ url: '/pages/profile-extra/family-members' })
    },
    goToChildren: function() {
      uni.navigateTo({ url: '/pages/profile-extra/children' })
    },
    goToAppointments: function() {
      uni.navigateTo({ url: '/pages/parent/appointments' })
    },
    goToChallenges: function() {
      uni.navigateTo({ url: '/pages/health/challenge-manage' })
    },
    goToGrowth: function() {
      uni.navigateTo({ url: '/pages/growth-main/index' })
    },
    goToReport: function() {
      uni.navigateTo({ url: '/pages/profile/report-management' })
    },
  goToMembership: function() {
    uni.navigateTo({ url: '/pages/membership/index' })
  },
  goUpgrade: function() {
    uni.navigateTo({ url: '/pages/membership/upgrade' })
  },
    goToPromotion: function() {
      uni.navigateTo({ url: '/pages/promotion/index' })
    },
    goToCart: function() {
      uni.navigateTo({ url: '/pages/shop/cart/cart' })
    },
    goToOrders: function() {
      uni.navigateTo({ url: '/pages/shop/order-list/order-list' })
    },
    goToCoupons: function() {
      uni.navigateTo({ url: '/pages/profile-extra/coupons' })
    },
    goToSettings: function() {
      uni.showActionSheet({
        itemList: ['设置密码', '隐私设置', '关于浠艾福'],
        success: function(res) {
          if (res.tapIndex === 0) {
            uni.navigateTo({ url: '/pages/profile/settings' })
          }
        }
      })
    },
    onSwitchMode: function() {
      var self = this
      if (self.role === 'child') {
        uni.showModal({
          title: '验证密码',
          content: '请输入家长密码',
          editable: true,
          success: function(res) {
            if (res.confirm && res.content) {
              verifyPassword(res.content).then(function(result) {
                if (result.code === 200) {
                  self.doSwitchMode()
                } else {
                  uni.showToast({ title: '密码错误', icon: 'none' })
                }
              }).catch(function() {
                uni.showToast({ title: '验证失败', icon: 'none' })
              })
            }
          }
        })
      } else {
        this.doSwitchMode()
      }
    },
    doSwitchMode: function() {
      var self = this
      getChildren().then(function(res) {
        var children = res.data || []
        if (children.length === 0) {
          uni.showModal({
            title: '提示',
            content: '您还没有添加孩子，请先在家庭成员中添加',
            success: function(r) { if (r.confirm) uni.navigateTo({ url: '/pages/profile-extra/family-members' }) }
          })
          return
        }
        if (children.length === 1) {
          self.$store.commit('switchToChild', children[0].id)
          self.role = 'child'
          self.isSwitchedChild = true
          uni.showToast({ title: '已切换为孩子模式', icon: 'success' })
          return
        }
        uni.showActionSheet({
          itemList: children.map(function(c) { return c.nickname }),
          success: function(res) {
            var sel = children[res.tapIndex]
            self.$store.commit('switchToChild', sel.id)
            self.role = 'child'
            self.isSwitchedChild = true
            uni.showToast({ title: '已切换为' + sel.nickname + '模式', icon: 'success' })
          }
        })
      }).catch(function() {})
    },
    onExitSwitch: function() {
      var self = this
      uni.showModal({
        title: '退出切换',
        content: '请输入家长密码以确认退出',
        editable: true,
        success: function(res) {
          if (res.confirm && res.content) {
            verifyPassword(res.content).then(function(result) {
              if (result.code === 200) {
                self.$store.commit('switchBackToParent')
                self.isSwitchedChild = false
                self.role = 'parent'
                uni.showToast({ title: '已退出切换', icon: 'success' })
                uni.reLaunch({ url: '/pages/index-home/index' })
              } else {
                uni.showToast({ title: '密码错误', icon: 'none' })
              }
            }).catch(function() {
              uni.showToast({ title: '验证失败', icon: 'none' })
            })
          }
        }
      })
    },
    showInviteActionSheet: function() {
      var self = this
      var ui = uni.getStorageSync('userInfo') || {}
      var items = ['👨‍👩‍👧‍👦 邀请家人', '👨‍🏫 邀请成长规划师']
      uni.showActionSheet({
        itemList: items,
        success: function(res) {
          var type = res.tapIndex === 0 ? 'family' : 'guide'
          var title = (ui.nickname || '家人') + ' 邀请你加入家庭'
          var path = type === 'guide'
            ? '/pages/login/login?invite_type=guide'
            : '/pages/login/login?invite_type=family'
          self.$emit('invite-generate', { title: title, path: path, imageUrl: '/static/invite-card.png' })
          uni.showToast({ title: '点击右上角转发', icon: 'none' })
        }
      })
    },
    logout: function() {
      uni.showModal({
        title: '确认退出',
        content: '确定要退出登录吗？',
        success: function(res) {
          if (res.confirm) {
            this.$store.commit('logout')
            uni.reLaunch({ url: '/pages/index-home/index' })
          }
        }.bind(this)
      })
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: #f5f7fa;
  padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
}

/* 登录 */
.login-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 200rpx 60rpx;
}
.prompt-icon { font-size: 100rpx; margin-bottom: 30rpx; }
.prompt-title { font-size: 40rpx; font-weight: bold; color: #333; margin-bottom: 16rpx; }
.prompt-desc { font-size: 26rpx; color: #999; margin-bottom: 20rpx; }
.login-btn {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  border-radius: 50rpx;
  font-size: 30rpx;
  padding: 24rpx 80rpx;
}
.skip-link {
  font-size: 26rpx;
  color: #999;
  margin-top: 24rpx;
  text-decoration: underline;
}
.philosophy-card {
  margin: 0 40rpx 48rpx;
  background: linear-gradient(135deg, #fff7ed, rgba(249, 115, 22, 0.06));
  border-radius: 20rpx;
  padding: 28rpx 32rpx;
  border-left: 6rpx solid #F97316;
}
.philosophy-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
}
.philosophy-desc {
  font-size: 24rpx;
  color: #888;
  line-height: 1.6;
  display: block;
}

/* 退出切换 */
.exit-switch {
  margin: 0 30rpx 16rpx;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  padding: 16rpx;
  border-radius: 12rpx;
  text-align: center;
  font-size: 26rpx;
}

/* 用户卡片 */
.user-card {
  margin: 30rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 24rpx;
  padding: 36rpx 32rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 8rpx 32rpx rgba(102,126,234,0.3);
}
.user-card-left {
  display: flex;
  align-items: center;
  flex: 1;
}
.avatar-wrap {
  width: 110rpx;
  height: 110rpx;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 24rpx;
  overflow: hidden;
  border: 4rpx solid rgba(255,255,255,0.3);
}
.avatar-img {
  width: 110rpx;
  height: 110rpx;
  border-radius: 50%;
}
.avatar-text {
  font-size: 48rpx;
  color: #fff;
}
.user-meta { flex: 1; }
.user-name-row {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-bottom: 8rpx;
}
.nickname {
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
}
.role-tag {
  font-size: 22rpx;
  background: rgba(255,255,255,0.2);
  color: #fff;
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
}
.user-sub {
  display: flex;
  align-items: center;
  gap: 12rpx;
}
.level-badge {
  font-size: 24rpx;
  padding: 8rpx 22rpx;
  border-radius: 24rpx;
  font-weight: bold;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.2);
  border: 2rpx solid rgba(255,255,255,0.35);
  display: flex;
  align-items: center;
  gap: 6rpx;
  box-sizing: border-box;
  height: 44rpx;
}
.level-badge::before {
  content: '👑';
  font-size: 20rpx;
}
.level-FREE { background: linear-gradient(135deg, #9CA3AF, #6B7280); color: #fff; }
.level-FREE::before { content: ''; }
.level-FAMILY { background: linear-gradient(135deg, #F59E0B, #D97706); color: #fff; }
.level-PREMIUM { background: linear-gradient(135deg, #6366F1, #4F46E5); color: #fff; }
.level-LIFETIME {
  background: linear-gradient(135deg, #EC4899, #DB2777);
  color: #fff;
  box-shadow: 0 4rpx 16rpx rgba(236,72,153,0.45);
  border-color: rgba(255,255,255,0.55);
}
.days-left {
  font-size: 22rpx;
  color: rgba(255,255,255,0.85);
}
.upgrade-btn {
  background: rgba(255,255,255,0.22);
  border: 2rpx solid rgba(255,255,255,0.6);
  border-radius: 22rpx;
  padding: 8rpx 24rpx;
  flex-shrink: 0;
  box-sizing: border-box;
  height: 44rpx;
  display: flex;
  align-items: center;
}
.upgrade-btn-text {
  font-size: 22rpx;
  font-weight: bold;
  color: #fff;
  line-height: 1;
}
.user-card-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rpx;
}
.points-box {
  text-align: center;
  background: rgba(255,255,255,0.15);
  padding: 16rpx 24rpx;
  border-radius: 16rpx;
}

/* 数据概览 */
.stats-bar {
  margin: 0 30rpx 20rpx;
  background: #fff;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  padding: 28rpx 0;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.stat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
}
.stat-num {
  font-size: 40rpx;
  font-weight: bold;
  color: #667eea;
}
.stat-label {
  font-size: 24rpx;
  color: #999;
}
.stat-divider {
  width: 1rpx;
  height: 60rpx;
  background: #f0f0f0;
}

/* 待办提醒 */
.reminders-section {
  margin: 0 30rpx 20rpx;
}
.reminder-item {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx 28rpx;
  margin-bottom: 12rpx;
  display: flex;
  align-items: center;
  gap: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
}
.reminder-icon { font-size: 36rpx; }
.reminder-text { flex: 1; font-size: 28rpx; color: #333; }
.reminder-arrow { font-size: 32rpx; color: #ccc; }

/* 菜单 */
.menu-section {
  margin: 0 30rpx;
}
.menu-group {
  background: #fff;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.menu-group-title {
  padding: 16rpx 28rpx 8rpx;
  font-size: 22rpx;
  color: #999;
}
.menu-item {
  display: flex;
  align-items: center;
  padding: 26rpx 28rpx;
  border-bottom: 1rpx solid #f5f5f5;
}
.menu-item:last-child { border-bottom: none; }
.menu-icon { font-size: 36rpx; margin-right: 16rpx; }
.menu-text { flex: 1; font-size: 28rpx; color: #333; }
.arrow { font-size: 32rpx; color: #ccc; }
.badge {
  background: #FF4D4F;
  color: #fff;
  font-size: 22rpx;
  padding: 2rpx 12rpx;
  border-radius: 20rpx;
  margin-right: 12rpx;
  min-width: 36rpx;
  text-align: center;
}
.mall-section {
  margin: 0 30rpx 20rpx;
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.mall-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 28rpx 16rpx;
  border-bottom: 1rpx solid #f5f5f5;
}
.mall-title { font-size: 30rpx; font-weight: bold; color: #333; }
.mall-more { font-size: 24rpx; color: #999; }
.mall-grid { display: flex; padding: 20rpx 16rpx; }
.mall-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
  padding: 16rpx 0;
}
.mall-item-num { font-size: 36rpx; font-weight: bold; color: #F97316; }
.mall-item-label { font-size: 22rpx; color: #999; }
</style>