133 lines
4.2 KiB
Vue
133 lines
4.2 KiB
Vue
<template>
|
||
<div class="min-h-screen bg-gray-50">
|
||
<!-- 收益列表 -->
|
||
<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
|
||
<div v-for="(item, index) in data.list" :key="index" class="mx-4 my-2 bg-white rounded-lg p-4 shadow-sm">
|
||
<div class="flex justify-between items-center mb-2">
|
||
<span class="text-gray-500 text-sm">{{ item.create_time || '-' }}</span>
|
||
<span class="text-green-500 font-bold">+{{ item.amount.toFixed(2) }}</span>
|
||
</div>
|
||
<div class="flex items-center justify-between mb-2">
|
||
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium"
|
||
:class="getReportTypeStyle(item.product_name)">
|
||
<span class="w-2 h-2 rounded-full mr-1" :class="getDotColor(item.product_name)"></span>
|
||
{{ item.product_name }}
|
||
</span>
|
||
</div>
|
||
<div v-if="item.order_no" class="text-xs text-gray-400">
|
||
订单号：{{ item.order_no }}
|
||
</div>
|
||
</div>
|
||
</van-list>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { getCommissionList } from '@/api/agent'
|
||
|
||
// 颜色配置（根据产品名称映射）
|
||
const typeColors = {
|
||
'小微企业': { bg: 'bg-blue-100', text: 'text-blue-800', dot: 'bg-blue-500' },
|
||
'入职背调': { bg: 'bg-green-100', text: 'text-green-800', dot: 'bg-green-500' },
|
||
'家政风险': { bg: 'bg-purple-100', text: 'text-purple-800', dot: 'bg-purple-500' },
|
||
'婚恋风险': { bg: 'bg-pink-100', text: 'text-pink-800', dot: 'bg-pink-500' },
|
||
'贷前风险': { bg: 'bg-orange-100', text: 'text-orange-800', dot: 'bg-orange-500' },
|
||
'消金报告': { bg: 'bg-indigo-100', text: 'text-indigo-800', dot: 'bg-indigo-500' },
|
||
'个人风险': { bg: 'bg-red-100', text: 'text-red-800', dot: 'bg-red-500' },
|
||
// 默认类型
|
||
'default': { bg: 'bg-gray-100', text: 'text-gray-800', dot: 'bg-gray-500' }
|
||
}
|
||
|
||
const page = ref(1)
|
||
const pageSize = ref(10)
|
||
const data = ref({
|
||
total: 0,
|
||
list: []
|
||
})
|
||
const loading = ref(false)
|
||
const finished = ref(false)
|
||
|
||
// 获取颜色样式
|
||
const getReportTypeStyle = (name) => {
|
||
const color = typeColors[name] || typeColors.default
|
||
return `${color.bg} ${color.text}`
|
||
}
|
||
|
||
// 获取小圆点颜色
|
||
const getDotColor = (name) => {
|
||
return (typeColors[name] || typeColors.default).dot
|
||
}
|
||
|
||
// 加载更多数据
|
||
const onLoad = async () => {
|
||
if (!finished.value) {
|
||
page.value++
|
||
await getData()
|
||
}
|
||
}
|
||
|
||
// 获取数据
|
||
const getData = async () => {
|
||
if (loading.value || finished.value) return
|
||
|
||
try {
|
||
loading.value = true
|
||
const { data: res, error } = await getCommissionList({
|
||
page: page.value,
|
||
page_size: pageSize.value
|
||
})
|
||
|
||
if (res.value?.code === 200 && !error.value) {
|
||
// 首次加载
|
||
if (page.value === 1) {
|
||
data.value = res.value.data
|
||
} else {
|
||
// 分页加载
|
||
data.value.list.push(...res.value.data.list)
|
||
}
|
||
|
||
// 判断是否加载完成
|
||
if (data.value.list.length >= res.value.data.total ||
|
||
res.value.data.list.length < pageSize.value) {
|
||
finished.value = true
|
||
}
|
||
} else {
|
||
// 接口返回错误或请求失败，停止翻页
|
||
finished.value = true
|
||
console.error('获取佣金列表失败:', res.value?.msg || error.value || '未知错误')
|
||
}
|
||
} catch (err) {
|
||
// 捕获异常，停止翻页
|
||
finished.value = true
|
||
console.error('获取佣金列表失败:', err)
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
// 初始化加载
|
||
onMounted(() => {
|
||
getData()
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 列表项入场动画 */
|
||
.list-enter-active {
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.list-enter-from {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
}
|
||
|
||
/* 适配vant组件 */
|
||
:deep(.van-list__finished-text) {
|
||
@apply py-4 text-gray-400 text-sm;
|
||
}
|
||
|
||
:deep(.van-list__loading) {
|
||
@apply py-4;
|
||
}
|
||
</style> |