|
|
@@ -29,6 +29,36 @@
|
|
|
</el-form>
|
|
|
</el-card>
|
|
|
|
|
|
+ <!-- 统计数据 -->
|
|
|
+ <el-card class="stats-card" v-if="statsData">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="stat-item">
|
|
|
+ <div class="stat-label">总分账金额</div>
|
|
|
+ <div class="stat-value">¥{{ formatAmountToYuan(statsData.total_amount) }}</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="stat-item">
|
|
|
+ <div class="stat-label">商户分账总金额</div>
|
|
|
+ <div class="stat-value merchant">¥{{ formatAmountToYuan(statsData.merchant_total_amount) }}</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="stat-item">
|
|
|
+ <div class="stat-label">用户分账总金额</div>
|
|
|
+ <div class="stat-value user">¥{{ formatAmountToYuan(statsData.user_total_amount) }}</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="stat-item">
|
|
|
+ <div class="stat-label">待分账总金额</div>
|
|
|
+ <div class="stat-value pending">¥{{ formatAmountToYuan(statsData.pending_amount) }}</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
<!-- 列表数据 -->
|
|
|
<el-card class="table-card">
|
|
|
<template #header>
|
|
|
@@ -260,6 +290,7 @@ export default {
|
|
|
status: ''
|
|
|
},
|
|
|
tableData: [],
|
|
|
+ statsData: null,
|
|
|
pagination: {
|
|
|
page: 1,
|
|
|
limit: 10,
|
|
|
@@ -340,6 +371,15 @@ export default {
|
|
|
this.tableData = res.page.data
|
|
|
this.pagination.total = res.page.total
|
|
|
this.pagination.limit = res.page.per_page
|
|
|
+
|
|
|
+ // 获取统计数据并计算商户分账总金额
|
|
|
+ if (res.data?.stats) {
|
|
|
+ // 商户分账总金额 = 总分账金额 - 用户分账总金额
|
|
|
+ res.data.stats.merchant_total_amount = res.data.stats.total_amount - res.data.stats.user_total_amount;
|
|
|
+ this.statsData = res.data.stats;
|
|
|
+ } else {
|
|
|
+ this.statsData = null;
|
|
|
+ }
|
|
|
} else {
|
|
|
this.$message.error(res.msg || res.message || '获取数据失败')
|
|
|
}
|
|
|
@@ -516,6 +556,45 @@ export default {
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
|
|
|
+.stats-card {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.stat-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 20px 0;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.stat-label {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #606266;
|
|
|
+ margin-bottom: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.stat-value {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #303133;
|
|
|
+}
|
|
|
+
|
|
|
+.stat-value.merchant {
|
|
|
+ color: #409eff;
|
|
|
+}
|
|
|
+
|
|
|
+.stat-value.user {
|
|
|
+ color: #67c23a;
|
|
|
+}
|
|
|
+
|
|
|
+.stat-value.pending {
|
|
|
+ color: #e6a23c;
|
|
|
+}
|
|
|
+
|
|
|
.table-card {
|
|
|
margin-bottom: 20px;
|
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|