parent-index.vue 41 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371
  1. <template>
  2. <view class="container">
  3. <!-- 加载状态 -->
  4. <BaseLoading :loading="loading" text="正在加载..." />
  5. <template v-if="!loading">
  6. <!-- ===== a) 顶部 Banner ===== -->
  7. <PageBanner theme="home"
  8. tagline="家庭健康成长俱乐部"
  9. quote="给全家的一站式幸福提案" />
  10. <!-- ===== 家庭成员切换条 ===== -->
  11. <FamilyMemberStrip
  12. v-if="familyMembersVisible.length > 0"
  13. :members="familyMembersVisible"
  14. :selectedMemberId="selectedMemberId"
  15. :selectedMemberType="selectedMemberType"
  16. @select="onMemberSelect" />
  17. <!-- ===== b) 孩子卡片 ===== -->
  18. <view class="children-row animate-fade-in animate-stagger-2">
  19. <template v-if="children.length > 0">
  20. <scroll-view
  21. class="children-scroll"
  22. scroll-x
  23. :scroll-with-animation="true"
  24. :enhanced="true"
  25. :show-scrollbar="false"
  26. >
  27. <PlayfulCard
  28. v-for="child in children"
  29. :key="child.id"
  30. variant="flat"
  31. shadow="sm"
  32. :clickable="true"
  33. class="child-card"
  34. :class="{ 'child-card-single': children.length === 1 }"
  35. @click="goToChildDetail(child)"
  36. >
  37. <view class="child-card-inner">
  38. <view class="child-avatar" :class="'child-avatar-color-' + (child.id % 6)">
  39. <text class="child-avatar-text">{{ child.nickname ? child.nickname[0] : '?' }}</text>
  40. </view>
  41. <view class="child-card-body">
  42. <text class="child-card-name">{{ child.nickname }}</text>
  43. <view class="child-card-stats">
  44. <text class="child-card-points">⭐ {{ child.totalPoints || 0 }}</text>
  45. <text class="child-card-dan" v-if="child.danLevel">DAN{{ child.danLevel }}</text>
  46. </view>
  47. <view class="child-card-badges">
  48. <BaseBadge variant="primary" size="xs" v-if="child.pendingReviewCount > 0">待审 {{ child.pendingReviewCount }}</BaseBadge>
  49. <BaseBadge variant="error" size="xs" v-if="child.pendingWishCount > 0">心愿 {{ child.pendingWishCount }}</BaseBadge>
  50. </view>
  51. </view>
  52. <view class="child-card-arrow">›</view>
  53. </view>
  54. </PlayfulCard>
  55. </scroll-view>
  56. <view class="scroll-hint" v-if="children.length > 1">
  57. <text class="scroll-hint-text">← 左右滑动查看更多 →</text>
  58. </view>
  59. </template>
  60. <PlayfulCard
  61. v-else
  62. variant="flat"
  63. :clickable="true"
  64. @click="goToAddChild"
  65. class="empty-children-card"
  66. padding="28rpx"
  67. >
  68. <view class="empty-children-inner">
  69. <view class="empty-children-icon">👶</view>
  70. <view class="empty-children-text">
  71. <text class="empty-children-title">还没有添加孩子</text>
  72. <text class="empty-children-hint">点击添加孩子,开始成长之旅</text>
  73. </view>
  74. <view class="empty-children-arrow">›</view>
  75. </view>
  76. </PlayfulCard>
  77. </view>
  78. <!-- 五行能量沙盘(浠艾福 — 全家庭版) -->
  79. <view class="animate-fade-in animate-stagger-3">
  80. <wuxing-sandbox mode="live"
  81. :scores="energyScores"
  82. :overall-score="energyOverall"
  83. :members="energyMembers"
  84. :dimensions="energyDimensions"
  85. :total-energy="totalEnergy"
  86. :total-health-index="totalHealthIndex"
  87. @point-click="goToDomain" />
  88. </view>
  89. <!-- 会员Banner(浠艾福俱乐部) -->
  90. <view class="membership-wrapper animate-fade-in animate-stagger-4">
  91. <view class="membership-banner" @click="goToMembership">
  92. <view class="banner-content">
  93. <text class="banner-icon">👑</text>
  94. <view class="banner-text">
  95. <text class="banner-title">{{ membershipText }}</text>
  96. <text class="banner-subtitle">点击查看会员权益</text>
  97. </view>
  98. <text class="banner-arrow">›</text>
  99. </view>
  100. </view>
  101. </view>
  102. <!-- ===== c) 成长数据 ===== -->
  103. <view class="stats-section animate-fade-in animate-stagger-5">
  104. <view class="section-title">成长数据</view>
  105. <view class="stats-row">
  106. <!-- 任务完成率:自己的 + 全家平均 -->
  107. <PlayfulCard variant="flat" shadow="sm" :clickable="true" @click="goToCompletionStats" class="stat-card-wide" padding="0">
  108. <view class="stat-card-content">
  109. <view class="stat-header">
  110. <view class="stat-icon-wrap stat-icon-orange">
  111. <text class="stat-icon-symbol">📋</text>
  112. </view>
  113. <view class="stat-body">
  114. <text class="stat-label-header">任务完成</text>
  115. </view>
  116. </view>
  117. <view class="stat-compare">
  118. <view class="stat-compare-row">
  119. <text class="compare-label">自己的</text>
  120. <text class="compare-value accent-color">{{ myCompletionRate }}%</text>
  121. </view>
  122. <view class="progress-bar-sm">
  123. <view class="progress-fill-sm" :style="{ width: myCompletionRate + '%' }"></view>
  124. </view>
  125. <view class="stat-compare-row">
  126. <text class="compare-label">全家平均</text>
  127. <text class="compare-value">{{ familyAvgCompletionRate }}%</text>
  128. </view>
  129. <view class="progress-bar-sm">
  130. <view class="progress-fill-sm muted" :style="{ width: familyAvgCompletionRate + '%' }"></view>
  131. </view>
  132. </view>
  133. <text class="stat-more">查看分析 ›</text>
  134. </view>
  135. </PlayfulCard>
  136. <!-- 成长积分:自己的 + 全家共 -->
  137. <PlayfulCard variant="flat" shadow="sm" :clickable="true" @click="goToRewards" class="stat-card-wide" padding="0">
  138. <view class="stat-card-content">
  139. <view class="stat-header">
  140. <view class="stat-icon-wrap stat-icon-gold">
  141. <text class="stat-icon-symbol">⭐</text>
  142. </view>
  143. <view class="stat-body">
  144. <text class="stat-label-header">成长积分</text>
  145. </view>
  146. </view>
  147. <view class="stat-compare">
  148. <view class="stat-compare-row">
  149. <text class="compare-label">自己的</text>
  150. <text class="compare-value gold-color">{{ myPoints }}</text>
  151. </view>
  152. <view class="stat-compare-row">
  153. <text class="compare-label">全家共</text>
  154. <text class="compare-value">{{ familyTotalPoints }}</text>
  155. </view>
  156. </view>
  157. <text class="stat-encourage" v-if="myPoints > 0">太棒了!</text>
  158. <text class="stat-encourage muted" v-else>开始赚星星吧</text>
  159. </view>
  160. </PlayfulCard>
  161. </view>
  162. </view>
  163. <!-- ===== AI 家庭助手入口 ===== -->
  164. <view class="ai-entry-section animate-fade-in animate-stagger-5">
  165. <PlayfulCard variant="flat" shadow="sm" :clickable="true" @click="goToAIChat" class="ai-entry-card" padding="24rpx">
  166. <view class="ai-entry">
  167. <view class="ai-entry-icon">🤖</view>
  168. <view class="ai-entry-body">
  169. <text class="ai-entry-title">AI 家庭助手</text>
  170. <text class="ai-entry-desc">问问孩子的表现,了解家庭情况</text>
  171. </view>
  172. <text class="ai-entry-arrow">›</text>
  173. </view>
  174. </PlayfulCard>
  175. </view>
  176. <!-- ===== d) 今日重点 ===== -->
  177. <view class="today-section animate-fade-in animate-stagger-6">
  178. <view class="section-title">今日重点</view>
  179. <PlayfulCard variant="flat" class="today-card">
  180. <template slot="header">
  181. <view class="today-header">
  182. <text class="today-label">今日待完成</text>
  183. <text class="today-count">{{ pendingTasks.length }}项任务</text>
  184. </view>
  185. </template>
  186. <view class="task-list" v-if="pendingTasks.length > 0">
  187. <view class="task-item" v-for="task in pendingTasks.slice(0, 3)" :key="task.id">
  188. <view class="task-dot" :class="'dot-color-' + (task.id % 5)"></view>
  189. <text class="task-title">{{ task.title }}</text>
  190. </view>
  191. </view>
  192. <BaseEmpty v-else icon="🎉" title="今日任务已完成" description="太棒了!" :compact="true" />
  193. <view slot="actions" class="task-view-all" @click="goToTaskList">
  194. <text>查看全部</text>
  195. <text class="arrow">→</text>
  196. </view>
  197. </PlayfulCard>
  198. </view>
  199. <!-- ===== e) 成长里程碑 ===== -->
  200. <view class="milestone-section animate-fade-in animate-stagger-7">
  201. <view class="section-title">成长里程碑</view>
  202. <PlayfulCard variant="flat" class="milestone-card">
  203. <view class="milestone-item" v-if="selectedChild && selectedChild.streakDays >= 7">
  204. <view class="milestone-icon-wrap milestone-star">
  205. <text class="milestone-icon">🌟</text>
  206. </view>
  207. <text class="milestone-text">连续7天打卡</text>
  208. </view>
  209. <view class="milestone-item" v-if="selectedChild && selectedChild.streakDays >= 30">
  210. <view class="milestone-icon-wrap milestone-trophy">
  211. <text class="milestone-icon">🏆</text>
  212. </view>
  213. <text class="milestone-text">坚持一个月啦!</text>
  214. </view>
  215. <view class="milestone-item" v-if="(selectedChild && selectedChild.totalPoints) >= 1000">
  216. <view class="milestone-icon-wrap milestone-sparkle">
  217. <text class="milestone-icon">💫</text>
  218. </view>
  219. <text class="milestone-text">积分突破1000</text>
  220. </view>
  221. <BaseEmpty v-if="!hasMilestones" icon="🌱" title="开始养成好习惯" description="见证成长" :compact="true" />
  222. </PlayfulCard>
  223. </view>
  224. <!-- ===== f) 待处理事项 ===== -->
  225. <view class="pending-section animate-fade-in animate-stagger-8">
  226. <view class="section-title">📋 待处理事项</view>
  227. <view class="pending-grid">
  228. <view class="pending-card" @click="goToReview">
  229. <view class="pending-icon pending-icon--blue">
  230. <text class="pending-emoji">📝</text>
  231. </view>
  232. <view class="pending-info">
  233. <text class="pending-count accent-color">{{ pendingReviewTasks.length }}</text>
  234. <text class="pending-label">待审核任务</text>
  235. </view>
  236. </view>
  237. <view class="pending-card" @click="goToWishApprove">
  238. <view class="pending-icon pending-icon--pink">
  239. <text class="pending-emoji">💝</text>
  240. </view>
  241. <view class="pending-info">
  242. <text class="pending-count pink-color">{{ pendingReviewWishes.length }}</text>
  243. <text class="pending-label">待审批心愿</text>
  244. </view>
  245. </view>
  246. <view class="pending-card" @click="goToAssessmentReport">
  247. <view class="pending-icon pending-icon--green">
  248. <text class="pending-emoji">📊</text>
  249. </view>
  250. <view class="pending-info">
  251. <text class="pending-count teal-color">{{ hasNewReport ? '有新' : '暂无' }}</text>
  252. <text class="pending-label">最新测评报告</text>
  253. </view>
  254. </view>
  255. <view class="pending-card" @click="goToActivities">
  256. <view class="pending-icon pending-icon--orange">
  257. <text class="pending-emoji">🎉</text>
  258. </view>
  259. <view class="pending-info">
  260. <text class="pending-count orange-color">{{ hotActivityCount > 0 ? hotActivityCount : '暂无' }}</text>
  261. <text class="pending-label">活动推荐</text>
  262. </view>
  263. </view>
  264. </view>
  265. </view>
  266. <!-- ===== g) 成长建议 ===== -->
  267. <view class="advice-section animate-fade-in animate-stagger-9" v-if="growthAdvice.length > 0">
  268. <view class="section-title">💡 成长建议</view>
  269. <PlayfulCard variant="flat" class="advice-card" v-for="advice in growthAdvice" :key="advice.id" padding="0">
  270. <view class="advice-content">
  271. <view class="advice-icon-wrap">
  272. <text class="advice-icon">💡</text>
  273. </view>
  274. <view class="advice-text-wrap">
  275. <text class="advice-title">{{ advice.title }}</text>
  276. <text class="advice-desc">{{ advice.summary || advice.description }}</text>
  277. </view>
  278. <text class="advice-arrow">›</text>
  279. </view>
  280. </PlayfulCard>
  281. </view>
  282. <!-- ===== h) 待审核任务 ===== -->
  283. <view class="review-section animate-fade-in animate-stagger-10" v-if="pendingReviewTasks.length > 0">
  284. <view class="section-title">待审核任务</view>
  285. <PlayfulCard
  286. variant="flat"
  287. shadow="sm"
  288. class="review-card"
  289. v-for="task in pendingReviewTasks"
  290. :key="task.id"
  291. padding="0"
  292. >
  293. <view class="review-card-content">
  294. <view class="review-info">
  295. <text class="task-name">{{ task.title }}</text>
  296. <text class="task-child" v-if="task.childName">提供者: {{ task.childName }}</text>
  297. </view>
  298. <view class="review-actions">
  299. <PlayfulButton variant="success" size="xs" @click="approveTask(task.id)">通过</PlayfulButton>
  300. <PlayfulButton variant="error" size="xs" @click="rejectTask(task.id)">拒绝</PlayfulButton>
  301. </view>
  302. </view>
  303. </PlayfulCard>
  304. </view>
  305. <!-- ===== g) 快捷操作 ===== -->
  306. <view class="quick-section animate-fade-in animate-stagger-9">
  307. <view class="section-title">快捷操作</view>
  308. <PlayfulCard variant="flat" class="quick-card">
  309. <view class="quick-actions">
  310. <view class="action-item" @click="addTask">
  311. <view class="action-icon act-add">
  312. <text class="action-icon-text">➕</text>
  313. </view>
  314. <text class="action-label">添加任务</text>
  315. </view>
  316. <view class="action-item" @click="goToReview">
  317. <view class="action-icon act-review">
  318. <text class="action-icon-text">📋</text>
  319. </view>
  320. <text class="action-label">审核任务</text>
  321. </view>
  322. <view class="action-item" @click="manageChildren">
  323. <view class="action-icon act-child">
  324. <text class="action-icon-text">👨‍👩‍👧</text>
  325. </view>
  326. <text class="action-label">孩子管理</text>
  327. </view>
  328. <view class="action-item" @click="goToRewards">
  329. <view class="action-icon act-reward">
  330. <text class="action-icon-text">🎁</text>
  331. </view>
  332. <text class="action-label">奖励中心</text>
  333. </view>
  334. <view class="action-item" @click="inviteFriend">
  335. <view class="action-icon act-invite">
  336. <text class="action-icon-text">📤</text>
  337. </view>
  338. <text class="action-label">邀请家人</text>
  339. </view>
  340. </view>
  341. </PlayfulCard>
  342. </view>
  343. </template>
  344. </view>
  345. </template>
  346. <script>
  347. import { getFamilyMembers, getChildren, getPendingReviewTasks, getPendingWishes, approveTask, rejectTask, getChildCompletionStats, getParentDashboard, getFamilyEnergySandbox, getEnergyOverview, getVisibleFamilyMembers } from '../../utils/api.js'
  348. import PageBanner from '../../components/PageBanner.vue'
  349. import WuxingSandbox from '../../components/wuxing-sandbox.vue'
  350. import PlayfulCard from '../../components/PlayfulCard.vue'
  351. import PlayfulButton from '../../components/PlayfulButton.vue'
  352. import BaseBadge from '../../components/BaseBadge.vue'
  353. import BaseEmpty from '../../components/BaseEmpty.vue'
  354. import BaseLoading from '../../components/BaseLoading.vue'
  355. import FamilyMemberStrip from '../../components/FamilyMemberStrip.vue'
  356. export default {
  357. components: { PageBanner, WuxingSandbox, PlayfulCard, PlayfulButton, BaseBadge, BaseEmpty, BaseLoading, FamilyMemberStrip },
  358. data() {
  359. return {
  360. nickname: '',
  361. familyMembers: [],
  362. children: [],
  363. selectedChild: null,
  364. pendingReviewTasks: [],
  365. pendingReviewWishes: [],
  366. pendingWishesCount: 0,
  367. pendingTasks: [],
  368. hotActivityCount: 0,
  369. hasNewReport: false,
  370. growthAdvice: [],
  371. myCompletionRate: 0,
  372. familyAvgCompletionRate: 0,
  373. myPoints: 0,
  374. familyTotalPoints: 0,
  375. membershipText: '开通家庭会员 畅享全部权益',
  376. loading: true,
  377. currentChildId: '',
  378. _initialLoadDone: false,
  379. _familyId: null,
  380. familyMembersVisible: [],
  381. selectedMemberId: 0,
  382. selectedMemberType: 'all',
  383. energyData: null,
  384. energyDimensions: [],
  385. totalEnergy: 0,
  386. totalHealthIndex: 0
  387. }
  388. },
  389. computed: {
  390. energyScores() {
  391. var d = this.energyData
  392. if (!d) return { body: 0, mind: 0, wisdom: 0, action: 0, wealth: 0 }
  393. return { body: d.bodyScore, mind: d.mindScore, wisdom: d.wisdomScore, action: d.actionScore, wealth: d.wealthScore }
  394. },
  395. energyOverall() {
  396. return this.energyData ? this.energyData.overallScore : 0
  397. },
  398. energyMembers() {
  399. return this.energyData ? this.energyData.members : []
  400. },
  401. greetingText() {
  402. const hour = new Date().getHours()
  403. if (hour < 6) return '夜深了'
  404. if (hour < 9) return '早上好'
  405. if (hour < 12) return '上午好'
  406. if (hour < 14) return '中午好'
  407. if (hour < 18) return '下午好'
  408. if (hour < 22) return '晚上好'
  409. return '夜深了'
  410. },
  411. hasMilestones() {
  412. const c = this.selectedChild
  413. if (!c) return false
  414. return (c.streakDays >= 7) || (c.streakDays >= 30) || (c.totalPoints >= 1000)
  415. }
  416. },
  417. // 使用 mounted 而非 onLoad,因为本组件作为条件渲染子组件(v-if),
  418. // page 生命周期钩子(onLoad/onShow)可能在组件挂载前已触发完毕
  419. mounted() {
  420. if (!uni.getStorageSync('token')) {
  421. uni.reLaunch({ url: '/pages/login/login' })
  422. return
  423. }
  424. this.loadData()
  425. },
  426. onShow() {
  427. // 首次 onShow 紧接 mounted 之后,跳过避免双重加载
  428. if (!this._initialLoadDone) {
  429. this._initialLoadDone = true
  430. return
  431. }
  432. const currentRole = uni.getStorageSync('currentRole') || 'parent'
  433. if (currentRole === 'child') {
  434. uni.reLaunch({ url: '/pages/index/child-index' })
  435. return
  436. }
  437. if (uni.getStorageSync('token')) {
  438. this.loadData()
  439. }
  440. },
  441. methods: {
  442. async loadData() {
  443. this.loading = true
  444. try {
  445. const userInfo = uni.getStorageSync('userInfo')
  446. this.nickname = (userInfo && userInfo.nickname) ? userInfo.nickname : ''
  447. // 优先使用仪表盘接口(包含孩子列表 + 统计数据)
  448. let dashboardLoaded = false
  449. try {
  450. const dashRes = await getParentDashboard()
  451. const dashData = dashRes.data || {}
  452. const dashChildren = dashData.children || []
  453. // 过滤:仅保留孩子角色成员,排除家长/本人
  454. var currentUserId = uni.getStorageSync('userId')
  455. var filteredChildren = dashChildren.filter(function(c) {
  456. return c && c.id && c.id !== currentUserId && (c.role === 'child' || c.memberType === 'child' || !c.role)
  457. })
  458. if (filteredChildren.length > 0) {
  459. this.children = filteredChildren
  460. this.selectedChild = filteredChildren[0]
  461. this.familyAvgCompletionRate = dashData.avgCompletionRate || 0
  462. // 家长自身数据(积分 + 任务完成率)
  463. this.myPoints = dashData.parentPoints || 0
  464. this.myCompletionRate = dashData.parentCompletionRate || 0
  465. // 从仪表盘获取 familyId
  466. if (dashData.familyId) {
  467. this._familyId = dashData.familyId
  468. }
  469. dashboardLoaded = true
  470. }
  471. } catch (e) {
  472. console.log('获取仪表盘数据失败,降级到单独接口', e)
  473. }
  474. // 降级:使用原有单独接口
  475. if (!dashboardLoaded) {
  476. try {
  477. const currentUserId = uni.getStorageSync('userId')
  478. const membersRes = await getFamilyMembers()
  479. const data = membersRes.data || {}
  480. const parents = (data.parents || []).filter(function(p) { return p && p.id && p.id !== currentUserId }).map(function(p) { return { ...p, role: 'parent' } })
  481. const children = (data.children || []).filter(function(c) { return c && c.id }).map(function(c) { return { ...c, role: 'child' } })
  482. this.familyMembers = [].concat(parents, children)
  483. if (children.length > 0) {
  484. this.selectedChild = children[0]
  485. }
  486. // 保存 familyId 用于后续请求
  487. if (data.familyId) {
  488. this._familyId = data.familyId
  489. }
  490. } catch (e) {
  491. console.log('获取家庭成员失败', e)
  492. }
  493. if (this.children.length === 0) {
  494. const childrenRes = await getChildren()
  495. const rawChildren = childrenRes.data || []
  496. this.children = rawChildren
  497. if (this.children.length > 0 && !this.selectedChild) {
  498. this.selectedChild = this.children[0]
  499. }
  500. }
  501. }
  502. const reviewRes = await getPendingReviewTasks()
  503. const allReviewTasks = reviewRes.data || []
  504. this.pendingReviewTasks = allReviewTasks.slice(0, 3)
  505. try {
  506. const wishRes = await getPendingWishes(this._familyId)
  507. this.pendingReviewWishes = wishRes.data || []
  508. } catch (e) {
  509. console.log('获取待处理心愿失败', e)
  510. this.pendingReviewWishes = []
  511. }
  512. const reviewMap = {}
  513. const wishMap = {}
  514. for (let i = 0; i < allReviewTasks.length; i++) {
  515. const task = allReviewTasks[i]
  516. const cid = task.childId || task.assigneeId
  517. if (cid) {
  518. reviewMap[cid] = (reviewMap[cid] || 0) + 1
  519. }
  520. }
  521. for (let j = 0; j < (this.pendingReviewWishes || []).length; j++) {
  522. const wish = this.pendingReviewWishes[j]
  523. const cid = wish.childId
  524. if (cid) {
  525. wishMap[cid] = (wishMap[cid] || 0) + 1
  526. }
  527. }
  528. this.children = this.children.map(function(c) {
  529. return {
  530. ...c,
  531. pendingReviewCount: reviewMap[c.id] || 0,
  532. pendingWishCount: wishMap[c.id] || 0
  533. }
  534. })
  535. // 计算全家总积分(家长 + 所有孩子)
  536. var totalPts = this.myPoints
  537. for (var pi = 0; pi < this.children.length; pi++) {
  538. totalPts += (this.children[pi].totalPoints || 0)
  539. }
  540. this.familyTotalPoints = totalPts
  541. // 如果仪表盘未加载到数据,降级:从孩子数据取近似值
  542. if (!dashboardLoaded) {
  543. // 降级:家长积分取自己的(从缓存或API),完成率取第一个孩子的
  544. const targetChild = this.selectedChild || (this.children.length > 0 ? this.children[0] : null)
  545. if (targetChild) {
  546. try {
  547. const statsRes = await getChildCompletionStats({ childId: targetChild.id })
  548. if (statsRes && statsRes.data) {
  549. this.myCompletionRate = statsRes.data.completionRate || 0
  550. }
  551. } catch (e) {
  552. console.log('获取个人完成率失败', e)
  553. }
  554. this.myPoints = targetChild.totalPoints || 0
  555. this.familyAvgCompletionRate = this.myCompletionRate
  556. }
  557. }
  558. // 待完成任务 - 使用真实统计中的pendingTasks
  559. this.pendingTasks = []
  560. if (this.children.length > 0) {
  561. const targetChild = this.selectedChild || this.children[0]
  562. try {
  563. const r2 = await getChildCompletionStats({ childId: targetChild.id })
  564. if (r2 && r2.data && r2.data.pendingTasks > 0) {
  565. for (let k = 0; k < Math.min(r2.data.pendingTasks, 3); k++) {
  566. this.pendingTasks.push({ id: 100 + k, title: '待完成任务 ' + (k + 1) })
  567. }
  568. }
  569. } catch (e) {
  570. this.pendingTasks = []
  571. }
  572. }
  573. // 加载家庭能量沙盘数据(五维 + 所有成员)
  574. try {
  575. const energyRes = await getFamilyEnergySandbox()
  576. this.energyData = energyRes.data || null
  577. } catch (e) {
  578. console.log('获取能量沙盘数据失败', e)
  579. this.energyData = null
  580. }
  581. // 加载家庭成员可见列表
  582. this.loadFamilyMembersVisible()
  583. // 加载五维能量概览(账本模式)
  584. var overviewChildId = this.currentChildId
  585. if (overviewChildId) {
  586. try {
  587. var overviewRes = await getEnergyOverview(overviewChildId)
  588. if (overviewRes && overviewRes.data) {
  589. this.energyDimensions = overviewRes.data.dimensions || []
  590. this.totalEnergy = overviewRes.data.totalEnergy || 0
  591. this.totalHealthIndex = overviewRes.data.totalHealthIndex || 0
  592. }
  593. } catch (e) {
  594. console.log('获取能量概览失败', e)
  595. }
  596. }
  597. } catch (e) {
  598. console.error('加载数据失败', e)
  599. } finally {
  600. this.loading = false
  601. }
  602. },
  603. async approveTask(taskId) {
  604. try {
  605. await approveTask(taskId)
  606. uni.showToast({ title: '已通过', icon: 'success' })
  607. this.loadData()
  608. } catch (e) {
  609. uni.showToast({ title: '操作失败', icon: 'none' })
  610. }
  611. },
  612. async rejectTask(taskId) {
  613. try {
  614. await rejectTask(taskId)
  615. uni.showToast({ title: '已拒绝', icon: 'success' })
  616. this.loadData()
  617. } catch (e) {
  618. uni.showToast({ title: '操作失败', icon: 'none' })
  619. }
  620. },
  621. // 加载可见家庭成员
  622. async loadFamilyMembersVisible() {
  623. try {
  624. var res = await getVisibleFamilyMembers()
  625. this.familyMembersVisible = res.data || []
  626. } catch (e) {
  627. console.log('获取可见家庭成员失败', e)
  628. this.familyMembersVisible = []
  629. }
  630. },
  631. // 成员选择
  632. onMemberSelect(member) {
  633. if (member.memberType === 'all') {
  634. this.selectedMemberId = 0
  635. this.selectedMemberType = 'all'
  636. } else {
  637. this.selectedMemberId = member.id
  638. this.selectedMemberType = member.memberType
  639. }
  640. // TODO: 根据选中成员重新加载对应维度数据
  641. },
  642. goToCompletionStats() {
  643. if (this.children.length === 1) {
  644. uni.navigateTo({ url: '/pages/stats/completion-rate?childId=' + this.children[0].id })
  645. } else {
  646. uni.navigateTo({ url: '/pages/stats/completion-rate?familyView=1' })
  647. }
  648. },
  649. goToDomain(code) {
  650. // 跳转到能量详情页(T10 创建)
  651. var childId = this.currentChildId
  652. if (!childId || !code) return
  653. uni.navigateTo({
  654. url: '/pages/energy/detail?childId=' + childId + '&code=' + code
  655. })
  656. },
  657. goToMembership() {
  658. uni.showToast({ title: '即将上线', icon: 'none' })
  659. },
  660. goToChildDetail(child) {
  661. uni.navigateTo({ url: '/pages/parent/child-detail?childId=' + child.id + '&childName=' + encodeURIComponent(child.nickname || '') })
  662. },
  663. addTask() { uni.navigateTo({ url: '/pages/tasks/create-task' }) },
  664. goToReview() { uni.navigateTo({ url: '/pages/tasks/review' }) },
  665. goToWishApprove() { uni.navigateTo({ url: '/pages/wishes/approve' }) },
  666. goToAssessmentReport() { uni.navigateTo({ url: '/pages/assessment/report' }) },
  667. goToActivities() { uni.switchTab({ url: '/pages/discover/index' }) },
  668. goToRewards() { uni.switchTab({ url: '/pages/rewards/rewards' }) },
  669. goToAIChat() { uni.navigateTo({ url: '/pages/ai/chat' }) },
  670. goToTaskList() { uni.switchTab({ url: '/pages/tasks/tasks' }) },
  671. manageChildren() { uni.navigateTo({ url: '/pages/profile/children' }) },
  672. inviteFriend() { uni.navigateTo({ url: '/pages/parent/invite/index' }) },
  673. goToAddChild() { uni.navigateTo({ url: '/pages/profile/create-child' }) }
  674. }
  675. }
  676. </script>
  677. <style scoped>
  678. /* ========================================
  679. Flat Card Design System — 家长端暖橙扁平
  680. ======================================== */
  681. .container {
  682. padding: 32rpx;
  683. background: var(--bg, #F5F9FC);
  684. min-height: 100vh;
  685. }
  686. /* ========================================
  687. 区块标题
  688. ======================================== */
  689. .section-title {
  690. font-size: 32rpx;
  691. font-weight: 700;
  692. color: var(--text, #1E293B);
  693. margin-bottom: var(--space-md);
  694. }
  695. /* ========================================
  696. b) 孩子卡片
  697. ======================================== */
  698. .children-row {
  699. margin-bottom: 48rpx;
  700. }
  701. .children-scroll {
  702. display: flex;
  703. flex-direction: row;
  704. white-space: nowrap;
  705. overflow: hidden;
  706. }
  707. .child-card {
  708. display: inline-flex !important;
  709. margin-right: 16rpx;
  710. min-width: 320rpx;
  711. width: auto;
  712. }
  713. .child-card-single {
  714. width: 100%;
  715. margin-right: 0;
  716. }
  717. .child-card-inner {
  718. display: flex;
  719. align-items: center;
  720. width: 100%;
  721. }
  722. .child-avatar {
  723. width: 80rpx;
  724. height: 80rpx;
  725. border-radius: var(--radius-full, 50%);
  726. display: flex;
  727. align-items: center;
  728. justify-content: center;
  729. flex-shrink: 0;
  730. }
  731. .child-avatar-color-0 { background: linear-gradient(135deg, var(--color-primary, #5B9BD5), var(--color-primary-dark, #3A7CC4)); }
  732. .child-avatar-color-1 { background: linear-gradient(135deg, var(--color-accent, #0EA5E9), #6366F1); }
  733. .child-avatar-color-2 { background: linear-gradient(135deg, #10B981, #059669); }
  734. .child-avatar-color-3 { background: linear-gradient(135deg, #EC4899, #E11D48); }
  735. .child-avatar-color-4 { background: linear-gradient(135deg, #84CC16, #65A30D); }
  736. .child-avatar-color-5 { background: linear-gradient(135deg, #8B5CF6, #6D28D9); }
  737. .child-avatar-text {
  738. color: #FFFFFF;
  739. font-size: 36rpx;
  740. font-weight: 600;
  741. }
  742. .child-card-body {
  743. flex: 1;
  744. margin-left: 16rpx;
  745. min-width: 0;
  746. }
  747. .child-card-name {
  748. font-size: 30rpx;
  749. font-weight: 600;
  750. color: var(--text, #1E293B);
  751. display: block;
  752. line-height: 1.3;
  753. }
  754. .child-card-stats {
  755. display: flex;
  756. align-items: center;
  757. margin-top: 6rpx;
  758. gap: 16rpx;
  759. }
  760. .child-card-points {
  761. font-size: 24rpx;
  762. color: var(--color-primary, #5B9BD5);
  763. font-weight: 600;
  764. }
  765. .child-card-dan {
  766. font-size: 22rpx;
  767. color: var(--color-accent, #0EA5E9);
  768. font-weight: 500;
  769. }
  770. .child-card-badges {
  771. display: flex;
  772. gap: 8rpx;
  773. margin-top: 8rpx;
  774. flex-wrap: wrap;
  775. }
  776. .child-card-arrow {
  777. font-size: 36rpx;
  778. color: var(--muted, #94A3B8);
  779. margin-left: 8rpx;
  780. flex-shrink: 0;
  781. }
  782. .scroll-hint {
  783. text-align: center;
  784. margin-top: 12rpx;
  785. }
  786. .scroll-hint-text {
  787. font-size: 22rpx;
  788. color: var(--muted, #94A3B8);
  789. }
  790. /* Empty children */
  791. .empty-children-card {
  792. margin-top: 24rpx;
  793. }
  794. .empty-children-inner {
  795. display: flex;
  796. align-items: center;
  797. }
  798. .empty-children-icon {
  799. font-size: 56rpx;
  800. margin-right: 16rpx;
  801. }
  802. .empty-children-text {
  803. flex: 1;
  804. }
  805. .empty-children-title {
  806. font-size: 28rpx;
  807. font-weight: 600;
  808. color: var(--text, #1E293B);
  809. display: block;
  810. }
  811. .empty-children-hint {
  812. font-size: 24rpx;
  813. color: var(--muted, #94A3B8);
  814. margin-top: 6rpx;
  815. display: block;
  816. }
  817. .empty-children-arrow {
  818. font-size: 36rpx;
  819. color: var(--muted, #94A3B8);
  820. }
  821. /* ========================================
  822. WuxingSandbox & Membership Wrappers
  823. ======================================== */
  824. .membership-wrapper {
  825. margin-bottom: 48rpx;
  826. }
  827. /* 浠艾福俱乐部 - 会员Banner */
  828. .membership-banner {
  829. padding: 30rpx 32rpx;
  830. background: linear-gradient(135deg, #FFD700, #FFA500);
  831. border-radius: var(--radius-md, 20rpx);
  832. box-shadow: var(--shadow-md);
  833. }
  834. .banner-content {
  835. display: flex;
  836. align-items: center;
  837. }
  838. .banner-icon {
  839. font-size: 60rpx;
  840. margin-right: 20rpx;
  841. }
  842. .banner-text {
  843. flex: 1;
  844. }
  845. .banner-title {
  846. font-size: 30rpx;
  847. font-weight: bold;
  848. color: #8B4513;
  849. display: block;
  850. }
  851. .banner-subtitle {
  852. font-size: 24rpx;
  853. color: #A0522D;
  854. margin-top: 6rpx;
  855. display: block;
  856. }
  857. .banner-arrow {
  858. font-size: 40rpx;
  859. color: #8B4513;
  860. }
  861. /* ========================================
  862. c) 成长数据
  863. ======================================== */
  864. .stats-section {
  865. margin-bottom: 48rpx;
  866. }
  867. .stats-row {
  868. display: flex;
  869. gap: 16rpx;
  870. }
  871. .stat-card-wide {
  872. flex: 1;
  873. min-width: 0;
  874. box-sizing: border-box;
  875. }
  876. .stat-card-content {
  877. padding: 24rpx;
  878. }
  879. .stat-header {
  880. display: flex;
  881. align-items: center;
  882. margin-bottom: 16rpx;
  883. }
  884. .stat-icon-wrap {
  885. width: 56rpx;
  886. height: 56rpx;
  887. border-radius: var(--radius-sm, 12rpx);
  888. display: flex;
  889. align-items: center;
  890. justify-content: center;
  891. margin-right: 14rpx;
  892. flex-shrink: 0;
  893. }
  894. .stat-icon-symbol {
  895. font-size: 28rpx;
  896. }
  897. .stat-icon-orange { background: rgba(91, 155, 213, 0.12); }
  898. .stat-icon-gold { background: rgba(245, 158, 11, 0.15); }
  899. .stat-body {
  900. flex: 1;
  901. min-width: 0;
  902. }
  903. .stat-label-header {
  904. font-size: 26rpx;
  905. font-weight: 600;
  906. color: var(--text, #1E293B);
  907. }
  908. /* 对比行布局 */
  909. .stat-compare {
  910. margin-bottom: 12rpx;
  911. }
  912. .stat-compare-row {
  913. display: flex;
  914. justify-content: space-between;
  915. align-items: center;
  916. margin-bottom: 4rpx;
  917. }
  918. .compare-label {
  919. font-size: 22rpx;
  920. color: var(--text-secondary, #64748B);
  921. }
  922. .compare-value {
  923. font-size: 30rpx;
  924. font-weight: 700;
  925. }
  926. /* 进度条 - 紧凑版 */
  927. .progress-bar-sm {
  928. height: 6rpx;
  929. background: var(--border-light, #E2E8F0);
  930. border-radius: 999rpx;
  931. overflow: hidden;
  932. margin-bottom: 8rpx;
  933. }
  934. .progress-fill-sm {
  935. height: 100%;
  936. background: linear-gradient(90deg, var(--color-primary, #5B9BD5), #F59E0B);
  937. border-radius: 999rpx;
  938. transition: width 0.3s ease;
  939. }
  940. .progress-fill-sm.muted {
  941. background: linear-gradient(90deg, #94A3B8, #CBD5E1);
  942. }
  943. .accent-color { color: var(--color-primary, #5B9BD5); }
  944. .gold-color { color: #F59E0B; }
  945. .stat-more {
  946. font-size: 22rpx;
  947. color: var(--color-accent, #0EA5E9);
  948. font-weight: 500;
  949. display: block;
  950. }
  951. .stat-encourage {
  952. font-size: 22rpx;
  953. color: #10B981;
  954. font-weight: 500;
  955. margin-top: 8rpx;
  956. display: block;
  957. }
  958. .stat-encourage.muted {
  959. color: var(--muted, #94A3B8);
  960. }
  961. /* AI 家庭助手入口 */
  962. .ai-entry-section {
  963. margin-bottom: 48rpx;
  964. }
  965. .ai-entry-card .PlayfulCard-content {
  966. padding: 24rpx;
  967. }
  968. .ai-entry {
  969. display: flex;
  970. align-items: center;
  971. }
  972. .ai-entry-icon {
  973. width: 64rpx;
  974. height: 64rpx;
  975. font-size: 36rpx;
  976. display: flex;
  977. align-items: center;
  978. justify-content: center;
  979. flex-shrink: 0;
  980. }
  981. .ai-entry-body {
  982. flex: 1;
  983. margin: 0 16rpx;
  984. min-width: 0;
  985. }
  986. .ai-entry-title {
  987. font-size: 26rpx;
  988. font-weight: 600;
  989. color: var(--text, #1E293B);
  990. display: block;
  991. }
  992. .ai-entry-desc {
  993. font-size: 22rpx;
  994. color: var(--text-secondary, #64748B);
  995. margin-top: 4rpx;
  996. display: block;
  997. }
  998. .ai-entry-arrow {
  999. font-size: 32rpx;
  1000. color: var(--muted, #94A3B8);
  1001. }
  1002. /* ========================================
  1003. d) 今日重点
  1004. ======================================== */
  1005. .today-section {
  1006. margin-bottom: 48rpx;
  1007. }
  1008. .today-card .today-header {
  1009. display: flex;
  1010. justify-content: space-between;
  1011. align-items: center;
  1012. }
  1013. .today-label {
  1014. font-size: 28rpx;
  1015. font-weight: 600;
  1016. color: var(--text, #1E293B);
  1017. }
  1018. .today-count {
  1019. font-size: 24rpx;
  1020. color: var(--color-primary, #5B9BD5);
  1021. font-weight: 600;
  1022. }
  1023. .task-list {
  1024. margin-bottom: 8rpx;
  1025. }
  1026. .task-item {
  1027. display: flex;
  1028. align-items: center;
  1029. padding: 18rpx 0;
  1030. border-bottom: 1rpx solid var(--border-light, #E2E8F0);
  1031. }
  1032. .task-item:last-child {
  1033. border-bottom: none;
  1034. }
  1035. .task-dot {
  1036. width: 14rpx;
  1037. height: 14rpx;
  1038. border-radius: 50%;
  1039. margin-right: 16rpx;
  1040. flex-shrink: 0;
  1041. }
  1042. .dot-color-0 { background: var(--color-primary, #5B9BD5); }
  1043. .dot-color-1 { background: #10B981; }
  1044. .dot-color-2 { background: var(--color-accent, #0EA5E9); }
  1045. .dot-color-3 { background: #F59E0B; }
  1046. .dot-color-4 { background: var(--color-error, #EF4444); }
  1047. .task-title {
  1048. font-size: 28rpx;
  1049. color: var(--text, #1E293B);
  1050. }
  1051. .task-view-all {
  1052. display: flex;
  1053. justify-content: flex-end;
  1054. align-items: center;
  1055. color: var(--text-secondary, #64748B);
  1056. font-size: 24rpx;
  1057. padding-top: 16rpx;
  1058. border-top: 1rpx solid var(--border-light, #E2E8F0);
  1059. }
  1060. .task-view-all .arrow {
  1061. margin-left: 8rpx;
  1062. }
  1063. /* ========================================
  1064. e) 成长里程碑
  1065. ======================================== */
  1066. .milestone-section {
  1067. margin-bottom: 48rpx;
  1068. }
  1069. .milestone-card {
  1070. padding: 24rpx !important;
  1071. }
  1072. .milestone-item {
  1073. display: flex;
  1074. align-items: center;
  1075. padding: 16rpx 0;
  1076. border-bottom: 1rpx solid var(--border-light, #E2E8F0);
  1077. }
  1078. .milestone-item:last-child {
  1079. border-bottom: none;
  1080. }
  1081. .milestone-icon-wrap {
  1082. width: 56rpx;
  1083. height: 56rpx;
  1084. border-radius: var(--radius-sm, 12rpx);
  1085. display: flex;
  1086. align-items: center;
  1087. justify-content: center;
  1088. margin-right: 16rpx;
  1089. flex-shrink: 0;
  1090. }
  1091. .milestone-icon {
  1092. font-size: 28rpx;
  1093. }
  1094. .milestone-star { background: rgba(245, 158, 11, 0.15); }
  1095. .milestone-trophy { background: rgba(91, 155, 213, 0.12); }
  1096. .milestone-sparkle { background: rgba(16, 185, 129, 0.12); }
  1097. .milestone-text {
  1098. font-size: 28rpx;
  1099. color: var(--text, #1E293B);
  1100. }
  1101. /* ========================================
  1102. f) 待处理事项
  1103. ======================================== */
  1104. .pending-section { margin-bottom: 48rpx; }
  1105. .pending-grid {
  1106. display: grid;
  1107. grid-template-columns: repeat(2, 1fr);
  1108. gap: 16rpx;
  1109. }
  1110. .pending-card {
  1111. background: #fff;
  1112. border-radius: 20rpx;
  1113. padding: 24rpx;
  1114. box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  1115. display: flex;
  1116. align-items: center;
  1117. }
  1118. .pending-card:active { opacity: 0.8; }
  1119. .pending-icon {
  1120. width: 72rpx; height: 72rpx;
  1121. border-radius: 16rpx;
  1122. display: flex; align-items: center; justify-content: center;
  1123. margin-right: 16rpx; flex-shrink: 0;
  1124. }
  1125. .pending-icon--blue { background: rgba(91,155,213,0.12); }
  1126. .pending-icon--pink { background: rgba(236,72,153,0.12); }
  1127. .pending-icon--green { background: rgba(16,185,129,0.12); }
  1128. .pending-icon--orange { background: rgba(249,115,22,0.12); }
  1129. .pending-emoji { font-size: 32rpx; }
  1130. .pending-info { flex: 1; min-width: 0; }
  1131. .pending-count { font-size: 36rpx; font-weight: 800; display: block; }
  1132. .pending-label { font-size: 22rpx; color: #666; margin-top: 4rpx; display: block; }
  1133. .pink-color { color: #EC4899; }
  1134. .orange-color { color: #F97316; }
  1135. /* ========================================
  1136. g) 成长建议
  1137. ======================================== */
  1138. .advice-section { margin-bottom: 48rpx; }
  1139. .advice-card { margin-bottom: 12rpx; }
  1140. .advice-content {
  1141. display: flex; align-items: center; padding: 24rpx;
  1142. }
  1143. .advice-icon-wrap {
  1144. width: 56rpx; height: 56rpx;
  1145. border-radius: 14rpx;
  1146. background: rgba(91,155,213,0.1);
  1147. display: flex; align-items: center; justify-content: center;
  1148. margin-right: 16rpx; flex-shrink: 0;
  1149. }
  1150. .advice-icon { font-size: 28rpx; }
  1151. .advice-text-wrap { flex: 1; min-width: 0; }
  1152. .advice-title { font-size: 28rpx; font-weight: 600; color: #333; display: block; }
  1153. .advice-desc { font-size: 24rpx; color: #999; margin-top: 4rpx; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  1154. .advice-arrow { font-size: 36rpx; color: #ccc; margin-left: 12rpx; }
  1155. /* ========================================
  1156. h) 待审核任务
  1157. ======================================== */
  1158. .review-section {
  1159. margin-bottom: 48rpx;
  1160. }
  1161. .review-card {
  1162. margin-bottom: 16rpx;
  1163. }
  1164. .review-card:last-child {
  1165. margin-bottom: 0;
  1166. }
  1167. .review-card-content {
  1168. display: flex;
  1169. justify-content: space-between;
  1170. align-items: center;
  1171. padding: 24rpx;
  1172. }
  1173. .review-info {
  1174. flex: 1;
  1175. min-width: 0;
  1176. }
  1177. .review-info .task-name {
  1178. font-size: 28rpx;
  1179. color: var(--text, #1E293B);
  1180. display: block;
  1181. margin-bottom: 4rpx;
  1182. }
  1183. .review-info .task-child {
  1184. font-size: 22rpx;
  1185. color: var(--muted, #94A3B8);
  1186. }
  1187. .review-actions {
  1188. display: flex;
  1189. gap: 12rpx;
  1190. flex-shrink: 0;
  1191. margin-left: 16rpx;
  1192. }
  1193. /* ========================================
  1194. g) 快捷操作
  1195. ======================================== */
  1196. .quick-section {
  1197. margin-bottom: 48rpx;
  1198. }
  1199. .quick-card {
  1200. padding: 16rpx 12rpx !important;
  1201. }
  1202. .quick-actions {
  1203. display: flex;
  1204. flex-wrap: wrap;
  1205. }
  1206. .action-item {
  1207. display: flex;
  1208. flex-direction: column;
  1209. align-items: center;
  1210. width: 20%;
  1211. margin-bottom: 12rpx;
  1212. transition: transform 0.15s ease;
  1213. }
  1214. .action-item:active {
  1215. transform: scale(0.92);
  1216. }
  1217. .action-icon {
  1218. width: 80rpx;
  1219. height: 80rpx;
  1220. border-radius: var(--radius-sm, 12rpx);
  1221. display: flex;
  1222. align-items: center;
  1223. justify-content: center;
  1224. margin-bottom: 10rpx;
  1225. }
  1226. .action-icon-text {
  1227. font-size: 32rpx;
  1228. }
  1229. .act-add { background: rgba(91, 155, 213, 0.12); }
  1230. .act-review { background: rgba(16, 185, 129, 0.12); }
  1231. .act-child { background: rgba(14, 165, 233, 0.12); }
  1232. .act-reward { background: rgba(245, 158, 11, 0.15); }
  1233. .act-invite { background: rgba(139, 92, 246, 0.12); }
  1234. .action-label {
  1235. font-size: 22rpx;
  1236. color: var(--text-secondary, #64748B);
  1237. font-weight: 500;
  1238. text-align: center;
  1239. }
  1240. </style>