cfc/cfc-frontend/pages/family/self-check-result.vue

<template>
  <view class="scr-page">
    <!-- Loading -->
    <view class="scr-loading" v-if="loading">
      <text class="scr-loading-text">加载中...</text>
    </view>

    <template v-else>
      <!-- 总分横幅 -->
      <view class="scr-hero">
        <view class="scr-hero-badge">
          <text class="scr-hero-title">五维幸福总分</text>
          <view class="scr-hero-score-row">
            <text class="scr-hero-score">{{ result.totalScore }}</text>
            <text class="scr-hero-total">/45</text>
          </view>
          <view class="scr-hero-level" :class="'level-' + overallLevel">
            <text>{{ overallLevelName }}</text>
          </view>
        </view>
        <text class="scr-hero-date" v-if="result.createdAt">自检时间：{{ formatDate(result.createdAt) }}</text>
      </view>

      <!-- 结果解读引导卡（告诉用户结果代表什么、接下来怎么做） -->
      <view class="scr-guide">
        <view class="scr-guide-head">
          <text class="scr-guide-title">📖 怎么看这个结果</text>
        </view>
        <text class="scr-guide-desc">这份自检测的是「身·智·富·行·心」五个维度的家庭幸福状态，每个维度 9 分，反映你近期在该方面的实际情况。</text>

        <!-- 总分解读 -->
        <view class="scr-guide-total">
          <text class="scr-guide-total-label">你的总分 {{ result.totalScore }}/45：</text>
          <text class="scr-guide-total-text">{{ overallExplain }}</text>
        </view>

        <!-- 维度等级图例 -->
        <view class="scr-guide-legend">
          <view class="scr-guide-legend-item">
            <view class="scr-guide-legend-dot lg-healthy"></view>
            <text class="scr-guide-legend-text">健康（7-9 分）：保持就好，不用刻意加码</text>
          </view>
          <view class="scr-guide-legend-item">
            <view class="scr-guide-legend-dot lg-attention"></view>
            <text class="scr-guide-legend-text">留意（4-6 分）：看看下方解读，找到能下手的一步</text>
          </view>
          <view class="scr-guide-legend-item">
            <view class="scr-guide-legend-dot lg-tense"></view>
            <text class="scr-guide-legend-text">紧绷（0-3 分）：先别想着补短板，从最小行动开始</text>
          </view>
        </view>

        <!-- 行动指引 -->
        <view class="scr-guide-steps">
          <text class="scr-guide-steps-title">接下来怎么做：</text>
          <view class="scr-guide-step">
            <text class="scr-guide-step-num">①</text>
            <text class="scr-guide-step-text">往下看「AI 解读」，了解每个低分维度代表什么</text>
          </view>
          <view class="scr-guide-step">
            <text class="scr-guide-step-num">②</text>
            <text class="scr-guide-step-text">点底部「生成健康计划」，把建议变成可执行的任务</text>
          </view>
          <view class="scr-guide-step">
            <text class="scr-guide-step-num">③</text>
            <text class="scr-guide-step-text">15 天后再测一次，看看哪里进步了</text>
          </view>
        </view>
      </view>

      <!-- 维度得分 -->
      <view class="scr-card">
        <view class="scr-card-title">
          <text class="scr-card-title-text">维度得分</text>
          <text class="scr-card-sub">满分9分/维</text>
        </view>
        <view class="scr-dim-list">
          <view class="scr-dim-item" v-for="dim in result.dimensions" :key="dim.dimension">
            <view class="scr-dim-head">
              <view class="scr-dim-label">
                <view class="scr-dim-dot" :style="{ background: dim.color }"></view>
                <text class="scr-dim-name">{{ dim.name }}</text>
                <text class="scr-dim-element">{{ dim.element }}</text>
              </view>
              <view class="scr-dim-score-wrap">
                <text class="scr-dim-score" :style="{ color: dim.color }">{{ dim.score }}</text>
                <text class="scr-dim-score-max">/9</text>
              </view>
            </view>
            <view class="scr-dim-bar">
              <view class="scr-dim-bar-fill" :style="{ width: (dim.score / 9 * 100) + '%', background: dim.color }"></view>
            </view>
            <view class="scr-dim-foot">
              <text class="scr-dim-level" :class="'lvl-' + dim.level">{{ dim.levelName }}</text>
              <text class="scr-dim-summary">{{ dim.summary }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- AI 健康解读（P0-1） -->
      <view class="scr-card" v-if="result.advices && result.advices.length > 0">
        <view class="scr-card-title">
          <text class="scr-card-title-text">AI 健康解读</text>
          <text class="scr-card-sub">基于你的五维自检结果</text>
        </view>
        <view v-for="adv in result.advices" :key="adv.dimension" class="scr-advice-item">
          <view class="scr-advice-dim-row">
            <view class="scr-advice-dim-badge" :style="{ background: adv.color }">
              <text class="scr-advice-dim-name">{{ adv.dimensionName }}</text>
              <text class="scr-advice-dim-elem">{{ adv.score }}分</text>
            </view>
          </view>
          <text class="scr-advice-interpretation" v-if="adv.interpretation">{{ adv.interpretation }}</text>
          <view class="scr-advice-actions" v-if="adv.microActions && adv.microActions.length > 0">
            <text class="scr-advice-action-label">本周行动：</text>
            <text v-for="(action, i) in adv.microActions" :key="i" class="scr-advice-action">{{ i+1 }}. {{ action }}</text>
          </view>
        </view>
        <view class="scr-family-insight" v-if="result.advices[0] && result.advices[0].familyInsight">
          <text class="scr-family-insight-label">【家庭整体洞察】</text>
          <text class="scr-family-insight-text">{{ result.advices[0].familyInsight }}</text>
        </view>
      </view>
      <!-- 全部健康提示 -->
      <view class="scr-card" v-else-if="result.totalScore >= 35">
        <view class="scr-all-healthy">
          <text class="scr-all-healthy-icon">🌿</text>
          <text class="scr-all-healthy-text">五维状态均健康，请继续保持这份平衡！</text>
        </view>
      </view>
      <!-- AI 分析暂不可用提示 -->
      <view class="scr-card" v-else>
        <view class="scr-all-healthy">
          <text class="scr-all-healthy-icon">⏳</text>
          <text class="scr-all-healthy-text">AI 分析暂时不可用，请稍后再试</text>
        </view>
      </view>

      <!-- 历史与操作 -->
      <view class="scr-footer">
        <button class="scr-btn scr-btn-primary" @click="goHistory">历史记录</button>
        <button class="scr-btn scr-btn-outline" @click="retake">重新自检</button>
        <button class="scr-btn scr-btn-secondary" v-if="hasLowScore" :loading="planGenerating" @click="generatePlan">
          生成健康计划
        </button>
        <!-- 聊天功能已隐藏（临时）: <button class="scr-btn scr-btn-ghost" @click="askAI">问问 AI</button> -->
      </view>
    </template>
  </view>
</template>

<script>
import { getSelfCheckLatest, getSelfCheckHistory, generateSelfCheckPlan } from '@/utils/api'
import { microActionToday, microActionComplete } from '@/utils/api'
import { parseDate } from '@/utils/format.js'

export default {
  data() {
    return {
      loading: true,
      result: null,
      selfCheckId: '',
      levelMap: {
        healthy: '健康',
        attention: '留意',
        tense: '紧绷'
      },
      // 今日微行动联动状态
      joiningDim: '',
      joinedDims: {},
      planGenerating: false
    }
  },
  computed: {
    overallLevel: function() {
      var total = this.result ? (this.result.totalScore || 0) : 0
      if (total >= 35) return 'healthy'
      if (total >= 20) return 'attention'
      return 'tense'
    },
    overallLevelName: function() {
      return this.levelMap[this.overallLevel] || '留意'
    },
    hasLowScore: function() {
      return this.result && this.result.advices && this.result.advices.some(function(a) {
        return a.score != null && a.score <= 6
      })
    },
    overallExplain: function() {
      var total = this.result ? (this.result.totalScore || 0) : 0
      if (total >= 35) {
        return '五维整体状态健康，继续保持平衡就好'
      }
      if (total >= 20) {
        return '部分维度需要留意，看看下方 AI 解读找到第一步'
      }
      return '有几个维度比较紧绷，建议从下周微行动开始调整'
    }
  },
  onLoad: function(options) {
    this.selfCheckId = options && options.id ? options.id : ''
    this.loadResult()
  },
  methods: {
    loadResult: function() {
      var self = this
      // 优先使用刚提交时缓存的结果，避免多一次请求
      var cached = uni.getStorageSync('lastSelfCheckResult')
      if (cached && cached.id) {
        this.result = cached
        this.loading = false
        return
      }
      getSelfCheckLatest().then(function(res) {
        self.loading = false
        if (res.code === 200 && res.data) {
          self.result = res.data
        } else {
          uni.showToast({ title: (res && res.message) || '暂无自检记录', icon: 'none' })
        }
      }).catch(function() {
        self.loading = false
        uni.showToast({ title: '加载失败', icon: 'none' })
      })
    },
    formatDate: function(dateStr) {
      if (!dateStr) {
        return ''
      }
      var d = parseDate(dateStr)
      if (!d) return ''
      var pad = function(n) { return n < 10 ? '0' + n : '' + n }
      return d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate()) + ' ' + pad(d.getHours()) + ':' + pad(d.getMinutes())
    },
    goHistory: function() {
      getSelfCheckHistory().then(function(res) {
        if (res.code === 200 && res.data && res.data.length > 0) {
          uni.showToast({ title: '已生成 ' + res.data.length + ' 条记录', icon: 'none' })
        } else {
          uni.showToast({ title: '暂无历史记录', icon: 'none' })
        }
      }).catch(function() {
        uni.showToast({ title: '暂无历史记录', icon: 'none' })
      })
    },
    joinMicroAction: function(adv) {
      var self = this
      if (!adv || !adv.dimension || this.joiningDim) return
      var memberId = this.result && this.result.familyMemberId
      if (!memberId) {
        uni.showToast({ title: '未找到家庭成员信息', icon: 'none' })
        return
      }
      this.joiningDim = adv.dimension
      microActionToday({ memberId: memberId, dimensionCode: adv.dimension }).then(function(res) {
        if (res.code !== 200) {
          self.joiningDim = ''
          uni.showToast({ title: (res && res.message) || '获取微行动失败', icon: 'none' })
          return
        }
        var data = res.data || {}
        if (data.completed) {
          self.joiningDim = ''
          self.$set(self.joinedDims, adv.dimension, true)
          uni.showToast({ title: '今日微行动已完成', icon: 'none' })
          return
        }
        var action = data.action
        if (!action || !action.id) {
          self.joiningDim = ''
          uni.showToast({ title: '今日暂无该维度微行动', icon: 'none' })
          return
        }
        microActionComplete({ memberId: memberId, actionId: action.id }).then(function(res2) {
          self.joiningDim = ''
          if (res2.code === 200) {
            self.$set(self.joinedDims, adv.dimension, true)
            uni.showToast({ title: '已加入今日微行动，能量+1', icon: 'success' })
          } else {
            uni.showToast({ title: (res2 && res2.message) || '加入失败', icon: 'none' })
          }
        }).catch(function() {
          self.joiningDim = ''
          uni.showToast({ title: '加入失败', icon: 'none' })
        })
      }).catch(function() {
        self.joiningDim = ''
        uni.showToast({ title: '获取微行动失败', icon: 'none' })
      })
    },
    retake: function() {
      uni.navigateTo({ url: '/pages/family/self-check-entry' })
    },
    generatePlan: function() {
      var self = this
      if (this.planGenerating) return
      this.planGenerating = true
      generateSelfCheckPlan({ checkId: this.result && this.result.id }).then(function(res) {
        self.planGenerating = false
        if (res.code === 200 && res.data && res.data.planId) {
          uni.showToast({ title: '计划已生成，可在健康计划页查看', icon: 'success' })
          setTimeout(function() {
            uni.navigateTo({ url: '/pages/health-main/index?planId=' + res.data.planId })
          }, 1000)
        } else {
          uni.showToast({ title: (res && res.message) || '计划生成失败', icon: 'none' })
        }
      }).catch(function() {
        self.planGenerating = false
        uni.showToast({ title: '计划生成失败', icon: 'none' })
      })
    },
    askAI: function() {
      var selfCheckId = this.result && this.result.id
      if (!selfCheckId) {
        uni.showToast({ title: '暂无自检记录', icon: 'none' })
        return
      }
      uni.navigateTo({ url: '/pages/ai/chat?selfCheckId=' + selfCheckId })
    }
  }
}
</script>

<style scoped>
.scr-page {
  min-height: 100vh;
  background: #F5FAFE;
  padding: 24rpx 30rpx 120rpx;
  box-sizing: border-box;
}
.scr-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60vh;
}
.scr-loading-text {
  font-size: 28rpx;
  color: #999;
}

/* 总分横幅 */
.scr-hero {
  background: linear-gradient(135deg, #F97316, #FF8C42);
  border-radius: 24rpx;
  padding: 40rpx 30rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 6rpx 20rpx rgba(249, 114, 22, 0.25);
}
.scr-hero-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.scr-hero-title {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.9);
}
.scr-hero-score-row {
  display: flex;
  align-items: baseline;
  margin-top: 10rpx;
}
.scr-hero-score {
  font-size: 88rpx;
  font-weight: 700;
  color: #fff;
}
.scr-hero-total {
  font-size: 30rpx;
  color: rgba(255, 255, 255, 0.7);
  margin-left: 6rpx;
}
.scr-hero-level {
  margin-top: 14rpx;
  padding: 8rpx 28rpx;
  border-radius: 24rpx;
  font-size: 26rpx;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.92);
}
.scr-hero-level.level-healthy { color: #2E7D32; }
.scr-hero-level.level-attention { color: #E65100; }
.scr-hero-level.level-tense { color: #C62828; }
.scr-hero-date {
  display: block;
  text-align: center;
  font-size: 22rpx;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 16rpx;
}

/* 通用卡片 */
.scr-card {
  background: #fff;
  border-radius: 24rpx;
  padding: 30rpx 26rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}
.scr-card-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 24rpx;
}
.scr-card-title-text {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}
.scr-card-sub {
  font-size: 22rpx;
  color: #999;
}

/* 维度得分 */
.scr-dim-list {
  display: flex;
  flex-direction: column;
}
.scr-dim-item {
  margin-bottom: 28rpx;
}
.scr-dim-item:last-child {
  margin-bottom: 0;
}
.scr-dim-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.scr-dim-label {
  display: flex;
  align-items: center;
}
.scr-dim-dot {
  width: 28rpx;
  height: 28rpx;
  border-radius: 50%;
  margin-right: 12rpx;
}
.scr-dim-name {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
}
.scr-dim-element {
  font-size: 22rpx;
  color: #999;
  margin-left: 10rpx;
}
.scr-dim-score-wrap {
  display: flex;
  align-items: baseline;
}
.scr-dim-score {
  font-size: 40rpx;
  font-weight: 700;
}
.scr-dim-score-max {
  font-size: 22rpx;
  color: #BBB;
}
.scr-dim-bar {
  height: 12rpx;
  background: #F0F0F0;
  border-radius: 6rpx;
  margin-top: 14rpx;
  overflow: hidden;
}
.scr-dim-bar-fill {
  height: 100%;
  border-radius: 6rpx;
  transition: width 0.5s ease;
}
.scr-dim-foot {
  display: flex;
  align-items: center;
  margin-top: 12rpx;
}
.scr-dim-level {
  font-size: 22rpx;
  padding: 4rpx 16rpx;
  border-radius: 16rpx;
  margin-right: 14rpx;
  flex-shrink: 0;
}
.scr-dim-level.lvl-healthy { background: #E8F5E9; color: #2E7D32; }
.scr-dim-level.lvl-attention { background: #FFF8E1; color: #F57F17; }
.scr-dim-level.lvl-tense { background: #FFEBEE; color: #C62828; }
.scr-guide {
  background: #FFF7ED;
  border-radius: 24rpx;
  padding: 30rpx 26rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(249, 114, 22, 0.08);
}
.scr-guide-head {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}
.scr-guide-title {
  font-size: 30rpx;
  font-weight: 700;
  color: #F97316;
}
.scr-guide-desc {
  font-size: 24rpx;
  color: #888;
  line-height: 1.6;
  margin-bottom: 24rpx;
}
.scr-guide-total {
  display: flex;
  align-items: baseline;
  margin-bottom: 24rpx;
}
.scr-guide-total-label {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  margin-right: 12rpx;
}
.scr-guide-total-text {
  font-size: 48rpx;
  font-weight: 700;
  color: #F97316;
}
.scr-guide-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx 24rpx;
  margin-bottom: 24rpx;
}
.scr-guide-legend-item {
  display: flex;
  align-items: center;
  flex: 1 1 120rpx;
}
.scr-guide-legend-dot {
  width: 24rpx;
  height: 24rpx;
  border-radius: 50%;
  flex-shrink: 0;
}
.lg-healthy { background: #2E7D32; }
.lg-attention { background: #F57F17; }
.lg-tense { background: #C62828; }
.scr-guide-legend-text {
  font-size: 22rpx;
  color: #555;
  margin-left: 10rpx;
}
.scr-guide-steps {
  margin-top: 16rpx;
}
.scr-guide-steps-title {
  font-size: 24rpx;
  color: #F97316;
  margin-bottom: 12rpx;
  display: block;
}
.scr-guide-step {
  display: flex;
  align-items: center;
  margin-bottom: 8rpx;
}
.scr-guide-step-num {
  font-size: 28rpx;
  color: #F97316;
  margin-right: 12rpx;
  min-width: 20rpx;
}
.scr-guide-step-text {
  font-size: 24rpx;
  color: #333;
  flex: 1;
}
.scr-guide-step:last-child {
  margin-bottom: 0;
}

.scr-dim-summary {
  flex: 1;
  font-size: 24rpx;
  color: #888;
  line-height: 1.4;
}

/* 寻源建议 */
.scr-advice-intro {
  font-size: 24rpx;
  color: #666;
  line-height: 1.6;
  background: #FFF7ED;
  border-radius: 12rpx;
  padding: 16rpx 20rpx;
  margin-bottom: 24rpx;
}
.scr-advice-item {
  border: 2rpx solid #F0E6DC;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
}
.scr-advice-item:last-child {
  margin-bottom: 0;
}
.scr-advice-dim-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18rpx;
}
.scr-advice-dim-badge {
  display: flex;
  align-items: center;
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
}
.scr-advice-dim-name {
  font-size: 28rpx;
  font-weight: 700;
  color: #fff;
  margin-right: 8rpx;
}
.scr-advice-dim-elem {
  font-size: 22rpx;
  color: rgba(255, 255, 255, 0.9);
}
.scr-advice-dim-score {
  font-size: 26rpx;
  font-weight: 600;
  color: #C62828;
}
.scr-advice-flow {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12rpx;
}
.scr-flow-node {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 200rpx;
}
.scr-flow-dot {
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  margin-right: 8rpx;
  flex-shrink: 0;
}
.scr-flow-label {
  font-size: 24rpx;
  font-weight: 600;
  color: #333;
}
.scr-flow-arrow {
  flex-shrink: 0;
  font-size: 24rpx;
  color: #F97316;
  margin: 0 10rpx;
}
.scr-flow-action {
  flex: 1;
  font-size: 24rpx;
  color: #666;
  line-height: 1.5;
}
.scr-advice-action {
  display: flex;
  align-items: flex-start;
  background: #F5FAFE;
  border-radius: 12rpx;
  padding: 16rpx 20rpx;
  margin-top: 10rpx;
}
.scr-advice-action-label {
  flex-shrink: 0;
  font-size: 22rpx;
  font-weight: 600;
  color: #F97316;
  margin-right: 12rpx;
  padding: 2rpx 0;
}
.scr-advice-action-text {
  flex: 1;
  font-size: 24rpx;
  color: #333;
  line-height: 1.5;
}
/* 一键加入今日微行动 */
.scr-micro-row {
  display: flex;
  margin-top: 14rpx;
}
.scr-micro-btn {
  flex: 1;
  height: 72rpx;
  line-height: 72rpx;
  font-size: 26rpx;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #10B981, #34D399);
  border-radius: 36rpx;
  border: none;
}
.scr-micro-btn::after {
  border: none;
}
.scr-micro-done {
  flex: 1;
  text-align: center;
  font-size: 24rpx;
  color: #10B981;
  background: #E8F8F1;
  border-radius: 12rpx;
  padding: 16rpx 0;
}

/* 全部健康 */
.scr-all-healthy {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30rpx 0;
}
.scr-all-healthy-icon {
  font-size: 72rpx;
  margin-bottom: 16rpx;
}
.scr-all-healthy-text {
  font-size: 28rpx;
  color: #666;
}

/* 底部按钮 */
.scr-footer {
  display: flex;
  gap: 20rpx;
  margin-top: 20rpx;
}
.scr-btn {
  flex: 1;
  height: 88rpx;
  line-height: 88rpx;
  font-size: 30rpx;
  border-radius: 44rpx;
  text-align: center;
  border: none;
}
.scr-btn-primary {
  background: linear-gradient(135deg, #F97316, #FF8C42);
  color: #fff;
  font-weight: 600;
}
.scr-btn-outline {
  background: #fff;
  color: #F97316;
  border: 2rpx solid #F97316;
}
.scr-btn-secondary {
  background: linear-gradient(135deg, #10B981, #34D399);
  color: #fff;
  font-weight: 600;
}
.scr-btn-ghost {
  background: #fff;
  color: #666;
  border: 2rpx solid #D1D5DB;
}
.scr-advice-interpretation {
  display: block;
  font-size: 26rpx;
  color: #555;
  line-height: 1.6;
  margin: 16rpx 0;
}
.scr-advice-actions {
  display: flex;
  flex-direction: column;
  margin-top: 12rpx;
}
.scr-advice-action-label {
  font-size: 24rpx;
  font-weight: 600;
  color: #F97316;
}
.scr-advice-action {
  font-size: 24rpx;
  color: #555;
  line-height: 1.5;
}
.scr-family-insight {
  background: #F5FAFE;
  border-radius: 16rpx;
  padding: 20rpx 24rpx;
  margin-top: 24rpx;
}
.scr-family-insight-label {
  display: block;
  font-size: 24rpx;
  font-weight: 600;
  color: #F97316;
  margin-bottom: 8rpx;
}
.scr-family-insight-text {
  display: block;
  font-size: 26rpx;
  color: #555;
  line-height: 1.6;
}
.scr-fallback {
  background: #FFF7ED;
  border-radius: 12rpx;
  padding: 16rpx 20rpx;
  margin-top: 16rpx;
  text-align: center;
}
.scr-fallback text {
  font-size: 24rpx;
  color: #999;
}
</style>