| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371 |
- <template>
- <view class="container">
- <!-- 加载状态 -->
- <BaseLoading :loading="loading" text="正在加载..." />
- <template v-if="!loading">
- <!-- ===== a) 顶部 Banner ===== -->
- <PageBanner theme="home"
- tagline="家庭健康成长俱乐部"
- quote="给全家的一站式幸福提案" />
- <!-- ===== 家庭成员切换条 ===== -->
- <FamilyMemberStrip
- v-if="familyMembersVisible.length > 0"
- :members="familyMembersVisible"
- :selectedMemberId="selectedMemberId"
- :selectedMemberType="selectedMemberType"
- @select="onMemberSelect" />
- <!-- ===== b) 孩子卡片 ===== -->
- <view class="children-row animate-fade-in animate-stagger-2">
- <template v-if="children.length > 0">
- <scroll-view
- class="children-scroll"
- scroll-x
- :scroll-with-animation="true"
- :enhanced="true"
- :show-scrollbar="false"
- >
- <PlayfulCard
- v-for="child in children"
- :key="child.id"
- variant="flat"
- shadow="sm"
- :clickable="true"
- class="child-card"
- :class="{ 'child-card-single': children.length === 1 }"
- @click="goToChildDetail(child)"
- >
- <view class="child-card-inner">
- <view class="child-avatar" :class="'child-avatar-color-' + (child.id % 6)">
- <text class="child-avatar-text">{{ child.nickname ? child.nickname[0] : '?' }}</text>
- </view>
- <view class="child-card-body">
- <text class="child-card-name">{{ child.nickname }}</text>
- <view class="child-card-stats">
- <text class="child-card-points">⭐ {{ child.totalPoints || 0 }}</text>
- <text class="child-card-dan" v-if="child.danLevel">DAN{{ child.danLevel }}</text>
- </view>
- <view class="child-card-badges">
- <BaseBadge variant="primary" size="xs" v-if="child.pendingReviewCount > 0">待审 {{ child.pendingReviewCount }}</BaseBadge>
- <BaseBadge variant="error" size="xs" v-if="child.pendingWishCount > 0">心愿 {{ child.pendingWishCount }}</BaseBadge>
- </view>
- </view>
- <view class="child-card-arrow">›</view>
- </view>
- </PlayfulCard>
- </scroll-view>
- <view class="scroll-hint" v-if="children.length > 1">
- <text class="scroll-hint-text">← 左右滑动查看更多 →</text>
- </view>
- </template>
- <PlayfulCard
- v-else
- variant="flat"
- :clickable="true"
- @click="goToAddChild"
- class="empty-children-card"
- padding="28rpx"
- >
- <view class="empty-children-inner">
- <view class="empty-children-icon">👶</view>
- <view class="empty-children-text">
- <text class="empty-children-title">还没有添加孩子</text>
- <text class="empty-children-hint">点击添加孩子,开始成长之旅</text>
- </view>
- <view class="empty-children-arrow">›</view>
- </view>
- </PlayfulCard>
- </view>
- <!-- 五行能量沙盘(浠艾福 — 全家庭版) -->
- <view class="animate-fade-in animate-stagger-3">
- <wuxing-sandbox mode="live"
- :scores="energyScores"
- :overall-score="energyOverall"
- :members="energyMembers"
- :dimensions="energyDimensions"
- :total-energy="totalEnergy"
- :total-health-index="totalHealthIndex"
- @point-click="goToDomain" />
- </view>
- <!-- 会员Banner(浠艾福俱乐部) -->
- <view class="membership-wrapper animate-fade-in animate-stagger-4">
- <view class="membership-banner" @click="goToMembership">
- <view class="banner-content">
- <text class="banner-icon">👑</text>
- <view class="banner-text">
- <text class="banner-title">{{ membershipText }}</text>
- <text class="banner-subtitle">点击查看会员权益</text>
- </view>
- <text class="banner-arrow">›</text>
- </view>
- </view>
- </view>
- <!-- ===== c) 成长数据 ===== -->
- <view class="stats-section animate-fade-in animate-stagger-5">
- <view class="section-title">成长数据</view>
- <view class="stats-row">
- <!-- 任务完成率:自己的 + 全家平均 -->
- <PlayfulCard variant="flat" shadow="sm" :clickable="true" @click="goToCompletionStats" class="stat-card-wide" padding="0">
- <view class="stat-card-content">
- <view class="stat-header">
- <view class="stat-icon-wrap stat-icon-orange">
- <text class="stat-icon-symbol">📋</text>
- </view>
- <view class="stat-body">
- <text class="stat-label-header">任务完成</text>
- </view>
- </view>
- <view class="stat-compare">
- <view class="stat-compare-row">
- <text class="compare-label">自己的</text>
- <text class="compare-value accent-color">{{ myCompletionRate }}%</text>
- </view>
- <view class="progress-bar-sm">
- <view class="progress-fill-sm" :style="{ width: myCompletionRate + '%' }"></view>
- </view>
- <view class="stat-compare-row">
- <text class="compare-label">全家平均</text>
- <text class="compare-value">{{ familyAvgCompletionRate }}%</text>
- </view>
- <view class="progress-bar-sm">
- <view class="progress-fill-sm muted" :style="{ width: familyAvgCompletionRate + '%' }"></view>
- </view>
- </view>
- <text class="stat-more">查看分析 ›</text>
- </view>
- </PlayfulCard>
- <!-- 成长积分:自己的 + 全家共 -->
- <PlayfulCard variant="flat" shadow="sm" :clickable="true" @click="goToRewards" class="stat-card-wide" padding="0">
- <view class="stat-card-content">
- <view class="stat-header">
- <view class="stat-icon-wrap stat-icon-gold">
- <text class="stat-icon-symbol">⭐</text>
- </view>
- <view class="stat-body">
- <text class="stat-label-header">成长积分</text>
- </view>
- </view>
- <view class="stat-compare">
- <view class="stat-compare-row">
- <text class="compare-label">自己的</text>
- <text class="compare-value gold-color">{{ myPoints }}</text>
- </view>
- <view class="stat-compare-row">
- <text class="compare-label">全家共</text>
- <text class="compare-value">{{ familyTotalPoints }}</text>
- </view>
- </view>
- <text class="stat-encourage" v-if="myPoints > 0">太棒了!</text>
- <text class="stat-encourage muted" v-else>开始赚星星吧</text>
- </view>
- </PlayfulCard>
- </view>
- </view>
- <!-- ===== AI 家庭助手入口 ===== -->
- <view class="ai-entry-section animate-fade-in animate-stagger-5">
- <PlayfulCard variant="flat" shadow="sm" :clickable="true" @click="goToAIChat" class="ai-entry-card" padding="24rpx">
- <view class="ai-entry">
- <view class="ai-entry-icon">🤖</view>
- <view class="ai-entry-body">
- <text class="ai-entry-title">AI 家庭助手</text>
- <text class="ai-entry-desc">问问孩子的表现,了解家庭情况</text>
- </view>
- <text class="ai-entry-arrow">›</text>
- </view>
- </PlayfulCard>
- </view>
- <!-- ===== d) 今日重点 ===== -->
- <view class="today-section animate-fade-in animate-stagger-6">
- <view class="section-title">今日重点</view>
- <PlayfulCard variant="flat" class="today-card">
- <template slot="header">
- <view class="today-header">
- <text class="today-label">今日待完成</text>
- <text class="today-count">{{ pendingTasks.length }}项任务</text>
- </view>
- </template>
- <view class="task-list" v-if="pendingTasks.length > 0">
- <view class="task-item" v-for="task in pendingTasks.slice(0, 3)" :key="task.id">
- <view class="task-dot" :class="'dot-color-' + (task.id % 5)"></view>
- <text class="task-title">{{ task.title }}</text>
- </view>
- </view>
- <BaseEmpty v-else icon="🎉" title="今日任务已完成" description="太棒了!" :compact="true" />
- <view slot="actions" class="task-view-all" @click="goToTaskList">
- <text>查看全部</text>
- <text class="arrow">→</text>
- </view>
- </PlayfulCard>
- </view>
- <!-- ===== e) 成长里程碑 ===== -->
- <view class="milestone-section animate-fade-in animate-stagger-7">
- <view class="section-title">成长里程碑</view>
- <PlayfulCard variant="flat" class="milestone-card">
- <view class="milestone-item" v-if="selectedChild && selectedChild.streakDays >= 7">
- <view class="milestone-icon-wrap milestone-star">
- <text class="milestone-icon">🌟</text>
- </view>
- <text class="milestone-text">连续7天打卡</text>
- </view>
- <view class="milestone-item" v-if="selectedChild && selectedChild.streakDays >= 30">
- <view class="milestone-icon-wrap milestone-trophy">
- <text class="milestone-icon">🏆</text>
- </view>
- <text class="milestone-text">坚持一个月啦!</text>
- </view>
- <view class="milestone-item" v-if="(selectedChild && selectedChild.totalPoints) >= 1000">
- <view class="milestone-icon-wrap milestone-sparkle">
- <text class="milestone-icon">💫</text>
- </view>
- <text class="milestone-text">积分突破1000</text>
- </view>
- <BaseEmpty v-if="!hasMilestones" icon="🌱" title="开始养成好习惯" description="见证成长" :compact="true" />
- </PlayfulCard>
- </view>
- <!-- ===== f) 待处理事项 ===== -->
- <view class="pending-section animate-fade-in animate-stagger-8">
- <view class="section-title">📋 待处理事项</view>
- <view class="pending-grid">
- <view class="pending-card" @click="goToReview">
- <view class="pending-icon pending-icon--blue">
- <text class="pending-emoji">📝</text>
- </view>
- <view class="pending-info">
- <text class="pending-count accent-color">{{ pendingReviewTasks.length }}</text>
- <text class="pending-label">待审核任务</text>
- </view>
- </view>
- <view class="pending-card" @click="goToWishApprove">
- <view class="pending-icon pending-icon--pink">
- <text class="pending-emoji">💝</text>
- </view>
- <view class="pending-info">
- <text class="pending-count pink-color">{{ pendingReviewWishes.length }}</text>
- <text class="pending-label">待审批心愿</text>
- </view>
- </view>
- <view class="pending-card" @click="goToAssessmentReport">
- <view class="pending-icon pending-icon--green">
- <text class="pending-emoji">📊</text>
- </view>
- <view class="pending-info">
- <text class="pending-count teal-color">{{ hasNewReport ? '有新' : '暂无' }}</text>
- <text class="pending-label">最新测评报告</text>
- </view>
- </view>
- <view class="pending-card" @click="goToActivities">
- <view class="pending-icon pending-icon--orange">
- <text class="pending-emoji">🎉</text>
- </view>
- <view class="pending-info">
- <text class="pending-count orange-color">{{ hotActivityCount > 0 ? hotActivityCount : '暂无' }}</text>
- <text class="pending-label">活动推荐</text>
- </view>
- </view>
- </view>
- </view>
- <!-- ===== g) 成长建议 ===== -->
- <view class="advice-section animate-fade-in animate-stagger-9" v-if="growthAdvice.length > 0">
- <view class="section-title">💡 成长建议</view>
- <PlayfulCard variant="flat" class="advice-card" v-for="advice in growthAdvice" :key="advice.id" padding="0">
- <view class="advice-content">
- <view class="advice-icon-wrap">
- <text class="advice-icon">💡</text>
- </view>
- <view class="advice-text-wrap">
- <text class="advice-title">{{ advice.title }}</text>
- <text class="advice-desc">{{ advice.summary || advice.description }}</text>
- </view>
- <text class="advice-arrow">›</text>
- </view>
- </PlayfulCard>
- </view>
- <!-- ===== h) 待审核任务 ===== -->
- <view class="review-section animate-fade-in animate-stagger-10" v-if="pendingReviewTasks.length > 0">
- <view class="section-title">待审核任务</view>
- <PlayfulCard
- variant="flat"
- shadow="sm"
- class="review-card"
- v-for="task in pendingReviewTasks"
- :key="task.id"
- padding="0"
- >
- <view class="review-card-content">
- <view class="review-info">
- <text class="task-name">{{ task.title }}</text>
- <text class="task-child" v-if="task.childName">提供者: {{ task.childName }}</text>
- </view>
- <view class="review-actions">
- <PlayfulButton variant="success" size="xs" @click="approveTask(task.id)">通过</PlayfulButton>
- <PlayfulButton variant="error" size="xs" @click="rejectTask(task.id)">拒绝</PlayfulButton>
- </view>
- </view>
- </PlayfulCard>
- </view>
- <!-- ===== g) 快捷操作 ===== -->
- <view class="quick-section animate-fade-in animate-stagger-9">
- <view class="section-title">快捷操作</view>
- <PlayfulCard variant="flat" class="quick-card">
- <view class="quick-actions">
- <view class="action-item" @click="addTask">
- <view class="action-icon act-add">
- <text class="action-icon-text">➕</text>
- </view>
- <text class="action-label">添加任务</text>
- </view>
- <view class="action-item" @click="goToReview">
- <view class="action-icon act-review">
- <text class="action-icon-text">📋</text>
- </view>
- <text class="action-label">审核任务</text>
- </view>
- <view class="action-item" @click="manageChildren">
- <view class="action-icon act-child">
- <text class="action-icon-text">👨👩👧</text>
- </view>
- <text class="action-label">孩子管理</text>
- </view>
- <view class="action-item" @click="goToRewards">
- <view class="action-icon act-reward">
- <text class="action-icon-text">🎁</text>
- </view>
- <text class="action-label">奖励中心</text>
- </view>
- <view class="action-item" @click="inviteFriend">
- <view class="action-icon act-invite">
- <text class="action-icon-text">📤</text>
- </view>
- <text class="action-label">邀请家人</text>
- </view>
- </view>
- </PlayfulCard>
- </view>
- </template>
- </view>
- </template>
- <script>
- import { getFamilyMembers, getChildren, getPendingReviewTasks, getPendingWishes, approveTask, rejectTask, getChildCompletionStats, getParentDashboard, getFamilyEnergySandbox, getEnergyOverview, getVisibleFamilyMembers } from '../../utils/api.js'
- import PageBanner from '../../components/PageBanner.vue'
- import WuxingSandbox from '../../components/wuxing-sandbox.vue'
- import PlayfulCard from '../../components/PlayfulCard.vue'
- import PlayfulButton from '../../components/PlayfulButton.vue'
- import BaseBadge from '../../components/BaseBadge.vue'
- import BaseEmpty from '../../components/BaseEmpty.vue'
- import BaseLoading from '../../components/BaseLoading.vue'
- import FamilyMemberStrip from '../../components/FamilyMemberStrip.vue'
- export default {
- components: { PageBanner, WuxingSandbox, PlayfulCard, PlayfulButton, BaseBadge, BaseEmpty, BaseLoading, FamilyMemberStrip },
- data() {
- return {
- nickname: '',
- familyMembers: [],
- children: [],
- selectedChild: null,
- pendingReviewTasks: [],
- pendingReviewWishes: [],
- pendingWishesCount: 0,
- pendingTasks: [],
- hotActivityCount: 0,
- hasNewReport: false,
- growthAdvice: [],
- myCompletionRate: 0,
- familyAvgCompletionRate: 0,
- myPoints: 0,
- familyTotalPoints: 0,
- membershipText: '开通家庭会员 畅享全部权益',
- loading: true,
- currentChildId: '',
- _initialLoadDone: false,
- _familyId: null,
- familyMembersVisible: [],
- selectedMemberId: 0,
- selectedMemberType: 'all',
- energyData: null,
- energyDimensions: [],
- totalEnergy: 0,
- totalHealthIndex: 0
- }
- },
- computed: {
- energyScores() {
- var d = this.energyData
- if (!d) return { body: 0, mind: 0, wisdom: 0, action: 0, wealth: 0 }
- return { body: d.bodyScore, mind: d.mindScore, wisdom: d.wisdomScore, action: d.actionScore, wealth: d.wealthScore }
- },
- energyOverall() {
- return this.energyData ? this.energyData.overallScore : 0
- },
- energyMembers() {
- return this.energyData ? this.energyData.members : []
- },
- greetingText() {
- const hour = new Date().getHours()
- if (hour < 6) return '夜深了'
- if (hour < 9) return '早上好'
- if (hour < 12) return '上午好'
- if (hour < 14) return '中午好'
- if (hour < 18) return '下午好'
- if (hour < 22) return '晚上好'
- return '夜深了'
- },
- hasMilestones() {
- const c = this.selectedChild
- if (!c) return false
- return (c.streakDays >= 7) || (c.streakDays >= 30) || (c.totalPoints >= 1000)
- }
- },
- // 使用 mounted 而非 onLoad,因为本组件作为条件渲染子组件(v-if),
- // page 生命周期钩子(onLoad/onShow)可能在组件挂载前已触发完毕
- mounted() {
- if (!uni.getStorageSync('token')) {
- uni.reLaunch({ url: '/pages/login/login' })
- return
- }
- this.loadData()
- },
- onShow() {
- // 首次 onShow 紧接 mounted 之后,跳过避免双重加载
- if (!this._initialLoadDone) {
- this._initialLoadDone = true
- return
- }
- const currentRole = uni.getStorageSync('currentRole') || 'parent'
- if (currentRole === 'child') {
- uni.reLaunch({ url: '/pages/index/child-index' })
- return
- }
- if (uni.getStorageSync('token')) {
- this.loadData()
- }
- },
- methods: {
- async loadData() {
- this.loading = true
- try {
- const userInfo = uni.getStorageSync('userInfo')
- this.nickname = (userInfo && userInfo.nickname) ? userInfo.nickname : ''
- // 优先使用仪表盘接口(包含孩子列表 + 统计数据)
- let dashboardLoaded = false
- try {
- const dashRes = await getParentDashboard()
- const dashData = dashRes.data || {}
- const dashChildren = dashData.children || []
- // 过滤:仅保留孩子角色成员,排除家长/本人
- var currentUserId = uni.getStorageSync('userId')
- var filteredChildren = dashChildren.filter(function(c) {
- return c && c.id && c.id !== currentUserId && (c.role === 'child' || c.memberType === 'child' || !c.role)
- })
- if (filteredChildren.length > 0) {
- this.children = filteredChildren
- this.selectedChild = filteredChildren[0]
- this.familyAvgCompletionRate = dashData.avgCompletionRate || 0
- // 家长自身数据(积分 + 任务完成率)
- this.myPoints = dashData.parentPoints || 0
- this.myCompletionRate = dashData.parentCompletionRate || 0
- // 从仪表盘获取 familyId
- if (dashData.familyId) {
- this._familyId = dashData.familyId
- }
- dashboardLoaded = true
- }
- } catch (e) {
- console.log('获取仪表盘数据失败,降级到单独接口', e)
- }
- // 降级:使用原有单独接口
- if (!dashboardLoaded) {
- try {
- const currentUserId = uni.getStorageSync('userId')
- const membersRes = await getFamilyMembers()
- const data = membersRes.data || {}
- const parents = (data.parents || []).filter(function(p) { return p && p.id && p.id !== currentUserId }).map(function(p) { return { ...p, role: 'parent' } })
- const children = (data.children || []).filter(function(c) { return c && c.id }).map(function(c) { return { ...c, role: 'child' } })
- this.familyMembers = [].concat(parents, children)
- if (children.length > 0) {
- this.selectedChild = children[0]
- }
- // 保存 familyId 用于后续请求
- if (data.familyId) {
- this._familyId = data.familyId
- }
- } catch (e) {
- console.log('获取家庭成员失败', e)
- }
- if (this.children.length === 0) {
- const childrenRes = await getChildren()
- const rawChildren = childrenRes.data || []
- this.children = rawChildren
- if (this.children.length > 0 && !this.selectedChild) {
- this.selectedChild = this.children[0]
- }
- }
- }
- const reviewRes = await getPendingReviewTasks()
- const allReviewTasks = reviewRes.data || []
- this.pendingReviewTasks = allReviewTasks.slice(0, 3)
- try {
- const wishRes = await getPendingWishes(this._familyId)
- this.pendingReviewWishes = wishRes.data || []
- } catch (e) {
- console.log('获取待处理心愿失败', e)
- this.pendingReviewWishes = []
- }
- const reviewMap = {}
- const wishMap = {}
- for (let i = 0; i < allReviewTasks.length; i++) {
- const task = allReviewTasks[i]
- const cid = task.childId || task.assigneeId
- if (cid) {
- reviewMap[cid] = (reviewMap[cid] || 0) + 1
- }
- }
- for (let j = 0; j < (this.pendingReviewWishes || []).length; j++) {
- const wish = this.pendingReviewWishes[j]
- const cid = wish.childId
- if (cid) {
- wishMap[cid] = (wishMap[cid] || 0) + 1
- }
- }
- this.children = this.children.map(function(c) {
- return {
- ...c,
- pendingReviewCount: reviewMap[c.id] || 0,
- pendingWishCount: wishMap[c.id] || 0
- }
- })
- // 计算全家总积分(家长 + 所有孩子)
- var totalPts = this.myPoints
- for (var pi = 0; pi < this.children.length; pi++) {
- totalPts += (this.children[pi].totalPoints || 0)
- }
- this.familyTotalPoints = totalPts
- // 如果仪表盘未加载到数据,降级:从孩子数据取近似值
- if (!dashboardLoaded) {
- // 降级:家长积分取自己的(从缓存或API),完成率取第一个孩子的
- const targetChild = this.selectedChild || (this.children.length > 0 ? this.children[0] : null)
- if (targetChild) {
- try {
- const statsRes = await getChildCompletionStats({ childId: targetChild.id })
- if (statsRes && statsRes.data) {
- this.myCompletionRate = statsRes.data.completionRate || 0
- }
- } catch (e) {
- console.log('获取个人完成率失败', e)
- }
- this.myPoints = targetChild.totalPoints || 0
- this.familyAvgCompletionRate = this.myCompletionRate
- }
- }
- // 待完成任务 - 使用真实统计中的pendingTasks
- this.pendingTasks = []
- if (this.children.length > 0) {
- const targetChild = this.selectedChild || this.children[0]
- try {
- const r2 = await getChildCompletionStats({ childId: targetChild.id })
- if (r2 && r2.data && r2.data.pendingTasks > 0) {
- for (let k = 0; k < Math.min(r2.data.pendingTasks, 3); k++) {
- this.pendingTasks.push({ id: 100 + k, title: '待完成任务 ' + (k + 1) })
- }
- }
- } catch (e) {
- this.pendingTasks = []
- }
- }
- // 加载家庭能量沙盘数据(五维 + 所有成员)
- try {
- const energyRes = await getFamilyEnergySandbox()
- this.energyData = energyRes.data || null
- } catch (e) {
- console.log('获取能量沙盘数据失败', e)
- this.energyData = null
- }
- // 加载家庭成员可见列表
- this.loadFamilyMembersVisible()
- // 加载五维能量概览(账本模式)
- var overviewChildId = this.currentChildId
- if (overviewChildId) {
- try {
- var overviewRes = await getEnergyOverview(overviewChildId)
- if (overviewRes && overviewRes.data) {
- this.energyDimensions = overviewRes.data.dimensions || []
- this.totalEnergy = overviewRes.data.totalEnergy || 0
- this.totalHealthIndex = overviewRes.data.totalHealthIndex || 0
- }
- } catch (e) {
- console.log('获取能量概览失败', e)
- }
- }
- } catch (e) {
- console.error('加载数据失败', e)
- } finally {
- this.loading = false
- }
- },
- async approveTask(taskId) {
- try {
- await approveTask(taskId)
- uni.showToast({ title: '已通过', icon: 'success' })
- this.loadData()
- } catch (e) {
- uni.showToast({ title: '操作失败', icon: 'none' })
- }
- },
- async rejectTask(taskId) {
- try {
- await rejectTask(taskId)
- uni.showToast({ title: '已拒绝', icon: 'success' })
- this.loadData()
- } catch (e) {
- uni.showToast({ title: '操作失败', icon: 'none' })
- }
- },
- // 加载可见家庭成员
- async loadFamilyMembersVisible() {
- try {
- var res = await getVisibleFamilyMembers()
- this.familyMembersVisible = res.data || []
- } catch (e) {
- console.log('获取可见家庭成员失败', e)
- this.familyMembersVisible = []
- }
- },
- // 成员选择
- onMemberSelect(member) {
- if (member.memberType === 'all') {
- this.selectedMemberId = 0
- this.selectedMemberType = 'all'
- } else {
- this.selectedMemberId = member.id
- this.selectedMemberType = member.memberType
- }
- // TODO: 根据选中成员重新加载对应维度数据
- },
- goToCompletionStats() {
- if (this.children.length === 1) {
- uni.navigateTo({ url: '/pages/stats/completion-rate?childId=' + this.children[0].id })
- } else {
- uni.navigateTo({ url: '/pages/stats/completion-rate?familyView=1' })
- }
- },
- goToDomain(code) {
- // 跳转到能量详情页(T10 创建)
- var childId = this.currentChildId
- if (!childId || !code) return
- uni.navigateTo({
- url: '/pages/energy/detail?childId=' + childId + '&code=' + code
- })
- },
- goToMembership() {
- uni.showToast({ title: '即将上线', icon: 'none' })
- },
- goToChildDetail(child) {
- uni.navigateTo({ url: '/pages/parent/child-detail?childId=' + child.id + '&childName=' + encodeURIComponent(child.nickname || '') })
- },
- addTask() { uni.navigateTo({ url: '/pages/tasks/create-task' }) },
- goToReview() { uni.navigateTo({ url: '/pages/tasks/review' }) },
- goToWishApprove() { uni.navigateTo({ url: '/pages/wishes/approve' }) },
- goToAssessmentReport() { uni.navigateTo({ url: '/pages/assessment/report' }) },
- goToActivities() { uni.switchTab({ url: '/pages/discover/index' }) },
- goToRewards() { uni.switchTab({ url: '/pages/rewards/rewards' }) },
- goToAIChat() { uni.navigateTo({ url: '/pages/ai/chat' }) },
- goToTaskList() { uni.switchTab({ url: '/pages/tasks/tasks' }) },
- manageChildren() { uni.navigateTo({ url: '/pages/profile/children' }) },
- inviteFriend() { uni.navigateTo({ url: '/pages/parent/invite/index' }) },
- goToAddChild() { uni.navigateTo({ url: '/pages/profile/create-child' }) }
- }
- }
- </script>
- <style scoped>
- /* ========================================
- Flat Card Design System — 家长端暖橙扁平
- ======================================== */
- .container {
- padding: 32rpx;
- background: var(--bg, #F5F9FC);
- min-height: 100vh;
- }
- /* ========================================
- 区块标题
- ======================================== */
- .section-title {
- font-size: 32rpx;
- font-weight: 700;
- color: var(--text, #1E293B);
- margin-bottom: var(--space-md);
- }
- /* ========================================
- b) 孩子卡片
- ======================================== */
- .children-row {
- margin-bottom: 48rpx;
- }
- .children-scroll {
- display: flex;
- flex-direction: row;
- white-space: nowrap;
- overflow: hidden;
- }
- .child-card {
- display: inline-flex !important;
- margin-right: 16rpx;
- min-width: 320rpx;
- width: auto;
- }
- .child-card-single {
- width: 100%;
- margin-right: 0;
- }
- .child-card-inner {
- display: flex;
- align-items: center;
- width: 100%;
- }
- .child-avatar {
- width: 80rpx;
- height: 80rpx;
- border-radius: var(--radius-full, 50%);
- display: flex;
- align-items: center;
- justify-content: center;
- flex-shrink: 0;
- }
- .child-avatar-color-0 { background: linear-gradient(135deg, var(--color-primary, #5B9BD5), var(--color-primary-dark, #3A7CC4)); }
- .child-avatar-color-1 { background: linear-gradient(135deg, var(--color-accent, #0EA5E9), #6366F1); }
- .child-avatar-color-2 { background: linear-gradient(135deg, #10B981, #059669); }
- .child-avatar-color-3 { background: linear-gradient(135deg, #EC4899, #E11D48); }
- .child-avatar-color-4 { background: linear-gradient(135deg, #84CC16, #65A30D); }
- .child-avatar-color-5 { background: linear-gradient(135deg, #8B5CF6, #6D28D9); }
- .child-avatar-text {
- color: #FFFFFF;
- font-size: 36rpx;
- font-weight: 600;
- }
- .child-card-body {
- flex: 1;
- margin-left: 16rpx;
- min-width: 0;
- }
- .child-card-name {
- font-size: 30rpx;
- font-weight: 600;
- color: var(--text, #1E293B);
- display: block;
- line-height: 1.3;
- }
- .child-card-stats {
- display: flex;
- align-items: center;
- margin-top: 6rpx;
- gap: 16rpx;
- }
- .child-card-points {
- font-size: 24rpx;
- color: var(--color-primary, #5B9BD5);
- font-weight: 600;
- }
- .child-card-dan {
- font-size: 22rpx;
- color: var(--color-accent, #0EA5E9);
- font-weight: 500;
- }
- .child-card-badges {
- display: flex;
- gap: 8rpx;
- margin-top: 8rpx;
- flex-wrap: wrap;
- }
- .child-card-arrow {
- font-size: 36rpx;
- color: var(--muted, #94A3B8);
- margin-left: 8rpx;
- flex-shrink: 0;
- }
- .scroll-hint {
- text-align: center;
- margin-top: 12rpx;
- }
- .scroll-hint-text {
- font-size: 22rpx;
- color: var(--muted, #94A3B8);
- }
- /* Empty children */
- .empty-children-card {
- margin-top: 24rpx;
- }
- .empty-children-inner {
- display: flex;
- align-items: center;
- }
- .empty-children-icon {
- font-size: 56rpx;
- margin-right: 16rpx;
- }
- .empty-children-text {
- flex: 1;
- }
- .empty-children-title {
- font-size: 28rpx;
- font-weight: 600;
- color: var(--text, #1E293B);
- display: block;
- }
- .empty-children-hint {
- font-size: 24rpx;
- color: var(--muted, #94A3B8);
- margin-top: 6rpx;
- display: block;
- }
- .empty-children-arrow {
- font-size: 36rpx;
- color: var(--muted, #94A3B8);
- }
- /* ========================================
- WuxingSandbox & Membership Wrappers
- ======================================== */
- .membership-wrapper {
- margin-bottom: 48rpx;
- }
- /* 浠艾福俱乐部 - 会员Banner */
- .membership-banner {
- padding: 30rpx 32rpx;
- background: linear-gradient(135deg, #FFD700, #FFA500);
- border-radius: var(--radius-md, 20rpx);
- box-shadow: var(--shadow-md);
- }
- .banner-content {
- display: flex;
- align-items: center;
- }
- .banner-icon {
- font-size: 60rpx;
- margin-right: 20rpx;
- }
- .banner-text {
- flex: 1;
- }
- .banner-title {
- font-size: 30rpx;
- font-weight: bold;
- color: #8B4513;
- display: block;
- }
- .banner-subtitle {
- font-size: 24rpx;
- color: #A0522D;
- margin-top: 6rpx;
- display: block;
- }
- .banner-arrow {
- font-size: 40rpx;
- color: #8B4513;
- }
- /* ========================================
- c) 成长数据
- ======================================== */
- .stats-section {
- margin-bottom: 48rpx;
- }
- .stats-row {
- display: flex;
- gap: 16rpx;
- }
- .stat-card-wide {
- flex: 1;
- min-width: 0;
- box-sizing: border-box;
- }
- .stat-card-content {
- padding: 24rpx;
- }
- .stat-header {
- display: flex;
- align-items: center;
- margin-bottom: 16rpx;
- }
- .stat-icon-wrap {
- width: 56rpx;
- height: 56rpx;
- border-radius: var(--radius-sm, 12rpx);
- display: flex;
- align-items: center;
- justify-content: center;
- margin-right: 14rpx;
- flex-shrink: 0;
- }
- .stat-icon-symbol {
- font-size: 28rpx;
- }
- .stat-icon-orange { background: rgba(91, 155, 213, 0.12); }
- .stat-icon-gold { background: rgba(245, 158, 11, 0.15); }
- .stat-body {
- flex: 1;
- min-width: 0;
- }
- .stat-label-header {
- font-size: 26rpx;
- font-weight: 600;
- color: var(--text, #1E293B);
- }
- /* 对比行布局 */
- .stat-compare {
- margin-bottom: 12rpx;
- }
- .stat-compare-row {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 4rpx;
- }
- .compare-label {
- font-size: 22rpx;
- color: var(--text-secondary, #64748B);
- }
- .compare-value {
- font-size: 30rpx;
- font-weight: 700;
- }
- /* 进度条 - 紧凑版 */
- .progress-bar-sm {
- height: 6rpx;
- background: var(--border-light, #E2E8F0);
- border-radius: 999rpx;
- overflow: hidden;
- margin-bottom: 8rpx;
- }
- .progress-fill-sm {
- height: 100%;
- background: linear-gradient(90deg, var(--color-primary, #5B9BD5), #F59E0B);
- border-radius: 999rpx;
- transition: width 0.3s ease;
- }
- .progress-fill-sm.muted {
- background: linear-gradient(90deg, #94A3B8, #CBD5E1);
- }
- .accent-color { color: var(--color-primary, #5B9BD5); }
- .gold-color { color: #F59E0B; }
- .stat-more {
- font-size: 22rpx;
- color: var(--color-accent, #0EA5E9);
- font-weight: 500;
- display: block;
- }
- .stat-encourage {
- font-size: 22rpx;
- color: #10B981;
- font-weight: 500;
- margin-top: 8rpx;
- display: block;
- }
- .stat-encourage.muted {
- color: var(--muted, #94A3B8);
- }
- /* AI 家庭助手入口 */
- .ai-entry-section {
- margin-bottom: 48rpx;
- }
- .ai-entry-card .PlayfulCard-content {
- padding: 24rpx;
- }
- .ai-entry {
- display: flex;
- align-items: center;
- }
- .ai-entry-icon {
- width: 64rpx;
- height: 64rpx;
- font-size: 36rpx;
- display: flex;
- align-items: center;
- justify-content: center;
- flex-shrink: 0;
- }
- .ai-entry-body {
- flex: 1;
- margin: 0 16rpx;
- min-width: 0;
- }
- .ai-entry-title {
- font-size: 26rpx;
- font-weight: 600;
- color: var(--text, #1E293B);
- display: block;
- }
- .ai-entry-desc {
- font-size: 22rpx;
- color: var(--text-secondary, #64748B);
- margin-top: 4rpx;
- display: block;
- }
- .ai-entry-arrow {
- font-size: 32rpx;
- color: var(--muted, #94A3B8);
- }
- /* ========================================
- d) 今日重点
- ======================================== */
- .today-section {
- margin-bottom: 48rpx;
- }
- .today-card .today-header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- }
- .today-label {
- font-size: 28rpx;
- font-weight: 600;
- color: var(--text, #1E293B);
- }
- .today-count {
- font-size: 24rpx;
- color: var(--color-primary, #5B9BD5);
- font-weight: 600;
- }
- .task-list {
- margin-bottom: 8rpx;
- }
- .task-item {
- display: flex;
- align-items: center;
- padding: 18rpx 0;
- border-bottom: 1rpx solid var(--border-light, #E2E8F0);
- }
- .task-item:last-child {
- border-bottom: none;
- }
- .task-dot {
- width: 14rpx;
- height: 14rpx;
- border-radius: 50%;
- margin-right: 16rpx;
- flex-shrink: 0;
- }
- .dot-color-0 { background: var(--color-primary, #5B9BD5); }
- .dot-color-1 { background: #10B981; }
- .dot-color-2 { background: var(--color-accent, #0EA5E9); }
- .dot-color-3 { background: #F59E0B; }
- .dot-color-4 { background: var(--color-error, #EF4444); }
- .task-title {
- font-size: 28rpx;
- color: var(--text, #1E293B);
- }
- .task-view-all {
- display: flex;
- justify-content: flex-end;
- align-items: center;
- color: var(--text-secondary, #64748B);
- font-size: 24rpx;
- padding-top: 16rpx;
- border-top: 1rpx solid var(--border-light, #E2E8F0);
- }
- .task-view-all .arrow {
- margin-left: 8rpx;
- }
- /* ========================================
- e) 成长里程碑
- ======================================== */
- .milestone-section {
- margin-bottom: 48rpx;
- }
- .milestone-card {
- padding: 24rpx !important;
- }
- .milestone-item {
- display: flex;
- align-items: center;
- padding: 16rpx 0;
- border-bottom: 1rpx solid var(--border-light, #E2E8F0);
- }
- .milestone-item:last-child {
- border-bottom: none;
- }
- .milestone-icon-wrap {
- width: 56rpx;
- height: 56rpx;
- border-radius: var(--radius-sm, 12rpx);
- display: flex;
- align-items: center;
- justify-content: center;
- margin-right: 16rpx;
- flex-shrink: 0;
- }
- .milestone-icon {
- font-size: 28rpx;
- }
- .milestone-star { background: rgba(245, 158, 11, 0.15); }
- .milestone-trophy { background: rgba(91, 155, 213, 0.12); }
- .milestone-sparkle { background: rgba(16, 185, 129, 0.12); }
- .milestone-text {
- font-size: 28rpx;
- color: var(--text, #1E293B);
- }
- /* ========================================
- f) 待处理事项
- ======================================== */
- .pending-section { margin-bottom: 48rpx; }
- .pending-grid {
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- gap: 16rpx;
- }
- .pending-card {
- background: #fff;
- border-radius: 20rpx;
- padding: 24rpx;
- box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
- display: flex;
- align-items: center;
- }
- .pending-card:active { opacity: 0.8; }
- .pending-icon {
- width: 72rpx; height: 72rpx;
- border-radius: 16rpx;
- display: flex; align-items: center; justify-content: center;
- margin-right: 16rpx; flex-shrink: 0;
- }
- .pending-icon--blue { background: rgba(91,155,213,0.12); }
- .pending-icon--pink { background: rgba(236,72,153,0.12); }
- .pending-icon--green { background: rgba(16,185,129,0.12); }
- .pending-icon--orange { background: rgba(249,115,22,0.12); }
- .pending-emoji { font-size: 32rpx; }
- .pending-info { flex: 1; min-width: 0; }
- .pending-count { font-size: 36rpx; font-weight: 800; display: block; }
- .pending-label { font-size: 22rpx; color: #666; margin-top: 4rpx; display: block; }
- .pink-color { color: #EC4899; }
- .orange-color { color: #F97316; }
- /* ========================================
- g) 成长建议
- ======================================== */
- .advice-section { margin-bottom: 48rpx; }
- .advice-card { margin-bottom: 12rpx; }
- .advice-content {
- display: flex; align-items: center; padding: 24rpx;
- }
- .advice-icon-wrap {
- width: 56rpx; height: 56rpx;
- border-radius: 14rpx;
- background: rgba(91,155,213,0.1);
- display: flex; align-items: center; justify-content: center;
- margin-right: 16rpx; flex-shrink: 0;
- }
- .advice-icon { font-size: 28rpx; }
- .advice-text-wrap { flex: 1; min-width: 0; }
- .advice-title { font-size: 28rpx; font-weight: 600; color: #333; display: block; }
- .advice-desc { font-size: 24rpx; color: #999; margin-top: 4rpx; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
- .advice-arrow { font-size: 36rpx; color: #ccc; margin-left: 12rpx; }
- /* ========================================
- h) 待审核任务
- ======================================== */
- .review-section {
- margin-bottom: 48rpx;
- }
- .review-card {
- margin-bottom: 16rpx;
- }
- .review-card:last-child {
- margin-bottom: 0;
- }
- .review-card-content {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 24rpx;
- }
- .review-info {
- flex: 1;
- min-width: 0;
- }
- .review-info .task-name {
- font-size: 28rpx;
- color: var(--text, #1E293B);
- display: block;
- margin-bottom: 4rpx;
- }
- .review-info .task-child {
- font-size: 22rpx;
- color: var(--muted, #94A3B8);
- }
- .review-actions {
- display: flex;
- gap: 12rpx;
- flex-shrink: 0;
- margin-left: 16rpx;
- }
- /* ========================================
- g) 快捷操作
- ======================================== */
- .quick-section {
- margin-bottom: 48rpx;
- }
- .quick-card {
- padding: 16rpx 12rpx !important;
- }
- .quick-actions {
- display: flex;
- flex-wrap: wrap;
- }
- .action-item {
- display: flex;
- flex-direction: column;
- align-items: center;
- width: 20%;
- margin-bottom: 12rpx;
- transition: transform 0.15s ease;
- }
- .action-item:active {
- transform: scale(0.92);
- }
- .action-icon {
- width: 80rpx;
- height: 80rpx;
- border-radius: var(--radius-sm, 12rpx);
- display: flex;
- align-items: center;
- justify-content: center;
- margin-bottom: 10rpx;
- }
- .action-icon-text {
- font-size: 32rpx;
- }
- .act-add { background: rgba(91, 155, 213, 0.12); }
- .act-review { background: rgba(16, 185, 129, 0.12); }
- .act-child { background: rgba(14, 165, 233, 0.12); }
- .act-reward { background: rgba(245, 158, 11, 0.15); }
- .act-invite { background: rgba(139, 92, 246, 0.12); }
- .action-label {
- font-size: 22rpx;
- color: var(--text-secondary, #64748B);
- font-weight: 500;
- text-align: center;
- }
- </style>
|