52 lines
1.3 KiB
Vue
52 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import type { MessageReachStatsViewModel } from '../types';
|
|
|
|
import { Spin } from 'ant-design-vue';
|
|
|
|
import {
|
|
formatInteger,
|
|
formatPercent,
|
|
} from '../composables/message-reach-page/helpers';
|
|
|
|
defineProps<{
|
|
loading: boolean;
|
|
stats: MessageReachStatsViewModel;
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<Spin :spinning="loading">
|
|
<div class="mmr-stats">
|
|
<div class="mmr-stat-card">
|
|
<div class="mmr-stat-label">本月发送</div>
|
|
<div class="mmr-stat-value">
|
|
{{ formatInteger(stats.monthlySentCount) }}
|
|
<span class="mmr-stat-unit">条</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mmr-stat-card">
|
|
<div class="mmr-stat-label">触达人数</div>
|
|
<div class="mmr-stat-value">
|
|
{{ formatInteger(stats.reachMemberCount) }}
|
|
<span class="mmr-stat-unit">人</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mmr-stat-card">
|
|
<div class="mmr-stat-label">打开率</div>
|
|
<div class="mmr-stat-value">
|
|
{{ formatPercent(stats.openRate) }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mmr-stat-card">
|
|
<div class="mmr-stat-label">转化率</div>
|
|
<div class="mmr-stat-value">
|
|
{{ formatPercent(stats.conversionRate) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Spin>
|
|
</template>
|