134 lines
3.3 KiB
Vue
134 lines
3.3 KiB
Vue
|
<script setup>
|
||
|
|
definePage({ layout: 'default', auth: true })
|
||
|
|
// 类型映射配置
|
||
|
|
const typeConfig = {
|
||
|
|
descendant_promotion: {
|
||
|
|
chinese: '下级推广奖励',
|
||
|
|
color: { bg: 'bg-blue-100', text: 'text-blue-800', dot: 'bg-blue-500' },
|
||
|
|
},
|
||
|
|
descendant_upgrade_vip: {
|
||
|
|
chinese: '下级升级VIP奖励',
|
||
|
|
color: { bg: 'bg-green-100', text: 'text-green-800', dot: 'bg-green-500' },
|
||
|
|
},
|
||
|
|
descendant_upgrade_svip: {
|
||
|
|
chinese: '下级升级SVIP奖励',
|
||
|
|
color: { bg: 'bg-purple-100', text: 'text-purple-800', dot: 'bg-purple-500' },
|
||
|
|
},
|
||
|
|
descendant_withdraw: {
|
||
|
|
chinese: '下级提现奖励',
|
||
|
|
color: { bg: 'bg-indigo-100', text: 'text-indigo-800', dot: 'bg-indigo-500' },
|
||
|
|
},
|
||
|
|
default: {
|
||
|
|
chinese: '其他奖励',
|
||
|
|
color: { 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)
|
||
|
|
|
||
|
|
// 类型转中文
|
||
|
|
function typeToChinese(type) {
|
||
|
|
return typeConfig[type]?.chinese || typeConfig.default.chinese
|
||
|
|
}
|
||
|
|
|
||
|
|
// 获取颜色样式
|
||
|
|
function getReportTypeStyle(type) {
|
||
|
|
const config = typeConfig[type] || typeConfig.default
|
||
|
|
return `${config.color.bg} ${config.color.text}`
|
||
|
|
}
|
||
|
|
|
||
|
|
// 获取小圆点颜色
|
||
|
|
function getDotColor(type) {
|
||
|
|
return typeConfig[type]?.color.dot || typeConfig.default.color.dot
|
||
|
|
}
|
||
|
|
|
||
|
|
// 获取数据
|
||
|
|
async function getData() {
|
||
|
|
try {
|
||
|
|
loading.value = true
|
||
|
|
const { data: res, error } = await useApiFetch(
|
||
|
|
`/agent/rewards?page=${page.value}&page_size=${pageSize.value}`,
|
||
|
|
).get().json()
|
||
|
|
|
||
|
|
if (res.value?.code === 200 && !error.value) {
|
||
|
|
data.value = res.value.data
|
||
|
|
}
|
||
|
|
}
|
||
|
|
finally {
|
||
|
|
loading.value = false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function onPageChange({ value }) {
|
||
|
|
page.value = value
|
||
|
|
getData()
|
||
|
|
}
|
||
|
|
|
||
|
|
// 初始化加载
|
||
|
|
onMounted(() => {
|
||
|
|
getData()
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<view class="min-h-screen bg-gray-50">
|
||
|
|
<view class="reward-scroll">
|
||
|
|
<view v-for="(item, index) in data.list" :key="index" class="mx-4 my-2 rounded-lg bg-white p-4 shadow-sm">
|
||
|
|
<view class="mb-2 flex items-center justify-between">
|
||
|
|
<text class="text-sm text-gray-500">
|
||
|
|
{{ item.create_time || '-' }}
|
||
|
|
</text>
|
||
|
|
<text class="text-green-500 font-bold">
|
||
|
|
+{{ item.amount.toFixed(2) }}
|
||
|
|
</text>
|
||
|
|
</view>
|
||
|
|
<view class="flex items-center">
|
||
|
|
<text
|
||
|
|
class="inline-flex items-center rounded-full px-2 py-1 text-xs font-medium"
|
||
|
|
:class="getReportTypeStyle(item.type)"
|
||
|
|
>
|
||
|
|
<text class="mr-1 h-2 w-2 rounded-full" :class="getDotColor(item.type)" />
|
||
|
|
{{ typeToChinese(item.type) }}
|
||
|
|
</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view v-if="loading" class="py-4 text-center text-sm text-gray-400">
|
||
|
|
加载中...
|
||
|
|
</view>
|
||
|
|
<view v-else-if="!data.list.length" class="py-4 text-center text-sm text-gray-400">
|
||
|
|
暂无记录
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<wd-pagination
|
||
|
|
v-model="page"
|
||
|
|
:total="data.total"
|
||
|
|
:page-size="pageSize"
|
||
|
|
show-icon
|
||
|
|
show-message
|
||
|
|
@change="onPageChange"
|
||
|
|
/>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
/* 保持原有样式不变 */
|
||
|
|
.list-enter-active {
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.list-enter-from {
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateY(20px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.reward-scroll {
|
||
|
|
height: calc(100vh - 110px);
|
||
|
|
}
|
||
|
|
</style>
|