cfc/cfc-frontend/pages/profile/index.vue

<template>
  <view class="container">
    <view v-if="!isLoggedIn" class="login-prompt">
      <view class="prompt-icon">👤</view>
      <text class="prompt-title">登录浠艾福</text>
      <text class="prompt-desc">登录后可查看个人资料</text>
      <button class="login-btn" @click="goLogin">登录 / 注册</button>
    </view>
    <template v-else>
      <PageBanner theme="wealth" tagline="个人中心" quote="" />
      <ProfileHeader @avatar-click="goToEditInfo" />
      <ProfileMenu :role="role" @invite-generate="onInviteGenerate" />
    </template>
  </view>
</template>

<script>
import PageBanner from '../../components/PageBanner.vue'
import ProfileHeader from './components/ProfileHeader.vue'
import ProfileMenu from './components/ProfileMenu.vue'

export default {
  components: {
    PageBanner,
    ProfileHeader,
    ProfileMenu
  },
  data() {
    return {
      shareData: null
    }
  },
  computed: {
    isLoggedIn() {
      return !!uni.getStorageSync('token')
    },
    role() {
      return uni.getStorageSync('currentRole') || uni.getStorageSync('role') || 'parent'
    }
  },
  onShareAppMessage() {
    if (this.shareData) {
      return {
        title: this.shareData.title,
        path: this.shareData.path,
        imageUrl: '/static/invite-card.png'
      }
    }
  },
  methods: {
    goLogin() {
      uni.navigateTo({
        url: '/pages/login/login'
      })
    },
    goToEditInfo() {
      uni.navigateTo({
        url: '/pages/user-edit/user-edit'
      })
    },
    onInviteGenerate(data) {
      this.shareData = data
      uni.showToast({
        title: '点击右上角转发给TA',
        icon: 'none'
      })
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: #f5f7fa;
  padding-bottom: 120rpx;
}
.login-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  padding: 60rpx;
}
.prompt-icon {
  font-size: 120rpx;
  margin-bottom: 30rpx;
  width: 160rpx;
  height: 160rpx;
  line-height: 160rpx;
  text-align: center;
  background: #f5f5f5;
  border-radius: 50%;
}
.prompt-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 16rpx;
}
.prompt-desc {
  font-size: 26rpx;
  color: #999;
  text-align: center;
  margin-bottom: 40rpx;
}
.login-prompt .login-btn {
  width: 60%;
  height: 80rpx;
  line-height: 80rpx;
  background: linear-gradient(135deg, #5B9BD5, #3A7CC4);
  color: #fff;
  font-size: 30rpx;
  font-weight: bold;
  border-radius: 40rpx;
  text-align: center;
  border: none;
}
.login-prompt .login-btn::after {
  border: none;
}
</style>