index.vue 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846
  1. <template>
  2. <view class="container">
  3. <!-- TabTransition overlay -->
  4. <tab-transition v-if="showTabTransition" dimCode="wealth" ref="tabTransition" @close="showTabTransition = false" />
  5. <!-- 未登录时显示精简内容 -->
  6. <template v-if="!isLoggedIn">
  7. <PageBanner theme="wealth"
  8. tagline="利他创富 · 价值共享"
  9. quote="富足源于利他与坚持" />
  10. <!-- 推荐阅读 -->
  11. <ArticleBookshelf
  12. :articles="wealthArticles"
  13. :loading="articlesLoading"
  14. @articleClick="goArticleDetail"
  15. @moreArticles="goMoreArticles" />
  16. <!-- 登录引导 -->
  17. <view class="login-guide-section">
  18. <text class="login-guide-text">登录后查看财富能量、推广收益、邀请返利等更多内容</text>
  19. <button class="login-btn" @click="goLogin">登录 / 注册</button>
  20. </view>
  21. </template>
  22. <template v-else>
  23. <!-- 品牌头部 -->
  24. <PageBanner theme="wealth"
  25. tagline="利他创富 · 价值共享"
  26. quote="富足源于利他与坚持" />
  27. <!-- 家庭成员选择条 -->
  28. <FamilyMemberStrip
  29. v-if="isLoggedIn"
  30. :members="familyMembersVisible"
  31. :selectedMemberId="selectedMemberId"
  32. @select="onFamilyMemberSelect"
  33. @removed="loadFamilyMembersVisible" />
  34. <!-- 模式切换 / 退出切换入口(家长未切时显示"切换到孩子视角";已切时显示"退出切换") -->
  35. <!-- 已切孩子态:点击"退出切换"回到家长模式 -->
  36. <view v-if="isSwitchedChild" class="exit-switch" @click="exitSwitch">
  37. <text>🔄 退出切换</text>
  38. </view>
  39. <!-- 家长且未切孩子态:此处展示"切换到孩子视角",点击完成模式切换 -->
  40. <view v-else class="exit-switch" @click="onSwitchMode">
  41. <text>👶 切换到孩子视角</text>
  42. </view>
  43. <!-- 身克富杠杆警告 -->
  44. <body-wealth-alert
  45. :status="bodyWealthStatus"
  46. :message="bodyWealthMessage"
  47. :showTip="true" />
  48. <!-- 财富子维度卡片 -->
  49. <wealth-sub-scores
  50. :role="role"
  51. :income="wealthIncome"
  52. :achievement="wealthAchievement"
  53. :network="wealthNetwork"
  54. :education="wealthEducation"
  55. :social="wealthSocial"
  56. :points="wealthPoints" />
  57. <!-- 心的子维度(仅孩子) -->
  58. <view class="section" v-if="role !== 'parent'">
  59. <view class="section-header">
  60. <text class="section-title">🔥 心的子维度</text>
  61. </view>
  62. <view class="sub-dim-grid heart-sub-dim">
  63. <view class="sub-dim-card" @click="childSubDimClick('emotion')">
  64. <text class="sub-dim-score">{{ heartEmotionStable || '-' }}</text>
  65. <text class="sub-dim-label">情绪稳定</text>
  66. <text class="sub-dim-desc">EMI情绪管理</text>
  67. </view>
  68. <view class="sub-dim-card" @click="childSubDimClick('understanding')">
  69. <text class="sub-dim-score">{{ heartUnderstanding || '-' }}</text>
  70. <text class="sub-dim-label">理解包容</text>
  71. <text class="sub-dim-desc">共情+社交适应</text>
  72. </view>
  73. <view class="sub-dim-card" @click="childSubDimClick('legacy')">
  74. <text class="sub-dim-score">{{ heartLegacy || '-' }}</text>
  75. <text class="sub-dim-label">传承传递</text>
  76. <text class="sub-dim-desc">未来开放</text>
  77. </view>
  78. </view>
  79. </view>
  80. <!-- 财富数据(仅家长) -->
  81. <view class="section" v-if="role === 'parent'">
  82. <view class="section-header">
  83. <text class="section-title">💰 财富数据</text>
  84. </view>
  85. <view class="wealth-card">
  86. <view class="wealth-item">
  87. <text class="wealth-value">{{ wealthData.totalEarnings || 0 }}</text>
  88. <text class="wealth-label">累计收益</text>
  89. </view>
  90. <view class="wealth-divider"></view>
  91. <view class="wealth-item">
  92. <text class="wealth-value">{{ wealthData.availableAmount || 0 }}</text>
  93. <text class="wealth-label">可提现</text>
  94. </view>
  95. <view class="wealth-divider"></view>
  96. <view class="wealth-item">
  97. <text class="wealth-value">{{ wealthData.referralCount || 0 }}</text>
  98. <text class="wealth-label">邀请人数</text>
  99. </view>
  100. </view>
  101. <!-- 邀请码复制 -->
  102. <view class="referral-code-bar" v-if="wealthData.referralCode" @click="copyReferralCode">
  103. <text class="referral-code-label">我的邀请码</text>
  104. <text class="referral-code-value">{{ wealthData.referralCode }}</text>
  105. <text class="referral-code-copy">复制</text>
  106. </view>
  107. </view>
  108. <!-- 增值服务入口 -->
  109. <view class="section">
  110. <view class="section-header">
  111. <text class="section-title">🚀 增值服务</text>
  112. </view>
  113. <view class="service-grid">
  114. <view class="service-item" @click="goToCheckin">
  115. <text class="service-icon">📝</text>
  116. <text class="service-label">记账打卡</text>
  117. </view>
  118. <view class="service-item" @click="goToInsurance">
  119. <text class="service-icon">🛡️</text>
  120. <text class="service-label">保单管理</text>
  121. </view>
  122. <view class="service-item" @click="goToCreator">
  123. <text class="service-icon">🎨</text>
  124. <text class="service-label">创客中心</text>
  125. </view>
  126. </view>
  127. </view>
  128. <!-- 消费中心 -->
  129. <view class="section">
  130. <view class="section-header">
  131. <text class="section-title">🛍️ 消费中心</text>
  132. </view>
  133. <view class="service-grid">
  134. <view class="service-item" @click="goToShop">
  135. <text class="service-icon">🏪</text>
  136. <text class="service-label">商城首页</text>
  137. </view>
  138. <view class="service-item" @click="goToCart">
  139. <text class="service-icon">🛒</text>
  140. <text class="service-label">购物车</text>
  141. </view>
  142. <view class="service-item" @click="goToOrders">
  143. <text class="service-icon">📋</text>
  144. <text class="service-label">我的订单</text>
  145. </view>
  146. <view class="service-item" @click="goToAfterSales">
  147. <text class="service-icon">🔄</text>
  148. <text class="service-label">售后服务</text>
  149. </view>
  150. </view>
  151. </view>
  152. <!-- 商品推荐 -->
  153. <DimensionProducts
  154. dimensionCode="wealth"
  155. :familyId="activeChildId"
  156. :products="dimensionProducts"
  157. title="推荐商品"
  158. @productClick="goProductDetail"
  159. @moreProducts="goMoreProducts" />
  160. <!-- 推荐活动 -->
  161. <DimensionActivities
  162. dimensionCode="wealth"
  163. :activities="dimensionActivities"
  164. :isLoggedIn="isLoggedIn"
  165. @activityClick="goActivityDetail"
  166. @moreActivities="goMoreActivities" />
  167. <!-- 推荐阅读 -->
  168. <ArticleBookshelf
  169. :articles="wealthArticles"
  170. :loading="articlesLoading"
  171. @articleClick="goArticleDetail"
  172. @moreArticles="goMoreArticles" />
  173. <!-- 底部菜单 -->
  174. <view class="menu-list">
  175. <view class="menu-item" @click="goToProfile">
  176. <text>👤 个人中心</text>
  177. <text class="arrow">›</text>
  178. </view>
  179. <view class="menu-item" @click="goToPointsLogs">
  180. <text>📊 积分记录</text>
  181. <text class="arrow">›</text>
  182. </view>
  183. <view class="menu-item logout-item" @click="logout">
  184. <text>🚪 退出登录</text>
  185. <text class="arrow">›</text>
  186. </view>
  187. </view>
  188. </template>
  189. </view>
  190. </template>
  191. <script>
  192. import TabTransition from '../../components/tab-transition.vue'
  193. import PageBanner from '../../components/PageBanner.vue'
  194. import ArticleBookshelf from '../../components/ArticleBookshelf.vue'
  195. import DimensionProducts from '../../components/DimensionProducts.vue'
  196. import DimensionActivities from '../../components/DimensionActivities.vue'
  197. import WealthSubScores from '../../components/WealthSubScores.vue'
  198. import BodyWealthAlert from '../../components/BodyWealthAlert.vue'
  199. import FamilyMemberStrip from '../../components/FamilyMemberStrip.vue'
  200. import {
  201. verifyPassword,
  202. getChildren,
  203. getWealthDetail,
  204. getReferralCode,
  205. getReferralSummary,
  206. getCommissionSummary,
  207. getVisibleFamilyMembers,
  208. getFeaturedArticles,
  209. getActivityList,
  210. getProductsByDomain
  211. } from '../../utils/api.js'
  212. export default {
  213. components: { TabTransition, PageBanner, DimensionProducts, DimensionActivities, WealthSubScores, BodyWealthAlert, FamilyMemberStrip, ArticleBookshelf },
  214. data() {
  215. return {
  216. showTabTransition: true,
  217. isLoggedIn: false,
  218. role: 'parent',
  219. isSwitchedChild: false,
  220. // 五维评分
  221. bodyScore: 0,
  222. mindScore: 0,
  223. wisdomScore: 0,
  224. actionScore: 0,
  225. wealthScore: 0,
  226. // 心的子维度(仅孩子有真实数据)
  227. heartEmotionStable: null,
  228. heartUnderstanding: null,
  229. heartLegacy: null,
  230. // 子维度 - parent
  231. wealthIncome: null,
  232. wealthAchievement: null,
  233. wealthNetwork: null,
  234. // 子维度 - child
  235. wealthEducation: null,
  236. wealthSocial: null,
  237. wealthPoints: null,
  238. // 身克富杠杆
  239. bodyWealthStatus: 'normal',
  240. bodyWealthMessage: '',
  241. // 财富数据
  242. wealthData: {
  243. totalEarnings: 0,
  244. availableAmount: 0,
  245. referralCount: 0,
  246. referralCode: ''
  247. },
  248. children: [],
  249. familyMembersVisible: [],
  250. selectedMemberId: null,
  251. wealthArticles: [],
  252. articlesLoading: false,
  253. dimensionActivities: [],
  254. dimensionProducts: []
  255. }
  256. },
  257. computed: {
  258. activeChildId() {
  259. if (this.role === 'child') {
  260. return uni.getStorageSync('currentChildId')
  261. }
  262. return ''
  263. }
  264. },
  265. onShow() {
  266. this.showTabTransition = true
  267. var token = uni.getStorageSync('token')
  268. if (!token) {
  269. this.isLoggedIn = false
  270. this._watchPageReady()
  271. return
  272. }
  273. this.isLoggedIn = true
  274. var currentRole = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || 'parent'
  275. if (currentRole === 'teacher') {
  276. uni.redirectTo({ url: '/pages/teacher/teacher-profile' })
  277. return
  278. }
  279. this.role = currentRole
  280. this.isSwitchedChild = uni.getStorageSync('isSwitchedChild') || false
  281. this.loadChildren()
  282. this.loadWealthDetail()
  283. this.loadWealthData()
  284. this.loadFamilyMembersVisible()
  285. this.loadWealthArticles()
  286. this.loadDimensionActivities()
  287. this.loadDimensionProducts()
  288. this._watchPageReady()
  289. },
  290. methods: {
  291. onFamilyMemberSelect(member) {
  292. this.selectedMemberId = member.id
  293. },
  294. goProductDetail: function(prod) {
  295. if (!prod || !prod.id) return
  296. uni.navigateTo({ url: '/pages/discover-detail/product-detail/product-detail?id=' + prod.id })
  297. },
  298. goMoreProducts: function() {
  299. uni.navigateTo({ url: '/pages/shop/index/index' })
  300. },
  301. loadDimensionActivities: function() {
  302. var self = this
  303. getActivityList({ dimensionCode: 'wealth', page: 1, size: 3 }).then(function(res) {
  304. if (res && res.data) {
  305. var list = Array.isArray(res.data) ? res.data : (res.data.records || [])
  306. self.dimensionActivities = list.slice(0, 3)
  307. }
  308. }).catch(function() { self.dimensionActivities = [] })
  309. },
  310. loadDimensionProducts: function() {
  311. var self = this
  312. getProductsByDomain('wealth', 1, 4).then(function(res) {
  313. if (res && res.data) {
  314. var list = Array.isArray(res.data) ? res.data : (res.data.records || [])
  315. self.dimensionProducts = list.slice(0, 4)
  316. }
  317. }).catch(function() { self.dimensionProducts = [] })
  318. },
  319. goActivityDetail: function(act) {
  320. if (!act || !act.id) return
  321. uni.navigateTo({ url: '/pages/activity/activity-detail/activity-detail?id=' + act.id })
  322. },
  323. goMoreActivities: function() {
  324. uni.navigateTo({ url: '/pages/discover/index?type=activity' })
  325. },
  326. loadWealthArticles: function() {
  327. var self = this
  328. self.articlesLoading = true
  329. getFeaturedArticles({ size: 5 }).then(function(res) {
  330. if (res.code === 200 && res.data) {
  331. var list = Array.isArray(res.data) ? res.data : (res.data.records || [])
  332. var result = []
  333. for (var i = 0; i < list.length; i++) {
  334. var a = list[i]
  335. if (a.relatedDimensions && a.relatedDimensions.indexOf('wealth') !== -1) {
  336. result.push(a)
  337. }
  338. }
  339. self.wealthArticles = result.length > 0 ? result.slice(0, 5) : list.slice(0, 5)
  340. }
  341. }).catch(function() {
  342. self.wealthArticles = []
  343. }).then(function() {
  344. self.articlesLoading = false
  345. })
  346. },
  347. goArticleDetail: function(article) {
  348. var id = article && article.id ? article.id : article
  349. uni.navigateTo({ url: '/pages/article-center/article-detail?id=' + id })
  350. },
  351. goMoreArticles: function() {
  352. uni.navigateTo({ url: '/pages/article-center/index?dimension=wealth' })
  353. },
  354. loadFamilyMembersVisible() {
  355. var self = this
  356. getVisibleFamilyMembers().then(function(res) {
  357. self.familyMembersVisible = res.data || []
  358. }).catch(function(e) {
  359. console.log('获取可见家庭成员失败', e)
  360. self.familyMembersVisible = []
  361. })
  362. },
  363. goLogin() {
  364. uni.navigateTo({ url: '/pages/login/login' })
  365. },
  366. _watchPageReady() {
  367. var self = this
  368. this.$nextTick(function() {
  369. if (self.$refs.tabTransition) self.$refs.tabTransition.markReady()
  370. })
  371. },
  372. async loadChildren() {
  373. try {
  374. var res = await getChildren()
  375. this.children = res.data || []
  376. } catch (e) {
  377. console.error('获取孩子列表失败', e)
  378. }
  379. },
  380. async loadWealthDetail() {
  381. var memberId = null
  382. var memberType = this.role
  383. if (this.role === 'child') {
  384. memberId = uni.getStorageSync('currentChildId')
  385. if (!memberId && this.children.length > 0) {
  386. memberId = this.children[0].id
  387. }
  388. } else {
  389. memberId = uni.getStorageSync('userId')
  390. }
  391. if (!memberId) return
  392. try {
  393. var res = await getWealthDetail(memberId, memberType)
  394. if (res && res.data) {
  395. var d = res.data
  396. this.wealthScore = d.wealthScore || 0
  397. if (memberType === 'parent') {
  398. this.wealthIncome = d.wealthIncome
  399. this.wealthAchievement = d.wealthAchievement
  400. this.wealthNetwork = d.wealthNetwork
  401. } else {
  402. this.wealthEducation = d.wealthEducation
  403. this.wealthSocial = d.wealthSocial
  404. this.wealthPoints = d.wealthPoints
  405. this.heartEmotionStable = d.heartEmotionStable
  406. this.heartUnderstanding = d.heartUnderstanding
  407. this.heartLegacy = d.heartLegacy
  408. }
  409. // 身克富杠杆状态
  410. this.bodyWealthStatus = d.bodyWealthStatus || 'normal'
  411. this.bodyWealthMessage = d.bodyWealthMessage || ''
  412. }
  413. } catch (e) {
  414. console.error('获取富维度详情失败', e)
  415. }
  416. },
  417. async loadWealthData() {
  418. if (this.role !== 'parent') return
  419. try {
  420. var codeRes = await getReferralCode()
  421. if (codeRes && codeRes.code === 200 && codeRes.data) {
  422. this.wealthData.referralCode = codeRes.data.code || codeRes.data || ''
  423. }
  424. } catch (e) {
  425. console.error('获取邀请码失败', e)
  426. }
  427. try {
  428. var summaryRes = await getReferralSummary()
  429. if (summaryRes && summaryRes.code === 200 && summaryRes.data) {
  430. this.wealthData.referralCount = summaryRes.data.totalCount || summaryRes.data.count || 0
  431. }
  432. } catch (e) {
  433. console.error('获取邀请统计失败', e)
  434. }
  435. try {
  436. var commissionRes = await getCommissionSummary()
  437. if (commissionRes && commissionRes.code === 200 && commissionRes.data) {
  438. this.wealthData.totalEarnings = commissionRes.data.totalEarnings || 0
  439. this.wealthData.availableAmount = commissionRes.data.availableAmount || 0
  440. }
  441. } catch (e) {
  442. console.error('获取佣金统计失败', e)
  443. }
  444. },
  445. copyReferralCode() {
  446. if (!this.wealthData.referralCode) return
  447. uni.setClipboardData({
  448. data: this.wealthData.referralCode,
  449. success: function() {
  450. uni.showToast({ title: '邀请码已复制', icon: 'success' })
  451. }
  452. })
  453. },
  454. onSwitchMode() {
  455. if (this.role === 'child') {
  456. this.exitSwitch()
  457. return
  458. }
  459. // parent → switch to child
  460. if (this.children.length === 0) {
  461. this.loadChildren()
  462. if (this.children.length === 0) {
  463. uni.showModal({
  464. title: '提示',
  465. content: '您还没有添加孩子,请先在家庭成员中添加',
  466. success: function(res) {
  467. if (res.confirm) {
  468. uni.navigateTo({ url: '/pages/profile-extra/family-members' })
  469. }
  470. }
  471. })
  472. return
  473. }
  474. }
  475. if (this.children.length === 1) {
  476. this.$store.commit('switchToChild', this.children[0].id)
  477. this.role = 'child'
  478. this.isSwitchedChild = true
  479. uni.showToast({ title: '已切换为孩子模式', icon: 'success' })
  480. return
  481. }
  482. var self = this
  483. uni.showActionSheet({
  484. itemList: this.children.map(function(c) { return c.nickname }),
  485. success: function(res) {
  486. var selectedChild = self.children[res.tapIndex]
  487. self.$store.commit('switchToChild', selectedChild.id)
  488. self.role = 'child'
  489. self.isSwitchedChild = true
  490. uni.showToast({ title: '已切换为' + selectedChild.nickname + '模式', icon: 'success' })
  491. }
  492. })
  493. },
  494. exitSwitch() {
  495. if (!this.isSwitchedChild) return
  496. var self = this
  497. uni.showModal({
  498. title: '退出切换',
  499. content: '请输入家长密码以确认退出',
  500. editable: true,
  501. success: function(res) {
  502. if (res.confirm && res.content) {
  503. verifyPassword(res.content).then(function(result) {
  504. if (result.code === 200) {
  505. uni.removeStorageSync('isSwitchedChild')
  506. uni.removeStorageSync('currentChildId')
  507. self.isSwitchedChild = false
  508. self.role = 'parent'
  509. if (self.$store && self.$store.commit) {
  510. self.$store.commit('switchBackToParent')
  511. }
  512. uni.showToast({ title: '已退出切换', icon: 'success' })
  513. setTimeout(function() {
  514. uni.reLaunch({ url: '/pages/index-home/index' })
  515. }, 1000)
  516. } else {
  517. uni.showToast({ title: '密码错误', icon: 'none' })
  518. }
  519. }).catch(function() {
  520. uni.showToast({ title: '验证失败', icon: 'none' })
  521. })
  522. }
  523. }
  524. })
  525. },
  526. logout() {
  527. uni.showModal({
  528. title: '退出登录',
  529. content: '确定要退出登录吗?',
  530. success: function(res) {
  531. if (res.confirm) {
  532. uni.clearStorageSync()
  533. uni.reLaunch({ url: '/pages/login/login' })
  534. }
  535. }
  536. })
  537. },
  538. goToProfile() {
  539. uni.navigateTo({ url: '/pages/profile/profile' })
  540. },
  541. goToCheckin() {
  542. uni.navigateTo({ url: '/pages/wealth-sub/checkin' })
  543. },
  544. goToInsurance() {
  545. uni.navigateTo({ url: '/pages/wealth-sub/insurance-list' })
  546. },
  547. goToCreator() {
  548. uni.navigateTo({ url: '/pages/promotion/index' })
  549. },
  550. goToPointsLogs() {
  551. uni.navigateTo({ url: '/pages/points/points' })
  552. },
  553. goToShop() {
  554. uni.navigateTo({ url: '/pages/shop/index/index' })
  555. },
  556. goToCart() {
  557. uni.navigateTo({ url: '/pages/shop/cart/cart' })
  558. },
  559. goToOrders() {
  560. uni.navigateTo({ url: '/pages/shop/order-list/order-list' })
  561. },
  562. goToAfterSales() {
  563. uni.navigateTo({ url: '/pages/shop/after-sales/after-sales' })
  564. },
  565. goToIncome() {
  566. uni.navigateTo({ url: '/pages/promotion/commission' })
  567. },
  568. goToAchievements() {
  569. uni.navigateTo({ url: '/pages/rewards/badge' })
  570. },
  571. goToNetwork() {
  572. uni.navigateTo({ url: '/pages/promotion/team' })
  573. },
  574. childSubDimClick(key) {
  575. var routes = {
  576. education: '/pages/assessment/results',
  577. social: '/pages/activity/index',
  578. points: '/pages/shop/index',
  579. emotion: '/pages/mind-detail/emotion-report',
  580. understanding: '/pages/mind-detail/emotion-trend',
  581. legacy: '/pages/wishes/index'
  582. }
  583. var url = routes[key]
  584. if (url) {
  585. uni.navigateTo({ url: url })
  586. }
  587. }
  588. }
  589. }
  590. </script>
  591. <style scoped>
  592. .container {
  593. min-height: 100vh;
  594. background: #f5f7fa;
  595. padding-bottom: 120rpx;
  596. }
  597. .section {
  598. margin: 20rpx 30rpx;
  599. }
  600. .section-header {
  601. display: flex;
  602. justify-content: space-between;
  603. align-items: center;
  604. margin-bottom: 20rpx;
  605. }
  606. .section-title {
  607. font-size: 30rpx;
  608. font-weight: bold;
  609. color: #333;
  610. }
  611. .section-more {
  612. font-size: 24rpx;
  613. color: #999;
  614. }
  615. /* 切换区域 */
  616. .switch-section {
  617. margin: 0 30rpx 20rpx;
  618. }
  619. .btn-switch {
  620. background: linear-gradient(135deg, #F59E0B, #FBBF24);
  621. color: #fff;
  622. font-size: 26rpx;
  623. padding: 16rpx 0;
  624. border-radius: 40rpx;
  625. text-align: center;
  626. line-height: 1.5;
  627. }
  628. /* 财富数据卡片 */
  629. .wealth-card {
  630. background: #fff;
  631. border-radius: 20rpx;
  632. padding: 30rpx 20rpx;
  633. display: flex;
  634. align-items: center;
  635. box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  636. }
  637. .wealth-item {
  638. flex: 1;
  639. display: flex;
  640. flex-direction: column;
  641. align-items: center;
  642. }
  643. .wealth-value {
  644. font-size: 40rpx;
  645. font-weight: bold;
  646. color: #F97316;
  647. }
  648. .wealth-label {
  649. font-size: 24rpx;
  650. color: #999;
  651. margin-top: 8rpx;
  652. }
  653. .wealth-divider {
  654. width: 1rpx;
  655. height: 60rpx;
  656. background: #f0f0f0;
  657. }
  658. /* 邀请码复制条 */
  659. .referral-code-bar {
  660. display: flex;
  661. align-items: center;
  662. background: #fff;
  663. margin-top: 16rpx;
  664. border-radius: 16rpx;
  665. padding: 24rpx 30rpx;
  666. box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  667. }
  668. .referral-code-label {
  669. font-size: 26rpx;
  670. color: #666;
  671. margin-right: 16rpx;
  672. }
  673. .referral-code-value {
  674. flex: 1;
  675. font-size: 30rpx;
  676. font-weight: bold;
  677. color: #F59E0B;
  678. letter-spacing: 2rpx;
  679. }
  680. .referral-code-copy {
  681. font-size: 24rpx;
  682. color: #fff;
  683. background: linear-gradient(135deg, #F59E0B, #FBBF24);
  684. padding: 8rpx 24rpx;
  685. border-radius: 20rpx;
  686. }
  687. /* 三子维度卡片 */
  688. .sub-dim-grid {
  689. display: flex;
  690. }
  691. .sub-dim-card {
  692. flex: 1;
  693. margin-right: 16rpx;
  694. background: #fff;
  695. border-radius: 16rpx;
  696. padding: 24rpx 16rpx;
  697. display: flex;
  698. flex-direction: column;
  699. align-items: center;
  700. box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  701. }
  702. .sub-dim-card:last-child {
  703. margin-right: 0;
  704. }
  705. .sub-dim-score {
  706. font-size: 48rpx;
  707. font-weight: bold;
  708. color: #F59E0B;
  709. }
  710. .heart-sub-dim .sub-dim-score {
  711. color: #FF6B9D;
  712. }
  713. .sub-dim-label {
  714. font-size: 24rpx;
  715. color: #333;
  716. margin-top: 8rpx;
  717. font-weight: 500;
  718. }
  719. .sub-dim-desc {
  720. font-size: 20rpx;
  721. color: #999;
  722. margin-top: 4rpx;
  723. }
  724. /* 增值服务 */
  725. .service-grid {
  726. display: flex;
  727. flex-wrap: wrap;
  728. background: #fff;
  729. border-radius: 20rpx;
  730. padding: 24rpx 16rpx;
  731. box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  732. }
  733. .service-item {
  734. width: 25%;
  735. display: flex;
  736. flex-direction: column;
  737. align-items: center;
  738. padding: 16rpx 0;
  739. }
  740. .service-icon {
  741. font-size: 48rpx;
  742. margin-bottom: 8rpx;
  743. }
  744. .service-label {
  745. font-size: 22rpx;
  746. color: #666;
  747. }
  748. /* 底部菜单 */
  749. .menu-list {
  750. margin: 30rpx 30rpx 0;
  751. background: #fff;
  752. border-radius: 16rpx;
  753. }
  754. .menu-item {
  755. padding: 30rpx;
  756. border-bottom: 1rpx solid #f0f0f0;
  757. display: flex;
  758. justify-content: space-between;
  759. font-size: 28rpx;
  760. }
  761. .menu-item:last-child {
  762. border-bottom: none;
  763. }
  764. .arrow {
  765. color: #ccc;
  766. font-size: 32rpx;
  767. }
  768. .logout-item {
  769. color: #EF4444;
  770. }
  771. /* 未登录 */
  772. .login-guide-section {
  773. display: flex;
  774. flex-direction: column;
  775. align-items: center;
  776. padding: 60rpx 40rpx;
  777. margin: 30rpx;
  778. background: #fff;
  779. border-radius: 20rpx;
  780. box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  781. }
  782. .login-guide-text {
  783. font-size: 26rpx;
  784. color: #999;
  785. text-align: center;
  786. margin-bottom: 30rpx;
  787. line-height: 1.6;
  788. }
  789. .login-guide-section .login-btn {
  790. width: 60%;
  791. height: 80rpx;
  792. line-height: 80rpx;
  793. background: linear-gradient(135deg, #5B9BD5, #3A7CC4);
  794. color: #fff;
  795. font-size: 30rpx;
  796. font-weight: bold;
  797. border-radius: 40rpx;
  798. text-align: center;
  799. border: none;
  800. }
  801. .login-prompt .login-btn::after {
  802. border: none;
  803. }
  804. /* 退出切换 */
  805. .exit-switch {
  806. margin: 20rpx 30rpx 0;
  807. padding: 16rpx 24rpx;
  808. background: #FEF3C7;
  809. border-radius: 12rpx;
  810. text-align: center;
  811. font-size: 26rpx;
  812. color: #92400E;
  813. }
  814. </style>