index.vue 38 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318
  1. <template>
  2. <view class="container">
  3. <!-- 通用登录浮层 -->
  4. <login-sheet ref="loginSheet" @success="onSheetLoginSuccess" />
  5. <!-- TabTransition overlay -->
  6. <tab-transition v-if="showTabTransition" dimCode="wealth" ref="tabTransition" @close="showTabTransition = false" />
  7. <!-- 品牌头部 -->
  8. <PageBanner theme="wealth" tagline="家庭财富能量 · 利他创富" quote="利他创富 · 富足人生" />
  9. <!-- 未登录时显示精简内容 -->
  10. <template v-if="!isLoggedIn">
  11. <!-- 品牌定位语 -->
  12. <view class="brand-strap">
  13. <text class="brand-strap-text">分享价值,收获财富</text>
  14. </view>
  15. <!-- 月度引导语 -->
  16. <view class="monthly-guidance" v-if="!isLoggedIn">
  17. <text class="guidance-icon">💧</text>
  18. <text class="guidance-text">{{ monthlyGuidance }}</text>
  19. </view>
  20. <!-- 游客价值卡(统一组件:维度色 CTA + 价值预览) -->
  21. <DimensionIntroCard
  22. dimCode="wealth"
  23. card-title="富维度 · 利他创富"
  24. :benefits="[
  25. '家庭财富能量仪表盘与推广收益',
  26. '邀请返利与会员专属折扣',
  27. '商城精选好物一键下单'
  28. ]"
  29. cta-text="登录解锁财富能量"
  30. secondary-text="逛逛商城"
  31. secondary-url="/pages/shop/index/index" />
  32. <!-- 商城精选预览(无需登录) -->
  33. <view class="section">
  34. <view class="section-header">
  35. <text class="section-title">🛍️ 商城精选</text>
  36. <text class="section-more" @click="goToShop">查看全部 ›</text>
  37. </view>
  38. <scroll-view scroll-x class="product-scroll" show-scrollbar="false">
  39. <view class="product-list">
  40. <view class="product-card" v-for="(item, idx) in guestProducts" :key="idx" @click="goProductDetail(item.id)">
  41. <image class="product-img" :src="getImageUrl(item.coverImage || item.image) || '/static/default-product.png'" mode="aspectFill" />
  42. <text class="product-name">{{ item.name }}</text>
  43. <text class="product-price">¥{{ item.price || 0 }}</text>
  44. </view>
  45. </view>
  46. </scroll-view>
  47. </view>
  48. </template>
  49. <template v-else>
  50. <!-- 家庭成员选择条 -->
  51. <FamilyMemberStrip
  52. v-if="currentView === 'self' && isLoggedIn"
  53. :members="familyMembersVisible"
  54. :selectedMemberId="selectedMemberId"
  55. @select="onFamilyMemberSelect"
  56. @removed="loadFamilyMembersVisible" />
  57. <!-- 五维能量条 -->
  58. <FamilyEnergyBar
  59. v-if="isLoggedIn && sandboxData"
  60. dimensionCode="wealth"
  61. :sandboxData="sandboxData"
  62. :dualDimension="dualDimension" />
  63. <!-- 身克富杠杆警告 -->
  64. <body-wealth-alert
  65. :status="bodyWealthStatus"
  66. :message="bodyWealthMessage"
  67. :showTip="true" />
  68. <!-- 财富能量环 -->
  69. <WealthEnergyRing
  70. :score="wealthScore"
  71. :delta="deltaPercent" />
  72. <!-- 财富成长 -->
  73. <view class="section stream-section">
  74. <view class="section-header">
  75. <text class="section-title">💰 财富成长</text>
  76. <text class="section-sub">记录家庭财富积累过程,看到每月的成长变化</text>
  77. </view>
  78. <view class="stream-stages">
  79. <view
  80. class="stage-card"
  81. :class="{ active: stage.key === currentStage }"
  82. v-for="stage in streamStages"
  83. :key="stage.key">
  84. <text class="stage-icon">{{ stage.icon }}</text>
  85. <text class="stage-name">{{ stage.name }}</text>
  86. <text class="stage-desc">{{ stage.desc }}</text>
  87. <text class="stage-range">{{ stage.range }}</text>
  88. </view>
  89. </view>
  90. <view class="stream-water">
  91. <view class="stream-water-fill" :style="{ width: wealthScore + '%' }"></view>
  92. </view>
  93. <text class="stream-percent">水位 {{ wealthScore }}%</text>
  94. <text class="stream-tip">{{ streamTip }}</text>
  95. </view>
  96. <!-- 子维度水滴 -->
  97. <wealth-sub-scores
  98. :role="role"
  99. :skill="wealthSkill"
  100. :altruism="wealthAltruism"
  101. :income="wealthIncome"
  102. :fx="wealthFx" />
  103. <!-- 子维度评分表 -->
  104. <dimension-sub-dims
  105. v-if="isLoggedIn && wealthSubDims.length > 0"
  106. title="💧 财富维度构成"
  107. subtitle="家庭财富能量的各个方面"
  108. accent-color="#F59E0B"
  109. :dims="wealthSubDims" />
  110. <!-- 财富强项与提升 -->
  111. <view class="section wealth-insight" v-if="isLoggedIn && wealthSubDims.length > 0 && (wealthStrengths.length > 0 || wealthImproves.length > 0)">
  112. <view class="section-header">
  113. <text class="section-title">📈 财富强项与提升</text>
  114. </view>
  115. <view class="insight-group" v-if="wealthStrengths.length > 0">
  116. <text class="insight-group-title">💪 财富强项</text>
  117. <view class="insight-item" v-for="(item, idx) in wealthStrengths" :key="getInsightKey('s', idx)">
  118. <text class="insight-item-name">{{ item.label }}</text>
  119. <text class="insight-item-score">{{ item.score }}分</text>
  120. <text class="insight-item-tag tag-strong">强项</text>
  121. </view>
  122. </view>
  123. <view class="insight-group" v-if="wealthImproves.length > 0">
  124. <text class="insight-group-title">🌱 提升空间</text>
  125. <view class="insight-item" v-for="(item, idx) in wealthImproves" :key="getInsightKey('i', idx)">
  126. <text class="insight-item-name">{{ item.label }}</text>
  127. <text class="insight-item-score">{{ item.score }}分</text>
  128. <text class="insight-item-tag tag-improve">待提升</text>
  129. </view>
  130. </view>
  131. <view class="insight-tip" v-if="wealthStrengths.length > 0 && wealthImproves.length > 0">
  132. <text class="insight-tip-text">保持优势项,薄弱项可通过参与活动与任务逐步积累</text>
  133. </view>
  134. </view>
  135. <!-- 富维度画像 - 总体说明 -->
  136. <view class="dimension-portrait-section" v-if="isLoggedIn && wealthPortrait">
  137. <view class="section-header">
  138. <text class="section-title">🧭 富维度画像</text>
  139. <text class="portrait-tier">{{ wealthPortrait.tierLabel }}</text>
  140. </view>
  141. <view class="portrait-summary">
  142. <text class="portrait-desc">{{ wealthPortrait.summary }}</text>
  143. </view>
  144. <view class="portrait-dimensions">
  145. <view class="portrait-dim-item" v-for="dim in wealthPortrait.dims" :key="dim.code">
  146. <view class="portrait-dim-header">
  147. <view class="portrait-dim-icon" :style="{ background: dim.color }">{{ dim.icon }}</view>
  148. <text class="portrait-dim-name">{{ dim.name }}</text>
  149. <text class="portrait-dim-score">{{ dim.score }}</text>
  150. </view>
  151. <view class="portrait-dim-bar-track">
  152. <view class="portrait-dim-bar-fill" :style="{ width: dim.score + '%', background: dim.color }"></view>
  153. </view>
  154. <text class="portrait-dim-desc">{{ dim.desc }}</text>
  155. </view>
  156. </view>
  157. <view class="portrait-tip" v-if="wealthPortrait.tip">
  158. <text class="portrait-tip-text">💡 {{ wealthPortrait.tip }}</text>
  159. </view>
  160. </view>
  161. <!-- 财富数据卡(家长) -->
  162. <view class="section" v-if="role === 'parent'">
  163. <view class="disc-card">
  164. <text class="disc-label">💰 累计收益</text>
  165. <text class="disc-value">¥{{ wealthData.totalEarnings || 0 }}</text>
  166. <text class="disc-sub" v-if="deltaPercent > 0">较上月 ↑ {{ deltaPercent }}%</text>
  167. </view>
  168. <view class="disc-sub-row">
  169. <view class="disc-sub-card" @click="goToIncome">
  170. <text class="disc-sub-label">可提现</text>
  171. <text class="disc-sub-value">¥{{ wealthData.availableAmount || 0 }}</text>
  172. <text class="disc-sub-action">提现 →</text>
  173. </view>
  174. <view class="disc-sub-card" @click="goToAchievements">
  175. <text class="disc-sub-label">邀请人数</text>
  176. <text class="disc-sub-value">{{ wealthData.referralCount || 0 }}人</text>
  177. <text class="disc-sub-action">邀请 →</text>
  178. </view>
  179. </view>
  180. </view>
  181. <!-- 财富数据卡(孩子) -->
  182. <view class="section" v-else>
  183. <view class="child-wealth-card">
  184. <view class="child-wealth-item">
  185. <text class="child-wealth-icon">⭐</text>
  186. <text class="child-wealth-value">{{ wealthIncome || 0 }}</text>
  187. <text class="child-wealth-label">累计积分</text>
  188. </view>
  189. <view class="child-wealth-item">
  190. <text class="child-wealth-icon">📝</text>
  191. <text class="child-wealth-value">{{ taskPercent }}%</text>
  192. <text class="child-wealth-label">任务完成</text>
  193. </view>
  194. <view class="child-wealth-item">
  195. <text class="child-wealth-icon">🏆</text>
  196. <text class="child-wealth-value">{{ badgeCount }}</text>
  197. <text class="child-wealth-label">已获徽章</text>
  198. </view>
  199. </view>
  200. <view class="child-trend">
  201. <text class="child-trend-title">📊 本周成长趋势</text>
  202. <view class="child-trend-bars">
  203. <view class="trend-bar" v-for="(h, i) in weekTrend" :key="i" :style="{ height: h + '%' }"></view>
  204. </view>
  205. <view class="child-trend-days">
  206. <text class="trend-day" v-for="(d, i) in weekDays" :key="i">{{ d }}</text>
  207. </view>
  208. </view>
  209. </view>
  210. <!-- 保单管理 -->
  211. <view class="section" v-if="insuranceLoaded">
  212. <view class="section-header">
  213. <text class="section-title">🛡️ 保单管理</text>
  214. <text class="section-more" @click="goToInsuranceList">查看更多 ›</text>
  215. </view>
  216. <view class="insurance-card" v-if="insuranceList.length === 0">
  217. <view class="insurance-empty">
  218. <text class="insurance-empty-icon">📋</text>
  219. <text class="insurance-empty-text">暂无保单</text>
  220. </view>
  221. </view>
  222. <view class="insurance-card" v-else>
  223. <view class="insurance-item" v-for="(item, idx) in insuranceList" :key="idx" @click="goToInsuranceList">
  224. <view class="insurance-item-header">
  225. <text class="insurance-item-name">{{ item.policyName }}</text>
  226. <text class="insurance-item-status" :class="'status-' + item.status">{{ getPolicyStatusLabel(item.status) }}</text>
  227. </view>
  228. <view class="insurance-item-row">
  229. <text class="insurance-item-label">保险公司</text>
  230. <text class="insurance-item-value">{{ item.insuranceCompany || '未知' }}</text>
  231. </view>
  232. <view class="insurance-item-row">
  233. <text class="insurance-item-label">被保人</text>
  234. <text class="insurance-item-value">{{ item.insuredPerson }}</text>
  235. </view>
  236. </view>
  237. </view>
  238. </view>
  239. <!-- 富维度介绍卡片 -->
  240. <DimensionIntroCard dimCode="wealth" v-if="isLoggedIn" learn-more-url="/pages/wealth/dimension-intro" />
  241. </template>
  242. </view>
  243. </template>
  244. <script>
  245. import TabTransition from '../../components/tab-transition.vue'
  246. import WealthEnergyRing from '@/pages/wealth/components/WealthEnergyRing.vue'
  247. import WealthSubScores from '@/pages/wealth/components/WealthSubScores.vue'
  248. import BodyWealthAlert from '@/pages/wealth/components/BodyWealthAlert.vue'
  249. import FamilyMemberStrip from '../../components/FamilyMemberStrip.vue'
  250. import FamilyEnergyBar from '../../components/FamilyEnergyBar.vue'
  251. import DimensionIntroCard from '../../components/DimensionIntroCard.vue'
  252. import DimensionSubDims from './components/DimensionSubDims.vue'
  253. import {
  254. getChildren,
  255. getWealthDetail,
  256. getReferralCode,
  257. getReferralSummary,
  258. getCommissionSummary,
  259. getFamilyMemberList,
  260. getInsuranceList,
  261. getFamilyEnergySandbox,
  262. getEnergyOverview,
  263. productList,
  264. extractReferralCode,
  265. getChildBadgeStats,
  266. getDailyTaskOverview, reportAppEnter
  267. } from '../../utils/api.js'
  268. import nav from '../../utils/nav.js'
  269. import config from '../../config.js'
  270. export default {
  271. components: { TabTransition, WealthEnergyRing, WealthSubScores, BodyWealthAlert, FamilyMemberStrip, FamilyEnergyBar, DimensionIntroCard, DimensionSubDims },
  272. data() {
  273. return {
  274. showTabTransition: true,
  275. isLoggedIn: false,
  276. role: 'parent',
  277. // 五维评分
  278. wealthScore: 0,
  279. // 子维度 - 利他创富四维(家长/孩子共用字段)
  280. wealthSkill: null,
  281. wealthAltruism: null,
  282. wealthIncome: null,
  283. wealthFx: null,
  284. // 子维度汇总(DimensionSubDims 用)
  285. wealthSubDims: [],
  286. // 身克富杠杆
  287. bodyWealthStatus: 'normal',
  288. bodyWealthMessage: '',
  289. // 财富数据
  290. wealthData: {
  291. totalEarnings: 0,
  292. availableAmount: 0,
  293. referralCount: 0,
  294. referralCode: ''
  295. },
  296. // 财富成长
  297. deltaPercent: 0,
  298. streamStages: [
  299. { key: 'start', icon: '💧', name: '起步', desc: '新人阶段', range: '0-30%' },
  300. { key: 'mid', icon: '🌊', name: '汇流', desc: '成长阶段', range: '30-70%' },
  301. { key: 'surge', icon: '🌊🌊', name: '奔涌', desc: '达人阶段', range: '70-100%' }
  302. ],
  303. // 孩子数据
  304. taskPercent: 0,
  305. badgeCount: 0,
  306. weekTrend: [30, 40, 35, 50, 60, 55, 70],
  307. weekDays: ['一', '二', '三', '四', '五', '六', '日'],
  308. // 服务列表
  309. serviceList: [
  310. { icon: '📝', label: '记账', action: 'goToCheckin' },
  311. { icon: '🛡️', label: '保单管理', action: 'goToInsurance' },
  312. { icon: '🎨', label: '创客中心', action: 'goToCreator' },
  313. { icon: '🏪', label: '商城首页', action: 'goToShop' },
  314. { icon: '🛒', label: '购物车', action: 'goToCart' },
  315. { icon: '📋', label: '我的订单', action: 'goToOrders' },
  316. { icon: '🔄', label: '售后服务', action: 'goToAfterSales' },
  317. { icon: '📊', label: '收益中心', action: 'goToIncome' },
  318. { icon: '💎', label: '家庭CF值', action: 'goToFamilyCf' }
  319. ],
  320. children: [],
  321. familyMembersVisible: [],
  322. selectedMemberId: null,
  323. guestProducts: [],
  324. // 五维能量条数据
  325. sandboxData: null,
  326. dualDimension: null,
  327. // 保单列表
  328. insuranceList: [],
  329. insuranceLoaded: false,
  330. }
  331. },
  332. computed: {
  333. activeChildId() {
  334. if (this.role === 'child') {
  335. return uni.getStorageSync('currentChildId')
  336. }
  337. return ''
  338. },
  339. currentStage() {
  340. var s = this.wealthScore
  341. if (s >= 70) return 'surge'
  342. if (s >= 30) return 'mid'
  343. return 'start'
  344. },
  345. streamTip() {
  346. var s = this.wealthScore
  347. if (s >= 70) return '🎉 已是富足达人,继续引领全家成长!'
  348. if (s >= 30) return '💡 坚持分享,下一阶段"奔涌"在望'
  349. return '🌱 从今天开始,迈出创富第一步'
  350. },
  351. /** 财富强项:wealthSubDims 中得分 ≥75 的维度 */
  352. wealthStrengths() {
  353. var result = []
  354. for (var i = 0; i < this.wealthSubDims.length; i++) {
  355. var d = this.wealthSubDims[i]
  356. var s = Number(d.score)
  357. if (s >= 75) result.push({ label: d.label, score: s })
  358. }
  359. return result
  360. },
  361. /** 财富提升空间:wealthSubDims 中 0<得分<60 的维度 */
  362. wealthImproves() {
  363. var result = []
  364. for (var i = 0; i < this.wealthSubDims.length; i++) {
  365. var d = this.wealthSubDims[i]
  366. var s = Number(d.score)
  367. if (s > 0 && s < 60) result.push({ label: d.label, score: s })
  368. }
  369. return result
  370. },
  371. wealthPortrait: function() {
  372. var self = this
  373. if (!this.isLoggedIn || !this.wealthSubDims || this.wealthSubDims.length === 0) return null
  374. var dims = this.wealthSubDims
  375. var colors = ['#F59E0B', '#FF8C42', '#6366F1', '#10B981']
  376. var result = { overall: 0, tierLabel: '', summary: '', dims: [], tip: '' }
  377. var total = 0
  378. var count = 0
  379. var dimList = []
  380. for (var i = 0; i < dims.length; i++) {
  381. var d = dims[i]
  382. var score = Number(d.score) || 0
  383. score = Math.max(0, Math.min(100, score))
  384. total += score
  385. count++
  386. dimList.push({
  387. code: 'wealth' + i,
  388. name: d.label,
  389. score: Math.round(score),
  390. color: colors[i % colors.length],
  391. desc: d.desc || ''
  392. })
  393. }
  394. if (count === 0) return null
  395. result.overall = Math.round(total / count)
  396. result.dims = dimList
  397. var o = result.overall
  398. if (o >= 80) {
  399. result.tierLabel = '财富掌舵者'
  400. result.summary = '您的财富管理能力突出,能够很好地规划家庭财务,为家人创造稳定的财富基础。'
  401. result.tip = '保持财富积累节奏,可探索更多元化的投资渠道'
  402. } else if (o >= 60) {
  403. result.tierLabel = '财富进取者'
  404. result.summary = '您的财富管理处于良好水平,具备一定的财务规划能力。'
  405. result.tip = '坚持记账与储蓄习惯,逐步扩大财富积累'
  406. } else if (o >= 40) {
  407. result.tierLabel = '财富探索者'
  408. result.summary = '您的财富管理正在起步阶段,正在学习如何规划家庭财务。'
  409. result.tip = '从记账开始,培养财务规划意识,为家庭建立储蓄习惯'
  410. } else {
  411. result.tierLabel = '财富启蒙者'
  412. result.summary = '您的财富管理意识刚刚萌发,需要更多财务知识的积累。'
  413. result.tip = '建议学习基础理财知识,从家庭收支记录开始'
  414. }
  415. return result
  416. }
  417. },
  418. onShow() {
  419. reportAppEnter('wealth');
  420. this.showTabTransition = true
  421. var token = uni.getStorageSync('token')
  422. if (!token) {
  423. this.isLoggedIn = false
  424. this.loadGuestProducts()
  425. this._watchPageReady()
  426. return
  427. }
  428. this.isLoggedIn = true
  429. var currentRole = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || 'parent'
  430. // 所有人统一以家长身份进入,不再进行角色分流
  431. this.role = currentRole
  432. this.loadChildren()
  433. this.loadWealthDetail()
  434. this.loadWealthData()
  435. this.loadChildData()
  436. this.loadFamilyMembersVisible()
  437. this.loadInsuranceList()
  438. this.loadSandboxData()
  439. this.loadEnergyData()
  440. this._watchPageReady()
  441. },
  442. /** 每月引导语 */
  443. monthlyGuidance: function() {
  444. var month = new Date().getMonth()
  445. var messages = [
  446. '一月:理财从记账开始,养习惯',
  447. '二月:新年规划,梳理家庭收支',
  448. '三月:春耕时节,播种财富种子',
  449. '四月:清明踏青,规划家庭支出',
  450. '五月:劳动节后,复盘收支状况',
  451. '六月:年中复盘,调整财富目标',
  452. '七月:暑期规划,优化家庭消费',
  453. '八月:开学季,教育专项规划',
  454. '九月:金秋收获,检视推广收益',
  455. '十月:国庆消费,理性理财',
  456. '十一月:年终冲刺,盘点年度收益',
  457. '十二月:年度总结,规划来年财富'
  458. ]
  459. return messages[month] || messages[0]
  460. },
  461. methods: {
  462. getInsightKey(prefix, idx) { return prefix + idx },
  463. onFamilyMemberSelect(member) {
  464. this.selectedMemberId = member.id
  465. },
  466. loadFamilyMembersVisible() {
  467. var self = this
  468. getFamilyMemberList({ visibleOnly: true }).then(function(res) {
  469. self.familyMembersVisible = res.data || []
  470. }).catch(function(e) {
  471. console.log('获取可见家庭成员失败', e)
  472. self.familyMembersVisible = []
  473. })
  474. },
  475. loadInsuranceList() {
  476. var self = this
  477. this.insuranceLoaded = false
  478. getInsuranceList({}).then(function(res) {
  479. if (res && res.code === 200) {
  480. self.insuranceList = (res.data || []).slice(0, 3)
  481. }
  482. self.insuranceLoaded = true
  483. }).catch(function() {
  484. self.insuranceLoaded = true
  485. })
  486. },
  487. getPolicyStatusLabel: function(status) {
  488. var map = { active: '有效', expired: '已过期', cancelled: '已取消' }
  489. return map[status] || status || '未知'
  490. },
  491. goLogin() {
  492. this.openLoginSheet()
  493. },
  494. // 登录成功:刷新登录态数据(镜像 onShow 已登录分支)
  495. onLoginSuccess() {
  496. this.isLoggedIn = true
  497. this.loadChildren()
  498. this.loadWealthDetail()
  499. this.loadWealthData()
  500. this.loadChildData()
  501. this.loadFamilyMembersVisible()
  502. this.loadInsuranceList()
  503. this.loadSandboxData()
  504. this.loadEnergyData()
  505. },
  506. _watchPageReady() {
  507. var self = this
  508. this.$nextTick(function() {
  509. if (self.$refs.tabTransition) self.$refs.tabTransition.markReady()
  510. })
  511. },
  512. async loadChildren() {
  513. try {
  514. var res = await getChildren()
  515. this.children = res.data || []
  516. } catch (e) {
  517. console.error('获取成员列表失败', e)
  518. }
  519. },
  520. async loadWealthDetail() {
  521. var memberId = null
  522. var memberType = this.role
  523. if (this.role === 'child') {
  524. memberId = uni.getStorageSync('currentChildId')
  525. if (!memberId && this.children.length > 0) {
  526. memberId = this.children[0].id
  527. }
  528. } else {
  529. memberId = uni.getStorageSync('userId')
  530. }
  531. if (!memberId) return
  532. try {
  533. var res = await getWealthDetail(memberId, memberType)
  534. if (res && res.data) {
  535. var d = res.data
  536. this.wealthScore = d.wealthScore || 0
  537. // 利他创富四子维度(家长/孩子共用字段)
  538. this.wealthSkill = d.wealthSkill
  539. this.wealthAltruism = d.wealthAltruism
  540. this.wealthIncome = d.wealthIncome
  541. this.wealthFx = d.wealthFx
  542. // 身克富杠杆状态
  543. this.bodyWealthStatus = d.bodyWealthStatus || 'normal'
  544. this.bodyWealthMessage = d.bodyWealthMessage || ''
  545. // 子维度汇总(供 DimensionSubDims 使用)
  546. if (memberType === 'parent') {
  547. this.wealthSubDims = [
  548. { label: '个人能力', score: this.wealthSkill || 0, desc: '服务商资质与成长学习' },
  549. { label: '利他贡献', score: this.wealthAltruism || 0, desc: '邀请分享帮助他人' },
  550. { label: 'CF值积累', score: this.wealthIncome || 0, desc: '家庭第二收入曲线' },
  551. { label: '财务素养', score: this.wealthFx || 0, desc: '记账理财储蓄习惯' }
  552. ]
  553. } else {
  554. this.wealthSubDims = [
  555. { label: '学业能力', score: this.wealthSkill || 0, desc: '测评成绩与进步趋势' },
  556. { label: '利他贡献', score: this.wealthAltruism || 0, desc: '帮助他人与分享' },
  557. { label: '积分积累', score: this.wealthIncome || 0, desc: '完成任务获取积分' },
  558. { label: '财务素养', score: this.wealthFx || 0, desc: '财商学习与储蓄习惯' }
  559. ]
  560. }
  561. }
  562. } catch (e) {
  563. console.error('获取富维度详情失败', e)
  564. }
  565. },
  566. loadSandboxData: function() {
  567. var self = this
  568. getFamilyEnergySandbox().then(function(res) {
  569. if (res && res.data) self.sandboxData = res.data
  570. }).catch(function() {})
  571. },
  572. loadEnergyData: function() {
  573. var self = this
  574. var memberId = uni.getStorageSync('userId') || null
  575. if (!memberId) return
  576. getEnergyOverview(memberId).then(function(res) {
  577. if (res && res.data) {
  578. var dims = res.data.dimensions
  579. if (dims && dims.length > 0) {
  580. for (var i = 0; i < dims.length; i++) {
  581. if (dims[i].code === 'wealth') {
  582. self.dualDimension = dims[i]
  583. break
  584. }
  585. }
  586. }
  587. }
  588. }).catch(function() {})
  589. },
  590. goToMemberDetail: function(memberId) {
  591. uni.navigateTo({ url: '/pages/wealth-detail/member-wealth-detail?memberId=' + memberId })
  592. },
  593. async loadWealthData() {
  594. if (this.role !== 'parent') return
  595. try {
  596. var codeRes = await getReferralCode()
  597. this.wealthData.referralCode = extractReferralCode(codeRes)
  598. } catch (e) {
  599. console.error('获取邀请码失败', e)
  600. }
  601. try {
  602. var summaryRes = await getReferralSummary()
  603. if (summaryRes && summaryRes.code === 200 && summaryRes.data) {
  604. this.wealthData.referralCount = summaryRes.data.invitedCount || 0
  605. }
  606. } catch (e) {
  607. console.error('获取邀请统计失败', e)
  608. }
  609. try {
  610. var commissionRes = await getCommissionSummary()
  611. if (commissionRes && commissionRes.code === 200 && commissionRes.data) {
  612. this.wealthData.totalEarnings = commissionRes.data.totalEarnings || 0
  613. this.wealthData.availableAmount = commissionRes.data.availableAmount || 0
  614. }
  615. } catch (e) {
  616. console.error('获取佣金统计失败', e)
  617. }
  618. },
  619. async loadChildData() {
  620. if (this.role !== 'child') return
  621. var memberId = uni.getStorageSync('currentChildId')
  622. if (!memberId && this.children.length > 0) {
  623. memberId = this.children[0].id
  624. }
  625. if (!memberId) return
  626. try {
  627. var badgeRes = await getChildBadgeStats(memberId)
  628. if (badgeRes && badgeRes.code === 200 && badgeRes.data) {
  629. this.badgeCount = badgeRes.data.active || 0
  630. }
  631. } catch (e) {
  632. console.error('获取徽章统计失败', e)
  633. }
  634. try {
  635. var taskRes = await getDailyTaskOverview({ memberId: memberId })
  636. if (taskRes && taskRes.code === 200 && taskRes.data && taskRes.data.tasks) {
  637. var done = taskRes.data.tasks.doneToday || 0
  638. var todo = taskRes.data.tasks.todoToday || 0
  639. var total = done + todo
  640. this.taskPercent = total > 0 ? Math.round(done / total * 100) : 0
  641. }
  642. } catch (e) {
  643. console.error('获取任务概览失败', e)
  644. }
  645. },
  646. logout() {
  647. uni.showModal({
  648. title: '退出登录',
  649. content: '确定要退出登录吗?',
  650. success: function(res) {
  651. if (res.confirm) {
  652. uni.clearStorageSync()
  653. uni.reLaunch({ url: '/pages/login/login' })
  654. }
  655. }
  656. })
  657. },
  658. goToCheckin() {
  659. uni.navigateTo({ url: '/pages/wealth-sub/checkin' })
  660. },
  661. goToInsurance() {
  662. uni.navigateTo({ url: '/pages/wealth-sub/insurance-list' })
  663. },
  664. goToInsuranceList: function() {
  665. uni.navigateTo({ url: '/pages/wealth-sub/insurance-list' })
  666. },
  667. goToCreator() {
  668. uni.navigateTo({ url: '/pages/promotion/index' })
  669. },
  670. goToShop() {
  671. uni.navigateTo({ url: '/pages/shop/index/index' })
  672. },
  673. goToOrders() {
  674. uni.navigateTo({ url: '/pages/shop/order-list/order-list' })
  675. },
  676. goToAfterSales() {
  677. uni.navigateTo({ url: '/pages/shop/after-sales/after-sales' })
  678. },
  679. goToIncome() {
  680. uni.navigateTo({ url: '/pages/promotion/commission' })
  681. },
  682. goToFamilyCf() {
  683. uni.navigateTo({ url: '/pages/wealth-cf/index' })
  684. },
  685. goToAchievements() {
  686. uni.navigateTo({ url: '/pages/rewards/badge' })
  687. },
  688. goToNetwork() {
  689. uni.navigateTo({ url: '/pages/promotion/team' })
  690. },
  691. goToCart() {
  692. uni.navigateTo({ url: '/pages/shop/cart/cart' })
  693. },
  694. loadGuestProducts() {
  695. var self = this
  696. productList({ page: 1, size: 4, sort: 'sales' }).then(function(res) {
  697. if (res.code === 200 && res.data && res.data.records) {
  698. self.guestProducts = res.data.records.slice(0, 4)
  699. }
  700. }).catch(function() {})
  701. },
  702. goProductDetail(id) {
  703. uni.navigateTo({ url: '/pages/discover-detail/product-detail/product-detail?id=' + id })
  704. },
  705. getImageUrl: function(path) {
  706. return config.API_BASE_URL + path
  707. },
  708. onServiceClick(action) {
  709. if (this[action]) {
  710. this[action]()
  711. }
  712. }
  713. }
  714. }
  715. </script>
  716. .view-toggle {
  717. display: flex;
  718. margin: 20rpx 30rpx;
  719. background: rgba(255,255,255,0.12);
  720. border-radius: 12rpx;
  721. padding: 6rpx;
  722. }
  723. .toggle-btn {
  724. flex: 1;
  725. text-align: center;
  726. padding: 12rpx 0;
  727. border-radius: 8rpx;
  728. font-size: 26rpx;
  729. color: rgba(255,255,255,0.65);
  730. }
  731. .toggle-btn.active {
  732. background: rgba(255,255,255,0.22);
  733. color: #fff;
  734. font-weight: 600;
  735. }
  736. /* 页面说明 */
  737. .section-sub {
  738. font-size: 22rpx;
  739. color: rgba(255,255,255,0.55);
  740. margin-top: 6rpx;
  741. display: block;
  742. }
  743. /* 得分解读卡片 */
  744. .score-explain-card {
  745. margin: 20rpx 30rpx;
  746. padding: 28rpx 24rpx;
  747. background: rgba(255,255,255,0.1);
  748. border-radius: 20rpx;
  749. border: 1rpx solid rgba(255,255,255,0.15);
  750. }
  751. .explain-header {
  752. display: flex;
  753. align-items: center;
  754. margin-bottom: 14rpx;
  755. }
  756. .explain-icon {
  757. font-size: 36rpx;
  758. margin-right: 10rpx;
  759. }
  760. .explain-title {
  761. font-size: 28rpx;
  762. font-weight: 600;
  763. color: #fff;
  764. }
  765. .explain-text {
  766. font-size: 26rpx;
  767. color: rgba(255,255,255,0.8);
  768. line-height: 1.6;
  769. }
  770. <style scoped>
  771. .container {
  772. min-height: 100vh;
  773. background: #f5f7fa;
  774. padding-bottom: 120rpx;
  775. }
  776. .section {
  777. margin: 20rpx 30rpx;
  778. }
  779. .section-header {
  780. display: flex;
  781. justify-content: space-between;
  782. align-items: center;
  783. margin-bottom: 20rpx;
  784. }
  785. .section-title {
  786. font-size: 30rpx;
  787. font-weight: bold;
  788. color: #333;
  789. }
  790. .section-more {
  791. font-size: 24rpx;
  792. color: #999;
  793. }
  794. /* 财富成长 */
  795. .stream-section {
  796. background: #fff;
  797. border-radius: 20rpx;
  798. padding: 24rpx;
  799. box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08);
  800. }
  801. .stream-stages {
  802. display: flex;
  803. justify-content: space-between;
  804. margin-bottom: 20rpx;
  805. }
  806. .stage-card {
  807. flex: 1;
  808. margin: 0 8rpx;
  809. padding: 20rpx;
  810. border-radius: 16rpx;
  811. background: #F5F9FC;
  812. display: flex;
  813. flex-direction: column;
  814. align-items: center;
  815. }
  816. .stage-card.active {
  817. background: #FFF7ED;
  818. border: 2rpx solid #FBBF24;
  819. }
  820. .stage-icon {
  821. font-size: 44rpx;
  822. }
  823. .stage-name {
  824. font-size: 26rpx;
  825. font-weight: bold;
  826. color: #333;
  827. margin-top: 8rpx;
  828. }
  829. .stage-desc {
  830. font-size: 20rpx;
  831. color: #999;
  832. margin-top: 4rpx;
  833. }
  834. .stage-range {
  835. font-size: 20rpx;
  836. color: #F59E0B;
  837. margin-top: 4rpx;
  838. }
  839. .stream-water {
  840. height: 20rpx;
  841. border-radius: 10rpx;
  842. background: #FEF3C7;
  843. overflow: hidden;
  844. }
  845. .stream-water-fill {
  846. height: 100%;
  847. border-radius: 10rpx;
  848. background: linear-gradient(90deg, #F59E0B, #FBBF24);
  849. transition: width 0.8s ease;
  850. }
  851. .stream-percent {
  852. display: block;
  853. text-align: right;
  854. font-size: 22rpx;
  855. color: #F59E0B;
  856. margin-top: 8rpx;
  857. }
  858. .stream-tip {
  859. display: block;
  860. text-align: center;
  861. font-size: 24rpx;
  862. color: #92400E;
  863. margin-top: 12rpx;
  864. }
  865. /* 财富数据主卡 */
  866. .disc-card {
  867. background: linear-gradient(135deg, #FFF7ED, #FEF3C7);
  868. border-radius: 20rpx;
  869. padding: 30rpx;
  870. margin-bottom: 16rpx;
  871. display: flex;
  872. flex-direction: column;
  873. }
  874. .disc-label {
  875. font-size: 26rpx;
  876. color: #92400E;
  877. }
  878. .disc-value {
  879. font-size: 56rpx;
  880. font-weight: bold;
  881. color: #F59E0B;
  882. margin-top: 8rpx;
  883. }
  884. .disc-sub {
  885. font-size: 24rpx;
  886. color: #B45309;
  887. margin-top: 8rpx;
  888. }
  889. .disc-sub-row {
  890. display: flex;
  891. margin-bottom: 16rpx;
  892. }
  893. .disc-sub-card {
  894. flex: 1;
  895. background: #fff;
  896. border-radius: 16rpx;
  897. padding: 24rpx;
  898. display: flex;
  899. flex-direction: column;
  900. box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
  901. }
  902. .disc-sub-card:first-child {
  903. margin-right: 8rpx;
  904. }
  905. .disc-sub-card:last-child {
  906. margin-left: 8rpx;
  907. }
  908. .disc-sub-label {
  909. font-size: 24rpx;
  910. color: #999;
  911. }
  912. .disc-sub-value {
  913. font-size: 36rpx;
  914. font-weight: bold;
  915. color: #333;
  916. margin-top: 8rpx;
  917. }
  918. .disc-sub-action {
  919. font-size: 22rpx;
  920. color: #F59E0B;
  921. margin-top: 8rpx;
  922. }
  923. /* 孩子财富卡 */
  924. .child-wealth-card {
  925. display: flex;
  926. background: #fff;
  927. border-radius: 20rpx;
  928. padding: 24rpx 0;
  929. box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08);
  930. }
  931. .child-wealth-item {
  932. flex: 1;
  933. display: flex;
  934. flex-direction: column;
  935. align-items: center;
  936. }
  937. .child-wealth-icon {
  938. font-size: 44rpx;
  939. }
  940. .child-wealth-value {
  941. font-size: 36rpx;
  942. font-weight: bold;
  943. color: #F59E0B;
  944. margin-top: 8rpx;
  945. }
  946. .child-wealth-label {
  947. font-size: 22rpx;
  948. color: #999;
  949. margin-top: 4rpx;
  950. }
  951. .child-trend {
  952. margin-top: 16rpx;
  953. background: #fff;
  954. border-radius: 20rpx;
  955. padding: 24rpx;
  956. box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08);
  957. }
  958. .child-trend-title {
  959. font-size: 26rpx;
  960. color: #333;
  961. font-weight: bold;
  962. }
  963. .child-trend-bars {
  964. display: flex;
  965. align-items: flex-end;
  966. height: 120rpx;
  967. margin-top: 16rpx;
  968. }
  969. .trend-bar {
  970. flex: 1;
  971. margin: 0 6rpx;
  972. background: linear-gradient(180deg, #FBBF24, #F59E0B);
  973. border-radius: 6rpx 6rpx 0 0;
  974. }
  975. .child-trend-days {
  976. display: flex;
  977. margin-top: 8rpx;
  978. }
  979. .trend-day {
  980. flex: 1;
  981. text-align: center;
  982. font-size: 20rpx;
  983. color: #999;
  984. }
  985. /* 服务入口 */
  986. .service-grid {
  987. display: flex;
  988. flex-wrap: wrap;
  989. background: #fff;
  990. border-radius: 20rpx;
  991. padding: 24rpx 16rpx;
  992. box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08);
  993. }
  994. .service-item {
  995. width: 25%;
  996. display: flex;
  997. flex-direction: column;
  998. align-items: center;
  999. padding: 16rpx 0;
  1000. }
  1001. .service-icon-wrap {
  1002. width: 88rpx;
  1003. height: 88rpx;
  1004. border-radius: 24rpx;
  1005. background: #FFF7ED;
  1006. display: flex;
  1007. align-items: center;
  1008. justify-content: center;
  1009. margin-bottom: 8rpx;
  1010. }
  1011. .service-icon {
  1012. font-size: 40rpx;
  1013. }
  1014. .service-label {
  1015. font-size: 22rpx;
  1016. color: #666;
  1017. }
  1018. .logout-item {
  1019. color: #EF4444;
  1020. }
  1021. /* 未登录 */
  1022. .login-prompt .login-btn::after {
  1023. border: none;
  1024. }
  1025. /* 品牌定位语 */
  1026. .brand-strap {
  1027. margin: 16rpx 30rpx 0;
  1028. padding: 20rpx 28rpx;
  1029. background: linear-gradient(135deg, #FFFBEB, rgba(245,158,11,0.12));
  1030. border-radius: 16rpx;
  1031. border-left: 8rpx solid #F59E0B;
  1032. }
  1033. .brand-strap-text {
  1034. font-size: 26rpx;
  1035. color: #92400E;
  1036. font-weight: 500;
  1037. }
  1038. /* 商城精选预览 */
  1039. .product-scroll {
  1040. white-space: nowrap;
  1041. padding: 0 30rpx;
  1042. }
  1043. .product-list {
  1044. display: inline-flex;
  1045. gap: 20rpx;
  1046. }
  1047. .product-card {
  1048. width: 220rpx;
  1049. flex-shrink: 0;
  1050. background: #fff;
  1051. border-radius: 16rpx;
  1052. overflow: hidden;
  1053. box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
  1054. }
  1055. .product-img {
  1056. width: 220rpx;
  1057. height: 220rpx;
  1058. background: #f5f5f5;
  1059. }
  1060. .product-name {
  1061. display: block;
  1062. padding: 12rpx 12rpx 4rpx;
  1063. font-size: 24rpx;
  1064. color: #333;
  1065. overflow: hidden;
  1066. text-overflow: ellipsis;
  1067. white-space: nowrap;
  1068. }
  1069. .product-price {
  1070. display: block;
  1071. padding: 4rpx 12rpx 12rpx;
  1072. font-size: 26rpx;
  1073. font-weight: bold;
  1074. color: #F59E0B;
  1075. }
  1076. /* 保单管理 */
  1077. .insurance-card {
  1078. background: #fff;
  1079. border-radius: 20rpx;
  1080. padding: 24rpx;
  1081. box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08);
  1082. }
  1083. .insurance-empty {
  1084. display: flex;
  1085. flex-direction: column;
  1086. align-items: center;
  1087. padding: 40rpx 0;
  1088. }
  1089. .insurance-empty-icon { font-size: 60rpx; }
  1090. .insurance-empty-text { font-size: 24rpx; color: #999; margin-top: 12rpx; }
  1091. .insurance-item {
  1092. padding: 16rpx 0;
  1093. border-bottom: 1rpx solid #f5f5f5;
  1094. }
  1095. .insurance-item:last-child { border-bottom: none; }
  1096. .insurance-item-header {
  1097. display: flex;
  1098. justify-content: space-between;
  1099. align-items: center;
  1100. margin-bottom: 8rpx;
  1101. }
  1102. .insurance-item-name {
  1103. font-size: 26rpx;
  1104. font-weight: 600;
  1105. color: #333;
  1106. }
  1107. .insurance-item-status {
  1108. font-size: 20rpx;
  1109. padding: 4rpx 12rpx;
  1110. border-radius: 8rpx;
  1111. }
  1112. .insurance-item-status.status-active { background: #DCFCE7; color: #16A34A; }
  1113. .insurance-item-status.status-expired { background: #FEF2F2; color: #DC2626; }
  1114. .insurance-item-status.status-cancelled { background: #F5F5F5; color: #999; }
  1115. .insurance-item-row {
  1116. display: flex;
  1117. justify-content: space-between;
  1118. padding: 4rpx 0;
  1119. }
  1120. .insurance-item-label { font-size: 22rpx; color: #999; }
  1121. .insurance-item-value { font-size: 22rpx; color: #666; }
  1122. /* ===== 财富强项与提升卡片 ===== */
  1123. .wealth-insight {
  1124. background: #fff;
  1125. border-radius: 20rpx;
  1126. padding: 24rpx;
  1127. }
  1128. .insight-group {
  1129. margin-bottom: 16rpx;
  1130. }
  1131. .insight-group-title {
  1132. font-size: 26rpx;
  1133. font-weight: 600;
  1134. color: #333;
  1135. margin-bottom: 10rpx;
  1136. display: block;
  1137. }
  1138. .insight-item {
  1139. display: flex;
  1140. align-items: center;
  1141. padding: 12rpx 16rpx;
  1142. background: #FFFBEB;
  1143. border-radius: 12rpx;
  1144. margin-bottom: 8rpx;
  1145. }
  1146. .insight-item-name {
  1147. flex: 1;
  1148. font-size: 26rpx;
  1149. color: #333;
  1150. }
  1151. .insight-item-score {
  1152. font-size: 24rpx;
  1153. color: #666;
  1154. margin-right: 12rpx;
  1155. }
  1156. .insight-item-tag {
  1157. font-size: 20rpx;
  1158. padding: 4rpx 16rpx;
  1159. border-radius: 8rpx;
  1160. font-weight: 500;
  1161. }
  1162. .insight-item-tag.tag-strong {
  1163. background: #D1FAE5;
  1164. color: #059669;
  1165. }
  1166. .insight-item-tag.tag-improve {
  1167. background: #FEF3C7;
  1168. color: #D97706;
  1169. }
  1170. .insight-tip {
  1171. padding: 12rpx 16rpx;
  1172. background: #FFFBEB;
  1173. border-radius: 12rpx;
  1174. }
  1175. .insight-tip-text {
  1176. font-size: 22rpx;
  1177. color: #F59E0B;
  1178. }
  1179. /* 维度画像样式 */
  1180. .dimension-portrait-section {
  1181. margin: 24rpx 30rpx;
  1182. background: #fff;
  1183. border-radius: 24rpx;
  1184. padding: 32rpx 24rpx;
  1185. box-shadow: 0 4rpx 20rpx rgba(245, 158, 11, 0.12);
  1186. border: 2rpx solid rgba(245, 158, 11, 0.1);
  1187. }
  1188. .portrait-tier {
  1189. font-size: 26rpx;
  1190. color: #F59E0B;
  1191. font-weight: bold;
  1192. margin-left: 16rpx;
  1193. }
  1194. .portrait-summary {
  1195. margin-bottom: 24rpx;
  1196. }
  1197. .portrait-desc {
  1198. font-size: 26rpx;
  1199. color: #666;
  1200. line-height: 1.6;
  1201. display: block;
  1202. }
  1203. .portrait-dimensions {
  1204. margin-bottom: 20rpx;
  1205. }
  1206. .portrait-dim-item {
  1207. margin-bottom: 18rpx;
  1208. }
  1209. .portrait-dim-header {
  1210. display: flex;
  1211. align-items: center;
  1212. margin-bottom: 6rpx;
  1213. }
  1214. .portrait-dim-icon {
  1215. width: 36rpx;
  1216. height: 36rpx;
  1217. border-radius: 18rpx;
  1218. display: flex;
  1219. align-items: center;
  1220. justify-content: center;
  1221. margin-right: 10rpx;
  1222. font-size: 20rpx;
  1223. background: linear-gradient(135deg, #FFF7ED, #FFF3E8);
  1224. }
  1225. .portrait-dim-name {
  1226. font-size: 24rpx;
  1227. color: #333;
  1228. flex: 1;
  1229. }
  1230. .portrait-dim-score {
  1231. font-size: 26rpx;
  1232. font-weight: bold;
  1233. color: #F59E0B;
  1234. margin-right: 12rpx;
  1235. }
  1236. .portrait-dim-bar-track {
  1237. height: 10rpx;
  1238. background: #FFF7ED;
  1239. border-radius: 5rpx;
  1240. overflow: hidden;
  1241. margin-bottom: 4rpx;
  1242. flex: 1;
  1243. }
  1244. .portrait-dim-bar-fill {
  1245. height: 100%;
  1246. border-radius: 5rpx;
  1247. transition: width 0.3s ease;
  1248. }
  1249. .portrait-dim-desc {
  1250. font-size: 20rpx;
  1251. color: #666;
  1252. display: block;
  1253. }
  1254. .portrait-tip {
  1255. padding: 16rpx 20rpx;
  1256. background: linear-gradient(135deg, #FFF7ED, #FFF3E8);
  1257. border-radius: 12rpx;
  1258. border-left: 8rpx solid #F59E0B;
  1259. margin-top: 16rpx;
  1260. }
  1261. .portrait-tip-text {
  1262. font-size: 22rpx;
  1263. color: #C2410C;
  1264. line-height: 1.5;
  1265. }
  1266. /* 月度引导语 */
  1267. .monthly-guidance {
  1268. margin: 0 30rpx 20rpx;
  1269. background: linear-gradient(135deg, #FFFBEB, rgba(245,158,11,0.1));
  1270. border-radius: 16rpx;
  1271. padding: 20rpx 24rpx;
  1272. display: flex;
  1273. align-items: center;
  1274. gap: 12rpx;
  1275. }
  1276. .guidance-icon { font-size: 32rpx; flex-shrink: 0; }
  1277. .guidance-text { font-size: 26rpx; color: #F59E0B; font-weight: 500; }