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

<template>
  <view class="container">
    <tab-transition v-if="showTabTransition" dimCode="wealth" ref="tabTransition" @close="showTabTransition = false" />

    <!-- 未登录 -->
    <view v-if="!isLoggedIn" 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>
    </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">
              <text class="level-badge" :class="'level-' + memberLevel">{{ memberLevelText }}</text>
              <text v-if="membershipDays > 0 && membershipDays <= 30" class="days-left">剩余 {{ membershipDays }} 天</text>
            </view>
            <view class="user-sub" v-else>
              <text class="days-left">开通会员解锁更多权益</text>
            </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>
          <button v-if="!isSwitchedChild" class="btn-switch" @click="onSwitchMode">切换</button>
        </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="energy-section" v-if="sandboxData">
        <view class="section-header">
          <text class="section-title">🌟 五维能量</text>
          <text class="section-more" @click="goToEnergySandbox">详情 ›</text>
        </view>
        <view class="energy-row">
          <view class="energy-item" v-for="dim in energyDims" :key="dim.code">
            <view class="energy-circle" :style="{ background: dim.color }">
              <text class="energy-val">{{ dim.score || 0 }}</text>
            </view>
            <text class="energy-label">{{ dim.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="goToMembership">
            <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="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 TabTransition from '../../components/tab-transition.vue'
import AIFloatingAvatar from '../../components/AIFloatingAvatar.vue'
import {
  getChildren, getVisibleFamilyMembers, getFamilyEnergySandbox,
  getTodayTasksByCategory, getChallengeList, getMyMembership,
  verifyPassword, getPointsBalance, getUserInfo
} from '../../utils/api.js'

export default {
  components: { TabTransition, AIFloatingAvatar },
  data() {
    return {
      showTabTransition: true,
      nickname: '',
      role: 'parent',
      isSwitchedChild: false,
      userInfo: {},
      memberLevel: null,
      membershipDays: 0,
      totalPoints: 0,
      pendingTasks: 0,
      streakDays: 0,
      familyCount: 0,
      activeChallenges: 0,
      profileProgress: 0,
      sandboxData: null,
      energyDims: []
    }
  },
  computed: {
    isLoggedIn() {
      return !!uni.getStorageSync('token')
    },
    roleLabel() {
      var map = { parent: '家长', child: '孩子', teacher: '规划师' }
      return map[this.role] || '用户'
    },
    memberLevelText() {
      var map = { GOLD: '金卡', PLATINUM: '白金', DIAMOND: '钻石' }
      return map[this.memberLevel] || this.memberLevel || ''
    },
    hasReminders() {
      return this.pendingTasks > 0 || this.activeChallenges > 0 || this.profileProgress < 14
    }
  },
  onShow() {
    this.showTabTransition = true
    if (!this.isLoggedIn) {
      this._watchPageReady()
      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()
    this._watchPageReady()
  },
  methods: {
    _watchPageReady() {
      var self = this
      this.$nextTick(function() {
        if (self.$refs.tabTransition) self.$refs.tabTransition.markReady()
      })
    },
    loadAllData() {
      this.loadUserInfo()
      this.loadMembership()
      this.loadPoints()
      this.loadFamily()
      this.loadSandbox()
      this.loadTasks()
      this.loadChallenges()
    },
    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 || ''
        }
      }).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
      })
    },
    loadSandbox() {
      var self = this
      getFamilyEnergySandbox().then(function(res) {
        if (res && res.data) {
          self.sandboxData = res.data
          var dims = res.data.dimensions || []
          self.energyDims = dims.map(function(d) {
            return {
              code: d.code,
              label: d.label || d.code,
              score: d.score || 0,
              color: self.getDimColor(d.code)
            }
          })
        }
      }).catch(function() {})
    },
    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() {})
    },
    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' })
    },
    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' })
    },
    goToOrders: function() {
      uni.navigateTo({ url: '/pages/shop/order-list/order-list' })
    },
    goToCoupons: function() {
      uni.navigateTo({ url: '/pages/profile-extra/coupons' })
    },
    goToEnergySandbox: function() {
      uni.switchTab({ url: '/pages/index-home/index' })
    },
    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: 120rpx;
}

/* 登录 */
.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: 60rpx; }
.login-btn {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  border-radius: 50rpx;
  font-size: 30rpx;
  padding: 24rpx 80rpx;
}

/* 退出切换 */
.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: 22rpx;
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
  font-weight: 600;
}
.level-GOLD { background: #F59E0B; color: #fff; }
.level-PLATINUM { background: #6366F1; color: #fff; }
.level-DIAMOND { background: #EC4899; color: #fff; }
.days-left {
  font-size: 24rpx;
  color: rgba(255,255,255,0.8);
}
.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;
}
.points-num {
  font-size: 44rpx;
  font-weight: bold;
  color: #fff;
  display: block;
}
.points-label {
  font-size: 22rpx;
  color: rgba(255,255,255,0.7);
}
.btn-switch {
  background: rgba(255,255,255,0.2);
  color: #fff;
  font-size: 24rpx;
  padding: 10rpx 32rpx;
  border-radius: 30rpx;
  border: none;
}

/* 数据概览 */
.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;
}

/* 五维能量 */
.energy-section {
  margin: 0 30rpx 20rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 28rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}
.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}
.section-more {
  font-size: 24rpx;
  color: #999;
}
.energy-row {
  display: flex;
  justify-content: space-around;
}
.energy-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10rpx;
}
.energy-circle {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.15);
}
.energy-val {
  font-size: 28rpx;
  font-weight: bold;
  color: #fff;
}
.energy-label {
  font-size: 24rpx;
  color: #666;
}

/* 待办提醒 */
.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; }
</style>