timi/gao-customer-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add PackageOrderConfigList.vue

Browse Source
This commit is contained in:
Timi
2026-09-18 18:25:31 +08:00
parent 57c4275a23
commit 46ef87e86e
5 changed files with 347 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/package/PackageOrderConfigList.vue
+299
View File
@@ -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
+39 -1
View File
@@ -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
+7
View File
@@ -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
+1
View File
@@ -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
+1
View File
@@ -76,6 +76,7 @@ export type SalesOrder = {
export type SalesOrderPage = {
storeId?: string;
customerId?: string;
packageConfigId?: string;
orderType?: GaoSalesOrderType;
status?: GaoSalesOrderStatus;
paymentStatus?: GaoSalesPaymentStatus;