bdrp-app/src/pages/subordinate-detail.vue

<script setup>
import { onMounted, ref } from 'vue'
import { onReachBottom } from '@dcloudio/uni-app'
import { useRoute } from '@/composables/uni-router'
import useApiFetch from '@/composables/useApiFetch'

definePage({ layout: 'default', auth: true })

const route = useRoute()
const loading = ref(false)
const page = ref(1)
const pageSize = 8
const total = ref(0)
const rewardDetails = ref([])
const userInfo = ref({})
const summary = ref({})
const statistics = ref([])
const subordinateId = ref(0)
const hasMore = ref(true)
const loadMoreState = ref('loading')

function normalizeAgentLevel(value) {
  const raw = String(value || '').trim()
  if (!raw)
    return 'NORMAL'
  const cleaned = raw.replace(/代理$/, '')
  if (cleaned === '普通')
    return 'NORMAL'
  const upper = cleaned.toUpperCase()
  if (upper.includes('SVIP'))
    return 'SVIP'
  if (upper.includes('VIP'))
    return 'VIP'
  if (upper === 'NORMAL' || upper === 'NORNAL')
    return 'NORMAL'
  return 'NORMAL'
}

function getAgentLevelLabel(value) {
  return {
    NORMAL: '普通代理',
    VIP: 'VIP代理',
    SVIP: 'SVIP代理',
  }[normalizeAgentLevel(value)] || '普通代理'
}

// 获取收益列表
function appendList(oldList, newList) {
  return oldList.concat(newList)
}

async function fetchRewardDetails(reset = false) {
  if (loading.value)
    return
  if (!subordinateId.value)
    return
  if (!reset && !hasMore.value)
    return

  loading.value = true
  if (reset) {
    page.value = 1
    hasMore.value = true
    loadMoreState.value = 'loading'
    rewardDetails.value = []
  }
  const { data, error } = await useApiFetch(
    `/agent/subordinate/contribution/detail?subordinate_id=${subordinateId.value}&page=${page.value}&page_size=${pageSize}`,
    { silent: true },
  )
    .get()
    .json()

  if (data.value && !error.value) {
    if (data.value.code === 200) {
      if (page.value === 1) {
        // 更新用户信息
        userInfo.value = {
          createTime: data.value.data.create_time,
          level: data.value.data.level_name || data.value.data.level || '',
          mobile: data.value.data.mobile,
        }
        // 更新汇总数据
        summary.value = {
          totalReward: data.value.data.total_earnings,
          totalContribution: data.value.data.total_contribution,
          totalOrders: data.value.data.total_orders,
        }
        // 设置默认的统计类型
        statistics.value = [
          {
            type: 'descendant_promotion',
            amount: 0,
            count: 0,
            description: '推广奖励',
          },
          {
            type: 'cost',
            amount: 0,
            count: 0,
            description: '成本贡献',
          },
          {
            type: 'pricing',
            amount: 0,
            count: 0,
            description: '定价贡献',
          },
          {
            type: 'descendant_withdraw',
            amount: 0,
            count: 0,
            description: '提现收益',
          },
          {
            type: 'descendant_upgrade_vip',
            amount: 0,
            count: 0,
            description: '转化VIP奖励',
          },
          {
            type: 'descendant_upgrade_svip',
            amount: 0,
            count: 0,
            description: '转化SVIP奖励',
          },
        ]
        // 如果有统计数据，更新对应的值
        if (data.value.data.stats) {
          const stats = data.value.data.stats
          // 更新推广奖励
          const platformStat = statistics.value.find(s => s.type === 'descendant_promotion')
          if (platformStat) {
            platformStat.amount = stats.descendant_promotion_amount || 0
            platformStat.count = stats.descendant_promotion_count || 0
          }
          // 更新成本贡献
          const costStat = statistics.value.find(s => s.type === 'cost')
          if (costStat) {
            costStat.amount = stats.cost_amount || 0
            costStat.count = stats.cost_count || 0
          }
          // 更新定价贡献
          const pricingStat = statistics.value.find(s => s.type === 'pricing')
          if (pricingStat) {
            pricingStat.amount = stats.pricing_amount || 0
            pricingStat.count = stats.pricing_count || 0
          }
          // 更新提现收益
          const withdrawStat = statistics.value.find(s => s.type === 'descendant_withdraw')
          if (withdrawStat) {
            withdrawStat.amount = stats.descendant_withdraw_amount || 0
            withdrawStat.count = stats.descendant_withdraw_count || 0
          }
          // 更新转化VIP奖励
          const conversionVipStat = statistics.value.find(s => s.type === 'descendant_upgrade_vip')
          if (conversionVipStat) {
            conversionVipStat.amount = stats.descendant_upgrade_vip_amount || 0
            conversionVipStat.count = stats.descendant_upgrade_vip_count || 0
          }
          // 更新转化SVIP奖励
          const conversionSvipStat = statistics.value.find(s => s.type === 'descendant_upgrade_svip')
          if (conversionSvipStat) {
            conversionSvipStat.amount = stats.descendant_upgrade_svip_amount || 0
            conversionSvipStat.count = stats.descendant_upgrade_svip_count || 0
          }
        }
      }
      total.value = data.value.data.total || 0
      // 处理列表数据
      const list = data.value.data.list || []
      rewardDetails.value = reset ? list : appendList(rewardDetails.value, list)
      const isLastPage = list.length < pageSize || rewardDetails.value.length >= total.value
      hasMore.value = !isLastPage
      loadMoreState.value = isLastPage ? 'finished' : 'loading'
      if (!isLastPage)
        page.value += 1
    }
    else {
      loadMoreState.value = 'error'
    }
  }
  else {
    loadMoreState.value = 'error'
  }
  loading.value = false
}

function resolveSubordinateId(query) {
  const rawId = query?.id
    ?? query?.subordinate_id
    ?? route.params?.id
    ?? route.query?.id
    ?? route.params?.subordinate_id
    ?? route.query?.subordinate_id
  const parsedId = Number.parseInt(String(rawId ?? ''), 10)
  return Number.isFinite(parsedId) && parsedId > 0 ? parsedId : 0
}

onLoad((query) => {
  const parsedId = resolveSubordinateId(query)
  subordinateId.value = parsedId
})

onMounted(() => {
  const parsedId = subordinateId.value || resolveSubordinateId()
  if (!Number.isFinite(parsedId) || parsedId <= 0) {
    uni.showToast({ title: '下级参数错误', icon: 'none' })
    setTimeout(() => {
      uni.navigateBack()
    }, 800)
    return
  }
  subordinateId.value = parsedId
  fetchRewardDetails(true)
})

onReachBottom(() => {
  fetchRewardDetails()
})

// 获取收益类型样式
function getRewardTypeClass(type) {
  const typeMap = {
    descendant_promotion: 'bg-blue-100 text-blue-600',
    cost: 'bg-green-100 text-green-600',
    pricing: 'bg-purple-100 text-purple-600',
    descendant_withdraw: 'bg-yellow-100 text-yellow-600',
    descendant_upgrade_vip: 'bg-red-100 text-red-600',
    descendant_upgrade_svip: 'bg-orange-100 text-orange-600',
  }
  return typeMap[type] || 'bg-gray-100 text-gray-600'
}

// 获取收益类型图标
function getRewardTypeIcon(type) {
  const iconMap = {
    descendant_promotion: '/static/images/tgjl.svg',
    cost: '/static/images/cbgx.svg',
    pricing: '/static/images/djgx.svg',
    descendant_withdraw: '/static/images/txsy.svg',
    descendant_upgrade_vip: '/static/images/zhvipjl.svg',
    descendant_upgrade_svip: '/static/images/zhsvipjl.svg',
  }
  return iconMap[type] || '/static/images/tgjl.svg'
}

// 获取收益类型描述
function getRewardTypeDescription(type) {
  const descriptionMap = {
    descendant_promotion: '推广奖励',
    cost: '成本贡献',
    pricing: '定价贡献',
    descendant_withdraw: '提现收益',
    descendant_upgrade_vip: '转化VIP奖励',
    descendant_upgrade_svip: '转化SVIP奖励',
  }
  return descriptionMap[type] || '未知类型'
}

// 格式化时间
function formatTime(timeStr) {
  if (!timeStr)
    return '-'
  const date = new Date(timeStr)
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
}

// 格式化金额
function formatNumber(num) {
  if (!num)
    return '0.00'
  return Number(num).toFixed(2)
}
</script>

<template>
  <view class="reward-detail">
    <!-- 用户信息卡片 -->
    <view class="p-4">
      <view class="mb-4 rounded-xl bg-white p-5 shadow-sm">
        <view class="mb-4 flex items-center justify-between">
          <view class="flex items-center space-x-3">
            <view class="text-xl text-gray-800 font-semibold">
              {{ userInfo.mobile }}
            </view>
            <text class="rounded-full bg-blue-100 px-3 py-1 text-sm text-blue-600 font-medium">
              {{ getAgentLevelLabel(userInfo.level) }}
            </text>
          </view>
        </view>
        <view class="mb-4 text-sm text-gray-500">
          成为下级代理时间：{{ formatTime(userInfo.createTime) }}
        </view>
        <view class="grid grid-cols-3 gap-4">
          <view class="text-center">
            <view class="mb-1 text-sm text-gray-500">
              总推广单量
            </view>
            <view class="text-xl text-blue-600 font-semibold">
              {{ summary.totalOrders }}
            </view>
          </view>
          <view class="text-center">
            <view class="mb-1 text-sm text-gray-500">
              总收益
            </view>
            <view class="text-xl text-green-600 font-semibold">
              ¥{{ formatNumber(summary.totalReward) }}
            </view>
          </view>
          <view class="text-center">
            <view class="mb-1 text-sm text-gray-500">
              总贡献
            </view>
            <view class="text-xl text-purple-600 font-semibold">
              ¥{{ formatNumber(summary.totalContribution) }}
            </view>
          </view>
        </view>
      </view>

      <!-- 贡献统计卡片 -->
      <view class="mb-4 rounded-xl bg-white p-4 shadow-sm">
        <view class="mb-3 text-base text-gray-800 font-medium">
          贡献统计
        </view>
        <view class="grid grid-cols-2 gap-3">
          <view v-for="item in statistics" :key="item.type" class="flex items-center rounded-lg p-2"
            :class="getRewardTypeClass(item.type).split(' ')[0]">
            <image :src="getRewardTypeIcon(item.type)" class="mr-2 h-5 w-5 flex-shrink-0" />
            <view class="flex-1">
              <view class="text-sm font-medium" :class="getRewardTypeClass(item.type).split(' ')[1]">
                {{ item.description }}
              </view>
              <view class="mt-1 flex items-center justify-between">
                <view class="text-xs text-gray-500">
                  {{ item.count }} 次
                </view>
                <view class="text-sm font-medium" :class="getRewardTypeClass(item.type).split(' ')[1]">
                  ¥{{ formatNumber(item.amount) }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="mb-4 rounded-xl bg-white p-4 shadow-sm">
        <!-- 贡献记录列表 -->
        <view class="text-base text-gray-800 font-medium mb-3">
          贡献记录
        </view>
        <view class="detail-scroll">
          <EmptyState v-if="!loading && rewardDetails.length === 0" text="暂无贡献记录" />
          <view v-for="(item, index) in rewardDetails" v-else :key="index" class="reward-item">
            <view class="mb-3 border-b border-gray-200 pb-3">
              <view class="flex items-center justify-between">
                <view class="flex items-center space-x-3">
                  <image :src="getRewardTypeIcon(item.type)" class="h-4 w-4 flex-shrink-0" />
                  <view>
                    <view class="text-gray-800 font-sm">
                      {{ getRewardTypeDescription(item.type) }}
                    </view>
                    <view class="text-xs text-gray-500">
                      {{ formatTime(item.create_time) }}
                    </view>
                  </view>
                </view>
                <view class="text-right">
                  <view class="text-base font-semibold" :class="getRewardTypeClass(item.type).split(' ')[1]">
                    ¥{{ formatNumber(item.amount) }}
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view v-if="loading" class="py-3 text-center text-sm text-gray-400">
            加载中...
          </view>
        </view>
        <wd-loadmore v-if="rewardDetails.length > 0" :state="loadMoreState" @reload="fetchRewardDetails" />
      </view>
    </view>
  </view>
</template>

<style scoped>
.reward-detail {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.reward-item {
  transition: transform 0.2s;
}

.reward-item:active {
  transform: scale(0.98);
}

.detail-scroll {
  min-height: 50vh;
}
</style>