bdrp-app/src/pages/agent.vue

<script setup>
import { storeToRefs } from 'pinia'
import { computed, ref } from 'vue'
definePage({ layout: 'home' })

const agentStore = useAgentStore()
const { isAgent } = storeToRefs(agentStore)
const data = ref(null)

const dateRangeMap = {
  today: 'today',
  week: 'last7d',
  month: 'last30d',
}

const dateTextMap = {
  today: '今日',
  week: '近7天',
  month: '近1月',
}

const promoteDateOptions = [
  { label: '今日', value: 'today' },
  { label: '近7天', value: 'week' },
  { label: '近1月', value: 'month' },
]
const selectedPromoteDate = ref('today')

const teamDateOptions = [
  { label: '今日', value: 'today' },
  { label: '近7天', value: 'week' },
  { label: '近1月', value: 'month' },
]
const selectedTeamDate = ref('today')

const currentPromoteData = computed(() => {
  const range = dateRangeMap[selectedPromoteDate.value]
  return data.value?.direct_push?.[range] || { commission: 0, report: 0 }
})

const currentTeamData = computed(() => {
  const range = dateRangeMap[selectedTeamDate.value]
  return data.value?.active_reward?.[range] || {
    sub_promote_reward: 0,
    sub_upgrade_reward: 0,
    sub_withdraw_reward: 0,
  }
})

const promoteTimeText = computed(() => dateTextMap[selectedPromoteDate.value] || '今日')
const teamTimeText = computed(() => dateTextMap[selectedTeamDate.value] || '今日')

async function getData() {
  try {
    const { data: res, error } = await useApiFetch('/agent/revenue', { silent: true }).get().json()
    if (res.value?.code === 200 && !error.value) {
      data.value = res.value.data
    }
  }
  catch {
    uni.showToast({ title: '网络错误', icon: 'none' })
  }
}

onShow(() => {
  if (isAgent.value) {
    getData()
  }
})

function goToPromoteDetail() {
  uni.navigateTo({ url: '/pages/agent-promote-details' })
}

function goToRewardsDetail() {
  uni.navigateTo({ url: '/pages/agent-rewards-details' })
}

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

function toWithdrawDetails() {
  uni.navigateTo({ url: '/pages/withdraw-details' })
}

function toSubordinateList() {
  uni.navigateTo({ url: '/pages/subordinate-list' })
}
</script>

<template>
  <view class="safe-area-top min-h-screen p-4">
    <view class="mb-4 rounded-xl from-blue-50/70 to-blue-100/50 bg-gradient-to-r p-6 shadow-lg">
      <view class="mb-3 flex items-center justify-between">
        <text class="text-lg text-gray-800 font-bold">
          余额
        </text>
        <text class="text-3xl text-blue-600 font-bold">
          ¥ {{ (data?.balance || 0).toFixed(2) }}
        </text>
      </view>
      <view class="mb-2 text-sm text-gray-500">
        累计收益：¥ {{ (data?.total_earnings || 0).toFixed(2) }}
      </view>
      <view class="mb-1 text-sm text-gray-500">
        待结账金额：¥ {{ (data?.frozen_balance || 0).toFixed(2) }}
      </view>
      <view class="mb-6 text-xs text-gray-400">
        待结账金额将在订单创建24小时后自动结账
      </view>
      <view class="grid grid-cols-2 gap-3">
        <wd-button type="primary" block @click="toWithdraw">
          提现
        </wd-button>
        <wd-button plain block @click="toWithdrawDetails">
          提现记录
        </wd-button>
      </view>
    </view>

    <view class="mb-4 rounded-xl from-blue-50/40 to-cyan-50/50 bg-gradient-to-r p-6 shadow-lg">
      <view class="mb-4 flex items-center justify-between">
        <text class="text-lg text-gray-800 font-bold">
          直推报告收益
        </text>
        <view class="text-right">
          <text class="text-2xl text-blue-600 font-bold">
            ¥ {{ (data?.direct_push?.total_commission || 0).toFixed(2) }}
          </text>
          <view class="mt-1 text-sm text-gray-500">
            有效报告 {{ data?.direct_push?.total_report || 0 }} 份
          </view>
        </view>
      </view>

      <view class="grid grid-cols-3 mb-6 gap-2">
        <view
          v-for="item in promoteDateOptions"
          :key="item.value"
          class="rounded-full px-4 py-1 text-center text-sm transition-all"
          :class="selectedPromoteDate === item.value ? 'bg-blue-500 text-white shadow-md' : 'border border-gray-200/50 bg-white/90 text-gray-600'"
          @click="selectedPromoteDate = item.value"
        >
          {{ item.label }}
        </view>
      </view>

      <view class="grid grid-cols-2 mb-6 gap-4">
        <view class="rounded-lg bg-blue-50/60 p-3 backdrop-blur-sm">
          <view class="text-sm text-gray-500">
            {{ promoteTimeText }}收益
          </view>
          <text class="mt-1 text-xl text-blue-600 font-bold">
            ¥ {{ currentPromoteData.commission?.toFixed(2) || '0.00' }}
          </text>
        </view>
        <view class="rounded-lg bg-blue-50/60 p-3 backdrop-blur-sm">
          <view class="text-sm text-gray-500">
            有效报告
          </view>
          <text class="mt-1 text-xl text-blue-600 font-bold">
            {{ currentPromoteData.report || 0 }} 份
          </text>
        </view>
      </view>

      <view class="flex items-center justify-between text-sm text-blue-500 font-semibold" @click="goToPromoteDetail">
        <text>查看收益明细</text>
        <text class="text-lg">
          →
        </text>
      </view>
    </view>

    <view class="rounded-xl from-green-50/40 to-cyan-50/30 bg-gradient-to-r p-6 shadow-lg">
      <view class="mb-4">
        <text class="text-lg text-gray-800 font-bold">
          团队奖励
        </text>
      </view>

      <view class="grid grid-cols-3 mb-6 gap-2">
        <view
          v-for="item in teamDateOptions"
          :key="item.value"
          class="rounded-full px-4 py-1 text-center text-sm transition-all"
          :class="selectedTeamDate === item.value ? 'bg-green-500 text-white shadow-md' : 'border border-gray-200/50 bg-white/90 text-gray-600'"
          @click="selectedTeamDate = item.value"
        >
          {{ item.label }}
        </view>
      </view>

      <view class="grid grid-cols-1 mb-6 gap-2">
        <view class="rounded-lg bg-green-50/60 p-3 backdrop-blur-sm">
          <view class="text-sm text-gray-500">
            {{ teamTimeText }}下级推广奖励
          </view>
          <text class="mt-1 text-xl text-green-600 font-bold">
            ¥ {{ (currentTeamData.sub_promote_reward || 0).toFixed(2) }}
          </text>
        </view>
        <view class="rounded-lg bg-green-50/60 p-3 backdrop-blur-sm">
          <view class="text-sm text-gray-500">
            {{ teamTimeText }}下级转化奖励
          </view>
          <text class="mt-1 text-xl text-green-600 font-bold">
            ¥ {{ (currentTeamData.sub_upgrade_reward || 0).toFixed(2) }}
          </text>
        </view>
        <view class="rounded-lg bg-green-50/60 p-3 backdrop-blur-sm">
          <view class="text-sm text-gray-500">
            {{ teamTimeText }}下级提现奖励
          </view>
          <text class="mt-1 text-xl text-green-600 font-bold">
            ¥ {{ (currentTeamData.sub_withdraw_reward || 0).toFixed(2) }}
          </text>
        </view>
      </view>

      <view class="grid grid-cols-1 gap-3 sm:grid-cols-2">
        <wd-button plain block @click="goToRewardsDetail">
          团队奖励明细
        </wd-button>
        <wd-button type="success" block @click="toSubordinateList">
          查看我的下级
        </wd-button>
      </view>
    </view>
  </view>
</template>