parent-index.vue 42 KB

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