add PackageOrderConfigList.vue

src/pages/package/PackageOrderConfigList.vue

@@ -0,0 +1,299 @@
+<template>
+	<div v-can="permissionCodes.packageConfig.read" class="package-order-config-list">
+		<div class="filters">
+			<t-input
+				v-model.trim="keyword"
+				class="keyword"
+				borderless
+				clearable
+				placeholder="搜索套餐名称或说明"
+			/>
+			<t-dropdown-menu class="status">
+				<t-dropdown-item
+					v-model="status"
+					label="状态"
+					:options="statusOptions"
+					@change="selectStatus"
+				/>
+			</t-dropdown-menu>
+		</div>
+		<t-pull-down-refresh
+			v-model="refreshing"
+			:refresh-timeout="30000"
+			@refresh="reload"
+			@scrolltolower="loadMore"
+		>
+			<t-cell-group
+				v-if="configList.length"
+				class="list fix-last-cell-line empty-cell-title-margin"
+				theme="card"
+			>
+				<t-cell
+					v-for="(item, index) in configList"
+					:key="item.id"
+					class="item"
+					arrow
+					v-entrance-transition="index * 30"
+					@click="selectConfig(item)"
+				>
+					<template #title>
+						<div class="title">
+							<strong class="name clip-text" v-text="item.name || '未命名套餐'" />
+							<t-tag :content="getPackageConfigStatusText(item.status)" variant="light-outline" :theme="getStatusTheme(item.status)" />
+						</div>
+					</template>
+					<template #description>
+						<div class="description">
+							<div class="products">
+								<t-tag
+									v-for="productItem in item.itemList || []"
+									:key="productItem.id || `${productItem.skuId}-${productItem.skuUnitId}`"
+									:content="getProductText(productItem)"
+									theme="primary"
+									variant="light"
+								/>
+								<t-tag v-if="!item.itemList?.length" content="暂无产品权益" />
+							</div>
+							<div class="price">
+								<span class="label gray">标准价：</span>
+								<span class="value red" v-text="formatPackageAmount(item.standardAmount)" />
+							</div>
+						</div>
+					</template>
+				</t-cell>
+			</t-cell-group>
+			<div v-else class="center-tips" v-text="loading ? '正在加载套餐' : '暂无套餐'" />
+			<div class="center-tips" v-text="loadStateText" />
+		</t-pull-down-refresh>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { type DropdownValue } from "tdesign-mobile-vue";
+import { Toolkit } from "timi-web";
+import PackageAPI from "@/api/PackageAPI";
+import { useNavBarStore } from "@/store/navBarStore";
+import type { GaoPackageConfig, PackageConfigItem, PackageConfigStatus } from "@/types/Package";
+import { getErrorMessage } from "@/utils/error";
+import { Message } from "@/utils/message";
+import { formatPackageAmount, getPackageConfigStatusText, getPackageQuantityText } from "@/utils/package";
+import { permissionCodes } from "@/utils/permission";
+import { getProductSkuSnapshotText } from "@/utils/product";
+
+defineOptions({ name: "PackageOrderConfigList" });
+
+const route = useRoute();
+const router = useRouter();
+const navBarStore = useNavBarStore();
+
+const keyword = ref("");
+const status = ref("ALL");
+const configList = ref<GaoPackageConfig[]>([]);
+const pageIndex = ref(0);
+const total = ref(0);
+const loading = ref(false);
+const refreshing = ref(false);
+const noMore = ref(false);
+const pageSize = 15;
+const statusOptions = [
+	{ label: "全部状态", value: "ALL" },
+	{ label: "草稿", value: "DRAFT" },
+	{ label: "启用", value: "ACTIVE" },
+	{ label: "停用", value: "INACTIVE" }
+];
+const loadStateText = computed(() => loading.value ? "正在加载" : noMore.value ? "已经到底了" : "上拉加载更多");
+
+async function loadMore(): Promise<void> {
+	if (loading.value || noMore.value) {
+		return;
+	}
+	loading.value = true;
+	try {
+		const result = await PackageAPI.configList({
+			index: pageIndex.value,
+			size: pageSize,
+			keyword: keyword.value || undefined,
+			status: status.value === "ALL" ? undefined : status.value as PackageConfigStatus
+		});
+		const rows = result.list || [];
+		configList.value = configList.value.concat(rows);
+		total.value = result.total || 0;
+		pageIndex.value += 1;
+		noMore.value = rows.length < pageSize || total.value <= configList.value.length;
+	} finally {
+		loading.value = false;
+	}
+}
+
+async function reload(): Promise<void> {
+	if (loading.value) {
+		return;
+	}
+	pageIndex.value = 0;
+	configList.value = [];
+	total.value = 0;
+	noMore.value = false;
+	try {
+		await loadMore();
+	} catch (error) {
+		Message.error(getErrorMessage(error, "套餐加载失败"));
+	} finally {
+		refreshing.value = false;
+	}
+}
+
+async function selectStatus(value: DropdownValue): Promise<void> {
+	if (Array.isArray(value)) {
+		return;
+	}
+	status.value = String(value);
+	await reload();
+}
+
+const reloadByKeyword = Toolkit.debounce(async () => {
+	await reload();
+}, false);
+
+watch(keyword, () => {
+	reloadByKeyword();
+});
+
+async function selectConfig(config: GaoPackageConfig): Promise<void> {
+	if (!config.id) {
+		return;
+	}
+	await router.push({
+		name: "SalesOrderList",
+		query: {
+			orderType: "PACKAGE",
+			packageConfigId: config.id,
+			packageConfigName: config.name || "未命名套餐",
+			transitionDepth: String(Number(route.meta.depth ?? 0) + 1)
+		}
+	});
+}
+
+function getStatusTheme(statusValue?: PackageConfigStatus): "success" | "warning" | "default" {
+	return statusValue === "ACTIVE" ? "success" : statusValue === "INACTIVE" ? "warning" : "default";
+}
+
+function getProductText(item: PackageConfigItem): string {
+	const quantity = getPackageQuantityText(item.defaultQuantity);
+	const skuText = getProductSkuSnapshotText(item.productNameSnapshot, item.skuNameSnapshot, item.specSummarySnapshot);
+	return `${item.productNameSnapshot || "未命名产品"}${skuText ? ` · ${skuText}` : ""} × ${quantity}${item.unitSnapshot ? ` ${item.unitSnapshot}` : ""}`;
+}
+
+onMounted(async () => {
+	navBarStore.clearRight();
+	try {
+		await reload();
+	} catch (error) {
+		Message.error(getErrorMessage(error, "套餐加载失败"));
+	}
+});
+
+onUnmounted(() => {
+	navBarStore.clearRight();
+	reloadByKeyword.cancel();
+});
+</script>
+
+<style scoped lang="less">
+.package-order-config-list {
+	padding: var(--app-nav-height) 0 1rem;
+
+	.filters {
+		top: var(--app-nav-height);
+		left: 0;
+		right: 0;
+		z-index: 10;
+		gap: .5rem;
+		display: flex;
+		padding: .75rem 1rem;
+		position: sticky;
+		background: var(--td-bg-color-page);
+		box-shadow: var(--td-shadow-1);
+
+		.keyword {
+			--td-input-vertical-padding: .25rem 1rem;
+
+			flex: 1;
+			border: 1px solid var(--td-component-border);
+			z-index: 1;
+			background: var(--td-bg-color-container);
+			border-radius: 1rem;
+		}
+
+		.status {
+			--td-spacer: 4px;
+			--td-spacer-1: 6px;
+
+			border: 1px solid rgba(148, 163, 184, .18);
+			margin-left: -2rem;
+			padding-left: 2rem;
+			border-radius: 1rem;
+
+			&:after {
+				display: none;
+			}
+		}
+	}
+
+	.list {
+		gap: 1rem;
+		display: flex;
+		padding-top: 1rem;
+		flex-direction: column;
+
+		.item {
+			padding: 10px;
+			min-width: 0;
+
+			:deep(.t-cell__title) {
+				min-width: 0;
+			}
+
+			.title {
+				gap: .5rem;
+				flex: 1;
+				display: flex;
+				min-width: 0;
+				align-items: center;
+				justify-content: space-between;
+			}
+
+			.description {
+				display: flex;
+				min-width: 0;
+				flex-direction: column;
+
+				.products {
+					gap: .35rem;
+					display: flex;
+					margin-top: .5rem;
+					overflow-x: auto;
+					white-space: nowrap;
+					scrollbar-width: none;
+
+					:deep(.t-tag) {
+						flex: 0 0 auto;
+					}
+
+					&::-webkit-scrollbar {
+						display: none;
+					}
+				}
+
+				.price {
+					margin-top: .5rem;
+					text-align: right;
+
+					.value {
+						font-size: 1.1rem;
+					}
+				}
+			}
+		}
+	}
+}
+</style>

src/pages/salesOrder/SalesOrderList.vue

@@ -32,6 +32,7 @@
 			</div>
 			<t-dropdown-menu class="menus">
 				<t-dropdown-item
+					v-if="!packageConfigId"
 					v-model="orderType"
 					label="订单类型"
 					:options="orderTypeOptions"
@@ -59,6 +60,13 @@
 			@scrolltolower="loadMore"
 		>
 			<div v-if="list.length" class="items">
+				<t-cell-group v-if="packageConfigId" class="selected-package" theme="card">
+					<t-cell title="套餐" :note="selectedPackageName">
+						<template #left-icon>
+							<t-icon name="layers" />
+						</template>
+					</t-cell>
+				</t-cell-group>
 				<sales-order-list-cell
 					class="item"
 					v-for="(item, index) in list"
@@ -95,12 +103,14 @@ import { type DropdownValue } from "tdesign-mobile-vue";
 import { Toolkit } from "timi-web";
 import { useUserStore } from "timi-web-api";
 import CustomerAPI from "@/api/CustomerAPI";
+import PackageAPI from "@/api/PackageAPI";
 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 { useNavBarStore } from "@/store/navBarStore";
 import type { Customer } from "@/types/Customer";
+import type { GaoPackageConfig } from "@/types/Package";
 import type { GaoSalesOrderStatus, GaoSalesOrderType, GaoSalesPaymentStatus, GaoSalesRefundStatus, SalesOrder, SalesOrderPage } from "@/types/SalesOrder";
 import { getErrorMessage } from "@/utils/error";
 import { Message } from "@/utils/message";
@@ -139,6 +149,7 @@ const customerId = ref("");
 const selectedCustomer = ref<Customer>();
 const customerSelectorVisible = ref(false);
 let customerKeyword = "";
+const selectedPackage = ref<GaoPackageConfig>();
 const orderType = ref("ALL");
 type PaymentFilter = "ALL" | GaoSalesPaymentStatus | "PENDING_RECEIVE";
 type RefundFilter = "ALL" | GaoSalesRefundStatus;
@@ -180,6 +191,8 @@ const refundOptions = [
 
 const routeFilterKey = computed(() => [
 	route.query.customerId,
+	route.query.packageConfigId,
+	route.query.packageConfigName,
 	route.query.orderType,
 	route.query.status,
 	route.query.paymentStatus,
@@ -191,15 +204,30 @@ function queryValue(value: unknown): string {
 	return Array.isArray(value) ? "" : typeof value === "string" ? value : "";
 }
 
+const packageConfigId = computed(() => queryValue(route.query.packageConfigId));
+const selectedPackageName = computed(() => selectedPackage.value?.name || queryValue(route.query.packageConfigName) || "未命名套餐");
+
 function applyRouteFilters(): void {
 	const pendingReceive = queryValue(route.query.pendingReceive) === "true";
 	customerId.value = queryValue(route.query.customerId);
-	orderType.value = queryValue(route.query.orderType) || "ALL";
+	orderType.value = packageConfigId.value ? "PACKAGE" : queryValue(route.query.orderType) || "ALL";
 	status.value = queryValue(route.query.status) || "ALL";
 	paymentStatus.value = pendingReceive ? "PENDING_RECEIVE" : queryValue(route.query.paymentStatus) as PaymentFilter || "ALL";
 	refundStatus.value = queryValue(route.query.refundStatus) as RefundFilter || "ALL";
 }
 
+async function loadRoutePackage(): Promise<void> {
+	selectedPackage.value = undefined;
+	if (!packageConfigId.value) {
+		return;
+	}
+	try {
+		selectedPackage.value = await PackageAPI.configDetail(packageConfigId.value);
+	} catch {
+		return;
+	}
+}
+
 function setCustomerKeyword(customer: Customer): void {
 	const value = customer.name?.trim() || customer.code?.trim() || "";
 	customerId.value = customer.id || "";
@@ -232,6 +260,7 @@ function buildPageFilter(): SalesOrderPage {
 	const pendingReceive = paymentStatus.value === "PENDING_RECEIVE";
 	return {
 		customerId: customerId.value || undefined,
+		packageConfigId: packageConfigId.value || undefined,
 		keyword: keyword.value || undefined,
 		orderType: orderType.value === "ALL" ? undefined : orderType.value as GaoSalesOrderType,
 		status: status.value === "ALL" ? undefined : status.value as GaoSalesOrderStatus,
@@ -351,6 +380,7 @@ watch(routeFilterKey, async () => {
 	} catch {
 		selectedCustomer.value = undefined;
 	}
+	await loadRoutePackage();
 	await fetchList(true);
 });
 onMounted(async () => {
@@ -359,6 +389,7 @@ onMounted(async () => {
 	applyRouteFilters();
 	try {
 		await loadRouteCustomer();
+		await loadRoutePackage();
 		await fetchList(true);
 	} catch (error) {
 		Message.error(getErrorMessage(error, "销售订单加载失败"));
@@ -444,6 +475,13 @@ onUnmounted(() => { navBarStore.clearRight(); search.cancel(); });
 			padding: 0 1rem;
 			flex-direction: column;
 
+			.selected-package {
+
+				:deep(.t-cell-group) {
+					margin: 0;
+				}
+			}
+
 			.item {
 				border-radius: 1rem;
 			}

src/pages/tabs/ProductTab.vue

@@ -116,6 +116,13 @@ const menuGroupList = computed<MenuGroup[]>(() => [
 				path: "/management/package-configs",
 				title: "套餐配置",
 				visible: userStore.hasPermissions(permissionCodes.packageConfig.read)
+			},
+			{
+				icon: "task",
+				path: "/management/package-orders",
+				title: "套餐订单",
+				visible: userStore.hasPermissions(permissionCodes.packageConfig.read)
+					&& userStore.hasPermissions(permissionCodes.salesOrder.read)
 			}
 		]
 	},

src/router/routes/packageRoutes.ts

@@ -6,6 +6,7 @@ function pageMeta(title: string, depth = 3, background = "#F5F5F8"): RouteRecord
 
 export default [
 	{ path: "/management/package-configs", name: "PackageConfigList", component: () => import("@/pages/package/PackageConfigList.vue"), meta: pageMeta("套餐配置") },
+	{ path: "/management/package-orders", name: "PackageOrderConfigList", component: () => import("@/pages/package/PackageOrderConfigList.vue"), meta: pageMeta("选择套餐") },
 	{ path: "/management/package-configs/create", name: "PackageConfigCreate", component: () => import("@/pages/package/PackageConfigEdit.vue"), meta: pageMeta("新增套餐配置", 4) },
 	{ path: "/management/package-configs/:id", name: "PackageConfigDetail", component: () => import("@/pages/package/PackageConfigDetail.vue"), meta: pageMeta("套餐配置详情", 4) },
 	{ path: "/management/package-configs/:id/edit", name: "PackageConfigEdit", component: () => import("@/pages/package/PackageConfigEdit.vue"), meta: pageMeta("编辑套餐配置", 5) },

src/types/SalesOrder.ts

@@ -76,6 +76,7 @@ export type SalesOrder = {
 export type SalesOrderPage = {
 	storeId?: string;
 	customerId?: string;
+	packageConfigId?: string;
 	orderType?: GaoSalesOrderType;
 	status?: GaoSalesOrderStatus;
 	paymentStatus?: GaoSalesPaymentStatus;