index.vue 43 KB

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