fix CustomerPackageDetail.vue style

src/pages/package/CustomerPackageDetail.vue

@@ -1,8 +1,16 @@
 <template>
 	<div v-can="permissionCodes.customerPackage.read" class="customer-package-detail">
 		<template v-if="customerPackage">
-			<customer-profile-card class="customer" :customer="customerPackage.customer" v-entrance-transition />
+			<customer-profile-card
-			<t-cell-group class="package" theme="card">
+				class="customer"
+				:customer="customerPackage.customer"
+				v-entrance-transition
+			/>
+			<t-cell-group
+				class="package"
+				theme="card"
+				v-entrance-transition="70"
+			>
 				<t-cell>
 					<template #title>
 						<div class="title">
@@ -30,7 +38,7 @@
 					@click="toPurchaseEventRecord"
 				/>
 			</t-cell-group>
-			<t-cell-group title="金额" theme="card" v-entrance-transition="70">
+			<t-cell-group title="金额" theme="card" v-entrance-transition="140">
 				<t-cell class="amount standard" title="标准价快照" :note="formatPackageAmount(customerPackage.standardAmountSnapshot)" />
 				<t-cell class="amount sale" title="成交价" :note="formatPackageAmount(customerPackage.saleAmount)" />
 				<t-cell class="amount paid" title="已核销收款" :note="formatPackageAmount(customerPackage.paidAmount)" />
@@ -45,12 +53,20 @@
 					hover
 					@click="toPendingFundList"
 				/>
+				<t-cell v-if="canReadFund" title="资金历史" arrow @click="toFundList" />
 			</t-cell-group>
-			<t-cell-group title="状态" theme="card" v-entrance-transition="140">
+			<t-button
+				v-if="canReceivePayment"
+				class="cell-button"
+				theme="primary"
+				@click="toPayment"
+				v-entrance-transition="210"
+			>登记收款</t-button>
+			<t-cell-group title="状态" theme="card" v-entrance-transition="280">
 				<t-cell title="收款状态" :note="getPaymentStatusText(customerPackage.paymentStatus)" />
 				<t-cell title="退款状态" :note="getRefundStatusText(customerPackage.refundStatus)" />
 			</t-cell-group>
-			<card-container description="产品权益" v-entrance-transition="210">
+			<card-container description="产品权益" v-entrance-transition="350">
 				<t-cell-group>
 					<t-cell
 						v-for="item in customerPackage.itemList || []"
@@ -84,42 +100,24 @@
 							</div>
 						</template>
 					</t-cell>
+					<t-cell
+						v-if="canReadDelivery && hasPendingDelivery"
+						title="去核销发放"
+						note="查看待核销的发放记录"
+						arrow
+						@click="toPendingDeliveryList"
+					/>
+					<t-cell v-if="canReadDelivery" title="发放历史" arrow @click="toDeliveryList" />
 					<div v-if="!customerPackage.itemList?.length" class="empty" v-text="'暂无产品权益'" />
 				</t-cell-group>
 			</card-container>
-			<section class="actions" v-entrance-transition="240">
+			<t-button
-				<t-button
+				v-if="canCreateDelivery"
-					v-if="canReceivePayment"
+				class="cell-button"
-					class="action"
+				theme="primary"
-					theme="primary"
+				@click="toDelivery"
-					@click="toPayment"
+				v-entrance-transition="420"
-				>登记收款</t-button>
+			>创建发放单</t-button>
-				<t-button
-					v-if="canCreateDelivery"
-					class="action"
-					theme="primary"
-					@click="toDelivery"
-				>创建发放单</t-button>
-			</section>
-			<t-cell-group title="业务记录" theme="card" v-entrance-transition="280">
-				<t-cell v-if="canReadDelivery" title="发放历史" :note="`${customerPackage.deliveryList?.length || 0} 条`" arrow hover @click="toDeliveryList" />
-				<t-cell v-if="canReadFund" title="资金历史" :note="`${customerPackage.fundRecordList?.length || 0} 条`" arrow hover @click="toFundList" />
-			</t-cell-group>
-			<t-cell-group v-if="customerPackage.deliveryList?.length" title="最近发放记录" theme="card" v-entrance-transition="320">
-				<t-cell
-					v-for="item in customerPackage.deliveryList"
-					:key="item.id"
-					:title="`${getDeliveryOperationText(item.operationType)} · ${getDeliveryStatusText(item.status)}`"
-					:description="item.deliveredAt ? Time.toDateTime(item.deliveredAt) : '时间未知'"
-					arrow
-					hover
-					@click="toDeliveryDetail(item)"
-				>
-					<template #note>
-						<span v-text="getDeliveryItemSummary(item)" />
-					</template>
-				</t-cell>
-			</t-cell-group>
 			<t-button
 				v-if="canCancelPackage"
 				class="cell-button"
@@ -164,19 +162,17 @@
 
 <script setup lang="ts">
 import { BottomPopup } from "timi-tdesign-mobile";
-import { PassTimeLabel, Time } from "timi-web";
+import { PassTimeLabel } from "timi-web";
 import { useUserStore } from "timi-web-api";
 import PackageAPI from "@/api/PackageAPI";
 import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
 import { useCurrentStoreStore } from "@/store/currentStoreStore";
-import type { CustomerPackageStatus, GaoCustomerPackage, GaoPackageDelivery } from "@/types/Package";
+import type { CustomerPackageStatus, GaoCustomerPackage } from "@/types/Package";
 import { getErrorMessage } from "@/utils/error";
 import {
 	canCreatePackageDelivery,
 	formatPackageAmount,
 	getCustomerPackageStatusText,
-	getDeliveryOperationText,
-	getDeliveryStatusText,
 	getPackageQuantityText,
 	getPaymentStatusText,
 	getRefundStatusText,
@@ -204,6 +200,7 @@ const canRefund = computed(() => customerPackage.value?.status === "CANCELLED" &
 const canReadEventRecord = computed(() => userStore.hasPermissions(permissionCodes.eventRecord.read));
 const canReadPackageConfig = computed(() => userStore.hasPermissions(permissionCodes.packageConfig.read));
 const canReadDelivery = computed(() => userStore.hasPermissions(permissionCodes.packageDelivery.read));
+const hasPendingDelivery = computed(() => customerPackage.value?.itemList?.some(item => 0 < Number(item.pendingQuantity)) ?? false);
 const canReadFund = computed(() => userStore.hasPermissions(permissionCodes.fundRecord.read));
 const cancelPopupVisible = ref(false);
 const cancelReason = ref("");
@@ -223,10 +220,6 @@ function getStatusTheme(status?: CustomerPackageStatus): "success" | "default" {
 	return status === "ACTIVE" ? "success" : "default";
 }
 
-function getDeliveryItemSummary(item: GaoPackageDelivery): string {
-	return (item.itemList || []).map(detail => `${detail.productNameSnapshot || "产品"} ${getPackageQuantityText(detail.quantity)} ${detail.unitSnapshot || ""}`).join("、") || "无明细";
-}
-
 async function loadData(): Promise<void> {
 	const id = String(route.params.id || "");
 	if (!id) {
@@ -323,13 +316,23 @@ async function toRefund(): Promise<void> {
 }
 
 async function toDeliveryList(): Promise<void> {
+	await navigateToDeliveryList();
+}
+
+async function toPendingDeliveryList(): Promise<void> {
+	await navigateToDeliveryList(true);
+}
+
+async function navigateToDeliveryList(showPending = false): Promise<void> {
 	if (customerPackage.value?.id) {
+		const query = {
+			customerPackageId: customerPackage.value.id,
+			transitionDepth: String(getCurrentRouteDepth() + 1),
+			...(showPending ? { status: "PENDING" } : {})
+		};
 		await router.push({
 			path: "/management/package-deliveries",
-			query: {
+			query
-				customerPackageId: customerPackage.value.id,
-				transitionDepth: String(getCurrentRouteDepth() + 1)
-			}
 		});
 	}
 }
@@ -353,16 +356,6 @@ async function navigateToFundList(showPendingReceive = false): Promise<void> {
 	}
 }
 
-async function toDeliveryDetail(item: GaoPackageDelivery): Promise<void> {
-	if (item.id) {
-		await router.push({
-			name: "PackageDeliveryDetail",
-			params: { id: item.id },
-			query: { transitionDepth: String(getCurrentRouteDepth() + 1) }
-		});
-	}
-}
-
 function getCurrentRouteDepth(): number {
 	const transitionDepth = Array.isArray(route.query.transitionDepth)
 		? route.query.transitionDepth[0]
@@ -499,19 +492,6 @@ watch(() => route.params.id, loadData);
 		}
 	}
 
-	.actions {
-		gap: 1rem;
-		padding: 0 1rem;
-		display: flex;
-		flex-wrap: wrap;
-
-		.action {
-			--td-button-border-radius: 1rem;
-
-			flex: 1 1 8rem;
-		}
-	}
-
 	:deep(.photo-scroller) {
 		padding: 1rem;
 	}