profile.vue 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. <template>
  2. <view class="container">
  3. <!-- ===== 未登录状态 ===== -->
  4. <view v-if="!isLoggedIn" class="login-prompt">
  5. <view class="prompt-icon">👤</view>
  6. <text class="prompt-title">登录浠艾福</text>
  7. <text class="prompt-desc">登录后可查看个人资料、积分记录等</text>
  8. <button class="login-btn" @click="goLogin">登录 / 注册</button>
  9. </view>
  10. <!-- ===== 已登录状态 ===== -->
  11. <template v-else>
  12. <!-- 品牌头部 -->
  13. <PageBanner theme="wealth" tagline="丰盈内心,富足生活,厚德载物" quote="" />
  14. <!-- 用户卡片 + 富沛能量 + 切换 -->
  15. <ProfileHeader />
  16. <!-- 行动数据 + 财富数据 -->
  17. <ProfileStats />
  18. <!-- 成就徽章 -->
  19. <ProfileBadges />
  20. <!-- 成长报告 -->
  21. <ProfileGrowth />
  22. <!-- 菜单列表 -->
  23. <ProfileMenu :role="role" @invite-generate="onInviteGenerate" />
  24. </template>
  25. </view>
  26. </template>
  27. <script>
  28. import PageBanner from '../../components/PageBanner.vue'
  29. import ProfileHeader from './components/ProfileHeader.vue'
  30. import ProfileStats from './components/ProfileStats.vue'
  31. import ProfileBadges from './components/ProfileBadges.vue'
  32. import ProfileGrowth from './components/ProfileGrowth.vue'
  33. import ProfileMenu from './components/ProfileMenu.vue'
  34. export default {
  35. components: {
  36. PageBanner,
  37. ProfileHeader,
  38. ProfileStats,
  39. ProfileBadges,
  40. ProfileGrowth,
  41. ProfileMenu
  42. },
  43. data() {
  44. return {
  45. shareData: null
  46. }
  47. },
  48. computed: {
  49. isLoggedIn() {
  50. return !!uni.getStorageSync('token')
  51. },
  52. role() {
  53. return uni.getStorageSync('currentRole') || uni.getStorageSync('role') || 'parent'
  54. }
  55. },
  56. onShareAppMessage() {
  57. if (this.shareData) {
  58. return {
  59. title: this.shareData.title,
  60. path: this.shareData.path,
  61. imageUrl: '/static/invite-card.png'
  62. }
  63. }
  64. },
  65. onShow() {
  66. if (!uni.getStorageSync('token')) return
  67. const currentRole = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || 'parent'
  68. if (currentRole === 'teacher') {
  69. uni.redirectTo({ url: '/pages/teacher/teacher-profile' })
  70. }
  71. },
  72. methods: {
  73. goLogin() {
  74. uni.navigateTo({ url: '/pages/login/login' })
  75. },
  76. onInviteGenerate(shareData) {
  77. this.shareData = shareData
  78. }
  79. }
  80. }
  81. </script>
  82. <style scoped>
  83. .container {
  84. min-height: 100vh;
  85. background: #f5f7fa;
  86. padding-bottom: 120rpx;
  87. }
  88. .login-prompt {
  89. display: flex;
  90. flex-direction: column;
  91. align-items: center;
  92. justify-content: center;
  93. padding: 200rpx 60rpx;
  94. }
  95. .prompt-icon { font-size: 100rpx; margin-bottom: 30rpx; }
  96. .prompt-title { font-size: 40rpx; font-weight: bold; color: #333; margin-bottom: 16rpx; }
  97. .prompt-desc { font-size: 26rpx; color: #999; margin-bottom: 60rpx; }
  98. .login-btn {
  99. width: 80%;
  100. background: linear-gradient(135deg, #667eea, #764ba2);
  101. color: #fff;
  102. border-radius: 50rpx;
  103. font-size: 30rpx;
  104. padding: 24rpx;
  105. line-height: 1.5;
  106. }
  107. </style>