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>
      <!-- 从富页面进入的返回入口 -->
      <view v-if="fromWealth" class="back-to-wealth" @click="goToWealth">
        <text class="back-arrow">‹</text>
        <text class="back-label">返回富页面</text>
      </view>
      <ProfileHeader @avatar-click="goToEditInfo" />
      <ProfileMenu :role="role" @invite-generate="onInviteGenerate" />
    </template>
  </view>
</template>

<script>
import ProfileHeader from '../../components/ProfileHeader.vue'
import ProfileMenu from '../../components/ProfileMenu.vue'
import { getReferralCode, extractReferralCode } from '../../utils/api.js'

export default {
  components: {
    ProfileHeader,
    ProfileMenu
  },
  data() {
    return {
      shareData: null,
      fromWealth: false,
      referralCode: '',
      referralCodeLoaded: false
    }
  },
  computed: {
    isLoggedIn() {
      return !!uni.getStorageSync('token')
    },
    role() {
      return uni.getStorageSync('currentRole') || uni.getStorageSync('role') || 'parent'
    }
  },
  onLoad(options) {
      // 支持 wealth→profile 的跳转来源标识
      if (options && options.from === 'wealth') {
        this.fromWealth = true
      }
    },
  onShow() {
    if (this.isLoggedIn) {
      this.loadReferralCode()
    }
  },
    onShareAppMessage() {
    if (this.shareData) {
      var path = this.shareData.path
      if (this.referralCode && path.indexOf('refCode=') === -1 && path.indexOf('inviteCode=') === -1) {
        var sep = path.indexOf('?') === -1 ? '?' : '&'
        path = path + sep + 'refCode=' + this.referralCode
      }
      return {
        title: this.shareData.title,
        path: path,
        imageUrl: '/static/invite-card.png'
      }
    }
  },
  onShareTimeline() {
    var query = ''
    if (this.shareData && this.shareData.path) {
      var qi = this.shareData.path.indexOf('?')
      if (qi !== -1) query = this.shareData.path.substring(qi + 1)
    }
    if (this.referralCode && query.indexOf('refCode=') === -1 && query.indexOf('inviteCode=') === -1) {
      query = query + (query ? '&' : '') + 'refCode=' + this.referralCode
    }
    return {
      title: this.shareData ? this.shareData.title : '浠艾福 — 给全家的一站式幸福提案',
      query: query,
      imageUrl: '/static/invite-card.png'
    }
  },
  methods: {
    /** 获取自己的邀请码用于分享 */
    async loadReferralCode() {
      if (this.referralCodeLoaded || !this.isLoggedIn) return
      try {
        var res = await getReferralCode()
        this.referralCode = extractReferralCode(res)
      } catch (e) {}
      this.referralCodeLoaded = true
    },
    goToWealth() {
      uni.navigateTo({ url: '/pages/wealth/index' })
    },
    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;
}
/* 从富页面返回入口 */
.back-to-wealth {
  display: flex;
  align-items: center;
  margin: 0 30rpx 20rpx;
  padding: 20rpx 24rpx;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
}
.back-arrow {
  font-size: 40rpx;
  color: #F59E0B;
  margin-right: 16rpx;
  font-weight: bold;
}
.back-label {
  font-size: 28rpx;
  color: #666;
}
</style>