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

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

    <view class="user-card">
      <view class="avatar" @click="$emit('avatar-click')">👤</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>
      <!-- 切�按钮仅在�切�状�下显示 -->
      <button class="btn-switch" v-if="!isSwitchedChild" @click="onSwitchMode">切�</button>
    </view>
  </view>
</template>

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

export default {
  name: 'ProfileHeader',
  data() {
    return {
      nickname: '',
      role: 'parent',
      children: [],
      isSwitchedChild: false
    }
  },
  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()
  },
  methods: {
    async loadChildren() {
      try {
        const res = await getChildren()
        this.children = res.data || []
      } catch (e) {
        console.error('获�孩�列表失败', e)
      }
    },
    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-extra/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/home/index' })
              } else {
                uni.showToast({ title: '密�错误', icon: 'none' })
              }
            }).catch(() => {
              uni.showToast({ title: '验�失败', icon: 'none' })
            })
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.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; }

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