num/client/pages/commission/index.vue

<template>
  <view class="page-commission">
    <!-- Loading -->
    <view v-if="loading" class="loading-state">
      <text class="loading-text">加载中...</text>
    </view>

    <template v-else>
    <!-- Error / permission gate (US-6.5 §2-3) -->
    <view v-if="error" class="error-state">
      <text class="error-icon">🔒</text>
      <text class="error-text">{{ error }}</text>
    </view>

    <template v-else>
    <!-- ===== 我的收益 ===== -->
    <view class="section earnings-section">
      <view class="section-header">
        <text class="section-title">💰 我的收益</text>
      </view>
      <view class="earnings-grid">
        <view class="earn-item">
          <text class="earn-label">累计收益</text>
          <text class="earn-value accent">¥{{ formatMoney(stats.totalEarnings) }}</text>
        </view>
        <view class="earn-item">
          <text class="earn-label">可提现余额</text>
          <text class="earn-value">¥{{ formatMoney(stats.availableBalance) }}</text>
        </view>
        <view class="earn-item">
          <text class="earn-label">本月收益</text>
          <text class="earn-value">¥{{ formatMoney(stats.monthEarnings) }}</text>
        </view>
        <view class="earn-item">
          <text class="earn-label">今日预估</text>
          <text class="earn-value">¥{{ formatMoney(stats.todayEstimate) }}</text>
        </view>
      </view>
      <!-- L1/L2 commission breakdown -->
      <view class="earnings-breakdown" v-if="l1Total > 0 || l2Total > 0">
        <view class="breakdown-row">
          <text class="breakdown-label">一级推广佣金</text>
          <text class="breakdown-value">¥{{ formatMoney(l1Total) }}</text>
        </view>
        <view class="breakdown-row">
          <text class="breakdown-label">二级推广佣金</text>
          <text class="breakdown-value">¥{{ formatMoney(l2Total) }}</text>
        </view>
      </view>
      <!-- Withdraw notice -->
      <view class="withdraw-notice">
        <text class="withdraw-notice-text">💳 提现功能即将开放，敬请期待</text>
      </view>
    </view>

    <!-- ===== 我的团队 ===== -->
    <view class="section team-section">
      <view class="section-header">
        <text class="section-title">👥 我的团队</text>
        <text v-if="team.length > 0" class="section-sub" @click="goTeamList">查看全部 →</text>
      </view>
      <view class="team-grid">
        <view class="team-stat">
          <text class="stat-num">{{ stats.directInvites }}</text>
          <text class="stat-label">直接下级</text>
        </view>
        <view class="team-stat">
          <text class="stat-num">{{ stats.indirectInvites }}</text>
          <text class="stat-label">间接下级</text>
        </view>
        <view class="team-stat">
          <text class="stat-num">{{ stats.convertedCount }}</text>
          <text class="stat-label">下级升级</text>
        </view>
        <view class="team-stat">
          <text class="stat-num">{{ stats.totalCommissions }}</text>
          <text class="stat-label">佣金笔数</text>
        </view>
      </view>

      <!-- Recent team members preview -->
      <view v-if="team.length > 0" class="team-preview">
        <view v-for="(m, idx) in team.slice(0, 5)" :key="idx" class="member-row">
          <image class="member-avatar" :src="m.avatarUrl || '/static/default-avatar.png'" mode="aspectFill" />
          <view class="member-info">
            <text class="member-name">{{ m.nickname || '微信用户' }}</text>
            <text class="member-date">{{ formatDate(m.createdAt) }} 加入</text>
          </view>
          <text v-if="m.isVip" class="member-vip">VIP</text>
        </view>
      </view>
      <view v-else class="empty-state">
        <text class="empty-text">暂无推广成员，快去分享推广码吧</text>
      </view>
    </view>

    <!-- ===== 推广工具 ===== -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">📤 推广工具</text>
      </view>
      <view class="tool-card" @click="showQrActions">
        <view class="tool-left">
          <text class="tool-icon">▣</text>
          <view>
            <text class="tool-name">我的推广二维码</text>
            <text class="tool-desc">点击保存/分享</text>
          </view>
        </view>
        <view class="tool-right">
          <text class="ref-code-tag">{{ userStore.referralCode }}</text>
          <text class="tool-arrow">›</text>
        </view>
      </view>
      <view class="tool-card" @click="copyReferral">
        <view class="tool-left">
          <text class="tool-icon">📋</text>
          <view>
            <text class="tool-name">复制推广码</text>
            <text class="tool-desc">{{ userStore.referralCode || '加载中' }}</text>
          </view>
        </view>
        <text class="tool-arrow">›</text>
      </view>
      <view class="tool-card" @click="copyPromoLink">
        <view class="tool-left">
          <text class="tool-icon">🔗</text>
          <view>
            <text class="tool-name">复制推广链接</text>
            <text class="tool-desc">分享链接，对方点击自动绑定</text>
          </view>
        </view>
        <text class="tool-arrow">›</text>
      </view>
    </view>

    <!-- ===== 佣金明细 ===== -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">📋 佣金明细</text>
      </view>
      <view v-if="commissions.length === 0" class="empty-state">
        <text class="empty-text">暂无佣金记录</text>
      </view>
      <view v-for="(c, idx) in commissions" :key="idx" class="commission-row">
        <view class="comm-left">
          <text class="comm-amount">+¥{{ (c.amount / 100).toFixed(2) }}</text>
          <text class="comm-level">{{ c.level === 1 ? '一级推广' : '二级推广' }}</text>
          <text v-if="c.remark" class="comm-remark">{{ c.remark }}</text>
        </view>
        <view class="comm-right">
          <text class="comm-status" :class="'status-' + c.status">
            {{ statusText(c.status) }}
          </text>
          <text class="comm-date">{{ formatDate(c.createdAt) }}</text>
        </view>
      </view>
    </view>

    <!-- QR code modal (hidden by default, shown via action sheet) -->
    </template>
    </template>
  </view>
</template>

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

const userStore = useUserStore()
const commissions = ref([])
const team = ref([])
const loading = ref(true)
const error = ref('')
const stats = ref({
  totalEarnings: 0,
  availableBalance: 0,
  todayEstimate: 0,
  monthEarnings: 0,
  directInvites: 0,
  indirectInvites: 0,
  convertedCount: 0,
  totalCommissions: 0
})

// L1/L2 commission breakdown from commissions list
const l1Total = computed(() => {
  return commissions.value
    .filter(c => c.level === 1 && c.status === 'settled')
    .reduce((sum, c) => sum + (c.amount || 0), 0)
})
const l2Total = computed(() => {
  return commissions.value
    .filter(c => c.level === 2 && c.status === 'settled')
    .reduce((sum, c) => sum + (c.amount || 0), 0)
})

// US-6.5 §2-3: Only paid users can access
onMounted(async () => {
  if (!userStore.isVipActive) {
    loading.value = false
    error.value = '开通会员后可查看推广收益'
    return
  }
  await fetchData()
})

async function fetchData() {
  error.value = ''
  loading.value = true
  try {
    const [listData, teamData, statsData] = await Promise.all([
      commissionApi.list(),
      commissionApi.team(),
      commissionApi.stats()
    ])
    commissions.value = listData || []
    team.value = teamData || []
    if (statsData) {
      stats.value = statsData
    }
  } catch (e) {
    error.value = '网络错误，请下拉刷新重试'
  } finally {
    loading.value = false
  }
}

// Pull-to-refresh (US-6.5 §24)
onPullDownRefresh(async () => {
  if (!userStore.isVipActive) return
  await fetchData()
  uni.stopPullDownRefresh()
})

function formatMoney(cents) {
  if (cents == null) return '0.00'
  return (cents / 100).toFixed(2)
}

function showTeamDetail() {
  uni.showModal({
    title: '推广团队',
    content: `直接下级 ${stats.value.directInvites} 人\n间接下级 ${stats.value.indirectInvites} 人\n已升级为VIP ${stats.value.convertedCount} 人`,
    showCancel: false
  })
}

function goWithdraw() {
  uni.navigateTo({ url: '/pages/withdraw/index' })
}

function goTeamList() {
  uni.showActionSheet({
    itemList: ['查看全部成员', '收起'],
    success: (res) => {
      if (res.tapIndex === 0) {
        // Scroll to team section by showing a modal with full list
        if (team.value.length > 10) {
          uni.showModal({
            title: '推广团队',
            content: `直接下级 ${stats.value.directInvites} 人\n间接下级 ${stats.value.indirectInvites} 人\n已升级VIP ${stats.value.convertedCount} 人\n\n共 ${team.value.length} 名成员`,
            showCancel: false
          })
        }
      }
    }
  })
}

function copyPromoLink() {
  if (!userStore.referralCode) return
  const link = `pages/index/index?ref=${userStore.referralCode}`
  uni.setClipboardData({
    data: link,
    success: () => uni.showToast({ title: '已复制推广链接', icon: 'success' })
  })
}

function showQrActions() {
  if (!userStore.referralCode) return
  uni.showActionSheet({
    itemList: ['复制推广码', '保存二维码到相册'],
    success: (res) => {
      if (res.tapIndex === 0) {
        copyReferral()
      } else if (res.tapIndex === 1) {
        saveQrToAlbum()
      }
    }
  })
}

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

function saveQrToAlbum() {
  const url = `https://api.qrserver.com/v1/create-qr-code/?size=560x560&data=${userStore.referralCode}`
  uni.showLoading({ title: '保存中...' })
  uni.downloadFile({
    url,
    success: (res) => {
      if (res.statusCode === 200) {
        uni.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success: () => {
            uni.hideLoading()
            uni.showToast({ title: '已保存到相册', icon: 'success' })
          },
          fail: () => {
            uni.hideLoading()
            uni.showToast({ title: '保存失败，请检查相册权限', icon: 'none' })
          }
        })
      } else {
        uni.hideLoading()
        uni.showToast({ title: '二维码生成失败', icon: 'none' })
      }
    },
    fail: () => {
      uni.hideLoading()
      uni.showToast({ title: '网络错误', icon: 'none' })
    }
  })
}

function statusText(status) {
  const map = { settled: '已结算', pending: '处理中', withdrawn: '已提现', available: '可提现' }
  return map[status] || status
}

function formatDate(dateStr) {
  if (!dateStr) return ''
  const d = new Date(dateStr)
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
}
</script>

<style scoped lang="scss">

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

/* Error / permission gate */
.error-state {
  padding: 80px 20px;
  text-align: center;
}
.error-icon {
  font-size: 40px;
  display: block;
  margin-bottom: 12px;
}
.error-text {
  font-size: 14px;
  color: var(--color-text-secondary);
}

/* Loading */
.loading-state {
  padding: 60px 0;
  text-align: center;
}
.loading-text {
  font-size: 14px;
  color: var(--color-text-secondary);
}

/* Section */
.section {
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 16px;
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.section-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-primary);
}
.section-sub {
  font-size: 12px;
  color: #3B82F6;
  font-weight: 500;
}

/* ===== Earnings ===== */
.earnings-section {
  background: linear-gradient(135deg, var(--color-brand), #2D4A7A);
}
.earnings-section .section-title {
  color: rgba(255,255,255,0.9);
}
.earnings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.earn-item {
  text-align: center;
  padding: 8px 0;
}
.earn-label {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  display: block;
  margin-bottom: 4px;
}
.earn-value {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  display: block;
}
.earn-value.accent {
  color: var(--color-gold);
}
.withdraw-bar {
  margin-top: 14px;
  padding: 10px 0;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(251,191,36,0.15);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.withdraw-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-gold);
}
.withdraw-arrow {
  font-size: 16px;
  color: var(--color-gold);
}

/* ===== Earnings Breakdown ===== */
.earnings-breakdown {
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
}
.breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}
.breakdown-label {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}
.breakdown-value {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.75);
}

/* ===== Withdraw Notice ===== */
.withdraw-notice {
  margin-top: 14px;
  padding: 10px 0;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.withdraw-notice-text {
  font-size: 13px;
  color: rgba(255,255,255,0.4);
}

/* ===== Team ===== */
.team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.team-stat {
  text-align: center;
  padding: 8px 0;
}
.stat-num {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-brand);
  display: block;
}
.stat-label {
  font-size: 11px;
  color: var(--color-text-secondary);
  margin-top: 2px;
  display: block;
}

.team-preview {
  border-top: 1px solid var(--color-bg-input);
  padding-top: 10px;
}
.member-row {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-bg);
}
.member-row:last-child { border-bottom: none; }
.member-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 10px;
  flex-shrink: 0;
}
.member-info { flex: 1; }
.member-name {
  font-size: 13px;
  color: var(--color-text-primary);
  display: block;
}
.member-date {
  font-size: 11px;
  color: var(--color-text-secondary);
  margin-top: 1px;
  display: block;
}
.member-vip {
  font-size: 10px;
  color: var(--color-gold);
  background: #FEF3C7;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
}

/* ===== Tools ===== */
.tool-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-bg-input);
}
.tool-card:last-child { border-bottom: none; }
.tool-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}
.tool-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--color-brand);
  flex-shrink: 0;
}
.tool-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  display: block;
}
.tool-desc {
  font-size: 11px;
  color: var(--color-text-secondary);
  margin-top: 2px;
  display: block;
}
.tool-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ref-code-tag {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-gold);
  background: #FEF3C7;
  padding: 2px 10px;
  border-radius: 4px;
  letter-spacing: 1px;
}
.tool-arrow {
  font-size: 18px;
  color: #CBD5E0;
}

/* ===== Commission List ===== */
.commission-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-bg-input);
}
.commission-row:last-child { border-bottom: none; }
.comm-left { flex: 1; }
.comm-amount {
  font-size: 15px;
  font-weight: 600;
  color: #2D8B67;
  display: block;
}
.comm-level {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 2px;
  display: block;
}
.comm-remark {
  font-size: 11px;
  color: #8B9DAB;
  margin-top: 1px;
  display: block;
}
.comm-right { text-align: right; }
.comm-status {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 2px;
}
.comm-status.status-settled { background: #ECFDF5; color: #2D8B67; }
.comm-status.status-pending { background: #FEF3C7; color: #D4A017; }
.comm-status.status-withdrawn { background: var(--color-bg-input); color: var(--color-text-secondary); }
.comm-status.status-available { background: #EFF6FF; color: #3B82F6; }
.comm-date {
  font-size: 11px;
  color: var(--color-text-secondary);
  display: block;
}

/* Empty State */
.empty-state {
  padding: 24px 0;
  text-align: center;
}
.empty-text {
  font-size: 13px;
  color: var(--color-text-secondary);
}
</style>