142 lines
2.9 KiB
Vue
142 lines
2.9 KiB
Vue
<script setup lang="ts">
|
|
import type { TableProps } from 'ant-design-vue';
|
|
|
|
import type {
|
|
CustomerAnalysisSegmentCode,
|
|
CustomerAnalysisTopCustomerDto,
|
|
CustomerTagDto,
|
|
} from '#/api/customer';
|
|
|
|
import { h } from 'vue';
|
|
|
|
import { Button, Table, Tag } from 'ant-design-vue';
|
|
|
|
import {
|
|
formatCurrencyWithFraction,
|
|
resolveTagColor,
|
|
} from '../composables/customer-analysis-page/helpers';
|
|
|
|
interface Props {
|
|
rows: CustomerAnalysisTopCustomerDto[];
|
|
}
|
|
|
|
defineProps<Props>();
|
|
|
|
const emit = defineEmits<{
|
|
(event: 'detail', customerKey: string): void;
|
|
(event: 'segment', segmentCode: CustomerAnalysisSegmentCode): void;
|
|
}>();
|
|
|
|
function renderTagList(tags: CustomerTagDto[]) {
|
|
if (tags.length === 0) {
|
|
return '--';
|
|
}
|
|
|
|
return h(
|
|
'div',
|
|
{ class: 'ca-top-tag-list' },
|
|
tags.map((tag) =>
|
|
h(
|
|
Tag,
|
|
{
|
|
color: resolveTagColor(tag.tone),
|
|
},
|
|
() => tag.label,
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
const columns: TableProps['columns'] = [
|
|
{
|
|
title: '排名',
|
|
dataIndex: 'rank',
|
|
width: 70,
|
|
customRender: ({ text }) =>
|
|
h('span', { class: 'ca-top-rank' }, String(text ?? '--')),
|
|
},
|
|
{
|
|
title: '客户',
|
|
dataIndex: 'name',
|
|
width: 130,
|
|
},
|
|
{
|
|
title: '累计消费',
|
|
dataIndex: 'totalAmount',
|
|
width: 120,
|
|
customRender: ({ text }) =>
|
|
h(
|
|
'span',
|
|
{ class: 'ca-top-money' },
|
|
formatCurrencyWithFraction(Number(text || 0)),
|
|
),
|
|
},
|
|
{
|
|
title: '下单次数',
|
|
dataIndex: 'orderCount',
|
|
width: 100,
|
|
},
|
|
{
|
|
title: '客单价',
|
|
dataIndex: 'averageAmount',
|
|
width: 100,
|
|
customRender: ({ text }) => formatCurrencyWithFraction(Number(text || 0)),
|
|
},
|
|
{
|
|
title: '最近下单',
|
|
dataIndex: 'lastOrderAt',
|
|
width: 110,
|
|
customRender: ({ text }) => String(text ?? '--').slice(5),
|
|
},
|
|
{
|
|
title: '标签',
|
|
dataIndex: 'tags',
|
|
customRender: ({ record }) =>
|
|
renderTagList((record as CustomerAnalysisTopCustomerDto).tags),
|
|
},
|
|
{
|
|
title: '操作',
|
|
key: 'action',
|
|
width: 90,
|
|
customRender: ({ record }) =>
|
|
h(
|
|
Button,
|
|
{
|
|
type: 'link',
|
|
class: 'ca-top-action',
|
|
onClick: () =>
|
|
emit(
|
|
'detail',
|
|
String((record as CustomerAnalysisTopCustomerDto).customerKey),
|
|
),
|
|
},
|
|
() => '查看',
|
|
),
|
|
},
|
|
];
|
|
</script>
|
|
|
|
<template>
|
|
<div class="ca-card ca-card-full ca-top-card">
|
|
<div class="ca-card-title-wrap">
|
|
<div class="ca-card-title">高价值客户 TOP 10</div>
|
|
<Button
|
|
type="link"
|
|
class="ca-top-segment-btn"
|
|
@click="emit('segment', 'high_value_top')"
|
|
>
|
|
查看客群明细
|
|
</Button>
|
|
</div>
|
|
|
|
<Table
|
|
row-key="customerKey"
|
|
size="small"
|
|
:columns="columns"
|
|
:data-source="rows"
|
|
:pagination="false"
|
|
class="ca-top-table"
|
|
/>
|
|
</div>
|
|
</template>
|