add SalesOrderSummary.vue

src/api/CustomerProductAPI.ts

@@ -0,0 +1,11 @@
+import { axios } from "timi-web-api";
+import { withCurrentStoreId } from "@/utils/store";
+import type { CustomerProduct, CustomerProductPage, CustomerProductPageResult } from "@/types/CustomerProduct";
+
+const URI = "/gao/sales/order/customer-product";
+
+async function list(page: CustomerProductPage): Promise<CustomerProductPageResult<CustomerProduct>> {
+	return await axios.post(`${URI}/list`, withCurrentStoreId(page));
+}
+
+export default { list };

src/api/SalesOrderAPI.ts

@@ -13,6 +13,7 @@ import type {
 	SalesOrderCancelRequest,
 	SalesOrderPage,
 	SalesOrderPageResult,
+	SalesOrderSummary,
 	SalesOrderUpdateRequest
 } from "@/types/SalesOrder";
 
@@ -22,6 +23,9 @@ const FUND_URI = "/gao/fund/record";
 async function list(page: SalesOrderPage): Promise<SalesOrderPageResult<SalesOrder>> {
 	return await axios.post(`${ORDER_URI}/list`, withCurrentStoreId(page));
 }
+async function summary(page: SalesOrderPage): Promise<SalesOrderSummary> {
+	return await axios.post(`${ORDER_URI}/summary`, withCurrentStoreId(page));
+}
 async function detail(id: string): Promise<SalesOrder> {
 	return await axios.post(`${ORDER_URI}/detail`, undefined, { params: { id } });
 }
@@ -75,6 +79,7 @@ async function myReceiveRecordDetail(id: string): Promise<FundRecord> {
 
 export default {
 	list,
+	summary,
 	detail,
 	createDirectProduct,
 	update,

src/pages/salesOrder/SalesOrderList.vue

@@ -59,7 +59,7 @@
 			@refresh="refresh"
 			@scrolltolower="loadMore"
 		>
-			<div v-if="list.length" class="items">
+			<div class="items">
 				<t-cell-group v-if="packageConfigId" class="selected-package" theme="card">
 					<t-cell title="套餐" :note="selectedPackageName">
 						<template #left-icon>
@@ -67,6 +67,11 @@
 						</template>
 					</t-cell>
 				</t-cell-group>
+				<sales-order-summary
+					v-if="customerId"
+					ref="customerOrderSummaryRef"
+					:customer="selectedCustomer"
+				/>
 				<sales-order-list-cell
 					class="item"
 					v-for="(item, index) in list"
@@ -85,8 +90,8 @@
 					@refund="toRefund(item)"
 					@confirm-no-refund="toNoRefund(item)"
 				/>
+				<div v-if="!list.length" class="empty" v-text="loading ? '正在加载销售订单' : '暂无销售订单'" />
 			</div>
-			<div v-else class="center-tips" v-text="loading ? '正在加载销售订单' : '暂无销售订单'" />
 			<div class="center-tips" v-text="loading ? '正在加载' : noMore ? '已经到底了' : '上拉加载更多'" />
 		</t-pull-down-refresh>
 	</div>
@@ -108,6 +113,7 @@ import SalesOrderAPI from "@/api/SalesOrderAPI";
 import CustomerSelector from "@/components/CustomerSelector.vue";
 import NavBarActionMenu from "@/components/NavBarActionMenu.vue";
 import SalesOrderListCell from "@/pages/salesOrder/components/SalesOrderListCell.vue";
+import SalesOrderSummary from "@/pages/salesOrder/components/SalesOrderSummary.vue";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { Customer } from "@/types/Customer";
 import type { GaoPackageConfig } from "@/types/Package";
@@ -157,6 +163,8 @@ type RefundFilter = "ALL" | GaoSalesRefundStatus;
 const status = ref("ALL");
 const paymentStatus = ref<PaymentFilter>("ALL");
 const refundStatus = ref<RefundFilter>("ALL");
+type SalesOrderSummaryExpose = { refresh: () => Promise<void> };
+const customerOrderSummaryRef = ref<SalesOrderSummaryExpose>();
 const list = ref<SalesOrder[]>([]);
 const pageIndex = ref(0);
 const total = ref(0);
@@ -288,6 +296,7 @@ async function fetchList(reset: boolean): Promise<void> {
 
 async function refresh(): Promise<void> {
 	try {
+		await customerOrderSummaryRef.value?.refresh();
 		await fetchList(true);
 	} catch (error) {
 		Message.error(getErrorMessage(error, "销售订单加载失败"));
@@ -494,4 +503,5 @@ onUnmounted(() => { navBarStore.clearRight(); search.cancel(); });
 		text-align: center;
 	}
 }
+
 </style>

src/pages/salesOrder/components/SalesOrderSummary.vue

@@ -0,0 +1,373 @@
+<template>
+	<div class="sales-order-summary">
+		<customer-profile-card :customer="props.customer" />
+		<t-cell-group class="customer-order-summary" theme="card">
+			<t-cell title="订单总数" :note="getOrderSummaryCount()" />
+			<t-cell title="总金额">
+				<template #note>
+					<span class="red" v-text="getOrderSummaryAmount('saleAmount')" />
+				</template>
+			</t-cell>
+			<t-cell title="已收金额">
+				<template #note>
+					<span class="green" v-text="getOrderSummaryAmount('paidAmount')" />
+				</template>
+			</t-cell>
+			<t-cell title="待收金额">
+				<template #note>
+					<span class="orange" v-text="getOrderSummaryAmount('unpaidAmount')" />
+				</template>
+			</t-cell>
+			<t-cell class="products">
+				<template #title>
+					<div class="title">
+						<div>已购产品</div>
+						<div v-if="purchasedProductTagRows.length" class="product-tags">
+							<div class="rows">
+								<div v-for="(row, rowIndex) in purchasedProductTagRows" :key="rowIndex" class="row">
+									<t-tag
+										v-for="(product, productIndex) in row"
+										:key="`${getProductKey(product, productIndex)}-${rowIndex}`"
+										theme="primary"
+										variant="light-outline"
+										:content="getProductTagContent(product)"
+									/>
+								</div>
+							</div>
+						</div>
+					</div>
+				</template>
+			</t-cell>
+			<t-cell class="products">
+				<template #title>
+					<div class="title">
+						<div>可履约产品</div>
+						<div v-if="availableProductTagRows.length" class="product-tags">
+							<div class="rows">
+								<div v-for="(row, rowIndex) in availableProductTagRows" :key="rowIndex" class="row">
+									<t-tag
+										v-for="(product, productIndex) in row"
+										:key="`${getProductKey(product, productIndex)}-${rowIndex}`"
+										theme="warning"
+										variant="light-outline"
+										:content="getProductTagContent(product)"
+									/>
+								</div>
+							</div>
+						</div>
+					</div>
+				</template>
+			</t-cell>
+		</t-cell-group>
+	</div>
+</template>
+
+<script setup lang="ts">
+import CustomerProductAPI from "@/api/CustomerProductAPI";
+import SalesOrderAPI from "@/api/SalesOrderAPI";
+import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
+import type { Customer } from "@/types/Customer";
+import type { CustomerProduct, CustomerProductSummary } from "@/types/CustomerProduct";
+import type { SalesOrderPage, SalesOrderSummary as SalesOrderSummaryData } from "@/types/SalesOrder";
+import { getErrorMessage } from "@/utils/error";
+import { formatPackageAmount, getPackageQuantityText } from "@/utils/package";
+import { Message } from "@/utils/message";
+
+defineOptions({ name: "SalesOrderSummary" });
+
+type OrderSummaryAmountField = "saleAmount" | "paidAmount" | "unpaidAmount";
+
+const props = defineProps<{
+	customer?: Customer;
+}>();
+const customerId = computed(() => props.customer?.id || "");
+const summary = ref<SalesOrderSummaryData>();
+const summaryLoading = ref(false);
+const productSummary = ref<CustomerProduct>();
+const productLoading = ref(false);
+let loadToken = 0;
+const maxProductTagRowCount = 2;
+
+const purchasedProductTagRows = computed(() => {
+	const purchasedProducts = productSummary.value?.purchasedProducts ?? [];
+	return getProductTagRows(purchasedProducts);
+});
+const availableProductTagRows = computed(() => getProductTagRows(productSummary.value?.availableProducts));
+
+function getProductTagRows(products?: CustomerProductSummary[]): CustomerProductSummary[][] {
+	if (!products?.length) {
+		return [];
+	}
+	const rowCount = Math.min(maxProductTagRowCount, products.length);
+	const rowList = Array.from({ length: rowCount }, () => [] as CustomerProductSummary[]);
+	products.forEach((product, index) => {
+		rowList[index % rowCount].push(product);
+	});
+	return rowList;
+}
+
+function getOrderSummaryCount(): string {
+	return summaryLoading.value ? "加载中" : String(summary.value?.orderCount ?? 0);
+}
+
+function getOrderSummaryAmount(field: OrderSummaryAmountField): string {
+	if (summaryLoading.value) {
+		return "加载中";
+	}
+	return `￥${formatPackageAmount(summary.value?.[field] ?? 0)}`;
+}
+
+function getProductKey(product: CustomerProductSummary, index: number): string {
+	return `${product.productIdSnapshot || product.productName || "product"}-${product.unit || "unit"}-${index}`;
+}
+
+function getProductQuantity(product: CustomerProductSummary): string {
+	return getPackageQuantityText(product.quantity);
+}
+
+function getProductTagContent(product: CustomerProductSummary): string {
+	return `${product.productName || "未命名产品"} × ${getProductQuantity(product)}${product.unit || "基础单位"}`;
+}
+
+async function loadOrderSummary(customerId: string, token: number): Promise<void> {
+	try {
+		const request: SalesOrderPage = { customerId, index: 0, size: 1 };
+		const result = await SalesOrderAPI.summary(request);
+		if (token === loadToken) {
+			summary.value = result;
+		}
+	} catch (error) {
+		if (token === loadToken) {
+			summary.value = undefined;
+			Message.error(getErrorMessage(error, "订单汇总加载失败"));
+		}
+	} finally {
+		if (token === loadToken) {
+			summaryLoading.value = false;
+		}
+	}
+}
+
+async function loadProductSummary(customerId: string, token: number): Promise<void> {
+	try {
+		const result = await CustomerProductAPI.list({ customerId, index: 0, size: 1 });
+		if (token === loadToken) {
+			productSummary.value = result.list?.[0];
+		}
+	} catch (error) {
+		if (token === loadToken) {
+			productSummary.value = undefined;
+			Message.error(getErrorMessage(error, "客户产品汇总加载失败"));
+		}
+	} finally {
+		if (token === loadToken) {
+			productLoading.value = false;
+		}
+	}
+}
+
+async function loadData(): Promise<void> {
+	const token = ++loadToken;
+	const currentCustomerId = customerId.value;
+	if (!currentCustomerId) {
+		summary.value = undefined;
+		productSummary.value = undefined;
+		summaryLoading.value = false;
+		productLoading.value = false;
+		return;
+	}
+	summaryLoading.value = true;
+	productLoading.value = true;
+	await Promise.all([
+		loadOrderSummary(currentCustomerId, token),
+		loadProductSummary(currentCustomerId, token)
+	]);
+}
+
+async function refresh(): Promise<void> {
+	await loadData();
+}
+
+defineExpose({ refresh });
+watch(customerId, async () => {
+	await loadData();
+}, { immediate: true });
+</script>
+
+<style scoped lang="less">
+.sales-order-summary {
+	gap: 1rem;
+	display: flex;
+	min-width: 0;
+	flex-direction: column;
+
+	.customer-order-summary {
+
+		:deep(.t-cell-group) {
+			margin: 0;
+		}
+	}
+
+	.products {
+
+		.title,
+		:deep(.t-cell__title) {
+			width: 100%;
+			overflow: hidden;
+			min-width: 0;
+			max-width: 100%;
+			margin-right: 0;
+		}
+
+	.product-tags {
+			gap: .5rem;
+			width: 100%;
+			min-width: 0;
+			max-width: 100%;
+			display: flex;
+			padding: .25rem 0 .5rem;
+			overflow-x: auto;
+			overflow-y: hidden;
+			flex-wrap: nowrap;
+			touch-action: pan-x;
+			scrollbar-width: none;
+			-webkit-overflow-scrolling: touch;
+
+			&::-webkit-scrollbar {
+				display: none;
+			}
+
+			.rows {
+				gap: .25rem;
+				width: max-content;
+				display: flex;
+				flex-direction: column;
+
+				.row {
+					gap: .25rem;
+					display: flex;
+					white-space: nowrap;
+				}
+			}
+		}
+	}
+}
+
+.customer-product-summary {
+	min-width: 0;
+
+	:deep(.t-cell-group) {
+		margin: 0;
+	}
+
+	.summary-line {
+		min-width: 0;
+
+		:deep(.t-cell__title) {
+			min-width: 0;
+			width: 100%;
+		}
+
+		:deep(.t-cell__description) {
+			min-width: 0;
+			width: 100%;
+			max-width: 100%;
+			overflow: hidden;
+		}
+
+		.line-label {
+			color: var(--td-text-color-secondary);
+			font-weight: 600;
+		}
+
+		.available-label {
+			color: var(--td-success-color);
+		}
+
+		.product-scroll,
+		.product-tags {
+			gap: .5rem;
+			width: 100%;
+			min-width: 0;
+			max-width: 100%;
+			display: flex;
+			padding: .25rem 0 .5rem;
+			overflow-x: auto;
+			overflow-y: hidden;
+			flex-wrap: nowrap;
+			touch-action: pan-x;
+			scrollbar-width: none;
+			-webkit-overflow-scrolling: touch;
+
+			&::-webkit-scrollbar {
+				display: none;
+			}
+
+			.product {
+				gap: .25rem;
+				flex: 0 0 auto;
+				min-width: 7rem;
+				max-width: 12rem;
+				display: flex;
+				border: 1px solid var(--td-component-border);
+				padding: .5rem .625rem;
+				background: var(--td-bg-color-container-hover);
+				border-radius: .5rem;
+				flex-direction: column;
+				align-items: flex-start;
+
+				.product-name {
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+				}
+
+				.quantity {
+					color: var(--td-text-color-primary);
+					font-size: .875rem;
+				}
+
+				.unit {
+					color: var(--td-text-color-secondary);
+					font-size: .75rem;
+				}
+			}
+
+			.available-product {
+				border-color: var(--td-success-color-3);
+				background: var(--td-success-color-1);
+			}
+
+			.rows {
+				gap: .5rem;
+				width: max-content;
+				display: flex;
+				flex-direction: column;
+			}
+
+			.row {
+				gap: .5rem;
+				display: flex;
+				white-space: nowrap;
+			}
+
+			:deep(.t-tag) {
+				flex: 0 0 auto;
+			}
+		}
+
+		.empty-products {
+			color: var(--td-text-color-placeholder);
+			padding: .25rem 0 .5rem;
+		}
+	}
+}
+
+@media (max-width: 42rem) {
+	.customer-order-summary {
+		.order-summary-grid {
+			grid-template-columns: repeat(2, minmax(0, 1fr));
+		}
+	}
+}
+</style>

src/types/CustomerProduct.ts

@@ -0,0 +1,30 @@
+import type { Model, PageResult } from "timi-web-api";
+import type { Customer } from "@/types/Customer";
+import type { GaoSalesOrderItemType } from "@/types/SalesOrder";
+
+/** 客户产品汇总。 */
+export type CustomerProduct = {
+	customer?: Customer;
+	orderCount?: number;
+	purchasedProducts?: CustomerProductSummary[];
+	availableProducts?: CustomerProductSummary[];
+} & Model;
+
+/** 客户产品汇总项。 */
+export type CustomerProductSummary = {
+	productIdSnapshot?: string;
+	productName?: string;
+	quantity?: number | string;
+	unit?: string;
+};
+
+export type CustomerProductPage = {
+	storeId?: string;
+	customerId?: string;
+	keyword?: string;
+	itemType?: GaoSalesOrderItemType;
+	index: number;
+	size: number;
+};
+
+export type CustomerProductPageResult<T> = PageResult<T> & { pages?: number };

src/types/SalesOrder.ts

@@ -207,3 +207,10 @@ export type FundRecordPage = {
 };
 
 export type SalesOrderPageResult<T> = PageResult<T> & { pages?: number };
+
+export type SalesOrderSummary = {
+	orderCount?: number;
+	saleAmount?: number;
+	paidAmount?: number;
+	unpaidAmount?: number;
+};