num/client/pages/profile/index.vue

<template>
  <view class="page-profile">
    <!-- ========== Region 1: User Card ========== -->
    <view class="user-card">
      <!-- Login prompt for unauthenticated users -->
      <view v-if="!userStore.isLoggedIn" class="user-card__login" @click="goLogin">
        <view class="avatar avatar--empty">
          <text class="avatar__icon">+</text>
        </view>
        <text class="user-card__nickname">未登录</text>
        <text class="user-card__login-hint">点击登录 / 注册</text>
      </view>

      <!-- Authenticated user card -->
      <view v-else class="user-card__logged">
        <view class="avatar">
          <image :src="userStore.avatarUrl || '/static/default-avatar.png'" mode="aspectFill" />
          <view class="avatar__edit" @click="goEditProfile">
            <text class="avatar__edit-icon">✏</text>
          </view>
        </view>
        <text class="user-card__nickname">{{ userStore.nickname }}</text>

        <!-- Role tag -->
        <view
          class="user-card__tag"
          :class="{
            'user-card__tag--practitioner': userStore.vipType === 'practitioner',
            'user-card__tag--annual': userStore.vipType === 'annual',
            'user-card__tag--normal': !userStore.vipType
          }"
        >
          <text v-if="!userStore.vipType">普通用户</text>
          <text v-else-if="userStore.vipType === 'annual'">C端会员</text>
          <text v-else>能量师 🌟</text>
        </view>

        <!-- Social summary (optional) -->
        <text v-if="userStore.bio || userStore.city" class="user-card__summary">
          {{ userStore.city || '' }}{{ userStore.city && userStore.bio ? ' · ' : '' }}{{ userStore.bio || '' }}
        </text>
      </view>
    </view>

    <!-- ========== Region 2: Membership Status Cards ========== -->

    <!-- US-5.1 §13: Profile incomplete banner -->
    <view v-if="userStore.isLoggedIn && userStore.profileIncomplete" class="banner" @click="goEditProfile">
      <text class="banner__text">📝 请完善个人资料，开启能量匹配</text>
      <text class="banner__arrow">›</text>
    </view>

    <!-- US-4.3: Renewal reminder (7 days before expiry) -->
    <view v-if="isExpiringSoon" class="banner banner--warning" @click="goRenew">
      <text class="banner__text">⏰ 您的会员即将到期，请及时续费</text>
      <text class="banner__arrow">›</text>
    </view>

    <!-- Seed-price badge -->
    <view v-if="userStore.isSeedPriceUser" class="seed-badge">
      <text class="seed-badge__text">🌱 种子价专属会员</text>
    </view>

    <!-- VIP status card — role-based -->
    <!-- Case 1: Energy master (practitioner, in valid period) -->
    <view
      v-if="userStore.vipType === 'practitioner' && userStore.isVip && !isExpired"
      class="vip-card vip-card--practitioner"
    >
      <view class="vip-card__body">
        <text class="vip-card__title">能量师会员 🌟</text>
        <text class="vip-card__desc">
          有效期至 {{ formatDate(userStore.vipEndTime) }}
        </text>
      </view>
      <text class="vip-card__action" @click="goRenew">续费</text>
    </view>

    <!-- Case 2: C-end annual subscriber (in valid period) -->
    <view
      v-else-if="userStore.vipType === 'annual' && userStore.isVip && !isExpired"
      class="vip-card vip-card--annual"
    >
      <view class="vip-card__body">
        <text class="vip-card__title">C端会员</text>
        <text class="vip-card__desc">
          有效期至 {{ formatDate(userStore.vipEndTime) }}
        </text>
      </view>
      <text class="vip-card__action" @click="goUpgradePractitioner">升级能量师</text>
    </view>

    <!-- Case 3: Expired member (vipEndTime < now) -->
    <view v-else-if="userStore.vipType && isExpired" class="vip-card vip-card--expired">
      <view class="vip-card__body">
        <text class="vip-card__title">会员已过期</text>
        <text class="vip-card__desc">
          过期时间 {{ formatDate(userStore.vipEndTime) }}
        </text>
      </view>
      <text class="vip-card__action" @click="goPayment">重新开通</text>
    </view>

    <!-- Case 4: Free user — upsell card -->
    <view v-else class="vip-card vip-card--upsell">
      <view class="vip-card__body">
        <text class="vip-card__title">开通VIP · 解锁完整分析</text>
        <view class="vip-card__benefits">
          <text class="vip-card__benefit">✅ AI 完整五区解读</text>
          <text class="vip-card__benefit">✅ 不限次 AI 追问互动</text>
          <text class="vip-card__benefit">✅ 导出 PDF 报告</text>
          <text class="vip-card__benefit">✅ 分销推广赚佣金</text>
        </view>
      </view>
      <text class="vip-card__cta" @click="goPayment">立即开通 ¥131/年</text>
    </view>

    <!-- Daily quota (non-VIP only) -->
    <view v-if="!userStore.isVip" class="quota-bar">
      <view class="quota-bar__item">
        <text class="quota-bar__label">今日分析</text>
        <text class="quota-bar__value">{{ userStore.usedCharts }}/{{ userStore.maxCharts }}</text>
      </view>
      <view class="quota-bar__divider"></view>
      <view class="quota-bar__item">
        <text class="quota-bar__label">今日解读</text>
        <text class="quota-bar__value">{{ userStore.usedChats }}/{{ userStore.maxChats }}</text>
      </view>
    </view>

    <!-- ========== Region 3: Feature Menu ========== -->

    <!-- Group 1: My Services -->
    <view class="menu-section">
      <view class="menu-section__header">我的服务</view>

      <!-- Analysis history (all logged-in) -->
      <view v-if="userStore.isLoggedIn" class="menu-item" @click="goRecords">
        <text class="menu-item__label">📋 我的分析</text>
        <text class="menu-item__arrow">›</text>
      </view>

      <!-- Distribution panel (paid users only) -->
      <view v-if="userStore.isLoggedIn && userStore.isVip" class="menu-item" @click="goCommission">
        <text class="menu-item__label">💰 我的推广</text>
        <text class="menu-item__arrow">›</text>
      </view>

      <!-- Practitioner workbench (practitioners only) — EPIC 9 -->
      <view v-if="userStore.vipType === 'practitioner' && userStore.isVip" class="menu-item" @click="goWorkbench">
        <text class="menu-item__label">🔧 工作台</text>
        <view class="menu-item__badge menu-item__badge--new">NEW</view>
        <text class="menu-item__arrow">›</text>
      </view>
    </view>

    <!-- Group 2: Promotion Tools (paid users only) -->
    <view v-if="userStore.isLoggedIn && userStore.isVip && userStore.referralCode" class="menu-section">
      <view class="menu-section__header">推广工具</view>
      <view class="promo-card">
        <view class="promo-card__code-area">
          <text class="promo-card__prefix">推广码</text>
          <text class="promo-card__code">{{ userStore.referralCode }}</text>
        </view>
        <view class="promo-card__actions">
          <text class="promo-card__btn" @click="copyReferral">复制推广码</text>
          <text class="promo-card__divider">|</text>
          <text class="promo-card__btn" @click="generatePoster">生成推广海报</text>
        </view>
      </view>
    </view>

    <!-- Group 3: More -->
    <view class="menu-section">
      <view class="menu-section__header">更多</view>

      <!-- My tags (practitioner only, P2) -->
      <view v-if="userStore.vipType === 'practitioner'" class="menu-item" @click="goTags">
        <text class="menu-item__label">🏷 我的标签</text>
        <text class="menu-item__arrow">›</text>
      </view>

      <!-- About us (all) -->
      <view class="menu-item" @click="goAbout">
        <text class="menu-item__label">ℹ️ 关于我们</text>
        <text class="menu-item__arrow">›</text>
      </view>
    </view>

    <!-- ========== Region 4: Logout ========== -->
    <view v-if="userStore.isLoggedIn" class="menu-section">
      <view class="menu-item menu-item--danger" @click="handleLogout">
        <text class="menu-item__label menu-item__label--danger">退出登录</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()

// US-4.3: Renewal reminder if expiry within 7 days
const isExpiringSoon = computed(() => {
  if (!userStore.vipEndTime) return false
  const expiry = new Date(userStore.vipEndTime)
  const now = new Date()
  const diffHours = (expiry - now) / (1000 * 60 * 60)
  return diffHours > 0 && diffHours <= 7 * 24
})

// US-4.3: Expired check
const isExpired = computed(() => {
  if (!userStore.vipEndTime) return false
  return new Date(userStore.vipEndTime) < new Date()
})

function formatDate(dateStr) {
  if (!dateStr) return ''
  return dateStr.slice(0, 10)
}

onShow(() => {
  if (userStore.isLoggedIn) {
    userStore.fetchProfile()
    userStore.fetchQuota()
    userStore.fetchCommissionSummary()
  }
})

function goLogin() {
  uni.navigateTo({ url: '/pages/login/index' })
}

function goEditProfile() {
  if (!userStore.isLoggedIn) {
    uni.navigateTo({ url: '/pages/login/index' })
    return
  }
  uni.navigateTo({ url: '/pages/profile/edit' })
}

function goPayment() {
  uni.navigateTo({ url: '/pages/payment/index?product=annual' })
}

function goRenew() {
  const product = userStore.vipType === 'practitioner' ? 'practitioner' : 'annual'
  uni.navigateTo({ url: `/pages/payment/index?product=${product}` })
}

function goUpgradePractitioner() {
  uni.navigateTo({ url: '/pages/payment/index?product=practitioner' })
}

function goRecords() {
  uni.switchTab({ url: '/pages/records/index' })
}

function goCommission() {
  if (!userStore.isLoggedIn) {
    uni.navigateTo({ url: '/pages/login/index' })
    return
  }
  uni.navigateTo({ url: '/pages/commission/index' })
}

// EPIC 9: Navigate to practitioner workbench
function goWorkbench() {
  uni.navigateTo({ url: '/pages/plan/workbench' })
}

function copyReferral() {
  if (userStore.referralCode) {
    uni.setClipboardData({
      data: userStore.referralCode,
      success: () => uni.showToast({ title: '已复制推广码', icon: 'success' })
    })
  }
}

function generatePoster() {
  uni.showToast({ title: '海报生成中…', icon: 'none' })
  // US-6.5: Backend generates poster with mini-program code
}

function goTags() {
  uni.navigateTo({ url: '/pages/tags/index' })
}

function goAbout() {
  uni.navigateTo({ url: '/pages/about/index' })
}

function handleLogout() {
  uni.showModal({
    title: '确认退出',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        userStore.logout()
        uni.showToast({ title: '已退出', icon: 'success' })
      }
    }
  })
}
</script>

<style scoped lang="scss">
// Brand colors (aligned with style-guide.md)
$blue-dark: #1E3A5F;
$gold: #C9A84C;
$gold-light: #F8F0D8;
$warm-white: #F8F6F1;
$white: #FFFFFF;
$text-primary: #1F2937;
$text-secondary: #6B7280;
$text-muted: #9CA3AF;
$danger: #EF4444;

.page-profile {
  padding: 16px;
  min-height: 100vh;
  background: $warm-white;
}

// ========== Region 1: User Card ==========
.user-card {
  background: linear-gradient(135deg, $blue-dark, darken($blue-dark, 6%));
  border-radius: 16px;
  padding: 32px 20px 28px;
  margin-bottom: 16px;
  text-align: center;

  &__login {
    cursor: pointer;
  }

  &__logged {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  &__nickname {
    font-size: 18px;
    font-weight: 600;
    color: $white;
    display: block;
    margin-top: 12px;
  }

  &__login-hint {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    display: block;
    margin-top: 4px;
  }

  &__tag {
    display: inline-flex;
    padding: 3px 14px;
    border-radius: 20px;
    font-size: 12px;
    margin-top: 8px;

    &--practitioner {
      background: $gold;
      color: $blue-dark;
      font-weight: 600;
    }

    &--annual {
      background: rgba($gold, 0.25);
      color: $gold;
    }

    &--normal {
      background: rgba(255, 255, 255, 0.15);
      color: rgba(255, 255, 255, 0.8);
    }
  }

  &__summary {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 6px;
  }
}

// Avatar
.avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  overflow: visible;
  position: relative;
  margin: 0 auto;

  image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
  }

  &--empty {
    background: rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed rgba(255, 255, 255, 0.25);
  }

  &__icon {
    font-size: 28px;
    color: rgba(255, 255, 255, 0.5);
  }

  &__edit {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: $gold;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    cursor: pointer;

    &-icon {
      font-size: 12px;
      color: $blue-dark;
      font-weight: 700;
    }
  }
}

// ========== Region 2: Membership Status ==========

// Banners
.banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 12px;
  background: #FEF3C7;
  border: 1px solid #FDE68A;

  &--warning {
    background: #FEF3C7;
    border-color: #FDE68A;
  }

  &__text {
    font-size: 13px;
    color: #92400E;
    flex: 1;
  }

  &__arrow {
    font-size: 18px;
    color: #92400E;
    margin-left: 8px;
  }
}

// Seed-price badge
.seed-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 8px;
  margin-bottom: 12px;
  background: $gold-light;
  border: 1px solid $gold;

  &__text {
    font-size: 12px;
    color: $blue-dark;
    font-weight: 500;
  }
}

// VIP status card
.vip-card {
  border-radius: 12px;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;

  &__body {
    flex: 1;
  }

  &__title {
    font-weight: 600;
    font-size: 16px;
    display: block;
  }

  &__desc {
    font-size: 12px;
    opacity: 0.8;
    display: block;
    margin-top: 4px;
  }

  &__action {
    font-size: 14px;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 8px;
    white-space: nowrap;
    cursor: pointer;
  }

  // Practitioner
  &--practitioner {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    .vip-card__title, .vip-card__desc { color: #fff; }
    .vip-card__action {
      color: #7c3aed;
      background: rgba(255, 255, 255, 0.95);
    }
  }

  // Annual
  &--annual {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    .vip-card__title, .vip-card__desc { color: #fff; }
    .vip-card__action {
      color: #d97706;
      background: rgba(255, 255, 255, 0.95);
    }
  }

  // Expired
  &--expired {
    background: #E5E7EB;
    .vip-card__title { color: $text-secondary; }
    .vip-card__desc { color: $text-muted; }
    .vip-card__action {
      color: $text-secondary;
      background: $white;
    }
  }

  // Upsell (free user)
  &--upsell {
    background: linear-gradient(135deg, $blue-dark, darken($blue-dark, 4%));
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;

    .vip-card__title {
      color: $gold;
      font-size: 16px;
    }

    & .vip-card__benefits {
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin-top: 8px;
    }

    .vip-card__benefit {
      color: rgba(255, 255, 255, 0.8);
      font-size: 13px;
    }

    .vip-card__cta {
      align-self: stretch;
      text-align: center;
      background: $gold;
      color: $blue-dark;
      font-weight: 600;
      font-size: 15px;
      padding: 12px;
      border-radius: 10px;
      cursor: pointer;
    }
  }
}

// Daily quota
.quota-bar {
  background: $white;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-around;

  &__item {
    text-align: center;
  }

  &__label {
    font-size: 12px;
    color: $text-secondary;
    display: block;
    margin-bottom: 4px;
  }

  &__value {
    font-size: 20px;
    font-weight: 700;
    color: $text-primary;
  }

  &__divider {
    width: 1px;
    height: 36px;
    background: #E5E7EB;
  }
}

// ========== Region 3: Feature Menu ==========
.menu-section {
  background: $white;
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;

  &__header {
    font-size: 12px;
    font-weight: 600;
    color: $text-muted;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 14px 16px 6px;
  }
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid #F3F4F6;
  cursor: pointer;
  transition: background 0.15s;

  &:active {
    background: #F9FAFB;
  }

  &:last-child {
    border-bottom: none;
  }

  &__label {
    flex: 1;
    font-size: 15px;
    color: $text-primary;

    &--danger {
      color: $danger;
    }
  }

  &__badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;

    &--new {
      background: #FEF3C7;
      color: #D97706;
    }
  }

  &__arrow {
    color: $text-muted;
    font-size: 18px;
  }

  &--danger {
    justify-content: center;
    border-bottom: none;
  }
}

// Promotion tools card
.promo-card {
  margin: 0 16px 14px;
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: 10px;
  overflow: hidden;

  &__code-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 16px 8px;
  }

  &__prefix {
    font-size: 13px;
    color: $text-secondary;
  }

  &__code {
    font-size: 22px;
    font-weight: 700;
    color: $blue-dark;
    letter-spacing: 3px;
    font-family: monospace;
  }

  &__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 6px 16px 14px;
  }

  &__btn {
    font-size: 12px;
    color: $blue-dark;
    font-weight: 500;
    cursor: pointer;
  }

  &__divider {
    color: #D1D5DB;
    font-size: 12px;
  }
}
</style>