index.vue 38 KB

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