cfc/cfc-frontend/pages/teacher/teacher-profile.vue

<template>
  <view class="container">
    <!-- 退出切换按钮 -->
    <view class="switch-out-btn" @click="switchToParent">
      <text>🔄 切换家长端</text>
    </view>

    <view v-if="hasFamily">
    <view class="user-card">
      <view class="avatar">👤</view>
      <view class="user-info">
        <view class="nickname">{{ nickname || '未设置昵称' }}</view>
        <view class="role">成长规划师</view>
        <view class="status-tag" :class="teacherStatus">{{ statusText }}</view>
      </view>
      <button class="btn-edit" @click="goToEditInfo">编辑资料</button>
    </view>

    <!-- 功能菜单 -->
    <view class="menu-list">
      <view class="menu-item" @click="goToEditInfo">
        <text>📝 修改个人资料</text>
        <text class="arrow">›</text>
      </view>
      <view class="menu-item" v-if="teacherStatus !== 'approved'" @click="showPendingInfo">
        <text>📋 查看申请进度</text>
        <text class="arrow">›</text>
      </view>
      <view class="menu-item" @click="goToGrowth">
        <text>📊 我的成长档案</text>
        <text class="arrow">›</text>
      </view>
<view class="menu-item" @click="goToMessages">
<text>💬 消息中心</text>
<text class="arrow">›</text>
</view>
<view class="menu-item" @click="goToInviteParent">
<text>📮 邀请家长</text>
<text class="arrow">›</text>
</view>
<view class="menu-item" @click="showPasswordModal = true">
        <text>🔐 设置密码</text>
        <text class="arrow">›</text>
      </view>
      <view class="menu-item" @click="logout">
        <text>🚪 退出登录</text>
        <text class="arrow">›</text>
      </view>
    </view>
    </view>
    <view v-else>
      <FamilyEmptyState type="card" />
    </view>

    <!-- 密码设置弹窗 -->
    <view class="modal-mask" v-if="showPasswordModal" @click="showPasswordModal = false">
      <view class="modal" @click.stop>
        <view class="modal-title">设置密码</view>
        <view class="form-item">
          <input v-model="newPassword" type="number" password placeholder="输入6位密码" maxlength="6" />
        </view>
        <view class="form-item">
          <input v-model="confirmPassword" type="number" password placeholder="确认密码" maxlength="6" />
        </view>
        <view class="modal-btns">
          <button @click="showPasswordModal = false">取消</button>
          <button class="btn-primary" @click="savePassword">确定</button>
        </view>
      </view>
    </view>

    <view class="bottom-space"></view>
  </view>
</template>

<script>
import { switchRole, generateParentInvite } from '../../utils/api.js'

export default {
  data() {
    return {
      nickname: '',
      showPasswordModal: false,
      newPassword: '',
      confirmPassword: ''
    }
  },
  computed: {
    teacherStatus() {
      return uni.getStorageSync('teacherStatus') || 'pending'
    },
    statusText() {
      const map = { pending: '审核中', approved: '已通过', rejected: '已拒绝' }
      return map[this.teacherStatus] || this.teacherStatus
    },
    hasFamily: function() {
      return this.$store.getters.hasFamily
    }
  },
  onLoad() {
    var _userInfo = uni.getStorageSync('userInfo')
    this.nickname = (_userInfo && _userInfo.nickname) || ''
  },
  onShow() {
    var _userInfo = uni.getStorageSync('userInfo')
    this.nickname = (_userInfo && _userInfo.nickname) || ''
  },
  methods: {
    async switchToParent() {
      try {
        const result = await switchRole('parent')
        if (result.code === 200 && result.data) {
          const data = result.data
          uni.setStorageSync('token', data.token)
          uni.setStorageSync('role', data.role)
          uni.setStorageSync('currentRole', 'parent')
          uni.setStorageSync('isSwitchedChild', false)
          uni.setStorageSync('isSwitchedTeacher', false)
          uni.$emit('switchRole')
          uni.reLaunch({ url: '/pages/index-home/index' })
        }
      } catch (e) {
        uni.showToast({ title: e.message || '切换失败', icon: 'none' })
      }
    },
    goToEditInfo() {
      uni.navigateTo({ url: '/pages/user-edit/user-edit' })
    },
    goToGrowth() {
      uni.reLaunch({ url: '/pages/growth/index' })
    },
    goToMessages() {
      uni.navigateTo({ url: '/pages/teacher/messages' })
    },
    async goToInviteParent() {
      try {
        uni.showLoading({ title: '生成邀请码中...' })
        const result = await generateParentInvite()
        uni.hideLoading()
        if (result.code === 200) {
          const { code, type, refId } = result.data
          const inviteUrl = `pages/index/index?inviteCode=${code}&type=${type}`
          uni.showModal({
            title: '邀请家长',
            content: `邀请码：${code}\n\n请复制并分享给家长，家长打开小程序后自动识别`,
            confirmText: '复制链接',
            cancelText: '关闭',
            success: (res) => {
              if (res.confirm) {
                uni.setClipboardData({
                  data: inviteUrl,
                  success: () => {
                    uni.showToast({ title: '已复制', icon: 'success' })
                  }
                })
              }
            }
          })
        }
      } catch (e) {
        uni.hideLoading()
        uni.showToast({ title: e.message || '生成失败', icon: 'none' })
      }
    },
    showPendingInfo() {
      const status = this.teacherStatus
      let content = ''
      if (status === 'pending') {
        content = '您的成长规划师申请正在审核中，通常1-3个工作日内完成。请耐心等待管理员审批。'
      } else if (status === 'rejected') {
        const reason = uni.getStorageSync('teacherRejectReason')
        content = reason ? ('您的申请未通过审核。拒绝原因：' + reason + '。您可以修改资料后重新申请。') : '您的申请暂未通过审核，您可以修改资料后重新申请。'
      }
      uni.showModal({
        title: '申请状态',
        content: content,
        confirmText: status === 'rejected' ? '重新申请' : '我知道了',
        showCancel: status === 'rejected',
        cancelText: '关闭',
        success: (res) => {
          if (res.confirm && status === 'rejected') {
            uni.navigateTo({ url: '/pages/guide/register/index' })
          }
        }
      })
    },
    async savePassword() {
      if (!this.newPassword || this.newPassword.length !== 6) {
        uni.showToast({ title: '请输入6位密码', icon: 'none' })
        return
      }
      if (this.newPassword !== this.confirmPassword) {
        uni.showToast({ title: '两次密码不一致', icon: 'none' })
        return
      }
      uni.showToast({ title: '密码设置成功', icon: 'success' })
      this.showPasswordModal = false
      this.newPassword = ''
      this.confirmPassword = ''
    },
    logout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            uni.clearStorage()
            uni.reLaunch({ url: '/pages/login/login' })
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.container {
  padding: 24rpx;
  background: #F0F7FF;
  min-height: 100vh;
}

.switch-out-btn {
  background: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 16rpx;
  text-align: center;
  font-size: 28rpx;
  color: #3B82F6;
}

.switch-out-btn text {
  margin-right: 8rpx;
}

.user-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;
  display: flex;
  align-items: center;
}

.avatar {
  font-size: 80rpx;
  margin-right: 20rpx;
}

.user-info {
  flex: 1;
}

.nickname {
  font-size: 32rpx;
  font-weight: bold;
  color: #1E293B;
}

.role {
  font-size: 24rpx;
  color: #64748B;
  margin-top: 4rpx;
}

.status-tag {
  display: inline-block;
  font-size: 22rpx;
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
  margin-top: 8rpx;
}

.status-tag.pending { background: #FEF3C7; color: #D97706; }
.status-tag.approved { background: #ECFDF5; color: #059669; }
.status-tag.rejected { background: #FEF2F2; color: #DC2626; }

.btn-edit {
  background: #3B82F6;
  color: #fff;
  font-size: 24rpx;
  padding: 8rpx 20rpx;
  border-radius: 8rpx;
}

.menu-list {
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
}

.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28rpx 24rpx;
  border-bottom: 1rpx solid #f0f0f0;
  font-size: 28rpx;
  color: #333;
}

.menu-item:last-child {
  border-bottom: none;
}

.arrow {
  color: #ccc;
  font-size: 32rpx;
}

.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal {
  background: #fff;
  border-radius: 16rpx;
  padding: 32rpx;
  width: 560rpx;
}

.modal-title {
  font-size: 32rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 24rpx;
}

.form-item {
  margin-bottom: 20rpx;
}

.form-item input {
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  padding: 16rpx;
  font-size: 28rpx;
}

.modal-btns {
  display: flex;
  gap: 20rpx;
  margin-top: 24rpx;
}

.modal-btns button {
  flex: 1;
  padding: 16rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
  background: #f5f5f5;
  color: #333;
}

.modal-btns .btn-primary {
  background: #3B82F6;
  color: #fff;
}

.bottom-space {
  height: 140rpx;
}
</style>