num/client/pages/relations/index.vue

<template>
  <view class="page-relations">
    <!-- ========== Super Member Guard ========== -->
    <view v-if="!isSuperMember" class="locked-screen">
      <view class="locked-icon-wrap">
        <text class="locked-icon">🔒</text>
      </view>
      <text class="locked-title">超级会员专属</text>
      <text class="locked-desc">开通超级会员后可进行夫妻、亲子、同事等关系能量匹配分析</text>
      <view class="locked-features">
        <view class="locked-feature">🔗 关系能量合盘对比</view>
        <view class="locked-feature">🔢 八星号码能量解读</view>
        <view class="locked-feature">📊 AI 深度解读报告</view>
      </view>
      <view class="btn-upgrade" @click="goSubscribe">
        <text class="btn-upgrade-text">开通超级会员 ¥1,314/年</text>
      </view>
      <view class="btn-back" @click="goBack">
        <text class="btn-back-text">返回首页</text>
      </view>
    </view>

    <!-- ========== Authorized Content ========== -->
    <template v-else>
      <!-- Upsell banner: annual → super member upgrade -->
      <view v-if="showUpgradeBanner" class="upsell-banner">
        <text class="upsell-banner__text">升级超级会员，解锁关系能量 + 八星号码分析</text>
        <text class="upsell-banner__btn" @click="goSubscribe">升级</text>
      </view>

      <!-- Header bar -->
      <view class="header-bar">
        <text class="header-title">关系能量分析</text>
        <view class="btn-add" @click="goAddRelation">
          <text class="btn-add-text">+ 添加</text>
        </view>
      </view>

      <!-- Loading state -->
      <view v-if="loading" class="loading-state">
        <view v-for="i in 3" :key="i" class="skeleton-card" />
      </view>

      <!-- Empty state -->
      <view v-else-if="relations.length === 0" class="empty-state">
        <view class="empty-icon-wrap">
          <text class="empty-icon-symbol">+</text>
        </view>
        <text class="empty-text">暂无关系人</text>
        <text class="empty-desc">添加关系人后，可进行夫妻、亲子、同事等关系能量匹配分析</text>
        <view class="btn-empty-add" @click="goAddRelation">
          <text class="btn-empty-add-text">添加关系人</text>
        </view>
      </view>

      <!-- Relations list -->
      <view v-else class="relations-list">
        <text class="section-count">我的关系人 ({{ relations.length }})</text>
        <view
          v-for="item in relations"
          :key="item.id"
          class="relation-card"
        >
          <view class="card-header">
            <view class="type-tag">
              <text class="type-tag-text">{{ relationTypeLabel(item.relationType) }}</text>
            </view>
          </view>
          <view class="card-body">
            <text class="card-name">{{ item.name || '未知' }}</text>
            <text class="card-birth">{{ item.birthDate || '' }}</text>
          </view>
          <view class="card-footer">
            <view class="action-btn action-compare" @click="goCompare(item.id)">对比分析</view>
            <view class="action-btn action-edit" @click="goEdit(item.id)">编辑</view>
            <view class="action-btn action-delete" @click="handleDelete(item.id)">删除</view>
          </view>
        </view>
      </view>
    </template>
  </view>
</template>

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

const userStore = useUserStore()
const relations = ref([])
const loading = ref(false)

const isSuperMember = computed(() => {
  if (!userStore.isVip) return false
  return userStore.vipType === 'super_annual' || userStore.vipType === 'practitioner'
})

const showUpgradeBanner = computed(() => {
  // Show upgrade prompt for annual members who aren't super yet
  return userStore.isVip && userStore.vipType === 'annual'
})

const relationApi = {
  list: (data) => requestInstance.post('/relation/list', data),
  delete: (id) => requestInstance.post('/relation/delete', { id })
}

const relationTypeMap = {
  spouse: '夫妻',
  parent_child: '亲子',
  colleague: '同事',
  friend: '朋友',
  superior: '上下级'
}

function relationTypeLabel(type) {
  return relationTypeMap[type] || type || '未知'
}

onShow(() => {
  if (userStore.isLoggedIn) {
    userStore.fetchProfile()
  }
  if (isSuperMember.value) {
    fetchRelations()
  }
})

async function fetchRelations() {
  loading.value = true
  try {
    relations.value = await relationApi.list({})
  } catch (e) {
    relations.value = []
  } finally {
    loading.value = false
  }
}

function goAddRelation() {
  uni.navigateTo({ url: '/pages/relations/add-relation' })
}

function goCompare(id) {
  uni.navigateTo({ url: '/pages/relations/chart-compare?id=' + id })
}

function goEdit(id) {
  uni.navigateTo({ url: '/pages/relations/add-relation?id=' + id })
}

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

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

function handleDelete(id) {
  uni.showModal({
    title: '确认删除',
    content: '删除后无法恢复，确定要删除该关系人吗？',
    success: async (res) => {
      if (res.confirm) {
        try {
          await relationApi.delete(id)
          uni.showToast({ title: '删除成功', icon: 'success' })
          fetchRelations()
        } catch (e) {
          uni.showToast({ title: '删除失败', icon: 'none' })
        }
      }
    }
  })
}
</script>

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

.page-relations {
  min-height: 100vh;
  background: var(--color-bg);
  padding: 16px;
}

/* Header */
.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.header-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: 0.5px;
}
.btn-add {
  background: var(--color-gold);
  border-radius: 999px;
  padding: 8px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-add:active {
  transform: scale(0.97);
  opacity: 0.9;
}
.btn-add-text {
  color: var(--color-bg-card);
  font-size: 14px;
  font-weight: 600;
}

/* Section count */
.section-count {
  display: block;
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-bottom: 12px;
  padding-left: 2px;
}

/* Loading skeleton */
.loading-state {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.skeleton-card {
  height: 120px;
  background: linear-gradient(90deg, var(--color-bg-secondary) 25%, var(--color-bg) 50%, var(--color-bg-secondary) 75%);
  background-size: 400px 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 16px;
}
@keyframes shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}

/* Empty state */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 60px;
}
.empty-icon-wrap {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.empty-icon-symbol {
  font-size: 28px;
  color: var(--color-text-secondary);
  font-weight: 300;
}
.empty-text {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}
.empty-desc {
  font-size: 13px;
  color: var(--color-text-secondary);
  text-align: center;
  line-height: 1.6;
  max-width: 260px;
  margin-bottom: 24px;
}
.btn-empty-add {
  background: var(--color-brand);
  border-radius: 12px;
  padding: 12px 32px;
}
.btn-empty-add:active {
  transform: scale(0.97);
  opacity: 0.9;
}
.btn-empty-add-text {
  color: var(--color-bg-card);
  font-size: 15px;
  font-weight: 600;
}

/* Relation cards */
.relations-list {
  display: flex;
  flex-direction: column;
}
.relation-card {
  background: var(--color-bg-card);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-card);
}
.card-header {
  margin-bottom: 10px;
}
.type-tag {
  display: inline-flex;
  align-items: center;
  background: #EBF2FA;
  border-radius: 6px;
  padding: 3px 10px;
}
.type-tag-text {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-brand);
}
.card-body {
  margin-bottom: 12px;
}
.card-name {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}
.card-birth {
  display: block;
  font-size: 13px;
  color: var(--color-text-secondary);
}
.card-footer {
  display: flex;
  gap: 10px;
  border-top: 1px solid var(--color-border);
  padding-top: 12px;
}
.action-btn {
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 8px;
  flex: 1;
  text-align: center;
}
.action-btn:active {
  transform: scale(0.97);
  opacity: 0.9;
}
.action-compare {
  background: var(--color-brand);
  color: var(--color-bg-card);
}
.action-edit {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}
.action-delete {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  color: #D94A4A;
}

/* ========== Upsell Banner ========== */
.upsell-banner {
  background: linear-gradient(135deg, var(--color-brand), darken(var(--color-brand), 4%));
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.upsell-banner__text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  flex: 1;
  line-height: 1.4;
}
.upsell-banner__btn {
  flex-shrink: 0;
  background: var(--color-gold);
  color: var(--color-brand);
  font-size: 13px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 8px;
}
.upsell-banner__btn:active {
  transform: scale(0.97);
}

/* ========== Locked Screen ========== */
.locked-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 80px;
  padding-bottom: 40px;
}
.locked-icon-wrap {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--color-bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.locked-icon {
  font-size: 36px;
}
.locked-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 10px;
}
.locked-desc {
  font-size: 14px;
  color: var(--color-text-secondary);
  text-align: center;
  line-height: 1.6;
  max-width: 280px;
  margin-bottom: 28px;
}
.locked-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}
.locked-feature {
  font-size: 15px;
  color: var(--color-text-secondary);
}
.btn-upgrade {
  width: 80%;
  height: 50px;
  background: linear-gradient(135deg, var(--color-brand), darken(var(--color-brand), 4%));
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.btn-upgrade:active {
  transform: scale(0.97);
  opacity: 0.9;
}
.btn-upgrade-text {
  color: var(--color-bg-card);
  font-size: 17px;
  font-weight: 700;
}
.btn-back {
  padding: 10px 20px;
}
.btn-back:active {
  opacity: 0.7;
}
.btn-back-text {
  font-size: 14px;
  color: var(--color-text-secondary);
}
</style>