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

<template>
  <view class="container">
    <!-- Tabbar 切换过渡页 -->
    <tab-transition v-if="showTabTransition" dimCode="wealth" />

    <!-- ===== 未登录状态 ===== -->
    <view v-if="!isLoggedIn" class="login-prompt">
      <view class="prompt-icon">👤</view>
      <text class="prompt-title">登录浠艾福</text>
      <text class="prompt-desc">登录后可查看个人资料、积分记录等</text>
      <button class="login-btn" @click="goLogin">登录 / 注册</button>
    </view>

    <!-- ===== 已登录状态 ===== -->
    <template v-else>
      <!-- 用户卡片 -->
      <ProfileHeader @avatar-click="goToEditInfo" />

      <!-- 成长报告 -->
      <ProfileGrowth />

      <!-- 成就徽章 -->
      <ProfileBadges />

      <!-- 健康等级称号（P2-1） -->
      <HealthBadge
        v-if="levelInfo"
        :levelInfo="levelInfo"
        :score="score"
        :progress="progress"
        :nextLevel="nextLevel"
        :streakDays="streakDays" />

      <!-- 健康故事时间线（P2-1） -->
      <HealthTimeline :events="timelineEvents" />

      <!-- 菜单列表（仅个人信息 + 设置，不含服务/商城板块） -->
      <ProfileMenu :role="role" :show-services="false" @invite-generate="onInviteGenerate" />
    </template>
    <AIFloatingAvatar />
  </view>
</template>

<script>
import TabTransition from '../../components/tab-transition.vue'
import ProfileHeader from './components/ProfileHeader.vue'
import ProfileBadges from './components/ProfileBadges.vue'
import ProfileGrowth from './components/ProfileGrowth.vue'
import ProfileMenu from './components/ProfileMenu.vue'
import AIFloatingAvatar from '../../components/AIFloatingAvatar.vue'
import HealthBadge from '../../components/HealthBadge.vue'
import HealthTimeline from '../../components/HealthTimeline.vue'
import { getHealthScoreInfo, getHealthTimeline } from '../../utils/api.js'

export default {
components: {
TabTransition,
ProfileHeader,
ProfileBadges,
ProfileGrowth,
ProfileMenu,
AIFloatingAvatar,
HealthBadge,
HealthTimeline
},
  data() {
    return {
      shareData: null,
      showTabTransition: true,
      selectedMascot: '',
      currentMascotName: '小助手',
      // P2-1 身份重塑
      levelInfo: null,
      score: 0,
      progress: 0,
      nextLevel: null,
      streakDays: 0,
      timelineEvents: []
    }
  },
  computed: {
    isLoggedIn() {
      return !!uni.getStorageSync('token')
    },
    role() {
      return uni.getStorageSync('currentRole') || uni.getStorageSync('role') || 'parent'
    }
  },
  onShareAppMessage() {
    if (this.shareData) {
      return {
        title: this.shareData.title,
        path: this.shareData.path,
        imageUrl: '/static/invite-card.png'
      }
    }
  },
  onShow() {
    this.showTabTransition = true

    if (!uni.getStorageSync('token')) {
      this._watchPageReady()
      return
    }
    this.loadMascot()
    const currentRole = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || 'parent'
    if (currentRole === 'teacher') {
      uni.redirectTo({ url: '/pages/teacher/teacher-profile' })
    }
    this.loadHealthScoreData()
    this._watchPageReady()
  },
  methods: {
    goLogin() {
      uni.navigateTo({ url: '/pages/login/login' })
    },
    onInviteGenerate(shareData) {
      this.shareData = shareData
    },
    changeMascot(mascot) {
      if (this.selectedMascot === mascot) return;
      uni.request({
        url: this.$config.API_BASE_URL + '/api/user/mascot/set',
        method: 'POST',
        header: { Authorization: 'Bearer ' + uni.getStorageSync('token') },
        data: { mascot },
        success: (res) => {
          if (res.data.code === 200 || res.data.code === 0) {
            this.selectedMascot = mascot;
            this.currentMascotName = mascot === 'xibao' ? '浠宝' : '福宝';
            // 同步更新 localStorage 以便 AIFloatingAvatar 等组件能读到最新值
            var userInfo = uni.getStorageSync('userInfo') || {};
            userInfo.mascot = mascot;
            uni.setStorageSync('userInfo', userInfo);
            uni.showToast({ title: '已更换' });
          }
        }
      });
    },
    loadMascot() {
      var userInfo = uni.getStorageSync('userInfo');
      if (userInfo && userInfo.mascot) {
        this.selectedMascot = userInfo.mascot;
        this.currentMascotName = userInfo.mascot === 'xibao' ? '浠宝' : '福宝';
      }
    },
    _watchPageReady() {
      var self = this
      this.$nextTick(function() {
        self.showTabTransition = false
      })
      setTimeout(function() {
        self.showTabTransition = false
      }, 2000)
    },
    loadHealthScoreData() {
      var childId = uni.getStorageSync('currentChildId') || null
      if (!childId) return
      var self = this
      getHealthScoreInfo({ childId: childId }).then(function(res) {
        if (res.code === 200 && res.data) {
          self.levelInfo = res.data.level || null
          self.score = res.data.score || 0
          self.progress = res.data.progress || 0
          self.nextLevel = res.data.nextLevel || null
          self.streakDays = res.data.streakDays || 0
        }
      }).catch(function() {})
      getHealthTimeline({ childId: childId }).then(function(res) {
        if (res.code === 200 && Array.isArray(res.data)) {
          self.timelineEvents = res.data.slice(0, 10)
        }
      }).catch(function() {})
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: #f5f7fa;
  padding-bottom: 120rpx;
}

.login-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: 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 {
  width: 80%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  border-radius: 50rpx;
  font-size: 30rpx;
  padding: 24rpx;
  line-height: 1.5;
}

.mascot-selector {
  margin: 20rpx 0;
  padding: 24rpx;
  background: #fff;
  border-radius: 16rpx;
}
.selector-header {
  margin-bottom: 20rpx;
}
.selector-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #1F2937;
}
.selector-subtitle {
  font-size: 24rpx;
  color: #6366F1;
  margin-left: 16rpx;
}
.mascot-cards {
  display: flex;
  gap: 20rpx;
}
.mascot-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24rpx 0;
  border: 2rpx solid #E5E7EB;
  border-radius: 12rpx;
}
.mascot-card.active {
  border-color: #6366F1;
  background: #EEF2FF;
}
.card-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  font-weight: bold;
  color: #fff;
  margin-bottom: 12rpx;
}
.card-icon.xibao {
  background: linear-gradient(135deg, #FF8C42, #FF6B9D);
}
.card-icon.fubao {
  background: linear-gradient(135deg, #6366F1, #10B981);
}
.card-name {
  font-size: 26rpx;
  color: #374151;
}
</style>