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

<template>
  <view>
    <!-- 富沛能量值 -->
    <view class="wealth-energy-header" v-if="isLoggedIn && wealthEnergy > 0">
      <text class="energy-header-icon">💧</text>
      <text class="energy-header-value">{{ wealthEnergy }}</text>
      <text class="energy-header-label">富沛能量</text>
      <text class="energy-header-trend" v-if="energyTrend > 0">↑较上周+{{ energyTrend }}</text>
    </view>

    <!-- 退出切换按钮（仅家长切换到孩子状态时显示） -->
    <view class="exit-switch" v-if="isSwitchedChild" @click="onExitSwitch">
      <text>🔄 退出切换</text>
    </view>

    <view class="user-card">
      <view class="avatar">👤</view>
      <view class="user-info">
        <view class="nickname">{{ nickname || '未设置昵称' }}</view>
        <view class="role">{{ role === 'parent' ? '家长模式' : (role === 'child' ? '孩子模式' : '成长规划师模式') }}</view>
        <view class="system-points" v-if="role === 'parent' && children.length > 0">🏅 系统积分: {{ children[0].systemPoints || 0 }}</view>
        <view class="wealth-energy-row" v-if="wealthEnergy > 0">
          <text class="wealth-energy-icon">💧</text>
          <text class="wealth-energy-value">富沛能量: {{ wealthEnergy }}</text>
          <text class="wealth-energy-trend" v-if="energyTrend > 0"> ↑较上周+{{ energyTrend }}</text>
        </view>
      </view>
      <!-- 切换按钮仅在非切换状态下显示 -->
      <button class="btn-switch" v-if="!isSwitchedChild" @click="onSwitchMode">切换</button>
    </view>
  </view>
</template>

<script>
import { getChildren, getEnergyOverview, verifyPassword } from '../../../utils/api.js'

export default {
  name: 'ProfileHeader',
  data() {
    return {
      nickname: '',
      role: 'parent',
      children: [],
      isSwitchedChild: false,
      wealthEnergy: 0,
      energyTrend: 0
    }
  },
  computed: {
    isLoggedIn() {
      return !!uni.getStorageSync('token')
    }
  },
  onShow() {
    if (!uni.getStorageSync('token')) return
    const currentRole = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || 'parent'
    const userInfo = uni.getStorageSync('userInfo')
    this.nickname = this.$store.state.nickname || (userInfo && userInfo.nickname) || ''
    this.role = currentRole
    this.isSwitchedChild = uni.getStorageSync('isSwitchedChild') || false
    this.loadChildren()
    this.loadEnergyData()
  },
  methods: {
    async loadChildren() {
      try {
        const res = await getChildren()
        this.children = res.data || []
      } catch (e) {
        console.error('获取孩子列表失败', e)
      }
    },
    loadEnergyData() {
      let childId = uni.getStorageSync('currentChildId') || null
      if (!childId && this.children.length > 0) {
        childId = this.children[0].id
      }
      if (!childId) return
      getEnergyOverview(childId).then((res) => {
        if (res && res.data) {
          const dims = res.data.dimensions
          if (dims && dims.length > 0) {
            for (let i = 0; i < dims.length; i++) {
              if (dims[i].code === 'wealth') {
                this.wealthEnergy = dims[i].score || 0
                break
              }
            }
          }
        }
      }).catch(() => {})
    },
    onSwitchMode() {
      if (this.role === 'child') {
        uni.showModal({
          title: '验证密码',
          content: '请输入家长密码',
          editable: true,
          success: (res) => {
            if (res.confirm && res.content) {
              verifyPassword(res.content).then((result) => {
                if (result.code === 200) {
                  this.doSwitchMode()
                } else {
                  uni.showToast({ title: '密码错误', icon: 'none' })
                }
              }).catch(() => {
                uni.showToast({ title: '验证失败', icon: 'none' })
              })
            }
          }
        })
      } else {
        this.doSwitchMode()
      }
    },
    doSwitchMode() {
      if (this.children.length === 0) {
        this.loadChildren()
        if (this.children.length === 0) {
          uni.showModal({
            title: '提示',
            content: '您还没有添加孩子，是否现在去添加？',
            success: (res) => {
              if (res.confirm) {
                uni.navigateTo({ url: '/pages/profile/create-child' })
              }
            }
          })
          return
        }
      }
      if (this.children.length === 1) {
        this.$store.commit('switchToChild', this.children[0].id)
        this.role = 'child'
        this.isSwitchedChild = true
        uni.showToast({ title: '已切换为孩子模式', icon: 'success' })
        return
      }
      uni.showActionSheet({
        itemList: this.children.map(c => c.nickname),
        success: (res) => {
          const selectedChild = this.children[res.tapIndex]
          this.$store.commit('switchToChild', selectedChild.id)
          this.role = 'child'
          this.isSwitchedChild = true
          uni.showToast({ title: `已切换为${selectedChild.nickname}模式`, icon: 'success' })
        }
      })
    },
    onExitSwitch() {
      if (!this.isSwitchedChild) return
      uni.showModal({
        title: '退出切换',
        content: '请输入家长密码以确认退出',
        editable: true,
        success: (res) => {
          if (res.confirm && res.content) {
            verifyPassword(res.content).then((result) => {
              if (result.code === 200) {
                this.$store.commit('switchBackToParent')
                this.isSwitchedChild = false
                this.role = 'parent'
                uni.showToast({ title: '已退出切换', icon: 'success' })
                uni.reLaunch({ url: '/pages/index/index' })
              } else {
                uni.showToast({ title: '密码错误', icon: 'none' })
              }
            }).catch(() => {
              uni.showToast({ title: '验证失败', icon: 'none' })
            })
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.wealth-energy-header {
  display: flex;
  align-items: center;
  background: #fff;
  margin: 20rpx 30rpx;
  border-radius: 16rpx;
  padding: 20rpx 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.energy-header-icon { font-size: 36rpx; margin-right: 8rpx; }
.energy-header-value { font-size: 40rpx; font-weight: bold; color: #1a73e8; margin-right: 8rpx; }
.energy-header-label { font-size: 26rpx; color: #666; flex: 1; }
.energy-header-trend { font-size: 24rpx; color: #52c41a; }

.exit-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 30rpx 16rpx;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  padding: 16rpx;
  border-radius: 12rpx;
  font-size: 26rpx;
}

.user-card {
  display: flex;
  align-items: center;
  background: #fff;
  margin: 0 30rpx 20rpx;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48rpx;
  margin-right: 24rpx;
  flex-shrink: 0;
}
.user-info { flex: 1; }
.nickname { font-size: 34rpx; font-weight: bold; color: #333; margin-bottom: 8rpx; }
.role { font-size: 24rpx; color: #999; margin-bottom: 6rpx; }
.system-points { font-size: 24rpx; color: #F97316; margin-top: 4rpx; }
.wealth-energy-row { display: flex; align-items: center; margin-top: 8rpx; }
.wealth-energy-icon { font-size: 24rpx; margin-right: 4rpx; }
.wealth-energy-value { font-size: 24rpx; color: #1a73e8; }
.wealth-energy-trend { font-size: 22rpx; color: #52c41a; }

.btn-switch {
  background: #667eea;
  color: #fff;
  font-size: 24rpx;
  padding: 10rpx 30rpx;
  border-radius: 30rpx;
  line-height: 1.8;
}
</style>