index.vue 44 KB

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