index.vue 25 KB

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