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

<template>
  <view :style="{ '--font-scale': fontScale }">
    <!-- 退出切换按钮（仅家庭主账号切换到成员状态时显示） -->
    <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'
import fontScaleMixin from '@/mixins/font-scale.js'

export default {
  mixins: [fontScaleMixin],
  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 lang="scss">
.exit-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 $uni-space-lg 16rpx;
  background: linear-gradient(135deg, $accent-indigo, $accent-indigo-deep);
  color: $app-surface;
  padding: 16rpx;
  border-radius: 16rpx;
  font-size: calc(26rpx * var(--font-scale, 1));
}

.user-card {
  display: flex;
  align-items: center;
  background: $app-surface;
  margin: 0 $uni-space-lg 20rpx;
  border-radius: 24rpx;
  padding: $uni-space-lg;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, $accent-indigo, $accent-indigo-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(48rpx * var(--font-scale, 1));
  margin-right: 24rpx;
  flex-shrink: 0;
}
.user-info { flex: 1; }
.nickname { font-size: calc(34rpx * var(--font-scale, 1)); font-weight: bold; color: $facade-text-strong; margin-bottom: 8rpx; }
.role { font-size: calc(24rpx * var(--font-scale, 1)); color: $facade-text-muted; margin-bottom: 6rpx; }
.system-points { font-size: calc(24rpx * var(--font-scale, 1)); color: $brand-primary; margin-top: 4rpx; }

.btn-switch {
  background: $accent-indigo;
  color: $app-surface;
  font-size: calc(24rpx * var(--font-scale, 1));
  padding: 10rpx $uni-space-page;
  border-radius: 24rpx;
  line-height: 1.8;
}
</style>