f

src/views/AgentPromoteDetails.vue

@@ -0,0 +1,117 @@
+<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">
+                    <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>
+        </van-list>
+    </div>
+</template>
+
+<script setup>
+// 颜色配置（根据产品名称映射）
+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 () => {
+    try {
+        loading.value = true
+        const { data: res, error } = await useApiFetch(
+            `/agent/commission?page=${page.value}&page_size=${pageSize.value}`
+        ).get().json()
+
+        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
+            }
+        }
+    } 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>