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>
      <!-- 品牌头部 -->
      <PageBanner theme="wealth" tagline="丰盈内心，富足生活，厚德载物" quote="" />

      <!-- 用户卡片 + 富沛能量 + 切换 -->
      <ProfileHeader />

      <!-- AI小助手形象选择 -->
      <view class="mascot-selector">
        <view class="selector-header">
          <text class="selector-title">AI小助手</text>
          <text class="selector-subtitle">{{ currentMascotName }}为你服务</text>
        </view>
        <view class="mascot-cards">
          <view class="mascot-card" :class="{active: selectedMascot === 'xibao'}" @click="changeMascot('xibao')">
            <view class="card-icon xibao">浠</view>
            <text class="card-name">浠宝</text>
          </view>
          <view class="mascot-card" :class="{active: selectedMascot === 'fubao'}" @click="changeMascot('fubao')">
            <view class="card-icon fubao">福</view>
            <text class="card-name">福宝</text>
          </view>
        </view>
      </view>

      <!-- 行动数据 + 财富数据 -->
      <ProfileStats />

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

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

      <!-- 菜单列表 -->
      <ProfileMenu :role="role" @invite-generate="onInviteGenerate" />
    </template>
    <AIFloatingAvatar />
  </view>
</template>

<script>
import TabTransition from '../../components/tab-transition.vue'
import PageBanner from '../../components/PageBanner.vue'
import ProfileHeader from './components/ProfileHeader.vue'
import ProfileStats from './components/ProfileStats.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'

export default {
  components: {
    TabTransition,
    PageBanner,
    ProfileHeader,
    ProfileStats,
    ProfileBadges,
    ProfileGrowth,
    ProfileMenu,
    AIFloatingAvatar
  },
  data() {
    return {
      shareData: null,
      showTabTransition: true,
      selectedMascot: '',
      currentMascotName: '小助手'
    }
  },
  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._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)
    }
  }
}
</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>