luo/gt-agent-company
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first

Browse Source
This commit is contained in:
sexygoat
2026-03-31 18:41:52 +08:00
commit 3c62cc1cd1
527 changed files with 96725 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

460
src/pages/agent-system/commission-center/index.vue Normal file
View File

@@ -0,0 +1,460 @@
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { getCommissionSummary, getCommissionRecords, getCommissionStats } from '@/api/commission'
import type { CommissionSummary, CommissionRecord, CommissionStats } from '@/api/commission'
import SimplePicker from '@/components/SimplePicker.vue'
// 佣金概览
const commissionSummary = ref<CommissionSummary | null>(null)
// 佣金明细列表
const commissionRecords = ref<CommissionRecord[]>([])
// 佣金统计
const commissionStats = ref<CommissionStats | null>(null)
// 加载状态
const loading = ref(false)
const loadingRecords = ref(false)
// 分页参数
const page = ref(1)
const pageSize = 20
const total = ref(0)
// 搜索关键词
const searchKeyword = ref('')
// 佣金来源筛选
const sourceFilter = ref<string | undefined>(undefined)
const showSourcePicker = ref(false)
// 佣金来源选项
const sourceOptions = [
{ label: '全部来源', value: undefined },
{ label: '成本价差', value: 'cost_diff' },
{ label: '一次性佣金', value: 'one_time' },
]
// 获取当前选中的来源名称
const selectedSourceName = computed(() => {
if (sourceFilter.value === undefined) return '佣金来源'
const option = sourceOptions.find(o => o.value === sourceFilter.value)
return option?.label || '佣金来源'
})
// 格式化金额（分转元,带千分号）
function formatAmount(amount: number) {
const yuan = (amount / 100).toFixed(2)
const parts = yuan.split('.')
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
return `¥${parts.join('.')}`
}
// 获取佣金来源文本
function getSourceText(source: string) {
const map: Record<string, string> = {
cost_diff: '成本价差',
one_time: '一次性佣金',
tier_bonus: '梯度奖励',
}
return map[source] || source
}
// 获取佣金状态文本
function getStatusText(status: number) {
const map: Record<number, string> = {
1: '已入账',
2: '已失效',
}
return map[status] || '未知'
}
// 获取佣金状态颜色
function getStatusColor(status: number) {
const map: Record<number, { bg: string, text: string }> = {
1: { bg: '#e8f5e9', text: '#2e7d32' }, // 已入账
2: { bg: '#f5f5f5', text: '#999' }, // 已失效
}
return map[status] || { bg: '#f5f5f5', text: '#999' }
}
// 格式化时间
function formatTime(time: string) {
if (!time) return '-'
const date = new Date(time)
const month = String(date.getMonth() + 1).padStart(2, '0')
const day = String(date.getDate()).padStart(2, '0')
const hour = String(date.getHours()).padStart(2, '0')
const minute = String(date.getMinutes()).padStart(2, '0')
return `${month}-${day} ${hour}:${minute}`
}
// 页面加载
onMounted(() => {
loadCommissionSummary()
loadCommissionStats()
loadCommissionRecords()
})
// 加载佣金概览
async function loadCommissionSummary() {
try {
const summary = await getCommissionSummary()
commissionSummary.value = summary
}
catch (error) {
console.error('加载佣金概览失败:', error)
}
}
// 加载佣金统计
async function loadCommissionStats() {
try {
const stats = await getCommissionStats()
commissionStats.value = stats
}
catch (error) {
console.error('加载佣金统计失败:', error)
}
}
// 加载佣金明细
async function loadCommissionRecords() {
loadingRecords.value = true
try {
const params: any = {
page: page.value,
page_size: pageSize,
}
// 佣金来源筛选
if (sourceFilter.value) {
params.commission_source = sourceFilter.value
}
// 搜索关键词（支持 ICCID、虚拟号、订单号）
if (searchKeyword.value) {
const keyword = searchKeyword.value.trim()
// 根据关键词类型判断搜索字段
if (/^\d{19,20}$/.test(keyword)) {
// ICCID 通常是19-20位数字
params.iccid = keyword
}
else if (/^\d{15}$/.test(keyword)) {
// 虚拟号通常是15位数字
params.virtual_no = keyword
}
else {
// 订单号
params.order_no = keyword
}
}
const response = await getCommissionRecords(params)
if (page.value === 1) {
commissionRecords.value = response.items || []
}
else {
commissionRecords.value.push(...(response.items || []))
}
total.value = response.total || 0
}
catch (error) {
console.error('加载佣金明细失败:', error)
}
finally {
loadingRecords.value = false
}
}
// 搜索
function handleSearch() {
page.value = 1
commissionRecords.value = []
loadCommissionRecords()
}
// 清空搜索
function clearSearch() {
searchKeyword.value = ''
page.value = 1
commissionRecords.value = []
loadCommissionRecords()
}
// 来源筛选变化
function onSourceConfirm(option: { label: string, value: any }) {
sourceFilter.value = option.value
page.value = 1
commissionRecords.value = []
loadCommissionRecords()
}
// 加载更多
function loadMore() {
if (commissionRecords.value.length >= total.value) {
return
}
page.value++
loadCommissionRecords()
}
// 刷新
function refreshList() {
page.value = 1
commissionRecords.value = []
loadCommissionSummary()
loadCommissionStats()
loadCommissionRecords()
}
</script>
<template>
<view class="bg-[#fafafa] min-h-screen pb-safe">
<!-- 加载中 -->
<view v-if="loading" class="pt-20 center">
<i class="i-mdi-loading animate-spin text-40px text-[#999]" />
</view>
<!-- 内容区域 -->
<view v-else class="px-4 pt-4">
<!-- 佣金概览卡片 -->
<view v-if="commissionSummary" class="bg-white rounded-16px shadow-[0_2px_12px_rgba(0,0,0,0.06)] p-4 mb-3">
<view class="flex items-center justify-between mb-3">
<view class="flex items-center gap-2">
<i class="i-mdi-currency-cny text-24px text-[#ff6700]" />
<text class="text-15px font-600 text-[#212121]">
佣金概览
</text>
</view>
</view>
<view class="grid grid-cols-2 gap-3">
<view class="text-center p-3 bg-[#f5f5f5] rounded-12px">
<text class="text-11px text-[#999] block mb-1">可提现</text>
<text class="text-18px font-700 text-[#ff6700]">
{{ formatAmount(commissionSummary.available_commission) }}
</text>
</view>
<view class="text-center p-3 bg-[#f5f5f5] rounded-12px">
<text class="text-11px text-[#999] block mb-1">累计佣金</text>
<text class="text-18px font-700 text-[#212121]">
{{ formatAmount(commissionSummary.total_commission) }}
</text>
</view>
<view class="text-center p-3 bg-[#f5f5f5] rounded-12px">
<text class="text-11px text-[#999] block mb-1">冻结</text>
<text class="text-18px font-700 text-[#999]">
{{ formatAmount(commissionSummary.frozen_commission) }}
</text>
</view>
<view class="text-center p-3 bg-[#f5f5f5] rounded-12px">
<text class="text-11px text-[#999] block mb-1">已提现</text>
<text class="text-18px font-700 text-[#52c41a]">
{{ formatAmount(commissionSummary.withdrawn_commission) }}
</text>
</view>
</view>
</view>
<!-- 佣金统计卡片 -->
<view v-if="commissionStats" class="bg-white rounded-16px shadow-[0_2px_12px_rgba(0,0,0,0.06)] p-4 mb-3">
<view class="flex items-center gap-2 mb-3">
<i class="i-mdi-chart-pie text-20px text-[#ff6700]" />
<text class="text-15px font-600 text-[#212121]">
佣金统计
</text>
</view>
<view class="space-y-2">
<view class="flex items-center justify-between">
<text class="text-13px text-[#666]">成本价差</text>
<view class="flex items-center gap-2">
<text class="text-14px font-600 text-[#212121]">
{{ formatAmount(commissionStats.cost_diff_amount) }}
</text>
<text class="text-11px text-[#999]">
{{ (commissionStats.cost_diff_percent / 10).toFixed(1) }}%
</text>
</view>
</view>
<view class="flex items-center justify-between">
<text class="text-13px text-[#666]">一次性佣金</text>
<view class="flex items-center gap-2">
<text class="text-14px font-600 text-[#212121]">
{{ formatAmount(commissionStats.one_time_amount) }}
</text>
<text class="text-11px text-[#999]">
{{ (commissionStats.one_time_percent / 10).toFixed(1) }}%
</text>
</view>
</view>
<view class="pt-2 border-t-1px border-[#f5f5f5]">
<view class="flex items-center justify-between">
<text class="text-13px font-600 text-[#212121]">总计</text>
<text class="text-16px font-700 text-[#ff6700]">
{{ formatAmount(commissionStats.total_amount) }}
</text>
</view>
<text class="text-11px text-[#999] mt-1 block text-right">
共 {{ commissionStats.total_count }} 笔
</text>
</view>
</view>
</view>
<!-- 搜索框 -->
<view class="mb-3">
<view class="bg-white rounded-12px shadow-[0_2px_12px_rgba(0,0,0,0.06)] overflow-hidden">
<view class="flex items-center px-4 py-3 gap-2">
<i class="i-mdi-magnify text-20px text-[#999]" />
<input
v-model="searchKeyword"
class="flex-1 text-14px text-[#212121] placeholder:text-[#999]"
placeholder="搜索 ICCID / 虚拟号 / 订单号"
@confirm="handleSearch"
>
<view
v-if="searchKeyword"
class="ml-1 min-w-32px min-h-32px flex items-center justify-center"
@click="clearSearch"
>
<i class="i-mdi-close-circle text-18px text-[#999]" />
</view>
<view
class="px-4 py-2 bg-[#ff6700] text-white text-13px font-600 rounded-8px min-h-32px flex items-center justify-center"
@click="handleSearch"
>
搜索
</view>
</view>
</view>
</view>
<!-- 筛选条件 -->
<view class="flex items-center gap-2 mb-3">
<!-- 佣金来源筛选 -->
<view class="flex-1 bg-white rounded-full px-4 py-2 flex items-center shadow-[0_2px_12px_rgba(0,0,0,0.06)]" @click="showSourcePicker = true">
<text class="flex-1 text-14px text-[#212121]">{{ selectedSourceName }}</text>
<i class="i-mdi-chevron-down text-18px text-[#999]" />
</view>
</view>
<!-- 佣金明细列表 -->
<view class="mb-3">
<view class="flex items-center justify-between mb-2 px-2">
<text class="text-14px font-600 text-[#212121]">
佣金明细
</text>
<text class="text-12px text-[#999]">
共 {{ total }} 条记录
</text>
</view>
<view v-if="loadingRecords && page === 1" class="pt-10 center">
<i class="i-mdi-loading animate-spin text-40px text-[#999]" />
</view>
<view v-else-if="commissionRecords.length > 0" class="space-y-2">
<view
v-for="record in commissionRecords"
:key="record.id"
class="bg-white rounded-12px shadow-[0_2px_12px_rgba(0,0,0,0.06)] p-4"
>
<view class="flex items-center justify-between mb-2">
<view class="flex items-center gap-2">
<i class="i-mdi-cash-plus text-20px text-[#ff6700]" />
<text class="text-14px font-600 text-[#212121]">
{{ getSourceText(record.commission_source) }}
</text>
</view>
<view
:style="{
backgroundColor: getStatusColor(record.status).bg,
color: getStatusColor(record.status).text,
}"
class="px-2 py-1 rounded-6px text-11px font-600"
>
{{ getStatusText(record.status) }}
</view>
</view>
<view class="flex items-center justify-between">
<text class="text-12px text-[#999]">
{{ formatTime(record.created_at) }}
</text>
<text class="text-18px font-700 text-[#ff6700]">
+{{ formatAmount(record.amount) }}
</text>
</view>
<view v-if="record.order_id" class="mt-2 pt-2 border-t-1px border-[#f5f5f5]">
<text class="text-11px text-[#999]">
订单ID: {{ record.order_id }}
</text>
</view>
</view>
<!-- 加载更多 -->
<view v-if="commissionRecords.length < total" class="py-3 center">
<text v-if="loadingRecords" class="text-12px text-[#999]">
加载中...
</text>
<text v-else class="text-12px text-[#ff6700]" @click="loadMore">
加载更多
</text>
</view>
</view>
<view v-else class="pt-10 center flex-col">
<i class="i-mdi-cash-remove text-60px text-[#ddd] mb-3" />
<text class="text-14px text-[#999]">
暂无佣金记录
</text>
</view>
</view>
<!-- 底部留白 -->
<view class="h-8" />
</view>
<!-- 佣金来源选择器 -->
<SimplePicker
v-model:show="showSourcePicker"
:options="sourceOptions"
title="选择佣金来源"
@confirm="onSourceConfirm"
/>
</view>
</template>
<style scoped>
.center {
display: flex;
align-items: center;
justify-content: center;
}
.space-y-2 > view:not(:last-child) {
margin-bottom: 8px;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.animate-spin {
animation: spin 1s linear infinite;
}
</style>