59 lines
3.5 KiB
JavaScript
59 lines
3.5 KiB
JavaScript
const DashboardView = {
|
|
template: `
|
|
<div>
|
|
<h2 style="margin-bottom: 24px; font-size: 18px; font-weight: 600; color: #303133;">数据概览</h2>
|
|
<el-row :gutter="20" style="margin-bottom: 24px;">
|
|
<el-col :span="6">
|
|
<el-card shadow="hover" body-style="padding: 24px;">
|
|
<el-statistic title="用户总数" :value="userStats.total"><template #suffix><span style="font-size: 12px; color: #909399;"> 人</span></template></el-statistic>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-card shadow="hover" body-style="padding: 24px;">
|
|
<el-statistic title="今日新增" :value="userStats.today"><template #suffix><span style="font-size: 12px; color: #909399;"> 人</span></template></el-statistic>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-card shadow="hover" body-style="padding: 24px;">
|
|
<el-statistic title="本月订单" :value="orderStats.monthPaid"><template #suffix><span style="font-size: 12px; color: #909399;"> 笔</span></template></el-statistic>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-card shadow="hover" body-style="padding: 24px;">
|
|
<el-statistic title="本月收入" :value="monthIncome"><template #prefix><span style="font-size: 14px;">¥</span></template></el-statistic>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="6">
|
|
<el-card shadow="hover" body-style="padding: 24px;"><el-statistic title="本周新增用户" :value="userStats.thisWeek"/></el-card>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-card shadow="hover" body-style="padding: 24px;"><el-statistic title="本月新增用户" :value="userStats.thisMonth"/></el-card>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-card shadow="hover" body-style="padding: 24px;"><el-statistic title="本周订单" :value="orderStats.weekPaid"/></el-card>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-card shadow="hover" body-style="padding: 24px;">
|
|
<el-statistic title="本周收入" :value="weekIncome"><template #prefix><span style="font-size: 14px;">¥</span></template></el-statistic>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
`,
|
|
setup() {
|
|
const { ref, onMounted, computed } = Vue;
|
|
const userStats = ref({ total: 0, today: 0, thisWeek: 0, thisMonth: 0 });
|
|
const orderStats = ref({ totalCount: 0, paidCount: 0, todayPaid: 0, weekPaid: 0, monthPaid: 0, monthIncome: 0, weekIncome: 0 });
|
|
const monthIncome = computed(() => (orderStats.value.monthIncome / 100).toFixed(2));
|
|
const weekIncome = computed(() => (orderStats.value.weekIncome / 100).toFixed(2));
|
|
const toNum = (obj) => { const r = {}; for (const k in obj) r[k] = Number(obj[k]); return r; };
|
|
onMounted(async () => {
|
|
try { userStats.value = toNum(await userApi.stats()); } catch(e) {}
|
|
try { orderStats.value = toNum(await orderApi.stats()); } catch(e) {}
|
|
});
|
|
return { userStats, orderStats, monthIncome, weekIncome };
|
|
}
|
|
};
|