|
|
@@ -0,0 +1,315 @@
|
|
|
+# 财富功能入口重构 实施计划
|
|
|
+
|
|
|
+> **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` 行附近增加：
|
|
|
+```javascript
|
|
|
+referralEarnings: 0,
|
|
|
+```
|
|
|
+
|
|
|
+- [ ] **Step 2: 在 loadAllData 中加载推广收益**
|
|
|
+
|
|
|
+在 `loadAllData()` 方法末尾增加：
|
|
|
+```javascript
|
|
|
+this.loadReferralEarnings()
|
|
|
+```
|
|
|
+
|
|
|
+- [ ] **Step 3: 实现 loadReferralEarnings 方法**
|
|
|
+
|
|
|
+在 `loadProfileStats()` 方法之后增加：
|
|
|
+```javascript
|
|
|
+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` 列表末尾（"上传报告"之后）增加：
|
|
|
+```html
|
|
|
+<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 中增加：
|
|
|
+```javascript
|
|
|
+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: []` 附近增加：
|
|
|
+```javascript
|
|
|
+// 保单列表
|
|
|
+insuranceList: [],
|
|
|
+insuranceLoaded: false,
|
|
|
+```
|
|
|
+
|
|
|
+- [ ] **Step 2: 在 onShow 中加载保单数据**
|
|
|
+
|
|
|
+在 `onShow` 方法中 `this.loadFamilyMembersVisible()` 之后增加：
|
|
|
+```javascript
|
|
|
+this.loadInsuranceList()
|
|
|
+```
|
|
|
+
|
|
|
+- [ ] **Step 3: 实现 loadInsuranceList 方法**
|
|
|
+
|
|
|
+在 methods 中增加：
|
|
|
+```javascript
|
|
|
+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 中增加：
|
|
|
+```javascript
|
|
|
+getPolicyStatusLabel: function(status) {
|
|
|
+ var map = { active: '有效', expired: '已过期', cancelled: '已取消' }
|
|
|
+ return map[status] || status || '未知'
|
|
|
+},
|
|
|
+```
|
|
|
+
|
|
|
+- [ ] **Step 5: 删除「财富服务」9宫格区块**
|
|
|
+
|
|
|
+删除模板中 `service-grid` 整个区块（第 177-189 行）：
|
|
|
+```html
|
|
|
+<!-- 财富服务 8 宫格 -->
|
|
|
+<view class="section">
|
|
|
+ <view class="section-header">
|
|
|
+ <text class="section-title">🚀 财富服务</text>
|
|
|
+ </view>
|
|
|
+ <view class="service-grid">
|
|
|
+ ...
|
|
|
+ </view>
|
|
|
+</view>
|
|
|
+```
|
|
|
+
|
|
|
+- [ ] **Step 6: 在财富数据卡下方新增保单管理区块**
|
|
|
+
|
|
|
+在财富数据卡（孩子/家长）和 `DimensionIntroCard` 之间增加：
|
|
|
+```html
|
|
|
+<!-- 保单管理 -->
|
|
|
+<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 中增加：
|
|
|
+```javascript
|
|
|
+goToInsuranceList: function() {
|
|
|
+ uni.navigateTo({ url: '/pages/wealth-sub/insurance-list' })
|
|
|
+},
|
|
|
+```
|
|
|
+
|
|
|
+- [ ] **Step 8: 新增保单卡片样式**
|
|
|
+
|
|
|
+在 `<style scoped>` 中增加：
|
|
|
+```css
|
|
|
+/* 保单管理 */
|
|
|
+.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`：
|
|
|
+```javascript
|
|
|
+import { healthCheckinList, getHealthMealList, getSurveyStatus, getSurveyHistory, getFoodCautionList, getGrowthRecommendations, getExerciseRecords, getSleepRecords, getEmotionCheckinList, getCheckinList } from '../../utils/api.js'
|
|
|
+```
|
|
|
+
|
|
|
+- [ ] **Step 2: 在 loadProgressItems 中增加记账打卡判断**
|
|
|
+
|
|
|
+在 `items.push({ key: 'emotion', ... })` 之后增加：
|
|
|
+```javascript
|
|
|
+// 记账打卡
|
|
|
+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` 路由：
|
|
|
+```javascript
|
|
|
+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: 无错误
|
