cfc/cfc-frontend/pages/family/mbti-entry.vue

<template>
  <view class="mbe-page">
    <view class="mbe-loading" v-if="loading">
      <text class="mbe-loading-text">加载成员...</text>
    </view>
    <template v-else>
      <view class="mbe-hero">
        <text class="mbe-hero-title">MBTI 人格测评</text>
        <text class="mbe-hero-desc">标准版 30 题 · 发现你的天赋型 · 获得专属育儿建议</text>
      </view>
      <view class="mbe-section">
        <text class="mbe-section-title">选择测评对象</text>
        <view class="mbe-member-list">
          <view class="mbe-member-item" :class="{ active: selectedMemberId === m.id }" v-for="m in members" :key="m.id" @click="selectMember(m)">
            <image class="mbe-member-avatar" :src="m.avatar || '/static/avatar-default.png'" mode="aspectFill"></image>
            <view class="mbe-member-info">
              <text class="mbe-member-name">{{ m.nickname }}</text>
              <text class="mbe-member-role" :class="'role-' + m.effectiveRole">{{ m.roleLabel }}</text>
            </view>
            <view class="mbe-member-check" v-if="selectedMemberId === m.id">✓</view>
          </view>
        </view>
      </view>
      <view class="mbe-footer">
        <button class="mbe-btn mbe-btn-primary" :disabled="!selectedMemberId || startLoading" @click="start">
          {{ startLoading ? '加载中...' : '开始测评（约 8 分钟）' }}
        </button>
        <text class="mbe-tip">测评结果：4 字母类型 · 4 维雷达 · 专属画像 · 五维联动建议</text>
      </view>
    </template>
  </view>
</template>

<script>
import { getFamilyMemberList } from '@/utils/api'

export default {
  data() {
    return {
      loading: true,
      members: [],
      selectedMemberId: null,
      startLoading: false
    }
  },
  onLoad() {
    this.loadMembers()
  },
  methods: {
    loadMembers() {
      var self = this
      getFamilyMemberList({ visibleOnly: true }).then(function(res) {
        if (res.code === 200 && res.data && res.data.length > 0) {
          self.members = res.data
          var own = null
          for (var i = 0; i < self.members.length; i++) {
            if (self.members[i].isSelf) { own = self.members[i]; break }
          }
          self.selectedMemberId = own ? own.id : (self.members.length > 0 ? self.members[0].id : null)
        }
        self.loading = false
      }).catch(function() { self.loading = false })
    },
    selectMember(m) { this.selectedMemberId = m.id },
    start() {
      if (!this.selectedMemberId || this.startLoading) return
      this.startLoading = true
      uni.navigateTo({ url: '/pages/family/mbti-test?memberId=' + this.selectedMemberId })
    }
  }
}
</script>

<style scoped>
.mbe-page { min-height: 100vh; background: #F5FAFE; padding: 24rpx 30rpx 120rpx; box-sizing: border-box }
.mbe-loading { display: flex; justify-content: center; align-items: center; height: 50vh }
.mbe-loading-text { font-size: 28rpx; color: #999 }
.mbe-hero { text-align: center; padding: 40rpx 0 10rpx }
.mbe-hero-title { font-size: 36rpx; font-weight: 600; color: #333; display: block; margin-bottom: 8rpx }
.mbe-hero-desc { font-size: 24rpx; color: #999; display: block }
.mbe-section { background: #fff; border-radius: 24rpx; padding: 24rpx; margin-bottom: 24rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05) }
.mbe-section-title { font-size: 28rpx; font-weight: 600; color: #333; margin-bottom: 20rpx; display: block }
.mbe-member-list { display: flex; overflow-x: auto; gap: 20rpx; padding-bottom: 10rpx }
.mbe-member-item { flex: 0 0 140rpx; display: flex; flex-direction: column; align-items: center; border: 4rpx solid transparent; border-radius: 20rpx; padding: 16rpx 10rpx; transition: border-color .2s }
.mbe-member-item.active { border-color: #6366F1 }
.mbe-member-avatar { width: 80rpx; height: 80rpx; border-radius: 50%; margin-bottom: 12rpx }
.mbe-member-name { font-size: 26rpx; font-weight: 500; color: #333; text-align: center; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.mbe-member-role { font-size: 20rpx; padding: 2rpx 10rpx; border-radius: 10rpx; display: inline-block }
.role-parent { background: #FFF7ED; color: #E65100 }
.role-child { background: #E8F5E9; color: #2E7D32 }
.role-teacher { background: #E0E7FF; color: #3730A3 }
.mbe-member-check { margin-top: 8rpx; font-size: 24rpx; color: #6366F1 }
.mbe-footer { position: fixed; bottom: 0; left: 0; right: 0; padding: 20rpx 30rpx; background: #fff; border-top: 1rpx solid #F0F0F0; box-sizing: border-box }
.mbe-btn { width: 100%; height: 88rpx; line-height: 88rpx; font-size: 30rpx; border-radius: 44rpx; border: none; text-align: center }
.mbe-btn-primary { background: linear-gradient(135deg, #6366F1, #818CF8); color: #fff; font-weight: 600 }
.mbe-tip { display: block; text-align: center; margin-top: 16rpx; font-size: 22rpx; color: #999 }
</style>