五维页面与健康/成长页面登录前内容改造实现计划

面向 AI 代理的工作者： 必需子技能：使用 superpowers:subagent-driven-development（推荐）或 superpowers:executing-plans 逐任务实现此计划。步骤使用复选框（- [ ]）语法来跟踪进度。

目标： 为五维详页（身/心/智/富）、健康页、成长页补充登录前品牌展示内容，让未登录用户产生共鸣并被引导注册。

架构： 每个页面在 !isLoggedIn 分支中新增 2-3 个内容区块（痛点卡 + 最小输入卡 + 功能预览），保持现有 v-if="!isLoggedIn" 结构不变。所有内容来自 book/ 目录下的《家的算法》书稿。登录后内容不变。

技术栈： uni-app Vue 2 Options API，微信小程序（禁止可选链 ?.、CSS Grid、:key 表达式，日期用 parseDate()）

文件清单

文件	改动类型	说明
`cfc-frontend/pages/body-detail/index.vue`	修改	登录前新增痛点卡+最小输入+功能预览
`cfc-frontend/pages/mind-detail/index.vue`	修改	登录前新增痛点卡+最小输入+功能预览+引导注册
`cfc-frontend/pages/wisdom-detail/index.vue`	修改	登录前新增痛点卡+最小输入+功能预览+引导注册
`cfc-frontend/pages/wealth/index.vue`	修改	登录前新增痛点卡+最小输入
`cfc-frontend/pages/health-main/index.vue`	修改	登录前新增痛点卡+功能预览+自测入口
`cfc-frontend/pages/growth-main/index.vue`	修改	新增登录前内容（品牌词+理念+示例+功能预览+引导注册）

任务 1：身维度详页（body-detail/index.vue）登录前内容改造

文件： 修改 cfc-frontend/pages/body-detail/index.vue

现状： 登录前已有 PageBanner + brand-strap + 雷达图(always) + monthly-guidance，但缺少痛点共鸣和引导。

改动： 在 monthly-guidance 区块之后、FamilyEnergyBar（登录后）之前，新增 3 个 v-if="!isLoggedIn" 区块。

步骤 1：在 monthly-guidance 之后新增痛点卡

在 monthly-guidance 的 </view> 后面、FamilyEnergyBar 前面插入：

    <!-- 痛点卡（登录前） -->
    <view class="pain-card" v-if="!isLoggedIn">
      <view class="pain-card-icon">🩺</view>
      <view class="pain-card-body">
        <text class="pain-card-title">"指标正常≠健康"</text>
        <text class="pain-card-desc">孩子反复发烧，你扛了多少次了？</text>
        <text class="pain-card-source">—— 摘自《家的算法》第3章</text>
      </view>
    </view>

    <!-- 最小输入卡（登录前） -->
    <view class="min-input-card" v-if="!isLoggedIn">
      <view class="min-input-header">
        <text class="min-input-icon">🌱</text>
        <text class="min-input-title">今日最小输入</text>
      </view>
      <view class="min-input-body">
        <text class="min-input-action">喝一杯温水</text>
        <text class="min-input-desc">20秒就能完成，启动今天的主动健康</text>
      </view>
    </view>

    <!-- 功能预览（登录前） -->
    <view class="feature-preview" v-if="!isLoggedIn">
      <view class="feature-title">登录后你还可以</view>
      <view class="feature-grid">
        <view class="feature-item">
          <text class="feature-icon">📋</text>
          <text class="feature-label">健康报告</text>
        </view>
        <view class="feature-item">
          <text class="feature-icon">📍</text>
          <text class="feature-label">健康打卡</text>
        </view>
        <view class="feature-item">
          <text class="feature-icon">🩺</text>
          <text class="feature-label">体质测评</text>
        </view>
        <view class="feature-item">
          <text class="feature-icon">🥗</text>
          <text class="feature-label">饮食推荐</text>
        </view>
      </view>
    </view>

步骤 2：添加样式

在 <style scoped> 末尾添加：

/* 登录前 - 痛点卡 */
.pain-card {
  display: flex;
  align-items: flex-start;
  background: linear-gradient(135deg, #FFF7ED, #FFEDD5);
  border-radius: 16rpx;
  padding: 24rpx;
  margin: 20rpx 24rpx;
}
.pain-card-icon {
  font-size: 40rpx;
  margin-right: 16rpx;
  flex-shrink: 0;
}
.pain-card-body {
  flex: 1;
}
.pain-card-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #9A3412;
  display: block;
}
.pain-card-desc {
  font-size: 26rpx;
  color: #C2410C;
  margin-top: 8rpx;
  display: block;
}
.pain-card-source {
  font-size: 22rpx;
  color: #FDBA74;
  margin-top: 6rpx;
  display: block;
}

/* 最小输入卡 */
.min-input-card {
  background: #FFFFFF;
  border-radius: 16rpx;
  padding: 24rpx;
  margin: 0 24rpx 20rpx;
  border: 2rpx solid #FED7AA;
}
.min-input-header {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
}
.min-input-icon {
  font-size: 32rpx;
  margin-right: 8rpx;
}
.min-input-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}
.min-input-action {
  font-size: 36rpx;
  font-weight: bold;
  color: #EA580C;
  display: block;
  margin-bottom: 6rpx;
}
.min-input-desc {
  font-size: 24rpx;
  color: #999;
  display: block;
}

/* 功能预览 */
.feature-preview {
  margin: 0 24rpx 20rpx;
}
.feature-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 16rpx;
  display: block;
}
.feature-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}
.feature-item {
  width: calc(25% - 12rpx);
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #FFF7ED;
  border-radius: 12rpx;
  padding: 16rpx 0;
}
.feature-icon {
  font-size: 36rpx;
  display: block;
}
.feature-label {
  font-size: 22rpx;
  color: #666;
  margin-top: 6rpx;
  display: block;
}

步骤 3：验证

在微信开发者工具中预览，确认：

未登录时显示痛点卡、最小输入卡、功能预览
登录后不显示这些区块
样式在各尺寸设备上正常

任务 2：心维度详页（mind-detail/index.vue）登录前内容改造

文件： 修改 cfc-frontend/pages/mind-detail/index.vue

现状： 登录前有 PageBanner + brand-strap + monthly-guidance，但缺少雷达图（游客看不到任何数据）、引导注册。

改动： 在 monthly-guidance 之后新增痛点卡、最小输入卡、功能预览、LoginGuideCard。

步骤 1：在 monthly-guidance 之后新增内容

在 monthly-guidance 的 </view> 之后、FamilyEnergyBar（登录后）之前插入：

    <!-- 痛点卡（登录前） -->
    <view class="pain-card" v-if="!isLoggedIn">
      <view class="pain-card-icon">❤️</view>
      <view class="pain-card-body">
        <text class="pain-card-title">"身体年年体检，你的心体检过吗？"</text>
        <text class="pain-card-desc">白天忙忙碌碌，晚上躺下心里空落落的累</text>
        <text class="pain-card-source">—— 摘自《家的算法》第7章</text>
      </view>
    </view>

    <!-- 最小输入卡（登录前） -->
    <view class="min-input-card" v-if="!isLoggedIn">
      <view class="min-input-header">
        <text class="min-input-icon">🌱</text>
        <text class="min-input-title">今日最小输入</text>
      </view>
      <view class="min-input-body">
        <text class="min-input-action">一次深呼吸</text>
        <text class="min-input-desc">吸四秒，呼六秒。烦躁时做一次，前额叶重新上线</text>
      </view>
    </view>

    <!-- 功能预览（登录前） -->
    <view class="feature-preview" v-if="!isLoggedIn">
      <view class="feature-title">登录后你还可以</view>
      <view class="feature-grid">
        <view class="feature-item">
          <text class="feature-icon">📊</text>
          <text class="feature-label">情绪自评</text>
        </view>
        <view class="feature-item">
          <text class="feature-icon">📍</text>
          <text class="feature-label">情绪打卡</text>
        </view>
        <view class="feature-item">
          <text class="feature-icon">🧰</text>
          <text class="feature-label">疏导工具</text>
        </view>
        <view class="feature-item">
          <text class="feature-icon">🌟</text>
          <text class="feature-label">家庭天盘</text>
        </view>
      </view>
    </view>

    <!-- 登录引导（登录前） -->
    <view class="login-guide-section" v-if="!isLoggedIn">
      <LoginGuideCard
        title="解锁心智能量数据"
        :items="['查看心理健康测评报告', '追踪情绪变化趋势', '获取专业心理疏导建议']" />
    </view>

步骤 2：添加样式

复制任务 1 步骤 2 的样式代码到 mind-detail/index.vue 的 <style scoped> 末尾。

步骤 3：验证

确认未登录时显示所有新区块，登录后不显示。

任务 3：智维度详页（wisdom-detail/index.vue）登录前内容改造

文件： 修改 cfc-frontend/pages/wisdom-detail/index.vue

现状： 登录前有 PageBanner + brand-strap + 认知雷达图(always) + monthly-guidance，缺少引导注册。

改动： 在 monthly-guidance 之后新增痛点卡、最小输入卡、功能预览、LoginGuideCard。

[ ] 步骤 1：在 monthly-guidance 之后新增内容

<!-- 痛点卡（登录前） -->
<view class="pain-card" v-if="!isLoggedIn">
  <view class="pain-card-icon">📚</view>
  <view class="pain-card-body">
    <text class="pain-card-title">"你逼孩子学习，你自己多久没学新东西了？"</text>
    <text class="pain-card-desc">成长不是孩子的专利，是家里每个人的终身课题</text>
    <text class="pain-card-source">—— 摘自《家的算法》第4章</text>
  </view>
</view>

<!-- 最小输入卡（登录前） -->
<view class="min-input-card" v-if="!isLoggedIn">
  <view class="min-input-header">
    <text class="min-input-icon">🌱</text>
    <text class="min-input-title">今日最小输入</text>
  </view>
  <view class="min-input-body">
    <text class="min-input-action">问一个开放题</text>
    <text class="min-input-desc">"今天有没有一件事让你觉得有意思？"10秒钟就够了</text>
  </view>
</view>

<!-- 功能预览（登录前） -->
<view class="feature-preview" v-if="!isLoggedIn">
  <view class="feature-title">登录后你还可以</view>
  <view class="feature-grid">
    <view class="feature-item">
      <text class="feature-icon">🧠</text>
      <text class="feature-label">认知测评</text>
    </view>
    <view class="feature-item">
      <text class="feature-icon">🏋️</text>
      <text class="feature-label">训练中心</text>
    </view>
    <view class="feature-item">
      <text class="feature-icon">📝</text>
      <text class="feature-label">自测</text>
    </view>
    <view class="feature-item">
      <text class="feature-icon">📖</text>
      <text class="feature-label">知识库</text>
    </view>
  </view>
</view>

<!-- 登录引导（登录前） -->
<view class="login-guide-section" v-if="!isLoggedIn">
  <LoginGuideCard
    title="解锁智维能量数据"
    :items="['查看认知测评报告', '追踪认知能力发展趋势', '获取个性化训练建议']" />
</view>

[ ] 步骤 2：添加样式

复制任务 1 步骤 2 的样式代码到 wisdom-detail/index.vue 的 <style scoped> 末尾。

步骤 3：验证

任务 4：富维度详页（wealth/index.vue）登录前内容微调

文件： 修改 cfc-frontend/pages/wealth/index.vue

现状： 登录前已有 PageBanner + brand-strap + LoginGuideCard + 商品精选预览，内容较完整。

改动： 在 brand-strap 之后新增痛点卡和最小输入卡。

步骤 1：在 brand-strap 之后新增内容

在 brand-strap 的 </view> 之后、login-guide-section 之前插入：

    <!-- 痛点卡（登录前） -->
    <view class="pain-card" v-if="!isLoggedIn">
      <view class="pain-card-icon">💰</view>
      <view class="pain-card-body">
        <text class="pain-card-title">"工资到账那刻，幸福感却越来越少"</text>
        <text class="pain-card-desc">房贷扣完，孩子开销扣完，剩下的撑不到月底</text>
        <text class="pain-card-source">—— 摘自《家的算法》第5章</text>
      </view>
    </view>

    <!-- 最小输入卡（登录前） -->
    <view class="min-input-card" v-if="!isLoggedIn">
      <view class="min-input-header">
        <text class="min-input-icon">🌱</text>
        <text class="min-input-title">今日最小输入</text>
      </view>
      <view class="min-input-body">
        <text class="min-input-action">记一笔账</text>
        <text class="min-input-desc">睡前花10秒记下今天最大的一笔开销，先看见，再管理</text>
      </view>
    </view>

步骤 2：添加样式

复制任务 1 步骤 2 的样式代码到 wealth/index.vue 的 <style scoped> 末尾。

步骤 3：验证

任务 5：健康页（health-main/index.vue）登录前内容增强

文件： 修改 cfc-frontend/pages/health-main/index.vue

现状： 登录前有 PageBanner + LoginGuideCard，内容较简单。

改动： 在 PageBanner 之后新增痛点卡、功能预览、健康自测入口、LoginGuideCard 保留。

步骤 1：替换登录前内容

当前 v-if="!isLoggedIn" 区块内容替换为：

    <view v-if="!isLoggedIn">
      <PageBanner theme="body" tagline="科学管理全家健康" quote="身体健康是幸福的基础" />

      <!-- 痛点卡 -->
      <view class="pain-card">
        <view class="pain-card-icon">🩺</view>
        <view class="pain-card-body">
          <text class="pain-card-title">"没生病，不等于健康"</text>
          <text class="pain-card-desc">超过六成的家庭在过去一年中，至少一人经历过三次以上的急性疾病</text>
          <text class="pain-card-source">—— 摘自《家的算法》第3章</text>
        </view>
      </view>

      <!-- 功能预览 -->
      <view class="feature-preview">
        <view class="feature-title">健康管理三步走</view>
        <view class="feature-grid">
          <view class="feature-item">
            <text class="feature-icon">📋</text>
            <text class="feature-label">报告上传</text>
          </view>
          <view class="feature-item">
            <text class="feature-icon">📊</text>
            <text class="feature-label">在线测评</text>
          </view>
          <view class="feature-item">
            <text class="feature-icon">📍</text>
            <text class="feature-label">健康打卡</text>
          </view>
          <view class="feature-item">
            <text class="feature-icon">📋</text>
            <text class="feature-label">健康方案</text>
          </view>
        </view>
      </view>

      <!-- 健康自测入口 -->
      <view class="self-check-card" @click="goSelfCheck">
        <view class="self-check-icon">📝</view>
        <view class="self-check-body">
          <text class="self-check-title">五维健康自测</text>
          <text class="self-check-desc">15题 · 约5分钟 · 了解家庭健康状态</text>
        </view>
        <text class="self-check-arrow">›</text>
      </view>

      <LoginGuideCard title="登录后查看全家健康数据" :features="['申请专业测评','查看健康报告和诊断结果','了解家人健康状态']" />
    </view>

[ ] 步骤 2：添加样式

/* 健康自测入口 */
.self-check-card {
display: flex;
align-items: center;
background: linear-gradient(135deg, #FFF7ED, #FFEDD5);
border-radius: 16rpx;
padding: 24rpx;
margin: 0 24rpx 20rpx;
}
.self-check-icon {
font-size: 40rpx;
margin-right: 16rpx;
flex-shrink: 0;
}
.self-check-body {
flex: 1;
}
.self-check-title {
font-size: 28rpx;
font-weight: bold;
color: #9A3412;
display: block;
}
.self-check-desc {
font-size: 24rpx;
color: #C2410C;
margin-top: 4rpx;
display: block;
}
.self-check-arrow {
font-size: 36rpx;
color: #EA580C;
flex-shrink: 0;
}

[ ] 步骤 3：添加 goSelfCheck 方法

在 <script> 的 methods 中添加：

goSelfCheck() {
  uni.navigateTo({ url: '/pages/family/self-check' })
},

步骤 4：验证

任务 6：成长页（growth-main/index.vue）登录前内容新增

文件： 修改 cfc-frontend/pages/growth-main/index.vue

现状： 无登录前判断，直接显示登录后内容。

改动： 用 v-if="!isLoggedIn" 包裹登录前内容，现有内容用 v-else 包裹。

步骤 1：改造模板结构，新增登录前内容

当前模板以 PageBanner 开头，将其替换为：

  <view class="container">
    <!-- 登录前 -->
    <view v-if="!isLoggedIn">
      <PageBanner theme="action" tagline="干预 · 记录 · 成长" quote="知行合一，每天进步一点点" />

      <!-- 理念卡 -->
      <view class="pain-card">
        <view class="pain-card-icon">📈</view>
        <view class="pain-card-body">
          <text class="pain-card-title">"看见改变正在发生"</text>
          <text class="pain-card-desc">没有日志的程序无法调试。没有反馈的改变无法持续。</text>
          <text class="pain-card-source">—— 摘自《家的算法》第10章</text>
        </view>
      </view>

      <!-- 示例展示 -->
      <view class="example-card">
        <view class="example-header">
          <text class="example-title">📖 真实案例：小明三个月成长记录</text>
        </view>
        <view class="example-row">
          <text class="example-dim">身维度</text>
          <text class="example-change up">+5分</text>
        </view>
        <view class="example-row">
          <text class="example-dim">智维度</text>
          <text class="example-change up">+3分</text>
        </view>
        <view class="example-row">
          <text class="example-dim">心维度</text>
          <text class="example-change up">+4分</text>
        </view>
        <text class="example-source">基于真实脱敏数据</text>
      </view>

      <!-- 功能预览 -->
      <view class="feature-preview">
        <view class="feature-title">登录后你可以</view>
        <view class="feature-grid">
          <view class="feature-item">
            <text class="feature-icon">📊</text>
            <text class="feature-label">干预进度</text>
          </view>
          <view class="feature-item">
            <text class="feature-icon">📍</text>
            <text class="feature-label">追踪记录</text>
          </view>
          <view class="feature-item">
            <text class="feature-icon">🏆</text>
            <text class="feature-label">里程碑</text>
          </view>
          <view class="feature-item">
            <text class="feature-icon">📋</text>
            <text class="feature-label">定期调研</text>
          </view>
        </view>
      </view>

      <LoginGuideCard title="解锁完整成长档案" :features="['查看测评报告和成长趋势','记录每日干预进度','获取个性化成长建议']" />
    </view>

    <!-- 登录后（保持现有内容） -->
    <template v-else>
      <PageBanner theme="action" tagline="干预 · 记录 · 成长" quote="知行合一，每天进步一点点" />
      <!-- 后续所有现有内容... -->
    </template>
  </view>

[ ] 步骤 2：添加样式

/* 示例展示卡 */
.example-card {
background: #FFFFFF;
border-radius: 16rpx;
padding: 24rpx;
margin: 0 24rpx 20rpx;
border: 2rpx solid #D1FAE5;
}
.example-header {
margin-bottom: 16rpx;
}
.example-title {
font-size: 28rpx;
font-weight: bold;
color: #333;
display: block;
}
.example-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10rpx 0;
border-bottom: 1rpx solid #F3F4F6;
}
.example-dim {
font-size: 26rpx;
color: #666;
}
.example-change {
font-size: 28rpx;
font-weight: bold;
}
.example-change.up {
color: #10B981;
}
.example-source {
font-size: 22rpx;
color: #D1D5DB;
margin-top: 10rpx;
display: block;
}

[ ] 步骤 3：添加 isLoggedIn 响应式数据

在 <script> 的 data() 中添加：

isLoggedIn: !!uni.getStorageSync('token'),

并在 onShow 中刷新：

onShow() {
  this.isLoggedIn = !!uni.getStorageSync('token')
  // 保持现有逻辑...
}

步骤 4：验证

确认未登录时显示品牌内容，登录后恢复到现有功能。

自检清单

规格覆盖度：每个页面/维度在计划中都有对应任务
占位符扫描：无 TODO、待定、占位符
类型一致性：所有变量名、方法名、路径名一致
所有任务都包含完整的代码和样式
遵循小程序限制（无可选链、CSS Grid、:key表达式）

2026-08-10-wuweipages-loginflow-plan.md 21 KB History Raw

五维页面与健康/成长页面登录前内容改造 实现计划