add product/order chart

2026-09-06 23:20:26 +08:00
parent 0b01a54eac
commit 9841723177
20 changed files with 2236 additions and 0 deletions
@@ -0,0 +1,123 @@
+<template>
+	<section class="receivable-section">
+		<div class="title-row">
+			<h2 v-text="'应收构成'" />
+			<span class="caption" v-text="'时间范围内创建订单的当前快照'" />
+		</div>
+		<div class="receivable-list">
+			<div v-for="item in detailList" :key="item.label" class="receivable-item">
+				<span v-text="item.label" />
+				<strong v-text="item.value" />
+			</div>
+		</div>
+	</section>
+</template>
+
+<script setup lang="ts">
+import type { GaoSalesOrderReceivableStatView } from "@/types/GaoChart";
+import { formatMoney } from "@/pages/product/component/chartUtils";
+
+type DetailItem = {
+	label: string;
+	value: string;
+};
+
+defineOptions({
+	name: "OrderReceivableCard"
+});
+
+const props = defineProps<{
+	receivable: GaoSalesOrderReceivableStatView;
+}>();
+
+const detailList = computed<DetailItem[]>(() => [
+	{ label: "有效收款", value: formatMoney(props.receivable.paidAmount) },
+	{ label: "待核销", value: formatMoney(props.receivable.pendingPaidAmount) },
+	{ label: "未收", value: formatMoney(props.receivable.unpaidAmount) },
+	{ label: "有效退款", value: formatMoney(props.receivable.refundedAmount) },
+	{ label: "净收款", value: formatMoney(props.receivable.netPaidAmount) }
+]);
+</script>
+
+<style scoped lang="less">
+.receivable-section {
+	padding: 1rem;
+	background: rgba(255, 255, 255, .92);
+	box-shadow: var(--td-shadow-1);
+	border-radius: 1.25rem;
+
+	.title-row {
+		gap: .5rem;
+		display: flex;
+		align-items: baseline;
+		justify-content: space-between;
+	}
+
+	h2 {
+		color: #0f172a;
+		margin: 0 0 .875rem;
+		font-size: 1rem;
+		font-weight: 700;
+	}
+
+	.caption {
+		color: #94a3b8;
+		font-size: .6875rem;
+	}
+
+	.receivable-list {
+		gap: .5rem;
+		display: grid;
+		grid-template-columns: repeat(5, minmax(0, 1fr));
+	}
+
+	.receivable-item {
+		padding: .625rem .5rem;
+		background: rgba(241, 245, 249, .8);
+		border-radius: .75rem;
+
+		span {
+			color: #64748b;
+			display: block;
+			font-size: .6875rem;
+		}
+
+		strong {
+			color: #0f172a;
+			margin-top: .25rem;
+			display: block;
+			font-size: .8125rem;
+			font-weight: 700;
+		}
+	}
+}
+
+:global(html.theme-dark) {
+	.receivable-section {
+		background: rgba(15, 23, 42, .88);
+		box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32);
+
+		h2 {
+			color: #e2e8f0;
+		}
+
+		.receivable-item {
+			background: rgba(30, 41, 59, .88);
+
+			span {
+				color: #94a3b8;
+			}
+
+			strong {
+				color: #e2e8f0;
+			}
+		}
+	}
+}
+
+@media (max-width: 42rem) {
+	.receivable-list {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+}
+</style>