feat(profile): 小程序画像页 — 五维指标+推荐内容展示

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

@@ -0,0 +1,344 @@
+<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>

cfc-frontend/utils/api.js

@@ -2526,3 +2526,44 @@ export const saveBodyFatMetrics = (data) => {
     })
   })
 }
+
+// 用户画像
+export function getMyProfile() {
+  return new Promise((resolve, reject) => {
+    const token = uni.getStorageSync('token')
+    uni.request({
+      url: BASE_URL + '/api/profile/my',
+      method: 'POST',
+      data: {},
+      header: { 'Content-Type': 'application/json', 'Authorization': token ? 'Bearer ' + token : '' },
+      success: (res) => {
+        if (res.data && res.data.code === 200) {
+          resolve(res.data)
+        } else {
+          reject(res.data || { code: -1, message: '获取画像失败' })
+        }
+      },
+      fail: (err) => reject(err)
+    })
+  })
+}
+
+export function getProfileTrend(days) {
+  return new Promise((resolve, reject) => {
+    const token = uni.getStorageSync('token')
+    uni.request({
+      url: BASE_URL + '/api/profile/history',
+      method: 'POST',
+      data: { days: days || 30 },
+      header: { 'Content-Type': 'application/json', 'Authorization': token ? 'Bearer ' + token : '' },
+      success: (res) => {
+        if (res.data && res.data.code === 200) {
+          resolve(res.data)
+        } else {
+          reject(res.data || { code: -1, message: '获取趋势失败' })
+        }
+      },
+      fail: (err) => reject(err)
+    })
+  })
+}