cfc/cfc-frontend/pages/mind-detail/innate-trajectory.vue

<template>
  <view class="trajectory-container">
    <view class="loading-state" v-if="loading">
      <text>加载中...</text>
    </view>

    <template v-if="!loading && trajectory">
      <view class="section">
        <view class="section-title">先天 vs 后天</view>
        <view class="compare-row">
          <view class="compare-item">
            <text class="compare-label">先天心能量</text>
            <text class="compare-value">{{ trajectory.innateVsCurrent.mindInnate || 0 }}</text>
          </view>
          <view class="compare-item">
            <text class="compare-label">当前心能量</text>
            <text class="compare-value">{{ trajectory.innateVsCurrent.mindCurrent || 0 }}</text>
          </view>
          <view class="compare-item">
            <text class="compare-label">成长</text>
            <text class="compare-value" :style="{ color: growthColor }">{{ trajectory.innateVsCurrent.growth || '0' }}</text>
          </view>
        </view>
      </view>

      <view class="section" v-if="hasInnateScores">
        <view class="section-title">五维先天基础分</view>
        <view class="dim-row" v-for="(score, dim) in trajectory.innateDimensionScores" :key="dim">
          <text class="dim-label">{{ dimLabel(dim) }}</text>
          <view class="dim-track">
            <view class="dim-fill" :style="{ width: score + '%' }"></view>
          </view>
          <text class="dim-value">{{ score }}</text>
        </view>
      </view>

      <view class="section" v-if="trajectory.growthTrend">
        <view class="section-title">成长趋势</view>
        <text class="trend-text">{{ trajectory.growthTrend }}</text>
      </view>

      <view class="section" v-if="trajectory.advice">
        <view class="section-title">成长建议</view>
        <text class="advice-text">{{ trajectory.advice }}</text>
      </view>
    </template>

    <view class="empty-state" v-if="!loading && !trajectory && loadError">
      <text>{{ loadError }}</text>
    </view>
  </view>
</template>

<script>
import { getInnateTrajectory } from '../../utils/api'
export default {
  data() {
    return {
      memberId: null,
      memberType: 'child',
      familyId: null,
      loading: false,
      trajectory: null,
      loadError: '',
      dimNames: { body: '身', mind: '心', wisdom: '智', action: '行', wealth: '富' }
    }
  },
  computed: {
    hasInnateScores() {
      return !!this.trajectory && !!this.trajectory.innateDimensionScores
    },
    growthColor() {
      if (!this.trajectory || !this.trajectory.innateVsCurrent) return '#999'
      var g = this.trajectory.innateVsCurrent.growth || '0'
      if (g.indexOf('-') === 0) return '#f56c6c'
      return '#07c160'
    }
  },
  onLoad(options) {
    this.memberId = options.memberId ? Number(options.memberId) : null
    this.memberType = options.memberType || 'child'
    this.familyId = options.familyId ? Number(options.familyId) : null
    if (!this.memberId) {
      this.loadError = '缺少成员ID'
      return
    }
    this.load()
  },
  methods: {
    load() {
      var self = this
      self.loading = true
      getInnateTrajectory({ memberId: self.memberId, memberType: self.memberType, familyId: self.familyId }).then(function (res) {
        self.loading = false
        if (res && res.code === 200) {
          self.trajectory = res.data
        } else {
          self.loadError = (res && res.message) || '加载失败'
        }
      }).catch(function () {
        self.loading = false
        self.loadError = '网络异常'
      })
    },
    dimLabel(dim) {
      return this.dimNames[dim] || dim
    }
  }
}
</script>

<style scoped>
.trajectory-container {
  min-height: 100vh;
  background: #F8F6F0;
  padding-bottom: 60rpx;
}

.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120rpx 0;
  color: #999;
  font-size: 28rpx;
}

.section {
  margin: 24rpx 32rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 28rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
}

.section-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 20rpx;
}

.compare-row {
  display: flex;
  justify-content: space-around;
}

.compare-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.compare-label {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 8rpx;
}

.compare-value {
  font-size: 48rpx;
  font-weight: 700;
  color: #333;
}

.dim-row {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.dim-label {
  font-size: 28rpx;
  font-weight: 600;
  width: 48rpx;
  text-align: center;
}

.dim-track {
  flex: 1;
  height: 24rpx;
  background: #F0F0F0;
  border-radius: 12rpx;
  overflow: hidden;
  margin: 0 16rpx;
}

.dim-fill {
  height: 100%;
  border-radius: 12rpx;
  background: linear-gradient(90deg, #FF6B9D, #FF8C42);
}

.dim-value {
  font-size: 24rpx;
  color: #666;
  width: 60rpx;
  text-align: right;
}

.trend-text, .advice-text {
  font-size: 28rpx;
  color: #444;
  line-height: 1.8;
}

.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120rpx 0;
  color: #999;
  font-size: 28rpx;
}
</style>