1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
import { ref, computed } from 'vue';
export interface DetailData {
title: string;
type: string;
columns: any[];
data?: any[];
}
export function useDetailData(card) {
const detailVisible = ref(false);
const currentType = ref(card?.type);
const currentDetail = computed<DetailData>(() => {
const details: Record<string, DetailData> = {
users: {
title: '用户注册详情',
type: 'users',
columns: [
{ title: '日期', dataIndex: 'date', key: 'date', width: 120 },
{ title: '新增注册', dataIndex: 'newUsers', key: 'newUsers', width: 100 },
{ title: '新增实名', dataIndex: 'newVerified', key: 'newVerified', width: 100 },
{ title: '累计用户', dataIndex: 'totalUsers', key: 'totalUsers', width: 100 },
{ title: '实名率', dataIndex: 'verificationRate', key: 'verificationRate', width: 100 }
]
},
amount: {
title: '交易金额详情',
type: 'amount',
columns: [
{ title: '日期', dataIndex: 'date', key: 'date', width: 120 },
{ title: '交易总额', dataIndex: 'totalAmount', key: 'totalAmount', width: 120 },
{ title: '已支付金额', dataIndex: 'paidAmount', key: 'paidAmount', width: 120 },
{ title: '未支付金额', dataIndex: 'unpaidAmount', key: 'unpaidAmount', width: 120 }
]
},
orders: {
title: '订单数量详情',
type: 'orders',
columns: [
{ title: '日期', dataIndex: 'date', key: 'date', width: 120 },
{ title: '总订单数', dataIndex: 'totalOrders', key: 'totalOrders', width: 120 },
{ title: '已支付订单', dataIndex: 'paidOrders', key: 'paidOrders', width: 120 },
{ title: '未支付订单', dataIndex: 'unpaidOrders', key: 'unpaidOrders', width: 120 }
]
},
payment: {
title: '支付方式详情',
type: 'payment',
columns: [
{ title: '日期', dataIndex: 'date', key: 'date', width: 120 },
{ title: '微信支付', dataIndex: 'wechatAmount', key: 'wechatAmount', width: 120 },
{ title: '支付宝', dataIndex: 'alipayAmount', key: 'alipayAmount', width: 120 },
{ title: '银联支付', dataIndex: 'unionpayAmount', key: 'unionpayAmount', width: 120 }
]
}
};
return details[currentType.value] || details.users;
});
const showDetail = (type: string, data: any[]) => {
currentType.value = type;
currentDetail.value.data = data;
detailVisible.value = true;
};
return {
detailVisible,
currentDetail,
showDetail
};
}