index.vue 38 KB

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