bdrp-webview/src/views/Agent.vue

<template>
    <div class="p-4 bg-gradient-to-b from-gray-50/50 to-gray-100/30 min-h-screen">
        <!-- 资产卡片 -->
        <div class="rounded-xl shadow-lg mb-4 bg-gradient-to-r from-primary-50/70 to-primary-100/50 p-6">
            <div class="flex justify-between items-center mb-3">
                <div class="flex items-center">
                    <van-icon name="balance-pay" class="text-xl mr-2" style="color: var(--van-theme-primary);" />
                    <span class="text-lg font-bold" style="color: var(--van-text-color);">余额</span>
                </div>
                <span class="text-3xl font-bold" style="color: var(--van-theme-primary);">¥ {{ (data?.balance ||
                    0).toFixed(2) }}</span>
            </div>
            <div class="text-sm mb-2" style="color: var(--van-text-color-2);">
                累计收益：¥ {{ (data?.total_earnings || 0).toFixed(2) }}
            </div>
            <div class="text-sm mb-6 flex items-center" style="color: var(--van-text-color-2);">
                待结账金额：¥ {{ (data?.frozen_balance || 0).toFixed(2) }}
                <van-popover v-model:show="showTooltip" placement="bottom-start" :offset="10">
                    <template #reference>
                        <van-icon name="question-o" class="ml-2 cursor-help" @mouseenter="showTooltip = true" @mouseleave="showTooltip = false" />
                    </template>
                    <div class="p-2 text-sm" style="max-width: 200px;">
                        待结账金额将在订单创建24小时后自动结账。
                    </div>
                </van-popover>
            </div>
            <div class="grid grid-cols-2 gap-3">
                <button @click="toWithdraw"
                    class="text-white rounded-full py-2 px-4 shadow-md flex items-center justify-center"
                    style="background: linear-gradient(135deg, var(--van-theme-primary), var(--van-theme-primary-dark));">
                    <van-icon name="gold-coin" class="mr-1" />
                    提现
                </button>
                <button @click="toWithdrawDetails"
                    class="bg-white/90 border rounded-full py-2 px-4 shadow-sm flex items-center justify-center"
                    style="color: var(--van-text-color-2); border-color: var(--van-border-color);">
                    <van-icon name="notes" class="mr-1" />
                    提现记录
                </button>
            </div>
        </div>

        <!-- 直推报告收益 -->
        <div class="rounded-xl shadow-lg mb-4 bg-gradient-to-r from-warning-50/60 to-warning-100/50 p-6">
            <div class="flex justify-between items-center mb-4">
                <div class="flex items-center">
                    <van-icon name="balance-list" class="text-xl mr-2" style="color: var(--color-warning);" />
                    <span class="text-lg font-bold" style="color: var(--van-text-color);">直推报告收益</span>
                </div>
                <div class="text-right">
                    <div class="text-2xl font-bold" style="color: var(--color-warning);">
                        ¥
                        {{
                            (data?.direct_push?.total_commission || 0).toFixed(
                                2
                            )
                        }}
                    </div>
                    <div class="text-sm mt-1" style="color: var(--van-text-color-2);">
                        有效报告 {{ data?.direct_push?.total_report || 0 }} 份
                    </div>
                </div>
            </div>

            <!-- 日期选择 -->
            <div class="grid grid-cols-3 gap-2 mb-6">
                <button v-for="item in promoteDateOptions" :key="item.value" @click="selectedPromoteDate = item.value"
                    class="rounded-full transition-all py-1 px-4 text-sm" :class="[
                        selectedPromoteDate === item.value
                            ? 'text-white shadow-md'
                            : 'bg-white/90 border',
                    ]" :style="selectedPromoteDate === item.value
                        ? 'background-color: var(--color-warning);'
                        : 'color: var(--van-text-color-2); border-color: var(--van-border-color);'">
                    {{ item.label }}
                </button>
            </div>

            <div class="grid grid-cols-2 gap-4 mb-6">
                <div class="p-3 rounded-lg backdrop-blur-sm" style="background-color: rgba(245, 158, 11, 0.08);">
                    <div class="flex items-center text-sm" style="color: var(--van-text-color-2);">
                        <van-icon name="gold-coin" class="mr-1" />本日收益
                    </div>
                    <div class="text-xl font-bold mt-1" style="color: var(--color-warning);">
                        ¥
                        {{
                            currentPromoteData.commission?.toFixed(2) || "0.00"
                        }}
                    </div>
                </div>
                <div class="p-3 rounded-lg backdrop-blur-sm" style="background-color: rgba(245, 158, 11, 0.08);">
                    <div class="flex items-center text-sm" style="color: var(--van-text-color-2);">
                        <van-icon name="description" class="mr-1" />有效报告
                    </div>
                    <div class="text-xl font-bold mt-1" style="color: var(--color-warning);">
                        {{ currentPromoteData.report || 0 }} 份
                    </div>
                </div>
            </div>

            <div class="flex items-center justify-between text-sm font-semibold cursor-pointer pt-4"
                style="color: var(--color-warning);" @click="goToPromoteDetail">
                <span>查看收益明细</span>
                <span class="text-lg">→</span>
            </div>
        </div>

        <!-- 团队奖励明细与下级 -->
        <div class="rounded-xl shadow-lg bg-gradient-to-r from-success-50/50 to-success-100/40 p-6">
            <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
                <button type="button" @click="goToRewardsDetail"
                    class="w-full rounded-full border bg-white/90 py-3 px-4 shadow-sm flex items-center justify-center"
                    style="color: var(--van-text-color-2); border-color: var(--van-border-color);">
                    <van-icon name="records" class="mr-1" />
                    团队奖励明细
                </button>
                <button type="button" @click="toSubordinateList"
                    class="w-full rounded-full py-3 px-4 shadow-md flex items-center justify-center text-white"
                    style="background: linear-gradient(135deg, var(--color-success), var(--color-success-600));">
                    <van-icon name="friends" class="mr-1" />
                    查看我的下级
                </button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { storeToRefs } from "pinia";
import { ref, computed } from "vue";
import { useRouter } from "vue-router";
const agentStore = useAgentStore();
const { isAgent } = storeToRefs(agentStore);
const router = useRouter();
const data = ref(null);
const showTooltip = ref(false);

// 日期选项映射
const dateRangeMap = {
    today: "today",
    week: "last7d",
    month: "last30d",
};

// 直推报告数据
const promoteDateOptions = [
    { label: "今日", value: "today" },
    { label: "近7天", value: "week" },
    { label: "近1月", value: "month" },
];
const selectedPromoteDate = ref("today");

// 计算当前直推数据
const currentPromoteData = computed(() => {
    const range = dateRangeMap[selectedPromoteDate.value];
    return data.value?.direct_push?.[range] || { commission: 0, report: 0 };
});

const getData = async () => {
    const { data: res, error } = await useApiFetch("/agent/revenue")
        .get()
        .json();

    if (res.value?.code === 200 && !error.value) {
        data.value = res.value.data;
    }
};

onMounted(() => {
    if (isAgent.value) {
        getData();
    }
});

// 路由跳转
const goToPromoteDetail = () => router.push({ name: "promoteDetails" });
const goToRewardsDetail = () => router.push({ name: "rewardsDetails" });

const toWithdraw = () => router.push({ name: "withdraw" });

const toWithdrawDetails = () => router.push({ name: "withdrawDetails" });

// 添加跳转到下级列表的方法
const toSubordinateList = () => {
    router.push("/agent/subordinateList");
};
</script>

<style>
/* 添加按钮悬停效果 */
button {
    transition: all 0.2s ease;
}

button:hover {
    transform: translateY(-1px);
}
</style>