cfc/cfc-frontend/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, switchToFamilyMember } 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()
      }
    },
    async doSwitchMode() {
      // 成员视角（已切换到不可登录成员）下不可再切换其他成员，只能退出切换
      if (this.$store.state.currentView === 'member') {
        uni.showToast({ title: '当前为成员视角，请先退出切换', icon: 'none' })
        return
      }
      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/family-members' })
              }
            }
          })
          return
        }
      }
      // 优先显示可切换成员（不可登录成员），过滤掉可通过微信登录的成员
      var switchable = this.children.filter(function(m) { return m.isSwitchable })
      if (switchable.length === 0) {
        uni.showToast({ title: '暂无可切换成员', icon: 'none' })
        return
      }
      if (switchable.length === 1) {
        var member = switchable[0]
        uni.showModal({
          title: '切换确认',
          content: '切换到"' + member.nickname + '"后，退出时需要输入您的密码。是否继续？',
          success: async (res) => {
            if (!res.confirm) return
            try {
              var result = await switchToFamilyMember(member.id, member.source || 'family_member')
              if (result.code === 200 && result.data) {
                this.$store.commit('switchToMember', {
                  memberId: result.data.memberId,
                  effectiveRole: result.data.effectiveRole
                })
                this.isSwitchedChild = true
                this.role = result.data.effectiveRole
                uni.showToast({ title: '已切换', icon: 'success' })
              } else {
                uni.showToast({ title: result.message || '切换失败', icon: 'none' })
              }
            } catch (e) {
              uni.showToast({ title: '切换失败', icon: 'none' })
            }
          }
        })
        return
      }
      uni.showActionSheet({
        itemList: switchable.map(function(m) { return m.nickname }),
        success: (res) => {
          if (res.tapIndex < 0) return
          var member = switchable[res.tapIndex]
          this.$store.commit('switchToMember', {
            memberId: member.id,
            effectiveRole: member.effectiveRole
          })
          this.isSwitchedChild = true
          this.role = member.effectiveRole
          uni.showToast({ title: '已切换', icon: 'success' })
        }
      })
    },
    async onExitSwitch() {
      if (!this.isSwitchedChild) return
      var self = this
      uni.showModal({
        title: '退出切换',
        content: '请输入原用户密码以确认退出',
        editable: true,
        success: async function(res) {
          if (!res.confirm || !res.content) return
          try {
            var ok = await self.$store.dispatch('switchBackWithPassword', res.content)
            if (ok) {
              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 (e) {
            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>