ZhangRongHong/bdrp-webview
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
liangzai
2026-04-01 15:35:40 +08:00
commit 562a9b5172
479 changed files with 68351 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

288
src/views/Agent.vue Normal file
View File

@@ -0,0 +1,288 @@
<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="flex justify-between items-center mb-4">
<div class="flex items-center">
<van-icon name="friends" class="text-xl mr-2" style="color: var(--color-success);" />
<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-success);">
¥
{{
(data?.active_reward?.total_reward || 0).toFixed(2)
}}
</div>
<div class="text-sm mt-1" style="color: var(--van-text-color-2);">活跃下级 0 位</div>
</div>
</div>
<!-- 日期选择 -->
<div class="grid grid-cols-3 gap-2 mb-6">
<button v-for="item in activeDateOptions" :key="item.value" @click="selectedActiveDate = item.value"
class="rounded-full transition-all py-1 px-4 text-sm" :class="[
selectedActiveDate === item.value
? 'text-white shadow-md'
: 'bg-white/90 border',
]" :style="selectedActiveDate === item.value
? 'background-color: var(--color-success);'
: 'color: var(--van-text-color-2); border-color: var(--van-border-color);'">
{{ item.label }}
</button>
</div>
<div class="grid grid-cols-2 gap-2 mb-6">
<div class="p-3 rounded-lg backdrop-blur-sm" style="background-color: rgba(16, 185, 129, 0.08);">
<div class="flex items-center text-sm" style="color: var(--van-text-color-2);">
<van-icon name="medal" class="mr-1" />本日奖励
</div>
<div class="text-xl font-bold mt-1" style="color: var(--color-success);">
¥
{{ (currentActiveData.active_reward || 0).toFixed(2) }}
</div>
</div>
<div class="p-3 rounded-lg backdrop-blur-sm" style="background-color: rgba(16, 185, 129, 0.08);">
<div class="flex items-center text-sm" style="color: var(--van-text-color-2);">
<van-icon name="discount" class="mr-1" />下级推广奖励
</div>
<div class="text-xl font-bold mt-1" style="color: var(--color-success);">
¥
{{
(currentActiveData.sub_promote_reward || 0).toFixed(
2
)
}}
</div>
</div>
<div class="p-3 rounded-lg backdrop-blur-sm" style="background-color: rgba(16, 185, 129, 0.08);">
<div class="flex items-center text-sm" style="color: var(--van-text-color-2);">
<van-icon name="fire" class="mr-1" />下级转化奖励
</div>
<div class="text-xl font-bold mt-1" style="color: var(--color-success);">
¥
{{
(
currentActiveData.sub_withdraw_reward || 0
).toFixed(2)
}}
</div>
</div>
</div>
<div class="flex items-center justify-between text-sm font-semibold cursor-pointer pt-4"
style="color: var(--color-success);" @click="goToActiveDetail">
<span>查看奖励明细</span>
<span class="text-lg">→</span>
</div>
<!-- 添加查看下级按钮 -->
<div class="mt-4">
<button @click="toSubordinateList"
class="w-full text-white rounded-full py-2 px-4 shadow-md flex items-center justify-center bg-success"
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 activeDateOptions = [
{ label: "今日", value: "today" },
{ label: "近7天", value: "week" },
{ label: "近1月", value: "month" },
];
const selectedActiveDate = ref("today");
// 计算当前直推数据
const currentPromoteData = computed(() => {
const range = dateRangeMap[selectedPromoteDate.value];
return data.value?.direct_push?.[range] || { commission: 0, report: 0 };
});
// 计算当前活跃数据
const currentActiveData = computed(() => {
const range = dateRangeMap[selectedActiveDate.value];
return (
data.value?.active_reward?.[range] || {
active_reward: 0,
sub_promote_reward: 0,
sub_upgrade_reward: 0,
sub_withdraw_reward: 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 goToActiveDetail = () => 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>