240 lines
6.9 KiB
Vue
240 lines
6.9 KiB
Vue
|
<script setup>
|
|||
|
|
definePage({ layout: 'default', auth: true })
|
|||
|
|
// 颜色配置（根据产品名称映射）
|
|||
|
|
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' },
|
|||
|
|
个人大数据: { 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' },
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 新增点 4: 定义脱敏函数
|
|||
|
|
function desen(value, type) {
|
|||
|
|
// 如果值是空，直接返回空字符串，让外层的 || '-' 生效
|
|||
|
|
if (!value) {
|
|||
|
|
return ''
|
|||
|
|
}
|
|||
|
|
// 根据类型进行不同的替换
|
|||
|
|
switch (type) {
|
|||
|
|
case 'mobile': // 手机号：保留前3位和后4位，中间4位替换为 ****
|
|||
|
|
return value.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')
|
|||
|
|
case 'id_card':// 身份证：保留前6位和后1位，中间替换为 ********
|
|||
|
|
if (value.length <= 7)
|
|||
|
|
return value
|
|||
|
|
return `${value.slice(0, 6)}********${value.slice(-1)}`
|
|||
|
|
default:
|
|||
|
|
return value // 其他类型不处理
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const page = ref(1)
|
|||
|
|
const pageSize = ref(10)
|
|||
|
|
const data = ref({
|
|||
|
|
total: 0,
|
|||
|
|
list: [],
|
|||
|
|
})
|
|||
|
|
const loading = ref(false)
|
|||
|
|
|
|||
|
|
// 获取颜色样式
|
|||
|
|
function getReportTypeStyle(name) {
|
|||
|
|
const color = typeColors[name] || typeColors.default
|
|||
|
|
return `${color.bg} ${color.text}`
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取小圆点颜色
|
|||
|
|
function getDotColor(name) {
|
|||
|
|
return (typeColors[name] || typeColors.default).dot
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取金额颜色
|
|||
|
|
function getAmountColor(item) {
|
|||
|
|
// 如果净佣金为0或状态为已退款，显示红色
|
|||
|
|
if (item.net_amount <= 0 || item.status === 2) {
|
|||
|
|
return 'text-red-500'
|
|||
|
|
}
|
|||
|
|
// 如果有部分退款，显示橙色
|
|||
|
|
if (item.refunded_amount > 0) {
|
|||
|
|
return 'text-orange-500'
|
|||
|
|
}
|
|||
|
|
// 正常情况显示绿色
|
|||
|
|
return 'text-green-500'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取金额前缀（+ 或 -）
|
|||
|
|
function getAmountPrefix(item) {
|
|||
|
|
if (item.net_amount <= 0 || item.status === 2) {
|
|||
|
|
return '-'
|
|||
|
|
}
|
|||
|
|
return '+'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取状态文本
|
|||
|
|
function getStatusText(item) {
|
|||
|
|
if (item.status === 2 || item.net_amount <= 0) {
|
|||
|
|
return '已退款'
|
|||
|
|
}
|
|||
|
|
if (item.status === 1) {
|
|||
|
|
// 冻结中
|
|||
|
|
if (item.refunded_amount > 0) {
|
|||
|
|
return '冻结中（部分退款）'
|
|||
|
|
}
|
|||
|
|
return '冻结中'
|
|||
|
|
}
|
|||
|
|
if (item.status === 0) {
|
|||
|
|
// 已结算
|
|||
|
|
if (item.refunded_amount > 0) {
|
|||
|
|
return '已结算（部分退款）'
|
|||
|
|
}
|
|||
|
|
return '已结算'
|
|||
|
|
}
|
|||
|
|
return '未知状态'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取状态样式
|
|||
|
|
function getStatusStyle(item) {
|
|||
|
|
if (item.status === 2 || item.net_amount <= 0) {
|
|||
|
|
return 'bg-red-100 text-red-800'
|
|||
|
|
}
|
|||
|
|
if (item.status === 1) {
|
|||
|
|
// 冻结中
|
|||
|
|
if (item.refunded_amount > 0) {
|
|||
|
|
return 'bg-orange-100 text-orange-800'
|
|||
|
|
}
|
|||
|
|
return 'bg-yellow-100 text-yellow-800'
|
|||
|
|
}
|
|||
|
|
if (item.status === 0) {
|
|||
|
|
// 已结算
|
|||
|
|
if (item.refunded_amount > 0) {
|
|||
|
|
return 'bg-blue-100 text-blue-800'
|
|||
|
|
}
|
|||
|
|
return 'bg-green-100 text-green-800'
|
|||
|
|
}
|
|||
|
|
return 'bg-gray-100 text-gray-800'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取数据
|
|||
|
|
async function getData() {
|
|||
|
|
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) {
|
|||
|
|
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="detail-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">
|
|||
|
|
<!-- 修改点 1: 使用 desen 函数处理 mobile -->
|
|||
|
|
<text class="text-sm text-gray-500">
|
|||
|
|
{{ desen(item.query_params?.mobile, 'mobile') || '-' }}
|
|||
|
|
</text>
|
|||
|
|
<text
|
|||
|
|
class="inline-flex items-center rounded-full px-2 py-1 text-xs font-medium"
|
|||
|
|
:class="getReportTypeStyle(item.product_name)"
|
|||
|
|
>
|
|||
|
|
<text class="mr-1 h-2 w-2 rounded-full" :class="getDotColor(item.product_name)" />
|
|||
|
|
{{ item.product_name }}
|
|||
|
|
</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="mb-2 flex items-center justify-between">
|
|||
|
|
<text class="text-gray-700 font-medium">
|
|||
|
|
直接收益
|
|||
|
|
</text>
|
|||
|
|
<view class="flex flex-col items-end">
|
|||
|
|
<!-- 主金额：显示净佣金 -->
|
|||
|
|
<text :class="getAmountColor(item)" class="text-lg font-bold">
|
|||
|
|
{{ getAmountPrefix(item) }}{{ (item.net_amount || 0).toFixed(2) }}
|
|||
|
|
</text>
|
|||
|
|
<!-- 如果有部分退款，显示原始金额和已退金额 -->
|
|||
|
|
<text v-if="item.refunded_amount > 0 && item.net_amount > 0" class="mt-1 text-xs text-gray-400">
|
|||
|
|
原始 {{ item.amount.toFixed(2) }}，已退 {{ item.refunded_amount.toFixed(2) }}
|
|||
|
|
</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex items-center justify-between">
|
|||
|
|
<text class="text-sm text-gray-500">
|
|||
|
|
{{ desen(item.query_params?.name) || '-' }}
|
|||
|
|
</text>
|
|||
|
|
<!-- 状态标签 -->
|
|||
|
|
<text
|
|||
|
|
class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium"
|
|||
|
|
:class="getStatusStyle(item)"
|
|||
|
|
>
|
|||
|
|
{{ getStatusText(item) }}
|
|||
|
|
</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="mb-2 flex items-center justify-between">
|
|||
|
|
<text class="text-sm text-gray-500">
|
|||
|
|
{{ item.create_time || '-' }}
|
|||
|
|
</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="mt-2 flex items-center">
|
|||
|
|
<text class="text-sm text-gray-500">
|
|||
|
|
订单号：
|
|||
|
|
</text>
|
|||
|
|
<text class="text-sm text-gray-700 font-mono">
|
|||
|
|
{{ item.order_id || '-' }}
|
|||
|
|
</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);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.detail-scroll {
|
|||
|
|
height: calc(100vh - 110px);
|
|||
|
|
}
|
|||
|
|
</style>
|