zhiyu_duanju_distribution_manage_front/src/views/dashboard/dataStatistics/todayData.vue

<template>
	<p class="title">今日数据 <label style="color: #909399; margin-left: 50px;">注: 以下数据为当日所有小程序的累计数据，如需查看各个小程序数据，可前往<span @click="go2tj" style="color: #29d;">数据统计</span>进行查看</label></p>
	<div class="data-line">
		<div class="box-card">
			<el-tooltip placement="top">
				<template #content> 新增用户的定义：不在其他推广链接染色时间范围内且被成功绑定到当前链接的用户，即为当前链接对应优化师的新增用户<br /> </template>
				<el-icon>
					<InfoFilled />
				</el-icon>
			</el-tooltip>
			<label class="text-sm">新增用户：</label>
			<p class="text-base">{{ todayChargeData.new_user_num || '0' }}</p>
		</div>
		<div class="box-card">
			<el-tooltip placement="top">
				<template #content> 新增用户中今日充值的人数<br /> </template>
				<el-icon>
					<InfoFilled />
				</el-icon>
			</el-tooltip>
			<label class="text-sm">新增用户充值人数：</label>
			<p class="text-base">{{ todayChargeData.new_user_recharge_num || '0' }}</p>
			<p class="text-pt">普通：{{ todayChargeData.new_user_recharge_coin_num || '0' }}</p>
			<p class="text-pt">会员：{{ todayChargeData.new_user_recharge_vip_num || '0' }}</p>
		</div>
		<div class="box-card">
			<el-tooltip placement="top">
				<template #content> 新用户充值人数/新增用户<br /> </template>
				<el-icon>
					<InfoFilled />
				</el-icon>
			</el-tooltip>
			<label class="text-sm">新增用户付费率：</label>
			<p class="text-base">{{ todayChargeData.new_user_recharge_rate || '0' }}</p>
			
		</div>
		<div class="box-card">
			<el-tooltip placement="top">
				<template #content> 当日新增用户的充值总额<br /> </template>
				<el-icon>
					<InfoFilled />
				</el-icon>
			</el-tooltip>
			<label class="text-sm">新增用户充值金额：</label>
			<p class="text-base">{{ todayChargeData.new_user_recharge_total || '0' }}</p>
			<p class="text-pt">普通：{{ todayChargeData.new_user_recharge_coin_total || '0' }}</p>
			<p class="text-pt">会员：{{ todayChargeData.new_user_recharge_coin_total || '0' }}</p>
		</div>
		<div class="box-card">
			<el-tooltip placement="top">
				<template #content> 新用户充值总额/新用户充值人数<br /> </template>
				<el-icon>
					<InfoFilled />
				</el-icon>
			</el-tooltip>
			<label class="text-sm">新增用户人均充值：</label>
			<p class="text-base">{{ todayChargeData.new_user_mean || '0' }}</p>
			
		</div>
		<div class="box-card">
			<el-tooltip placement="top">
				<template #content> 当日累计充值总金额<br /> </template>
				<el-icon>
					<InfoFilled />
				</el-icon>
			</el-tooltip>
			<label class="text-sm">充值金额：</label>
			<p class="text-base">{{ todayChargeData.recharge_total || '0' }}</p>
			<p class="text-pt">普通：{{ todayChargeData.recharge_coin_total || '0' }}</p>
			<p class="text-pt">会员：{{ todayChargeData.recharge_coin_total || '0' }}</p>
		</div>
		<div class="box-card">
			<el-tooltip placement="top">
				<template #content> 当日累计充值笔数<br /> </template>
				<el-icon>
					<InfoFilled />
				</el-icon>
			</el-tooltip>
			<label class="text-sm">充值笔数：</label>
			<p class="text-base">{{ todayChargeData.recharge_num || '0' }}</p>
			
		</div>
		<div class="box-card">
			<el-tooltip placement="top">
				<template #content> 充值金额/充值笔数<br /> </template>
				<el-icon>
					<InfoFilled />
				</el-icon>
			</el-tooltip>
			<label class="text-sm">充值单价：</label>
			<p class="text-base">{{ todayChargeData.recharge_mean || '0' }}</p>
			
		</div>
		
	</div>
</template>

<script lang="ts" setup>
import { checkPermission } from '@/directives/permission';
import { InfoFilled } from '@element-plus/icons-vue';
import Cache from '@/support/cache';
import { statisticHomeTodayData } from '@/api/dataStatistics/userStatistics';
import router from '@/router';
const todayChargeData = ref({});
const miniprogram_idJ = ref(0);

const init = () => {
	statisticHomeTodayData({ miniprogram_id: miniprogram_idJ.value }).then(
		res => {
			todayChargeData.value = res.data;
		}
	);
};

onMounted(() => {
	if (JSON.parse(Cache.get('nav_data'))?.app.id) {
		miniprogram_idJ.value = JSON.parse(Cache.get('nav_data'))?.app.id;
	}
	init();
});

const go2tj=()=>{
	router.push({ path: "/statistic/userStatistical" });
}
</script>

<style>
.data-line{
  display: flex;   /* flex布局 */
  justify-content: space-between;   /* 左对齐 */
  flex-wrap: wrap;   /* 换行 */
}
.title{
	margin-left: 15px;
}
.box-card{
	margin-top: 20px;
	border-radius: 10px;
	margin-right: 10px;
	background-color: cornsilk;
	padding:15px 20px;
	height: 200px;
	width: calc((100% - 60px) / 4);
	justify-content: flex-start;


}
.box-card:nth-of-type(4n+0) {
	 margin-right: 0;
}
.text-sm{

}
.text-base{
	font-size:40px;
	margin: 20px 0px;
}
.text-pt{
	font-size:10px;
	margin-top: 15px;
}
</style>