From 1afa287f5d0d032f70cc0bdbc75fcde1137b8bc9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=A9=AC=E6=A2=93=E5=BD=AD?= <tianbohe0@163.com>
Date: Fri, 15 May 2026 14:01:11 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=A2=E5=8D=95=E7=BB=9F=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/match/order.js          |   9 +
 src/views/match/order/index.vue | 430 ++++++++++++++++++++------------
 2 files changed, 286 insertions(+), 153 deletions(-)

diff --git a/src/api/match/order.js b/src/api/match/order.js
index 5d8b518..0a79f45 100644
--- a/src/api/match/order.js
+++ b/src/api/match/order.js
@@ -175,4 +175,13 @@ export const orderExportGet = (params) => {
  */
 export const orderSetstatusPatch = (data) => {
     return http.patch('/order/setstatus', data);
+};
+
+/**
+ * 获取订单统计数据
+ * @param {Object} params - 查询参数
+ * @returns {Promise<{totalOriginalAmount: number, totalDiscountAmount: number, totalActualAmount: number, totalRefundAmount: number}>}
+ */
+export const orderStatsGet = (params) => {
+    return http.get('/order/stats', { params });
 };
\ No newline at end of file
diff --git a/src/views/match/order/index.vue b/src/views/match/order/index.vue
index 8a1a3cd..1371dda 100644
--- a/src/views/match/order/index.vue
+++ b/src/views/match/order/index.vue
@@ -1,7 +1,33 @@
 <template>
 	<div class="system-menu-container layout-padding">
+		<!-- 统计区块 -->
+		<div class="registration-stats-container">
+			<div class="stats-card" v-loading="statsLoading">
+				<div class="stats-row">
+					<div class="stat-item">
+						<div class="stat-label">原金额</div>
+						<div class="stat-value">{{ animatedCounts.totalOriginalAmount }}<span class="stat-unit">元</span></div>
+					</div>
+					<div class="stat-divider"></div>
+					<div class="stat-item">
+						<div class="stat-label">优惠金额</div>
+						<div class="stat-value">{{ animatedCounts.totalDiscountAmount }}<span class="stat-unit">元</span></div>
+					</div>
+					<div class="stat-divider"></div>
+					<div class="stat-item">
+						<div class="stat-label">实付金额</div>
+						<div class="stat-value">{{ animatedCounts.totalActualAmount }}<span class="stat-unit">元</span></div>
+					</div>
+					<div class="stat-divider"></div>
+					<div class="stat-item">
+						<div class="stat-label">退款金额</div>
+						<div class="stat-value" style="color: #e6a23c;">{{ animatedCounts.totalRefundAmount }}<span class="stat-unit">元</span></div>
+					</div>
+				</div>
+			</div>
+		</div>
 		<ProTable ref="tableRef" :request-api="orderPageGet" :columns="columns" :pagination="true"
-			:tool-button="true">
+			:tool-button="true" @search="fetchStats" @reset="fetchStats">
 			<template #tools>
 				<el-button v-auth="'order:export'" type="primary" :loading="exportLoading" @click="handleExport">
 					<template #icon>
@@ -49,7 +75,8 @@
 			</template>
 			<template #action="scope">
 				<el-button size="small" text type="primary" @click="onOpenMenu(scope.row.id)">
-					查看详情 </el-button>
+					查看详情
+				</el-button>
 			</template>
 		</ProTable>
 
@@ -77,18 +104,76 @@
 	</div>
 </template>
 
-<script setup >
-import { ref, computed } from 'vue';
+<script setup>
+import { ref, computed, onMounted } from 'vue';
 import { ElMessage } from 'element-plus';
 import { Download } from '@element-plus/icons-vue';
 import ProTable from '/@/components/ProTable/index.vue';
-import { orderPageGet , orderDetailGet, orderExportGet } from '/@/api/match/order';
+import { orderPageGet, orderDetailGet, orderExportGet, orderStatsGet } from '/@/api/match/order';
 
 const tableRef = ref();
 const exportLoading = ref(false);
+const statsLoading = ref(false);
+
+// 统计数据
+const statsData = ref({
+    totalOriginalAmount: 0,
+    totalDiscountAmount: 0,
+    totalActualAmount: 0,
+    totalRefundAmount: 0
+});
+
+// 动画计数
+const animatedCounts = ref({
+    totalOriginalAmount: '0.00',
+    totalDiscountAmount: '0.00',
+    totalActualAmount: '0.00',
+    totalRefundAmount: '0.00'
+});
+
+// 数字动画效果
+const animateNumber = (key, targetValue) => {
+    const duration = 1000;
+    const startTime = Date.now();
+    const startValue = parseFloat(animatedCounts.value[key]) || 0;
+
+    const animate = () => {
+        const elapsed = Date.now() - startTime;
+        const progress = Math.min(elapsed / duration, 1);
+        const easeProgress = 1 - Math.pow(1 - progress, 3);
+        const currentValue = startValue + (targetValue - startValue) * easeProgress;
+        animatedCounts.value[key] = currentValue.toFixed(2);
+
+        if (progress < 1) {
+            requestAnimationFrame(animate);
+        }
+    };
+    animate();
+};
+
+// 获取统计数据
+const fetchStats = async () => {
+    try {
+        statsLoading.value = true;
+        await new Promise(resolve => setTimeout(resolve, 200));
+        const searchParams = tableRef.value?.searchParam || {};
+        const { succeeded, data } = await orderStatsGet(searchParams);
+        if (succeeded && data) {
+            statsData.value = data;
+            animateNumber('totalOriginalAmount', data.totalOriginalAmount);
+            animateNumber('totalDiscountAmount', data.totalDiscountAmount);
+            animateNumber('totalActualAmount', data.totalActualAmount);
+            animateNumber('totalRefundAmount', data.totalRefundAmount);
+        }
+    } catch (error) {
+        console.error('获取统计数据失败:', error);
+    } finally {
+        statsLoading.value = false;
+    }
+};
 
 const formData = ref({
-	orderNo: '',
+    orderNo: '',
     eventId: 0,
     eventName: '',
     registrationMode: 0,
@@ -101,187 +186,226 @@ const formData = ref({
     status: 0,
     createdTime: '',
     paidTime: '',
-    items:[],
-	persons:[]
+    items: [],
+    persons: []
 })
 
-
-
 const columns = ref([
-	{ prop: 'orderNo', label: '订单编号', align: 'center', search: { el: 'input', }, fixed: 'left', width: 150 },
-	{ width: 180, prop: 'unitName', label: '单位名称', align: 'center', },
-	{ width: 120, prop: 'eventName', label: '所属赛事', search: { el: 'input', }, },
-	{ width: 120, prop: 'orderType', label: '订单类型', search: { el: 'select', }, enum: [{ label: '全部', value: 0 }, { label: '收款', value: 1 }, { label: '退款', value: 2 },], },
-	{ width: 120, prop: 'relatedOrderNo', label: '关联订单' },
-	{ width: 100, prop: 'paymentMethod', label: '支付方式', search: { el: 'select', }, enum: [{ label: '全部', value: 0 }, { label: '线上', value: 2 }, { label: '线下', value: 1 },], },
-	{ width: 100, prop: 'paymentProofUrl', label: '付款凭证' },
-	{ width: 100, prop: 'registrationMode', label: '报名方式', search: { el: 'select', }, enum: [{ label: '全部', value: 0 }, { label: '个人', value: 1 }, { label: '团队', value: 2 },], },
-	{ width: 120, prop: 'contactName', label: '报名用户' },
-	{ width: 120, prop: 'contactPhone', label: '报名账号', search: { el: 'input' } },
-	{ width: 100, prop: 'originalAmount', label: '原金额' },
-	{ width: 120, prop: 'actualAmount', label: '实付金额' },
-	{ width: 100, prop: 'discountAmount', label: '优惠金额' },
-	{ width: 100, prop: 'refundAmount', label: '退款金额', align: 'center' },
-	{ width: 90, prop: 'orderStatus', label: '订单状态', search: { el: 'select', }, enum: [{ label: '全部', value: '' }, { label: '待支付', value: 0 }, { label: '已支付', value: 1 }, { label: '已退款', value: 3 }, { label: '报名失败', value: 6 },], },
-	{ width: 160, prop: 'createdTime', label: '生成时间', search: { el: 'date-picker', props: { type: 'daterange' } } },
-	{ prop: 'action', label: '操作', align: 'center', fixed: 'right', width: 120, },
+    { prop: 'orderNo', label: '订单编号', align: 'center', search: { el: 'input', }, fixed: 'left', width: 150 },
+    { width: 180, prop: 'unitName', label: '单位名称', align: 'center', },
+    { width: 120, prop: 'eventName', label: '所属赛事', search: { el: 'input', }, },
+    { width: 120, prop: 'orderType', label: '订单类型', search: { el: 'select', }, enum: [{ label: '全部', value: 0 }, { label: '收款', value: 1 }, { label: '退款', value: 2 },], },
+    { width: 120, prop: 'relatedOrderNo', label: '关联订单' },
+    { width: 100, prop: 'paymentMethod', label: '支付方式', search: { el: 'select', }, enum: [{ label: '全部', value: 0 }, { label: '线上', value: 2 }, { label: '线下', value: 1 },], },
+    { width: 100, prop: 'paymentProofUrl', label: '付款凭证' },
+    { width: 100, prop: 'registrationMode', label: '报名方式', search: { el: 'select', }, enum: [{ label: '全部', value: 0 }, { label: '个人', value: 1 }, { label: '团队', value: 2 },], },
+    { width: 120, prop: 'contactName', label: '报名用户' },
+    { width: 120, prop: 'contactPhone', label: '报名账号', search: { el: 'input' } },
+    { width: 100, prop: 'originalAmount', label: '原金额' },
+    { width: 120, prop: 'actualAmount', label: '实付金额' },
+    { width: 100, prop: 'discountAmount', label: '优惠金额' },
+    { width: 100, prop: 'refundAmount', label: '退款金额', align: 'center' },
+    { width: 90, prop: 'orderStatus', label: '订单状态', search: { el: 'select', }, enum: [{ label: '全部', value: '' }, { label: '待支付', value: 0 }, { label: '已支付', value: 1 }, { label: '已退款', value: 3 }, { label: '报名失败', value: 6 },], },
+    { width: 160, prop: 'createdTime', label: '生成时间', search: { el: 'date-picker', props: { type: 'daterange' } } },
+    { prop: 'action', label: '操作', align: 'center', fixed: 'right', width: 120, },
 ]);
 
 const isShowDialog = ref(false);
 const detailLoading = ref(false);
 
 const formatAmount = (value) => {
-	if (value === null || value === undefined || value === '') return '-';
-	const num = Number(value);
-	if (isNaN(num) || num === 0) return '-';
-	return num.toFixed(2);
+    if (value === null || value === undefined || value === '') return '-';
+    const num = Number(value);
+    if (isNaN(num) || num === 0) return '-';
+    return num.toFixed(2);
 };
 
 const formatActualAmount = (row) => {
-	if (row.isRefundOrder) {
-		if (row.relatedOrderActualAmount !== null && row.relatedOrderActualAmount !== undefined) {
-			const num = Number(row.relatedOrderActualAmount);
-			const amountStr = isNaN(num) || num === 0 ? '-' : num.toFixed(2);
-			return amountStr;
-		}
-		return '-';
-	} else {
-		return formatAmount(row.actualAmount);
-	}
-};
-
-const normalizeNames = (value) => {
-	if (Array.isArray(value)) return value.filter(Boolean).join('、');
-	if (typeof value === 'string') return value;
-	return '';
+    if (row.isRefundOrder) {
+        if (row.relatedOrderActualAmount !== null && row.relatedOrderActualAmount !== undefined) {
+            const num = Number(row.relatedOrderActualAmount);
+            const amountStr = isNaN(num) || num === 0 ? '-' : num.toFixed(2);
+            return amountStr;
+        }
+        return '-';
+    } else {
+        return formatAmount(row.actualAmount);
+    }
 };
 
 // ChargeMode 枚举值：0=免费，1=定价（赛事），2=单价（赛事），3=单价（项目）
 // 只有单价（项目）时才显示费用列
 const shouldShowFee = computed(() => {
-	return formData.value?.chargeMode === 3;
+    return formData.value?.chargeMode === 3;
 });
 
 const detailTableData = computed(() => {
-	const items = formData.value?.items ?? [];
-	const persons = formData.value?.persons ?? [];
-	
-	return items.map((item) => {
-		// 方案1: 使用 registrationItemId 进行精确匹配（强一致）
-		let personNamesByItem = persons
-			.filter((p) => String(p?.registrationItemId) === String(item?.id))
-			.map((p) => p?.name)
-			.filter(Boolean);
-		
-		// 方案2: 使用项目ID匹配
-		if (personNamesByItem.length === 0) {
-			personNamesByItem = persons
-				.filter((p) => String(p?.projectId) === String(item?.projectId))
-				.map((p) => p?.name)
-				.filter(Boolean);
-		}
-		
-		// 方案3: 最后保底，用项目名和组名去重匹配
-		if (personNamesByItem.length === 0) {
-			personNamesByItem = [...new Set(
-				persons
-					.filter((p) => p?.groupName === item?.groupName)
-					.map((p) => p?.name)
-					.filter(Boolean)
-			)];
-		}
-		
-		const participantNames = personNamesByItem.length > 0 
-			? personNamesByItem.join('、') 
-			: '-';
-		const fee = item?.fee ?? item?.subtotal ?? ((Number(item?.unitPrice) || 0) * (Number(item?.personCount) || 0));
-		return {
-			projectName: item?.projectName ?? '-',
-			groupName: item?.groupName ?? item?.projectTypeName ?? '-',
-			participantNames,
-			fee,
-		};
-	});
+    const items = formData.value?.items ?? [];
+    const persons = formData.value?.persons ?? [];
+
+    return items.map((item) => {
+        let personNamesByItem = persons
+            .filter((p) => String(p?.registrationItemId) === String(item?.id))
+            .map((p) => p?.name)
+            .filter(Boolean);
+
+        if (personNamesByItem.length === 0) {
+            personNamesByItem = persons
+                .filter((p) => String(p?.projectId) === String(item?.projectId))
+                .map((p) => p?.name)
+                .filter(Boolean);
+        }
+
+        if (personNamesByItem.length === 0) {
+            personNamesByItem = [...new Set(
+                persons
+                    .filter((p) => p?.groupName === item?.groupName)
+                    .map((p) => p?.name)
+                    .filter(Boolean)
+            )];
+        }
+
+        const participantNames = personNamesByItem.length > 0
+            ? personNamesByItem.join('、')
+            : '-';
+        const fee = item?.fee ?? item?.subtotal ?? ((Number(item?.unitPrice) || 0) * (Number(item?.personCount) || 0));
+        return {
+            projectName: item?.projectName ?? '-',
+            groupName: item?.groupName ?? item?.projectTypeName ?? '-',
+            participantNames,
+            fee,
+        };
+    });
 });
 
-const onOpenMenu = async(id) => {
-	if (!id) return;
-	isShowDialog.value = true;
-	detailLoading.value = true;
-	const { succeeded, data } = await orderDetailGet({ id });
-	if (!succeeded) {
-		ElMessage.error('订单详情加载失败');
-		formData.value.items = [];
-		formData.value.persons = [];
-		detailLoading.value = false;
-		return;
-	}
-	formData.value = {
-		...formData.value,
-		...(data ?? {}),
-		items: data?.items ?? [],
-		persons: data?.persons ?? [],
-	};
-	detailLoading.value = false;
-	isShowDialog.value = true;
+const onOpenMenu = async (id) => {
+    if (!id) return;
+    isShowDialog.value = true;
+    detailLoading.value = true;
+    const { succeeded, data } = await orderDetailGet({ id });
+    if (!succeeded) {
+        ElMessage.error('订单详情加载失败');
+        formData.value.items = [];
+        formData.value.persons = [];
+        detailLoading.value = false;
+        return;
+    }
+    formData.value = {
+        ...formData.value,
+        ...(data ?? {}),
+        items: data?.items ?? [],
+        persons: data?.persons ?? [],
+    };
+    detailLoading.value = false;
+    isShowDialog.value = true;
 };
 
 const handleExport = async () => {
-	try {
-		exportLoading.value = true;
-		
-		const searchParams = tableRef.value?.searchParam || {};
-		
-		const response = await orderExportGet(searchParams);
-		
-		const blob = new Blob([response], { 
-			type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
-		});
-		
-		const url = window.URL.createObjectURL(blob);
-		const link = document.createElement('a');
-		link.href = url;
-		link.download = `订单列表_${new Date().getTime()}.xlsx`;
-		document.body.appendChild(link);
-		link.click();
-		document.body.removeChild(link);
-		window.URL.revokeObjectURL(url);
-		
-		ElMessage.success('导出成功');
-	} catch (error) {
-		console.error('导出失败:', error);
-		ElMessage.error('导出失败，请稍后重试');
-	} finally {
-		exportLoading.value = false;
-	}
+    try {
+        exportLoading.value = true;
+
+        const searchParams = tableRef.value?.searchParam || {};
+
+        const response = await orderExportGet(searchParams);
+
+        const blob = new Blob([response], {
+            type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+        });
+
+        const url = window.URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = `订单列表_${new Date().getTime()}.xlsx`;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        window.URL.revokeObjectURL(url);
+
+        ElMessage.success('导出成功');
+    } catch (error) {
+        console.error('导出失败:', error);
+        ElMessage.error('导出失败，请稍后重试');
+    } finally {
+        exportLoading.value = false;
+    }
 };
 
-
+onMounted(() => {
+    fetchStats();
+});
 
 </script>
+
 <style scoped lang="scss">
+.registration-stats-container {
+    margin-bottom: 16px;
+}
+
+.stats-card {
+    background-color: #fff;
+    border-radius: 8px;
+    padding: 24px 32px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
+}
+
+.stats-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    gap: 16px;
+}
+
+.stat-item {
+    flex: 1;
+    text-align: center;
+    min-width: 0;
+}
+
+.stat-label {
+    font-size: 14px;
+    color: #909399;
+    margin-bottom: 8px;
+}
+
+.stat-value {
+    font-size: 28px;
+    font-weight: 600;
+    color: #409eff;
+}
+
+.stat-unit {
+    font-size: 16px;
+    margin-left: 4px;
+}
+
+.stat-divider {
+    width: 1px;
+    height: 60px;
+    background-color: #ebeef5;
+}
+
 .dialog-footer {
-	margin-top: 80px;
+    margin-top: 80px;
 }
 
-/* 时长组合框样式 */
-.duration-row {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-}
+/* 响应式设计 - 移动端垂直排列 */
+@media (max-width: 768px) {
+    .stats-card {
+        padding: 16px;
+    }
 
-.duration-row .el-input {
-	width: 120px;
-}
+    .stats-row {
+        flex-direction: column;
+        gap: 24px;
+    }
 
-.duration-separator {
-	color: #606266;
-	font-size: 14px;
-}
+    .stat-divider {
+        width: 60%;
+        height: 1px;
+    }
 
-.duration-label {
-	color: #909399;
-	font-size: 14px;
+    .stat-value {
+        font-size: 24px;
+    }
 }
-</style>
\ No newline at end of file
+</style>