index.vue 43 KB

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