num/client/pages/analysis/index.vue

<template>
  <view class="page-analysis">
    <!-- ========== Section 1: My Analysis Records ========== -->
    <view class="section">
      <view class="section__header">
        <text class="section__title">📋 我的分析记录</text>
      </view>

      <!-- Empty state -->
      <view v-if="chartStore.records.length === 0" class="empty-state">
        <text class="empty-icon">📋</text>
        <text class="empty-text">暂无分析记录</text>
        <text class="empty-desc">去首页分析您的手机号码</text>
      </view>

      <!-- Records list -->
      <view v-else class="records-list">
        <view
          v-for="record in chartStore.records"
          :key="record.id"
          class="record-card"
          @click="viewDetail(record)"
        >
          <view class="record-header">
            <text class="record-name">{{ record.name || record.birthday || '未知' }}</text>
            <text class="record-date">{{ formatDate(record.createdAt) }}</text>
          </view>
          <text class="record-phone">{{ record.birthday || '' }}</text>
          <view class="record-tags">
            <text v-if="record.difyResponse" class="tag-status">已解读</text>
          </view>
        </view>
      </view>
    </view>

    <!-- ========== Divider: Super Member Zone ========== -->
    <view class="section-divider">
      <text class="section-divider__line"></text>
      <text class="section-divider__text">超级会员专属</text>
      <text class="section-divider__line"></text>
    </view>

    <!-- ========== Section 2: Relationship Analysis ========== -->
    <view
      class="feature-card"
      :class="{ 'feature-card--locked': !isSuperMember }"
      @click="goRelations"
    >
      <view class="feature-card__icon">
        <text>🔗</text>
      </view>
      <view class="feature-card__body">
        <text class="feature-card__title">关系能量分析</text>
        <text class="feature-card__desc">夫妻/亲子/同事等关系合盘对比分析</text>
      </view>
      <text v-if="!isSuperMember" class="feature-card__lock">🔒</text>
      <text v-else class="feature-card__arrow">›</text>
    </view>

    <!-- ========== Section 3: Number Analysis ========== -->
    <view
      class="feature-card"
      :class="{ 'feature-card--locked': !isSuperMember }"
      @click="goNumberAnalysis"
    >
      <view class="feature-card__icon">
        <text>🔢</text>
      </view>
      <view class="feature-card__body">
        <text class="feature-card__title">八星号码分析</text>
        <text class="feature-card__desc">手机号/车牌号等数字能量解读</text>
      </view>
      <text v-if="!isSuperMember" class="feature-card__lock">🔒</text>
      <text v-else class="feature-card__arrow">›</text>
    </view>

    <!-- ========== Upsell Banner (non-super logged-in users) ========== -->
    <view v-if="!isSuperMember && userStore.isLoggedIn" class="upsell-banner">
      <view class="upsell-banner__content">
        <text class="upsell-banner__title">开通超级会员 ¥1,314/年</text>
        <text class="upsell-banner__desc">解锁关系能量分析 + 八星号码解读</text>
      </view>
      <button class="upsell-banner__btn" @click="goSubscribe">立即开通</button>
    </view>
  </view>
</template>

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

const userStore = useUserStore()
const chartStore = useChartStore()

// Super member check: practitioner (能量师) or super_annual tier
const isSuperMember = computed(() => {
  if (!userStore.isVip) return false
  return userStore.vipType === 'super_annual' || userStore.vipType === 'practitioner'
})

onShow(() => {
  // Fetch user profile for up-to-date VIP status
  if (userStore.isLoggedIn) {
    userStore.fetchProfile()
  }
  // Fetch records list
  chartStore.fetchRecords()
})

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

function viewDetail(record) {
  chartStore.loadChart(record.id).then(() => {
    uni.navigateTo({ url: '/pages/chart/index' })
  })
}

function goRelations() {
  if (isSuperMember.value) {
    uni.navigateTo({ url: '/pages/relations/index' })
  } else {
    uni.showToast({ title: '开通超级会员解锁', icon: 'none' })
  }
}

function goNumberAnalysis() {
  if (isSuperMember.value) {
    uni.navigateTo({ url: '/pages/relations/number-analysis' })
  } else {
    uni.showToast({ title: '开通超级会员解锁', icon: 'none' })
  }
}

function goSubscribe() {
  uni.navigateTo({ url: '/pages/payment/index?product=super_member' })
}
</script>

<style scoped lang="scss">
@import "@/styles/theme.scss";

// Brand colors from style-guide.md
$blue-dark: var(--color-brand);
$gold: var(--color-gold);
$gold-light: #F8F0D8;
$warm-white: var(--color-bg);
$white: var(--color-bg-card);
$text-primary: #1F2937;
$text-secondary: #6B7280;
$text-muted: #9CA3AF;
$border-light: var(--color-border);
$shadow-card: var(--shadow-card);

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

// ========== Section ==========
.section {
  background: $white;
  border-radius: 16px;
  padding: 20px 16px;
  margin-bottom: 16px;
  box-shadow: $shadow-card;

  &__header {
    margin-bottom: 12px;
  }

  &__title {
    font-size: 17px;
    font-weight: 600;
    color: $text-primary;
  }
}

// ========== Empty State ==========
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 0;
}

.empty-icon {
  font-size: 40px;
  margin-bottom: 10px;
}

.empty-text {
  font-size: 15px;
  color: $text-secondary;
  margin-bottom: 4px;
}

.empty-desc {
  font-size: 13px;
  color: $text-muted;
}

// ========== Records List ==========
.records-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.record-card {
  background: $warm-white;
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  transition: background 0.15s;

  &:active {
    background: darken($warm-white, 2%);
  }
}

.record-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.record-name {
  font-weight: 600;
  font-size: 15px;
  color: $text-primary;
}

.record-date {
  font-size: 12px;
  color: $text-muted;
}

.record-phone {
  font-size: 18px;
  color: $blue-dark;
  font-weight: 500;
}

.tag-status {
  display: inline-block;
  background: #D1FAE5;
  color: #059669;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  margin-top: 8px;
}

// ========== Section Divider ==========
.section-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  padding: 0 4px;

  &__line {
    flex: 1;
    height: 1px;
    background: $border-light;
  }

  &__text {
    font-size: 12px;
    font-weight: 600;
    color: $gold;
    white-space: nowrap;
    letter-spacing: 1px;
  }
}

// ========== Feature Cards ==========
.feature-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: $white;
  border-radius: 16px;
  padding: 18px 16px;
  margin-bottom: 12px;
  box-shadow: $shadow-card;
  cursor: pointer;
  transition: all 0.15s;

  &:active {
    transform: scale(0.98);
  }

  &--locked {
    opacity: 0.55;
  }

  &__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: $gold-light;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
  }

  &__body {
    flex: 1;
    min-width: 0;
  }

  &__title {
    font-size: 16px;
    font-weight: 600;
    color: $text-primary;
    display: block;
    margin-bottom: 2px;
  }

  &__desc {
    font-size: 13px;
    color: $text-secondary;
    display: block;
  }

  &__lock {
    font-size: 20px;
    flex-shrink: 0;
  }

  &__arrow {
    font-size: 22px;
    color: $text-muted;
    flex-shrink: 0;
  }
}

// ========== Upsell Banner ==========
.upsell-banner {
  background: linear-gradient(135deg, $blue-dark, darken($blue-dark, 4%));
  border-radius: 16px;
  padding: 20px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  &__content {
    flex: 1;
  }

  &__title {
    font-size: 16px;
    font-weight: 700;
    color: $gold;
    display: block;
    margin-bottom: 4px;
  }

  &__desc {
    font-size: 12px;
    color: var(--color-text-secondary);
    display: block;
  }

  &__btn {
    flex-shrink: 0;
    background: $gold;
    color: $blue-dark;
    font-size: 14px;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    padding: 10px 18px;
    min-height: 44px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s;

    &:active {
      transform: scale(0.97);
      opacity: 0.9;
    }
  }
}
</style>