cfc/cfc-frontend/pages/growth/profile/index.vue

<template>
  <view class="page">
    <view class="nav-bar">
      <view class="nav-back" @tap="goBack">
        <text class="back-text">‹ 返回</text>
      </view>
      <text class="nav-title">我的画像</text>
    </view>

    <scroll-view class="content" scroll-y>
      <!-- 基本信息 -->
      <view class="card" v-if="profile.member">
        <view class="card-accent"></view>
        <view class="card-body">
          <view class="member-header">
            <text class="member-name">{{ profile.member.name || '未知' }}</text>
            <text class="member-age" v-if="profile.member.age"> {{ profile.member.age }}岁</text>
          </view>
          <text class="computed-at" v-if="profile.computed_at">更新于 {{ formatDateTime(profile.computed_at) }}</text>
        </view>
      </view>

      <!-- 五维评分 -->
      <view class="card">
        <view class="card-accent"></view>
        <view class="card-body">
          <text class="card-title">五维能量</text>
          <view class="dimension-row" v-for="(score, dim) in profile.dimension_scores" :key="dim">
            <text class="dim-label">{{ dimName(dim) }}</text>
            <view class="dim-bar-bg">
              <view class="dim-bar-fill" :style="{ width: score + '%', background: dimColor(dim) }"></view>
            </view>
            <text class="dim-val">{{ score }}</text>
          </view>
        </view>
      </view>

      <!-- 身体指标 -->
      <view class="card">
        <view class="card-accent"></view>
        <view class="card-body">
          <text class="card-title">身体指标</text>
          <view class="metric-row">
            <view class="metric-item">
              <text class="metric-val">{{ body.sleep_dur_avg || '-' }}</text>
              <text class="metric-label">平均睡眠(h)</text>
            </view>
            <view class="metric-item">
              <text class="metric-val">{{ body.exercise_count_week || 0 }}</text>
              <text class="metric-label">周运动(次)</text>
            </view>
            <view class="metric-item">
              <text class="metric-val">{{ body.water_intake_avg_ml || '-' }}</text>
              <text class="metric-label">日均饮水(ml)</text>
            </view>
          </view>
          <view class="metric-row" v-if="body.deep_sleep_pct != null">
            <view class="metric-item">
              <text class="metric-val">{{ body.deep_sleep_pct }}%</text>
              <text class="metric-label">深睡占比</text>
            </view>
            <view class="metric-item">
              <text class="metric-val">{{ body.meal_records_count || 0 }}</text>
              <text class="metric-label">月饮食记录</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 心理指标 -->
      <view class="card">
        <view class="card-accent"></view>
        <view class="card-body">
          <text class="card-title">心理指标</text>
          <view class="metric-row">
            <view class="metric-item">
              <text class="metric-val">{{ mind.emotion_joy_ratio != null ? (mind.emotion_joy_ratio * 100).toFixed(0) + '%' : '-' }}</text>
              <text class="metric-label">正向情绪占比</text>
            </view>
            <view class="metric-item">
              <text class="metric-val">{{ mind.stress_avg || '-' }}</text>
              <text class="metric-label">平均压力(1-10)</text>
            </view>
          </view>
          <view class="metric-row">
            <view class="metric-item">
              <text class="metric-val">{{ mind.energy_avg || '-' }}</text>
              <text class="metric-label">平均精力(1-10)</text>
            </view>
            <view class="metric-item">
              <text class="metric-val">{{ mind.mood_score_avg || '-' }}</text>
              <text class="metric-label">平均心情效价</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 能力测评 -->
      <view class="card" v-if="wisdom.overall_score != null">
        <view class="card-accent"></view>
        <view class="card-body">
          <text class="card-title">能力测评</text>
          <view class="metric-row">
            <view class="metric-item">
              <text class="metric-val">{{ wisdom.overall_score }}</text>
              <text class="metric-label">综合得分</text>
            </view>
            <view class="metric-item">
              <text class="metric-val">{{ wisdom.attention_score || '-' }}</text>
              <text class="metric-label">注意力</text>
            </view>
            <view class="metric-item">
              <text class="metric-val">{{ wisdom.focus_score || '-' }}</text>
              <text class="metric-label">专注力</text>
            </view>
          </view>
          <view class="metric-row" v-if="wisdom.game_avg_score_7d != null">
            <view class="metric-item">
              <text class="metric-val">{{ wisdom.game_avg_score_7d }}</text>
              <text class="metric-label">近7天游戏均分</text>
            </view>
            <view class="metric-item">
              <text class="metric-val">{{ wisdom.game_count_7d || 0 }}</text>
              <text class="metric-label">近7天游戏次数</text>
            </view>
          </view>
          <text class="assessment-date" v-if="wisdom.assessment_date">测评时间: {{ formatDate(wisdom.assessment_date) }}</text>
        </view>
      </view>

      <!-- 行为指标 -->
      <view class="card">
        <view class="card-accent"></view>
        <view class="card-body">
          <text class="card-title">行为活跃</text>
          <view class="metric-row">
            <view class="metric-item">
              <text class="metric-val">{{ (action.task_completion_rate * 100).toFixed(0) }}%</text>
              <text class="metric-label">任务完成率</text>
            </view>
            <view class="metric-item">
              <text class="metric-val">{{ action.checkin_streak || 0 }}</text>
              <text class="metric-label">连续打卡(天)</text>
            </view>
            <view class="metric-item">
              <text class="metric-val">{{ action.points_velocity_7d || 0 }}</text>
              <text class="metric-label">7日积分</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 关注问题域 -->
      <view class="card" v-if="problemDomains && problemDomains.length > 0">
        <view class="card-accent"></view>
        <view class="card-body">
          <text class="card-title">关注方向</text>
          <view class="domain-tags">
            <view class="domain-tag" v-for="d in problemDomains" :key="d">
              <text>{{ domainLabel(d) }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 推荐内容 -->
      <view class="card" v-if="recommendations.tasks && recommendations.tasks.length > 0">
        <view class="card-accent"></view>
        <view class="card-body">
          <text class="card-title">为你推荐</text>
          <!-- 任务推荐 -->
          <view class="rec-section" v-if="recommendations.tasks.length > 0">
            <text class="rec-title">📋 推荐任务</text>
            <view class="rec-list">
              <view class="rec-item" v-for="item in recommendations.tasks" :key="item.id">
                <text class="rec-item-title">{{ item.title }}</text>
                <text class="rec-item-type">{{ item.category }}</text>
              </view>
            </view>
          </view>
          <!-- 文章推荐 -->
          <view class="rec-section" v-if="recommendations.articles && recommendations.articles.length > 0">
            <text class="rec-title">📖 推荐文章</text>
            <view class="rec-list">
              <view class="rec-item" v-for="item in recommendations.articles" :key="item.id">
                <text class="rec-item-title">{{ item.title }}</text>
              </view>
            </view>
          </view>
          <!-- 活动推荐 -->
          <view class="rec-section" v-if="recommendations.activities && recommendations.activities.length > 0">
            <text class="rec-title">🎯 推荐活动</text>
            <view class="rec-list">
              <view class="rec-item" v-for="item in recommendations.activities" :key="item.id">
                <text class="rec-item-title">{{ item.title }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view class="empty-state" v-if="!profile.member && !loading">
        <text class="empty-text">暂无画像数据</text>
        <text class="empty-hint">完成打卡后自动生成</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import config from '../../config'
import { parseDate } from '../../utils/format.js'

export default {
  data() {
    return {
      loading: true,
      profile: {},
      recommendations: {}
    }
  },
  computed: {
    body() {
      return this.profile.body_metrics || {}
    },
    mind() {
      return this.profile.mind_metrics || {}
    },
    wisdom() {
      return this.profile.wisdom_metrics || {}
    },
    action() {
      return this.profile.action_metrics || {}
    },
    problemDomains() {
      return this.profile.problem_domains || []
    }
  },
  onLoad() {
    this.loadProfile()
  },
  methods: {
    goBack() { uni.navigateBack() },
    loadProfile() {
      var self = this
      self.loading = true
      var token = uni.getStorageSync('token')
      uni.request({
        url: config.API_BASE_URL + '/api/profile/my',
        method: 'POST',
        data: {},
        header: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token },
        success: function(res) {
          self.loading = false
          if (res.data && res.data.code === 200 && res.data.data) {
            self.profile = res.data.data
            self.recommendations = res.data.data
          }
        },
        fail: function() {
          self.loading = false
          uni.showToast({ title: '加载失败', icon: 'none' })
        }
      })
    },
    dimName(dim) {
      var m = { body: '身', wisdom: '智', mind: '心', action: '行', wealth: '富' }
      return m[dim] || dim
    },
    dimColor(dim) {
      var m = { body: '#FF8C42', wisdom: '#6366F1', mind: '#FF6B9D', action: '#10B981', wealth: '#F59E0B' }
      return m[dim] || '#999'
    },
    domainLabel(d) {
      var m = { sleep: '睡眠', attention: '注意力', emotion: '情绪' }
      return m[d] || d
    },
    formatDate(dateStr) {
      if (!dateStr) return ''
      var d = parseDate(dateStr)
      if (!d) return dateStr
      var y = d.getFullYear()
      var m2 = (d.getMonth() + 1).toString().padStart(2, '0')
      var day = d.getDate().toString().padStart(2, '0')
      return y + '-' + m2 + '-' + day
    },
    formatDateTime(dateStr) {
      if (!dateStr) return ''
      var d = parseDate(dateStr)
      if (!d) return dateStr
      var dt = dateStr.toString()
      if (dt.length >= 19) return dt.substring(0, 19).replace('T', ' ')
      return this.formatDate(dateStr)
    }
  }
}
</script>

<style scoped>
.page { min-height: 100vh; background: #FFF7ED; }
.nav-bar { display: flex; align-items: center; height: 88rpx; padding-top: env(safe-area-inset-top); background: #fff; border-bottom: 1rpx solid #f0f0f0; position: relative; }
.nav-back { position: absolute; left: 24rpx; top: 0; bottom: 0; display: flex; align-items: center; }
.back-text { font-size: 28rpx; color: #F97316; }
.nav-title { flex: 1; text-align: center; font-size: 32rpx; font-weight: bold; color: #333; }
.content { height: calc(100vh - 88rpx); }
.card { margin: 16rpx 24rpx; background: #fff; border-radius: 20rpx; overflow: hidden; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
.card-accent { height: 6rpx; background: linear-gradient(90deg, #FF8C42, #F97316); }
.card-body { padding: 24rpx; }
.card-title { font-size: 28rpx; font-weight: bold; color: #333; margin-bottom: 16rpx; display: block; }

.member-header { display: flex; align-items: baseline; gap: 8rpx; margin-bottom: 8rpx; }
.member-name { font-size: 36rpx; font-weight: bold; color: #333; }
.member-age { font-size: 26rpx; color: #999; }
.computed-at { font-size: 22rpx; color: #bbb; }

.dimension-row { display: flex; align-items: center; gap: 12rpx; margin-bottom: 14rpx; }
.dim-label { font-size: 24rpx; color: #666; width: 60rpx; flex-shrink: 0; }
.dim-bar-bg { flex: 1; height: 20rpx; background: #f0f0f0; border-radius: 10rpx; overflow: hidden; }
.dim-bar-fill { height: 100%; border-radius: 10rpx; transition: width 0.3s; }
.dim-val { font-size: 24rpx; color: #333; font-weight: bold; width: 48rpx; text-align: right; flex-shrink: 0; }

.metric-row { display: flex; gap: 16rpx; margin-bottom: 12rpx; }
.metric-item { flex: 1; text-align: center; padding: 16rpx 8rpx; background: #FAFAFA; border-radius: 12rpx; }
.metric-val { font-size: 32rpx; font-weight: bold; color: #F97316; display: block; }
.metric-label { font-size: 20rpx; color: #999; margin-top: 4rpx; display: block; }

.assessment-date { font-size: 20rpx; color: #bbb; margin-top: 8rpx; display: block; }

.domain-tags { display: flex; flex-wrap: wrap; gap: 12rpx; }
.domain-tag { padding: 8rpx 20rpx; border-radius: 20rpx; background: #FFF3E0; border: 1rpx solid #F97316; }
.domain-tag text { font-size: 24rpx; color: #F97316; }

.rec-section { margin-top: 16rpx; }
.rec-title { font-size: 26rpx; color: #666; margin-bottom: 10rpx; display: block; }
.rec-list { display: flex; flex-direction: column; gap: 8rpx; }
.rec-item { display: flex; justify-content: space-between; align-items: center; padding: 12rpx 0; border-bottom: 1rpx solid #f5f5f5; }
.rec-item-title { font-size: 26rpx; color: #333; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-item-type { font-size: 22rpx; color: #999; flex-shrink: 0; margin-left: 16rpx; }

.empty-state { text-align: center; padding: 80rpx 0; }
.empty-text { font-size: 28rpx; color: #999; display: block; }
.empty-hint { font-size: 24rpx; color: #ccc; margin-top: 8rpx; display: block; }
</style>