صفحهٔ اصلی گشت‌و‌گذار راهنما
ثبت نام ورود
liaoxg
/
cfc
1
1
انشعاب 0
پرونده‌ها مشکلات 0 درخواست واکشی 0 ویکی
درخت: 4c93a2ed12
شاخه‌ها تگ‌ها
cfc
/
docs
/
superpowers
/
plans
/
2026-08-16-wealth-features-restructure.md

2026-08-16-wealth-features-restructure.md 10.0 KB
تاريخچه خام

财富功能入口重构 实施计划

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: 将财富维度（富页面）的「财富服务」9宫格拆解，功能迁移到我的页面（成就区）、成长页（今日增长），并在富页面直接展示保单列表。

Architecture: 纯前端改动，3个 .vue 文件独立修改，不涉及后端、数据库或新增页面。每个文件可独立并行修改。

Tech Stack: uni-app Vue 2 (Options API)，微信小程序

涉及文件:

  • cfc-frontend/pages/profile-main/profile.vue — 成就区增加「推广收益」图标
  • cfc-frontend/pages/wealth/index.vue — 删除服务网格 + 新增保单列表
  • cfc-frontend/pages/growth-main/index.vue — 今日成长增加记账打卡项

API 依赖:

  • getReferralSummary() → POST /api/invite/summary — 返回 { totalEarnings, totalCount }
  • getInsuranceList(data) → POST /api/wealth/insurance/list — 返回保单列表
  • getCheckinList(data) → POST /api/wealth/checkin/list — 返回打卡记录列表

Global Constraints

  • Vue 2 Options API，禁止 Composition API
  • 禁止可选链 ?.（用 && 替代）
  • 禁止 CSS Grid（用 flexbox）
  • 禁止 :key 表达式（用方法调用代替）
  • 禁止直接 new Date(string)（用 parseDate()）
  • 统一 @PostMapping 风格（前端仅涉及页面组件，不涉及后端接口）

Task 1: 我的页面 — 成就区增加「推广收益」图标

Files:

  • Modify: cfc-frontend/pages/profile-main/profile.vue — 成就网格 + data + loadAllData + 导航方法

Interfaces:

  • Consumes: getReferralSummary (already imported at line 253)

  • Produces: 成就网格第9项「推广收益」，点击跳转 /pages/promotion/index

  • [ ] Step 1: 在 data 中增加 referralEarnings 字段

在 data() 中 totalPoints: 0 行附近增加：

referralEarnings: 0,
  • Step 2: 在 loadAllData 中加载推广收益

在 loadAllData() 方法末尾增加：

this.loadReferralEarnings()
  • Step 3: 实现 loadReferralEarnings 方法

在 loadProfileStats() 方法之后增加：

loadReferralEarnings() {
  var self = this
  getReferralSummary().then(function(res) {
    if (res && res.code === 200 && res.data) {
      self.referralEarnings = res.data.totalEarnings || 0
    }
  }).catch(function() {})
},
  • Step 4: 在成就网格中增加第9个图标

在 ach-item 列表末尾（"上传报告"之后）增加：

<view class="ach-item" @click="goToWealthCenter">
  <view class="ach-icon-wrap" style="background:rgba(245,158,11,0.12)">
    <text class="ach-icon">💰</text>
  </view>
  <text class="ach-num">{{ referralEarnings }}</text>
  <text class="ach-label">推广收益</text>
</view>
  • Step 5: 实现 goToWealthCenter 导航方法

在 methods 中增加：

goToWealthCenter: function() {
  uni.navigateTo({ url: '/pages/promotion/index' })
},
  • Step 6: 验证 — lsp_diagnostics 检查

Run: lsp_diagnostics on cfc-frontend/pages/profile-main/profile.vue Expected: 无错误

Task 2: 富页面 — 去掉财富服务卡片 + 新增保单列表

Files:

  • Modify: cfc-frontend/pages/wealth/index.vue — 删除 service-grid 区块，新增保单列表区块，data 增加字段，加载保单数据

Interfaces:

  • Consumes: getInsuranceList (已导入，见 api.js 1961)

  • Produces: 保单摘要列表，最多3条，底部「查看更多」跳转

  • [ ] Step 1: 在 data 中增加保单相关字段

在 data() 中 guestProducts: [] 附近增加：

// 保单列表
insuranceList: [],
insuranceLoaded: false,
  • Step 2: 在 onShow 中加载保单数据

在 onShow 方法中 this.loadFamilyMembersVisible() 之后增加：

this.loadInsuranceList()
  • Step 3: 实现 loadInsuranceList 方法

在 methods 中增加：

loadInsuranceList() {
  var self = this
  this.insuranceLoaded = false
  getInsuranceList({}).then(function(res) {
    if (res && res.code === 200) {
      self.insuranceList = (res.data || []).slice(0, 3)
    }
    self.insuranceLoaded = true
  }).catch(function() {
    self.insuranceLoaded = true
  })
},
  • Step 4: 实现 getStatusLabel 方法（保单状态中文）

在 methods 中增加：

getPolicyStatusLabel: function(status) {
  var map = { active: '有效', expired: '已过期', cancelled: '已取消' }
  return map[status] || status || '未知'
},
  • Step 5: 删除「财富服务」9宫格区块

删除模板中 service-grid 整个区块（第 177-189 行）：

<!-- 财富服务 8 宫格 -->
<view class="section">
  <view class="section-header">
    <text class="section-title">🚀 财富服务</text>
  </view>
  <view class="service-grid">
    ...
  </view>
</view>
  • Step 6: 在财富数据卡下方新增保单管理区块

在财富数据卡（孩子/家长）和 DimensionIntroCard 之间增加：

<!-- 保单管理 -->
<view class="section" v-if="insuranceLoaded">
  <view class="section-header">
    <text class="section-title">🛡️ 保单管理</text>
    <text class="section-more" @click="goToInsuranceList">查看更多 ›</text>
  </view>
  <view class="insurance-card" v-if="insuranceList.length === 0">
    <view class="insurance-empty">
      <text class="insurance-empty-icon">📋</text>
      <text class="insurance-empty-text">暂无保单</text>
    </view>
  </view>
  <view class="insurance-card" v-else>
    <view class="insurance-item" v-for="(item, idx) in insuranceList" :key="idx" @click="goToInsuranceList">
      <view class="insurance-item-header">
        <text class="insurance-item-name">{{ item.policyName }}</text>
        <text class="insurance-item-status" :class="'status-' + item.status">{{ getPolicyStatusLabel(item.status) }}</text>
      </view>
      <view class="insurance-item-row">
        <text class="insurance-item-label">保险公司</text>
        <text class="insurance-item-value">{{ item.insuranceCompany || '未知' }}</text>
      </view>
      <view class="insurance-item-row">
        <text class="insurance-item-label">被保人</text>
        <text class="insurance-item-value">{{ item.insuredPerson }}</text>
      </view>
    </view>
  </view>
</view>
  • Step 7: 实现 goToInsuranceList 导航方法

在 methods 中增加：

goToInsuranceList: function() {
  uni.navigateTo({ url: '/pages/wealth-sub/insurance-list' })
},
  • Step 8: 新增保单卡片样式

在 <style scoped> 中增加：

/* 保单管理 */
.insurance-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08);
}
.insurance-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx 0;
}
.insurance-empty-icon { font-size: 60rpx; }
.insurance-empty-text { font-size: 24rpx; color: #999; margin-top: 12rpx; }
.insurance-item {
  padding: 16rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}
.insurance-item:last-child { border-bottom: none; }
.insurance-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8rpx;
}
.insurance-item-name {
  font-size: 26rpx;
  font-weight: 600;
  color: #333;
}
.insurance-item-status {
  font-size: 20rpx;
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
}
.insurance-item-status.status-active { background: #DCFCE7; color: #16A34A; }
.insurance-item-status.status-expired { background: #FEF2F2; color: #DC2626; }
.insurance-item-status.status-cancelled { background: #F5F5F5; color: #999; }
.insurance-item-row {
  display: flex;
  justify-content: space-between;
  padding: 4rpx 0;
}
.insurance-item-label { font-size: 22rpx; color: #999; }
.insurance-item-value { font-size: 22rpx; color: #666; }
  • Step 9: 验证 — lsp_diagnostics 检查

Run: lsp_diagnostics on cfc-frontend/pages/wealth/index.vue Expected: 无错误

Task 3: 成长页 — 今日成长增加「记账打卡」跟踪项

Files:

  • Modify: cfc-frontend/pages/growth-main/index.vue — progressItems 增加第5项，loadProgressItems 增加打卡判断

Interfaces:

  • Consumes: getCheckinList (需在 import 中增加)

  • Produces: 今日成长第5项「记账打卡」显示今日打卡状态

  • [ ] Step 1: 在 import 中增加 getCheckinList

在 import { ... } from '../../utils/api.js' 中增加 getCheckinList：

import { healthCheckinList, getHealthMealList, getSurveyStatus, getSurveyHistory, getFoodCautionList, getGrowthRecommendations, getExerciseRecords, getSleepRecords, getEmotionCheckinList, getCheckinList } from '../../utils/api.js'
  • Step 2: 在 loadProgressItems 中增加记账打卡判断

在 items.push({ key: 'emotion', ... }) 之后增加：

// 记账打卡
var checkinDone = false
try {
  var cParams = self.memberId ? { memberId: self.memberId } : {}
  var cRes = await getCheckinList(cParams)
  var cList = (cRes.code === 200 && cRes.data) ? cRes.data : []
  for (var ci = 0; ci < cList.length; ci++) {
    if (cList[ci] && cList[ci].checkinDate && cList[ci].checkinDate.indexOf(self.todayDate) === 0) {
      checkinDone = true
      break
    }
  }
} catch(e) {}
items.push({ key: 'checkin', icon: '💰', label: '记账打卡', done: checkinDone, actionText: '去打卡' })
  • Step 3: 在 handleProgressClick 中增加记账打卡跳转

在 handleProgressClick 方法的跳转映射中增加 checkin 路由：

var m = { checkin: '/pages/wealth-sub/checkin', diet: '/pages/health/diet-index', exercise: '/pages/health/exercise-index', sleep: '/pages/health/sleep-index', emotion: '/pages/mind/index' }
  • Step 4: 验证 — lsp_diagnostics 检查

Run: lsp_diagnostics on cfc-frontend/pages/growth-main/index.vue Expected: 无错误