num/client/pages/relations/index.vue

<template>
  <view class="page-relations" :class="themeClass">
    <!-- ========== 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="header-actions">
          <view class="btn-add" @click="goAddRelation">
            <text class="btn-add-text">+ 添加</text>
          </view>
        </view>
      </view>

      <!-- ========== Inline Analysis Action ========== -->
      <view class="analysis-action-card">
        <template v-if="selectedIds.length === 0">
          <text class="analysis-action-icon">🔮</text>
          <view class="analysis-action-info">
            <text class="analysis-action-title">关系能量分析</text>
            <text class="analysis-action-desc">点击下方关系人卡片即可选择</text>
          </view>
        </template>
        <template v-else>
          <view class="analysis-action-selected">
            <text class="analysis-action-title">已选 {{ totalCount }} 人</text>
            <view class="analysis-action-input-wrap">
              <textarea
                v-model="question"
                class="analysis-action-input"
                placeholder="输入你想咨询的问题..."
                maxlength="500"
                :auto-height="true"
              />
            </view>
            <text class="analysis-action-count">{{ question.length }}/500</text>
          </view>
          <view
            class="analysis-action-submit"
            :class="{ disabled: totalCount < 2 || submitting }"
            @click="handleStartAnalysis"
          >
            <text class="analysis-action-submit-text">
              {{ submitting ? '分析中...' : totalCount < 2 ? '请至少选择2人' : '开始分析' }}
            </text>
          </view>
        </template>
      </view>

      <!-- ========== Analysis Records Section ========== -->
      <view class="section-header">
        <text class="section-header-title">分析记录</text>
        <text class="section-header-link" @click="goAllRecords">查看全部 ›</text>
      </view>

      <view v-if="recordsLoading" class="loading-hint">加载中...</view>
      <view v-else-if="recentRecords.length === 0" class="empty-records-hint">
        <text>暂无分析记录，开始你的第一次关系分析</text>
      </view>
      <view v-else class="records-preview">
        <view
          v-for="item in recentRecords"
          :key="item.id"
          class="record-preview-card"
          @click="goChat(item.id)"
        >
          <text class="record-preview-title">{{ item.title || '关系分析' }}</text>
          <text class="record-preview-time">{{ formatTime(item.createTime) }}</text>
        </view>
      </view>

      <!-- ========== Self Card ========== -->
      <view class="section-header">
        <text class="section-header-title">选择分析对象</text>
      </view>

      <view class="relation-card self-card" :class="{ selected: includeSelf }" @click="toggleSelf">
        <view class="card-header">
          <view class="type-tag">
            <text class="type-tag-text">本人</text>
          </view>
          <view v-if="includeSelf" class="card-checked">
            <text class="card-checked-icon">✓</text>
          </view>
        </view>
        <view class="card-body">
          <text class="card-name">{{ userStore.nickname || '我' }}（本人）</text>
          <text v-if="userStore.birthYear" class="card-birth">{{ userStore.birthYear }}-{{ userStore.birthMonth }}-{{ userStore.birthDay }}</text>
          <text v-else class="card-birth">未设置出生日期</text>
        </view>
      </view>

      <!-- ========== Relations Section ========== -->
      <view class="section-header">
        <text class="section-header-title">我的关系人</text>
        <text class="section-header-count">({{ relations.length }})</text>
      </view>

      <!-- Loading state -->
      <view v-if="loading" class="loading-state">
        <view v-for="i in 2" :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">
        <view
          v-for="item in relations"
          :key="item.id"
          class="relation-card"
          :class="{ selected: selectedIds.includes(item.id) }"
          @click="toggleSelect(item.id)"
        >
          <view class="card-header">
            <view class="type-tag">
              <text class="type-tag-text">{{ relationTypeLabel(item.relationType) }}</text>
            </view>
            <view v-if="selectedIds.includes(item.id)" class="card-checked">
              <text class="card-checked-icon">✓</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-edit" @click.stop="goEdit(item.id)">编辑</view>
            <view class="action-btn action-delete" @click.stop="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'
import { useTheme } from '@/composables/useThemeStyle'

const { themeClass } = useTheme()

const userStore = useUserStore()
const relations = ref([])
const loading = ref(false)
const recentRecords = ref([])
const recordsLoading = ref(false)
const selectedIds = ref([])
const includeSelf = ref(true)
const question = ref('')
const submitting = ref(false)

const totalCount = computed(() => selectedIds.value.length + (includeSelf.value ? 1 : 0))

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()
    fetchRecentRecords()
  }
})

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

async function fetchRecentRecords() {
  recordsLoading.value = true
  try {
    const list = await requestInstance.post('/relation/analysis/list', {})
    recentRecords.value = (list || []).slice(0, 3)
  } catch (e) {
    recentRecords.value = []
  } finally {
    recordsLoading.value = false
  }
}

function toggleSelf() {
  includeSelf.value = !includeSelf.value
}

function toggleSelect(id) {
  const idx = selectedIds.value.indexOf(id)
  if (idx > -1) {
    selectedIds.value.splice(idx, 1)
  } else {
    selectedIds.value.push(id)
  }
}

async function handleStartAnalysis() {
  if (totalCount.value < 2) {
    uni.showToast({ title: '请至少选择 2 人', icon: 'none' })
    return
  }
  if (submitting.value) return
  submitting.value = true
  try {
    const autoQuestion = question.value.trim() || '请对这组关系进行能量分析，分析成员之间的能量互动关系'
    const res = await requestInstance.post('/relation/analysis/start', {
      relationIds: selectedIds.value,
      question: autoQuestion
    })
    if (res && res.id) {
      selectedIds.value = []
      question.value = ''
      uni.navigateTo({
        url: '/pages/relations/analysis-chat?recordId=' + res.id
      })
    }
  } catch (e) {
    uni.showToast({ title: '启动分析失败', icon: 'none' })
  } finally {
    submitting.value = false
  }
}

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

function goNewAnalysis() {
  // Inline selection on index page — just a hint
  uni.showToast({ title: '请点击下方关系人进行选择', icon: 'none' }
  )
}

function goChat(recordId) {
  uni.navigateTo({ url: '/pages/relations/analysis-chat?recordId=' + recordId })
}

function goAllRecords() {
  uni.navigateTo({ url: '/pages/relations/analysis-records' })
}

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' })
        }
      }
    }
  })
}

function formatTime(time) {
  if (!time) return ''
  const d = new Date(time)
  const month = (d.getMonth() + 1).toString().padStart(2, '0')
  const day = d.getDate().toString().padStart(2, '0')
  return `${month}-${day}`
}
</script>

<style scoped lang="scss">
$brand-color: #1E3A5F;

.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: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
}

/* Section header */
.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  margin-top: 20px;
}
.section-header-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
}
.section-header-count {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-left: 4px;
}
.section-header-link {
  margin-left: auto;
  font-size: 13px;
  color: var(--color-brand);
  font-weight: 500;
}
.section-header-link:active {
  opacity: 0.7;
}

/* ========== Inline Analysis Action ========== */
.analysis-action-card {
  background: linear-gradient(135deg, $brand-color, darken($brand-color, 4%));
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 4px;
}
.analysis-action-card:active {
  transform: scale(0.98);
}
.analysis-action-icon {
  font-size: 28px;
  flex-shrink: 0;
}
.analysis-action-info {
  flex: 1;
  min-width: 0;
  margin-top: 4px;
}
.analysis-action-title {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 3px;
}
.analysis-action-desc {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}
.analysis-action-selected {
  margin-bottom: 12px;
}
.analysis-action-input-wrap {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 10px;
}
.analysis-action-input {
  width: 100%;
  min-height: 60px;
  font-size: 14px;
  color: #FFFFFF;
  line-height: 1.6;
  background: transparent;
}
.analysis-action-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
}
.analysis-action-count {
  display: block;
  text-align: right;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 4px;
  padding-right: 2px;
}
.analysis-action-submit {
  height: 44px;
  background: var(--color-gold);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.analysis-action-submit:active {
  transform: scale(0.97);
  opacity: 0.9;
}
.analysis-action-submit.disabled {
  opacity: 0.5;
  pointer-events: none;
}
.analysis-action-submit-text {
  color: var(--color-brand);
  font-size: 16px;
  font-weight: 700;
}

/* Records preview */
.loading-hint, .empty-records-hint {
  text-align: center;
  padding: 16px 0;
  font-size: 13px;
  color: var(--color-text-secondary);
}
.records-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.record-preview-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-bg-card);
  border-radius: 12px;
  padding: 12px 14px;
}
.record-preview-card:active {
  transform: scale(0.98);
}
.record-preview-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  flex: 1;
  margin-right: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.record-preview-time {
  font-size: 12px;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

/* 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: #FFFFFF;
  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);
  border: 2px solid transparent;
  transition: border-color 0.2s;
}
.relation-card:active {
  transform: scale(0.98);
}
.relation-card.selected {
  border-color: var(--color-gold);
  background: linear-gradient(135deg, var(--color-bg-card), rgba(201, 168, 76, 0.06));
}
.card-header {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.type-tag {
  display: inline-flex;
  align-items: center;
  background: var(--color-bg-tag);
  border-radius: 6px;
  padding: 3px 10px;
}
.type-tag-text {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-brand);
}
.card-checked {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.card-checked-icon {
  font-size: 13px;
  color: #FFFFFF;
  font-weight: 700;
}
.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-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;
}

/* Self card */
.self-card {
  margin-bottom: 8px;
  cursor: pointer;
}

/* ========== Upsell Banner ========== */
.upsell-banner {
  background: linear-gradient(135deg, $brand-color, darken($brand-color, 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, $brand-color, darken($brand-color, 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: #FFFFFF;
  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>