cfc/cfc-frontend/pages/health/teacher-select.vue

<template>
  <view class="page">
    <!-- 导航栏 -->

    <!-- 提示 -->
    <view class="tip-banner">
      <text class="tip-icon">👩‍🏫</text>
      <text class="tip-text">选择一位规划师，将在方案生成后为您审核和定制计划</text>
    </view>

    <!-- 规划师列表 -->
    <view class="teacher-list" v-if="teachers.length > 0">
      <view
        v-for="t in teachers"
        :key="t.id"
        class="teacher-card"
        :class="{ active: selectedTeacherId === t.id }"
        @click="selectTeacher(t)"
      >
        <view class="teacher-avatar">{{ (t.name || '规划师').charAt(0) }}</view>
        <view class="teacher-info">
          <text class="teacher-name">{{ t.name || '规划师' }}</text>
          <text class="teacher-tag" v-if="t.isBound">✓ 已绑定家庭</text>
        </view>
        <view class="teacher-check" v-if="selectedTeacherId === t.id">✓</view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-else>
      <text class="empty-icon">🔍</text>
      <text class="empty-text">暂无可用规划师</text>
      <text class="empty-hint">请联系管理员为您分配规划师</text>
    </view>

    <!-- 底部按钮 -->
    <view class="bottom-bar">
      <button class="btn-next" :disabled="!selectedTeacherId" @click="confirmSelection">
        {{ selectedTeacherId ? '确认选择' : '请选择规划师' }}
      </button>
    </view>
  </view>
</template>

<script>
import { getAvailableTeachers } from '../../utils/api'

export default {
  data() {
    return {
      teachers: [],
      selectedTeacherId: null,
      familyId: null,
      loading: false
    }
  },
  onLoad: function(options) {
    this.familyId = options.familyId ? parseInt(options.familyId) : null
    if (!this.familyId) {
      this.familyId = uni.getStorageSync('familyId') ? parseInt(uni.getStorageSync('familyId')) : null
    }
    if (!this.familyId) {
      uni.showToast({ title: '缺少家庭信息', icon: 'none' })
      setTimeout(() => uni.navigateBack(), 1000)
      return
    }
    this.loadTeachers()
  },
  methods: {
    async loadTeachers() {
      this.loading = true
      try {
        var self = this
        getAvailableTeachers({ familyId: this.familyId }).then(function(res) {
          self.loading = false
          if (res.code === 200) {
            self.teachers = res.data || []
          } else {
            uni.showToast({ title: res.message || '加载失败', icon: 'none' })
          }
        }).catch(function() {
          self.loading = false
          uni.showToast({ title: '加载失败，请重试', icon: 'none' })
        })
      } catch(e) {
        this.loading = false
      }
    },
    selectTeacher: function(t) {
      this.selectedTeacherId = t.id
    },
    confirmSelection: function() {
      if (!this.selectedTeacherId) return
      uni.setStorageSync('healthPlan_teacherId', this.selectedTeacherId)
      uni.navigateBack()
    },
    goBack: function() {
      uni.navigateBack()
    }
  }
}
</script>

<style scoped>
.page { min-height: 100vh; background: #F3F7FA; padding-bottom: 120rpx; }
.nav-placeholder { width: 80rpx; }
.tip-banner {
  display: flex; align-items: center; gap: 12rpx;
  margin: 24rpx 32rpx; padding: 20rpx 24rpx;
  background: #FEF3C7; border-radius: 16rpx;
}
.tip-icon { font-size: 36rpx; }
.tip-text { font-size: 26rpx; color: #92400E; flex: 1; }
.teacher-list { padding: 0 32rpx; }
.teacher-card {
  display: flex; align-items: center; gap: 20rpx;
  background: #fff; border-radius: 16rpx; padding: 24rpx;
  margin-bottom: 16rpx; border: 2rpx solid #E5E7EB;
}
.teacher-card.active { border-color: #3B82F6; background: #EFF6FF; }
.teacher-avatar {
  width: 80rpx; height: 80rpx; border-radius: 50%;
  background: linear-gradient(135deg, #3B82F6, #60A5FA);
  color: #fff; font-size: 32rpx; font-weight: bold;
  display: flex; align-items: center; justify-content: center;
}
.teacher-info { flex: 1; }
.teacher-name { font-size: 30rpx; font-weight: bold; color: #333; display: block; }
.teacher-tag { font-size: 22rpx; color: #10B981; margin-top: 4rpx; display: block; }
.teacher-check { font-size: 36rpx; color: #3B82F6; font-weight: bold; }
.empty-state { text-align: center; padding: 120rpx 40rpx; }
.empty-icon { font-size: 80rpx; display: block; margin-bottom: 20rpx; }
.empty-text { font-size: 30rpx; color: #666; display: block; }
.empty-hint { font-size: 24rpx; color: #999; margin-top: 12rpx; display: block; }
.bottom-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  padding: 24rpx 32rpx; background: #fff;
  border-top: 1rpx solid #E5E7EB;
}
.btn-next {
  width: 100%; height: 88rpx; line-height: 88rpx;
  background: linear-gradient(135deg, #3B82F6, #2563EB);
  color: #fff; font-size: 32rpx; font-weight: bold;
  border-radius: 44rpx; border: none;
}
.btn-next[disabled] { background: #CBD5E1; }
</style>