79 lines
2.0 KiB
Vue
79 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import type {
|
|
CustomerAnalysisOverviewDto,
|
|
CustomerAnalysisSegmentCode,
|
|
} from '#/api/customer';
|
|
|
|
import {
|
|
formatCurrency,
|
|
formatInteger,
|
|
formatPercent,
|
|
formatSignedPercent,
|
|
} from '../composables/customer-analysis-page/helpers';
|
|
|
|
interface Props {
|
|
overview: CustomerAnalysisOverviewDto;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
|
|
const emit = defineEmits<{
|
|
(event: 'segment', segmentCode: CustomerAnalysisSegmentCode): void;
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="ca-stats">
|
|
<button class="ca-stat" type="button" @click="emit('segment', 'all')">
|
|
<div class="label">客户总数</div>
|
|
<div class="val blue">
|
|
{{ formatInteger(props.overview.totalCustomers) }}
|
|
</div>
|
|
<div class="sub">
|
|
较上周期 {{ formatSignedPercent(props.overview.growthRatePercent) }}
|
|
</div>
|
|
</button>
|
|
|
|
<button
|
|
class="ca-stat"
|
|
type="button"
|
|
@click="emit('segment', 'active_new')"
|
|
>
|
|
<div class="label">本期新增</div>
|
|
<div class="val green">
|
|
+{{ formatInteger(props.overview.newCustomers) }}
|
|
</div>
|
|
<div class="sub">
|
|
日均 {{ props.overview.newCustomersDailyAverage }} 人
|
|
</div>
|
|
</button>
|
|
|
|
<button
|
|
class="ca-stat"
|
|
type="button"
|
|
@click="emit('segment', 'active_recent')"
|
|
>
|
|
<div class="label">活跃率</div>
|
|
<div class="val orange">
|
|
{{ formatPercent(props.overview.activeRatePercent) }}
|
|
</div>
|
|
<div class="sub">
|
|
{{ formatInteger(props.overview.activeCustomers) }} /
|
|
{{ formatInteger(props.overview.totalCustomers) }}
|
|
</div>
|
|
</button>
|
|
|
|
<button
|
|
class="ca-stat"
|
|
type="button"
|
|
@click="emit('segment', 'high_value_top')"
|
|
>
|
|
<div class="label">平均客户价值</div>
|
|
<div class="val">
|
|
{{ formatCurrency(props.overview.averageLifetimeValue) }}
|
|
</div>
|
|
<div class="sub">生命周期价值</div>
|
|
</button>
|
|
</div>
|
|
</template>
|