fix PackagePurchase.vue style

src/components/PackagePurchaseForm.vue

@@ -1,146 +0,0 @@
-<template>
-	<section class="package-purchase-form">
-		<div v-if="props.packageConfig" class="config-summary">
-			<div class="header">
-				<div class="text-bold"  v-text="props.packageConfig.name || '未命名套餐'" />
-				<div class="price">
-					<span class="label gray">标准价：</span>
-					<span class="value red text-bold" v-text="formatPackageAmount(props.packageConfig.standardAmount)" />
-				</div>
-			</div>
-			<div class="description" v-text="props.packageConfig.description" />
-		</div>
-		<div v-else class="center-tips" v-text="'当前购买事件未返回绑定套餐，无法完成购买。'" />
-		<t-form-item label="成交价（元）" label-width="6rem" required-mark>
-			<t-input
-				v-model.trim="saleAmount"
-				type="number"
-				align="right"
-				borderless
-				:readonly="!props.canPriceOverride"
-				placeholder="请输入成交价"
-			/>
-		</t-form-item>
-		<t-form-item label-width="0">
-			<div class="items">
-				<div class="title">
-					<strong>购买权益明细</strong>
-					<span v-if="!props.canPriceOverride">当前账号无定制权限，明细不可修改</span>
-				</div>
-				<t-form-item
-					v-for="(item, index) in itemList"
-					:key="`${index}-${item.productId}-${item.productUnitId}`"
-					class="item"
-					:label="getItemLabel(item)"
-				>
-					<t-input
-						:model-value="item.totalQuantity"
-						type="number"
-						:readonly="!props.canPriceOverride"
-						placeholder="总权益数量"
-						borderless
-						align="right"
-						@update:model-value="updateItemQuantity(index, $event)"
-					>
-						<template #suffix-icon>
-							<span class="unit" v-text="getItemUnit(item)" />
-						</template>
-					</t-input>
-				</t-form-item>
-				<div v-if="!itemList.length" class="center-tips" v-text="'当前套餐暂无权益明细'" />
-			</div>
-		</t-form-item>
-	</section>
-</template>
-
-<script setup lang="ts">
-import type { GaoPackageConfig, PackagePurchaseItem } from "@/types/Package";
-import { formatPackageAmount } from "@/utils/package";
-
-defineOptions({ name: "PackagePurchaseForm" });
-
-interface Props {
-	packageConfig?: GaoPackageConfig;
-	canPriceOverride: boolean;
-}
-
-const props = defineProps<Props>();
-const saleAmount = defineModel<string>("saleAmount", { required: true });
-const itemList = defineModel<PackagePurchaseItem[]>("itemList", { required: true });
-
-function getItemLabel(item: PackagePurchaseItem): string {
-	const configItem = props.packageConfig?.itemList?.find(config => config.productId === item.productId && config.productUnitId === item.productUnitId);
-	return configItem ? `${configItem.productNameSnapshot || "未命名产品"} · ${configItem.unitSnapshot || "未设置单位"}` : "产品权益";
-}
-
-function getItemUnit(item: PackagePurchaseItem): string {
-	return props.packageConfig?.itemList?.find(config => config.productId === item.productId && config.productUnitId === item.productUnitId)?.unitSnapshot || "";
-}
-
-function updateItemQuantity(index: number, value: string | number): void {
-	itemList.value = itemList.value.map((item, itemIndex) => itemIndex === index ? {
-		...item,
-		totalQuantity: String(value)
-	} : item);
-}
-</script>
-
-<style scoped lang="less">
-.package-purchase-form {
-	gap: .75rem;
-	display: grid;
-	margin-top: 1rem;
-
-	.config-summary {
-		gap: .25rem;
-		margin: 0 1rem;
-		padding: .5rem .75rem;
-		display: flex;
-		background: var(--td-error-color-1);
-		border-radius: .75rem;
-		flex-direction: column;
-
-		.header {
-			display: flex;
-			justify-content: space-between;
-
-			.price {
-				display: flex;
-				align-items: baseline;
-
-				.label {
-					font-size: .75rem;
-				}
-
-				.value {
-					font-size: 1.75rem;
-					line-height: 1;
-				}
-			}
-		}
-	}
-
-	.items {
-		gap: .5rem;
-		display: grid;
-
-		.title {
-			font-size: .8125rem;
-			margin-bottom: .5rem;
-		}
-
-		.item {
-			border-radius: 1rem;
-			box-shadow: .25rem .25rem 1rem rgba(0, 0, 0, .08);
-
-			&::after {
-				display: none;
-			}
-
-			.unit {
-				font-size: 1rem;
-			}
-		}
-	}
-}
-</style>

src/pages/package/CustomerPackageDetail.vue

@@ -15,16 +15,6 @@
 				<t-cell v-if="customerPackage.salesOrderId && canReadOrder" title="销售订单" :note="order?.orderNo || customerPackage.salesOrderId" arrow @click="toOrder" />
 				<t-cell v-if="canReadPackageConfig && customerPackage.packageConfigId" title="套餐方案详情" arrow @click="toPackageConfig" />
 			</t-cell-group>
-			<t-cell-group v-if="order" title="订单资金" theme="card" v-entrance-transition="140">
-				<t-cell title="成交金额" :note="formatPackageAmount(order.saleAmount)" />
-				<t-cell title="已生效收款" :note="formatPackageAmount(order.paidAmount)" />
-				<t-cell title="待核销收款" :note="formatPackageAmount(order.pendingPaidAmount)" />
-				<t-cell title="剩余待收款" :note="formatPackageAmount(order.unpaidAmount)" />
-				<t-cell title="有效退款" :note="formatPackageAmount(order.refundedAmount)" />
-				<t-cell title="收款状态" :note="getSalesPaymentStatusText(order.paymentStatus)" />
-				<t-cell title="退款状态" :note="getSalesRefundStatusText(order.refundStatus)" />
-				<t-cell v-if="canReadFund" title="资金流水" arrow @click="toFundRecords" />
-			</t-cell-group>
 			<card-container title="套餐权益" description="权益数量来自客户套餐快照，履约状态来自统一履约单" v-entrance-transition="210">
 				<t-cell-group>
 					<t-cell v-for="item in customerPackage.itemList || []" :key="item.id" class="benefit">
@@ -56,8 +46,20 @@
 			<t-button v-if="canCancel" class="cell-button" theme="danger" @click="openCancel">取消客户套餐</t-button>
 		</template>
 		<t-empty v-else :description="isLoading ? '正在加载客户套餐' : '客户套餐不存在'" />
-		<bottom-popup v-model="cancelVisible" title="取消客户套餐" height="min(35vh, 20rem)" left-button-text="取消" right-button-text="确认取消" @left-button-click="cancelVisible = false" @right-button-click="confirmCancel">
+		<bottom-popup
-			<t-form label-align="top"><t-form-item label="取消原因" required-mark><t-textarea v-model.trim="cancelReason" borderless autosize maxlength="500" placeholder="请输入取消原因" /></t-form-item></t-form>
+			v-model="cancelVisible"
+			title="取消客户套餐"
+			height="min(35vh, 20rem)"
+			left-button-text="取消"
+			:right-button-text="isCancelling ? '取消中' : '确认取消'"
+			@left-button-click="cancelVisible = false"
+			@right-button-click="confirmCancel"
+		>
+			<t-form label-align="top">
+				<t-form-item label="取消原因" required-mark>
+					<t-textarea v-model.trim="cancelReason" borderless autosize maxlength="500" placeholder="请输入取消原因" />
+				</t-form-item>
+			</t-form>
 		</bottom-popup>
 	</div>
 </template>
@@ -73,8 +75,8 @@ import type { GaoCustomerPackage } from "@/types/Package";
 import type { OrderFulfillment } from "@/types/Fulfillment";
 import type { SalesOrder } from "@/types/SalesOrder";
 import { getErrorMessage } from "@/utils/error";
-import { formatPackageAmount, getCustomerPackageStatusText, getPackageQuantityText } from "@/utils/package";
+import { getCustomerPackageStatusText, getPackageQuantityText } from "@/utils/package";
-import { getFulfillmentStatusText, getFulfillmentTypeText, getSalesPaymentStatusText, getSalesRefundStatusText } from "@/utils/salesOrder";
+import { getFulfillmentStatusText, getFulfillmentTypeText } from "@/utils/salesOrder";
 import { Message } from "@/utils/message";
 import { permissionCodes } from "@/utils/permission";
 
@@ -92,7 +94,6 @@ const isCancelling = ref(false);
 const canCancel = computed(() => customerPackage.value?.status === "ACTIVE" && userStore.hasPermissions(permissionCodes.customerPackage.cancel));
 const canCreateFulfillment = computed(() => userStore.hasPermissions(permissionCodes.orderFulfillment.create));
 const canReadOrder = computed(() => userStore.hasPermissions(permissionCodes.salesOrder.read));
-const canReadFund = computed(() => userStore.hasPermissions(permissionCodes.fundRecord.read));
 const canReadPackageConfig = computed(() => userStore.hasPermissions(permissionCodes.packageConfig.read));
 const hasAvailableItem = computed(() => customerPackage.value?.itemList?.some(item => 0 < Number(item.availableQuantity)) ?? false);
 
@@ -114,8 +115,15 @@ async function loadData(): Promise<void> {
 }
 function getStatusTheme(status?: string): "success" | "warning" | "danger" | "default" { return status === "ACTIVE" ? "success" : status === "CANCELLED" ? "danger" : "default"; }
 function getFulfillmentSummary(item: OrderFulfillment): string { return `${item.deliveredAt ? Time.toDateTime(item.deliveredAt) : "时间未知"} · ${(item.itemList || []).length} 项`; }
-async function toOrder(): Promise<void> { if (order.value?.id) await router.push(`/management/sales-orders/${order.value.id}`); }
+async function toOrder(): Promise<void> {
-async function toPackageConfig(): Promise<void> { if (customerPackage.value?.packageConfigId) await router.push(`/management/package-configs/${customerPackage.value.packageConfigId}`); }async function toFundRecords(): Promise<void> { if (order.value?.id) await router.push({ path: "/management/fund-records", query: { salesOrderId: order.value.id } }); }
+	if (order.value?.id) {
+		await router.push({
+			path: `/management/sales-orders/${order.value.id}`,
+			query: { transitionDepth: String(getCurrentRouteDepth() + 1) }
+		});
+	}
+}
+async function toPackageConfig(): Promise<void> { if (customerPackage.value?.packageConfigId) await router.push(`/management/package-configs/${customerPackage.value.packageConfigId}`); }
 async function toFulfillment(id?: string): Promise<void> { if (id) await router.push(`/management/order-fulfillments/${id}`); }
 async function toCreateFulfillment(): Promise<void> {
 	if (order.value?.id && customerPackage.value?.id) {
@@ -127,12 +135,29 @@ async function toCreateFulfillment(): Promise<void> {
 }
 function openCancel(): void { cancelReason.value = ""; cancelVisible.value = true; }
 async function confirmCancel(): Promise<void> {
-	if (!customerPackage.value?.id || !cancelReason.value || isCancelling.value) return;
+	if (isCancelling.value) return;
+	const customerPackageId = customerPackage.value?.id;
+	const reason = cancelReason.value.trim();
+	if (!customerPackageId) return;
+	if (!reason) {
+		Message.warning("取消原因不能为空");
+		return;
+	}
 	isCancelling.value = true;
-	try { await PackageAPI.cancel(customerPackage.value.id, cancelReason.value); cancelVisible.value = false; Message.success("客户套餐已取消"); await loadData(); }
+	try { await PackageAPI.cancel(customerPackageId, reason); cancelVisible.value = false; Message.success("客户套餐已取消"); await loadData(); }
 	catch (error) { Message.error(getErrorMessage(error, "套餐取消失败")); }
 	finally { isCancelling.value = false; }
 }
+function getCurrentRouteDepth(): number {
+	const transitionDepth = Array.isArray(route.query.transitionDepth)
+		? route.query.transitionDepth[0]
+		: route.query.transitionDepth;
+	const depth = Number(transitionDepth);
+	if (transitionDepth && Number.isInteger(depth) && 0 <= depth && depth <= 20) {
+		return depth;
+	}
+	return Number(route.meta.depth ?? 0);
+}
 onMounted(loadData);
 onUnmounted(() => navBarStore.clearRight());
 </script>

src/pages/package/PackagePurchase.vue

@@ -45,12 +45,74 @@
 				v-entrance-transition
 			/>
 			<div v-if="config && !isSaleable" class="saleable-tip red">套餐当前不可购买，请检查套餐状态和有效期</div>
-			<package-purchase-form
+			<section class="package-purchase-form">
-				:package-config="config"
+				<div v-if="config" class="config-summary">
-				:can-price-override="canPriceOverride"
+					<div class="header">
-				v-model:item-list="packagePurchaseItemList"
+						<div class="text-bold" v-text="config.name || '未命名套餐'" />
-				v-model:sale-amount="saleAmountText"
+						<div class="price">
+							<span class="label gray">标准价：</span>
+							<span class="value red text-bold" v-text="formatPackageAmount(config.standardAmount)" />
+						</div>
+					</div>
+					<div class="description" v-text="config.description" />
+				</div>
+				<div v-else class="center-tips" v-text="'当前套餐未返回，无法完成购买。'" />
+				<t-form-item label="成交价（元）" label-width="6rem" required-mark>
+					<t-input
+						v-model.trim="saleAmountText"
+						type="number"
+						align="right"
+						borderless
+						:readonly="!canPriceOverride"
+						placeholder="请输入成交价"
 					/>
+				</t-form-item>
+				<t-form-item label-width="0">
+					<t-form class="items" label-width="2.5rem">
+						<div class="title">
+							<strong>购买权益明细</strong>
+							<span v-if="!canPriceOverride">当前账号无定制权限，明细不可修改</span>
+						</div>
+						<t-form-item
+							v-for="(item, index) in packagePurchaseItemList"
+							:key="`${index}-${item.productId}-${item.productUnitId}`"
+							class="item"
+						>
+							<template #label>
+								<t-image
+									v-if="getItemPhotoURL(item)"
+									:src="getItemPhotoURL(item)"
+									:alt="getItemName(item)"
+									fit="cover"
+									class="avatar"
+								/>
+								<div
+									v-else
+									class="avatar fallback"
+									v-text="getItemName(item).slice(0, 1)"
+								/>
+							</template>
+							<div class="content">
+								<span class="name" v-text="getItemLabel(item)" />
+								<t-input
+									:model-value="item.totalQuantity"
+									type="number"
+									:readonly="!canPriceOverride"
+									placeholder="总权益数量"
+									borderless
+									align="right"
+									@update:model-value="updateItemQuantity(index, $event)"
+								>
+									<template #suffix-icon>
+										<span class="unit" v-text="getItemUnit(item)" />
+									</template>
+								</t-input>
+							</div>
+						</t-form-item>
+						<div v-if="!packagePurchaseItemList.length" class="center-tips" v-text="'当前套餐暂无权益明细'" />
+					</t-form>
+				</t-form-item>
+			</section>
 			<t-form-item label="购买时间" content-align="right">
 				<div class="time-actions">
 					<t-button
@@ -78,6 +140,15 @@
 					placeholder="购买说明"
 				/>
 			</t-form-item>
+			<t-form-item label-width="0">
+				<photo-scroller
+					:model-value="photoUrlList"
+					v-model:photo-items="photoItems"
+					:upload="uploadPhotoList"
+					:edit-mode="true"
+					title="订单照片"
+				/>
+			</t-form-item>
 		</t-form>
 		<customer-selector
 			v-model="selectedCustomerId"
@@ -125,15 +196,19 @@ import CodeScanner from "@/components/CodeScanner.vue";
 import CustomerList from "@/components/CustomerList.vue";
 import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
 import CustomerSelector from "@/components/CustomerSelector.vue";
-import PackagePurchaseForm from "@/components/PackagePurchaseForm.vue";
+import PhotoScroller from "@/components/PhotoScroller.vue";
 import { usePackagePurchase } from "@/pages/package/usePackagePurchase";
 import { useNavBarStore } from "@/store/navBarStore";
 import { useSettingStore } from "@/store/settingStore";
 import type { Customer } from "@/types/Customer";
-import type { GaoPackageConfig } from "@/types/Package";
+import type { PhotoItem } from "@/types/Photo";
+import type { GaoPackageConfig, PackageAttachment, PackagePurchaseItem } from "@/types/Package";
 import { getErrorMessage } from "@/utils/error";
+import { formatPackageAmount } from "@/utils/package";
 import { Message } from "@/utils/message";
 import { permissionCodes } from "@/utils/permission";
+import { uploadPhotoList } from "@/utils/photo";
+import { getProductPhotoURL } from "@/utils/product";
 
 defineOptions({
 	name: "PackagePurchase"
@@ -270,6 +345,16 @@ function parseDateTime(value: string): Date {
 
 const note = ref("");
 const isSaving = ref(false);
+const photoItems = ref<PhotoItem[]>([]);
+const photoUrlList = computed(() => photoItems.value.map(item => item.url));
+
+function buildAttachments(): PackageAttachment[] {
+	return photoItems.value.flatMap(item => item.tempFileId ? [{
+		tempFileId: item.tempFileId,
+		attachType: item.attachType || "PHOTO"
+	}] : []);
+}
+
 const {
 	isSaleable,
 	canPriceOverride,
@@ -284,9 +369,35 @@ const {
 	selectedCustomerList,
 	note,
 	hasPermission: permissionCode => userStore.hasPermissions(permissionCode),
-	buildRegisteredAt: buildPurchasedAt
+	buildRegisteredAt: buildPurchasedAt,
+	buildAttachments
 });
 
+function getItemLabel(item: PackagePurchaseItem): string {
+	const configItem = config.value?.itemList?.find(configItem => configItem.productId === item.productId && configItem.productUnitId === item.productUnitId);
+	return configItem ? `${configItem.productNameSnapshot || "未命名产品"}` : "产品权益";
+}
+
+function getItemName(item: PackagePurchaseItem): string {
+	return config.value?.itemList?.find(configItem => configItem.productId === item.productId && configItem.productUnitId === item.productUnitId)?.productNameSnapshot || "未命名产品";
+}
+
+function getItemPhotoURL(item: PackagePurchaseItem): string {
+	const configItem = config.value?.itemList?.find(configItem => configItem.productId === item.productId && configItem.productUnitId === item.productUnitId);
+	return getProductPhotoURL(configItem?.product || {});
+}
+
+function getItemUnit(item: PackagePurchaseItem): string {
+	return config.value?.itemList?.find(configItem => configItem.productId === item.productId && configItem.productUnitId === item.productUnitId)?.unitSnapshot || "";
+}
+
+function updateItemQuantity(index: number, value: string | number): void {
+	packagePurchaseItemList.value = packagePurchaseItemList.value.map((item, itemIndex) => itemIndex === index ? {
+		...item,
+		totalQuantity: String(value)
+	} : item);
+}
+
 async function submitRecord(): Promise<void> {
 	if (isSaving.value) {
 		return;
@@ -385,6 +496,87 @@ watch(config, value => {
 			align-items: center;
 			justify-content: flex-end;
 		}
+
+		.package-purchase-form {
+			gap: .75rem;
+			display: grid;
+			margin-top: 1rem;
+
+			.config-summary {
+				gap: .25rem;
+				margin: 0 1rem;
+				padding: .5rem .75rem;
+				display: flex;
+				background: var(--td-error-color-1);
+				border-radius: .75rem;
+				flex-direction: column;
+
+				.header {
+					display: flex;
+					justify-content: space-between;
+
+					.price {
+						display: flex;
+						align-items: baseline;
+
+						.label {
+							font-size: .75rem;
+						}
+
+						.value {
+							font-size: 1.75rem;
+							line-height: 1;
+						}
+					}
+				}
+			}
+
+			.items {
+				gap: .5rem;
+				margin: 0;
+				display: grid;
+
+				.title {
+					font-size: .8125rem;
+					margin-bottom: .5rem;
+				}
+
+				.item {
+					padding: 10px;
+					box-shadow: .25rem .25rem 1rem rgba(0, 0, 0, .08);
+					border-radius: 1rem;
+
+					.avatar {
+						width: 2rem;
+						height: 2rem;
+						flex: none;
+						border-radius: .5rem;
+					}
+
+					&::after {
+						display: none;
+					}
+
+					.content {
+						display: flex;
+						height: 2rem;
+						align-items: center;
+						justify-content: space-between;
+
+						.name {
+							min-width: 0;
+							overflow: hidden;
+							text-overflow: ellipsis;
+							white-space: nowrap;
+						}
+					}
+
+					.unit {
+						font-size: 1rem;
+					}
+				}
+			}
+		}
 	}
 
 	.file-input {
@@ -392,6 +584,13 @@ watch(config, value => {
 	}
 }
 
+:deep(.package-purchase-form .avatar .t-image__img) {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	border-radius: inherit;
+}
+
 .selected-customer-popup {
 	height: 70vh;
 	overflow: auto;

src/pages/package/usePackagePurchase.ts

@@ -1,7 +1,7 @@
 import { computed, ref, type Ref } from "vue";
 import PackageAPI from "@/api/PackageAPI";
 import type { Customer } from "@/types/Customer";
-import type { GaoCustomerPackage, GaoPackageConfig, PackagePurchaseItem } from "@/types/Package";
+import type { GaoCustomerPackage, GaoPackageConfig, PackageAttachment, PackagePurchaseItem } from "@/types/Package";
 import { createPackageRequestNo, formatPackageAmountInput, normalizePackageQuantity, parsePackageAmount } from "@/utils/package";
 import { permissionCodes } from "@/utils/permission";
 import { Message } from "@/utils/message";
@@ -12,6 +12,7 @@ interface UsePackagePurchaseOptions {
 	note: Ref<string>;
 	hasPermission: (permissionCode: string) => boolean;
 	buildRegisteredAt: () => number;
+	buildAttachments: () => PackageAttachment[];
 }
 
 /** 套餐配置直接购买流程，购买请求只依赖套餐配置 ID，不再关联购买事件。 */
@@ -76,6 +77,7 @@ export function usePackagePurchase(options: UsePackagePurchaseOptions) {
 			customerId,
 			saleAmount,
 			purchasedAt: options.buildRegisteredAt(),
+			attachmentList: options.buildAttachments(),
 			itemList: packagePurchaseItemList.value.map((item, index) => ({
 				productId: item.productId,
 				productUnitId: item.productUnitId,