53 lines
1.4 KiB
Vue
53 lines
1.4 KiB
Vue
<template>
|
|
<div
|
|
class="lucid-glass-bar flex w-full flex-col justify-between rounded-4xl! border-1 border-white px-6 py-7"
|
|
>
|
|
<div class="mb-2 flex items-center justify-between border-b-1 border-dashed pb-3">
|
|
<div class="relative ml-1 pb-2 text-base font-bold text-white">本月链接转化</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col">
|
|
<div
|
|
v-for="item in data"
|
|
:key="item.label"
|
|
class="flex items-center justify-between text-white/90"
|
|
>
|
|
<span class="text-xs font-medium">{{ item.label }}</span>
|
|
<span class="text-base font-bold tabular-nums">{{ item.value }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-1 text-xs text-white/40">相比前一个月 {{ growthRate }}</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue'
|
|
import request from '@/utils/request'
|
|
|
|
const data = ref([
|
|
{ label: '点击量', value: 0, key: 'clicks' },
|
|
{ label: '浏览量', value: 0, key: 'views' },
|
|
{ label: '付费用户数', value: 0, key: 'paid_count' },
|
|
])
|
|
|
|
const growthRate = ref('N/A')
|
|
|
|
async function fetchStats() {
|
|
try {
|
|
const res: any = await request.get('/api/v1/public/user/agent/realtime')
|
|
data.value = data.value.map((item) => ({
|
|
...item,
|
|
value: res[item.key] || 0,
|
|
}))
|
|
growthRate.value = res.paid_growth_rate || 'N/A'
|
|
} catch (error) {
|
|
console.error('Fetch proxy data error:', error)
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
fetchStats()
|
|
})
|
|
</script>
|