update CustomerPackagePayment.vue info

src/pages/package/CustomerPackagePayment.vue

@@ -1,10 +1,17 @@
 <template>
 	<div v-can="permissionCodes.fundReceive.create" class="package-operation-edit">
+		<customer-profile-card
+			v-if="customerPackage"
+			class="customer"
+			:customer="customerPackage.customer"
+			v-entrance-transition
+		/>
 		<t-cell-group v-if="customerPackage" title="收款信息" theme="card" v-entrance-transition>
 			<t-cell title="客户套餐" :note="customerPackage.packageNameSnapshot || '未命名套餐'" />
-			<t-cell title="成交价" :note="formatPackageAmount(customerPackage.saleAmount)" />
+			<t-cell class="amount sale" title="成交价" :note="formatPackageAmount(customerPackage.saleAmount)" />
-			<t-cell title="已核销收款" :note="formatPackageAmount(customerPackage.paidAmount)" />
+			<t-cell class="amount paid" title="已核销收款" :note="formatPackageAmount(customerPackage.paidAmount)" />
-			<t-cell title="待核销收款" :note="formatPackageAmount(customerPackage.pendingPaidAmount)" />
+			<t-cell class="amount pending" title="待核销收款" :note="formatPackageAmount(customerPackage.pendingPaidAmount)" />
+			<t-cell class="amount remaining" title="剩余待收款" :note="formatPackageAmount(getRemainingReceivableAmount(customerPackage))" />
 		</t-cell-group>
 		<t-form v-if="customerPackage" class="form" label-align="left" label-width="7rem" v-entrance-transition="70">
 			<t-form-item label="本次收款（元）" required-mark>
@@ -52,6 +59,7 @@
 import { Time } from "timi-web";
 import { useUserStore } from "timi-web-api";
 import PackageAPI from "@/api/PackageAPI";
+import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
 import PackagePhotoField from "@/components/PackagePhotoField.vue";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { GaoCustomerPackage, PackageAttachment } from "@/types/Package";
@@ -77,6 +85,15 @@ const occurredPickerVisible = ref(false);
 const remark = ref("");
 const photoItems = ref<PhotoItem[]>([]);
 
+/** 计算扣除已核销和待核销收款后的剩余待收款金额。 */
+function getRemainingReceivableAmount(packageEntity: GaoCustomerPackage): number | undefined {
+	if (packageEntity.saleAmount === undefined) {
+		return undefined;
+	}
+	const remainingAmount = packageEntity.saleAmount - (packageEntity.paidAmount || 0) - (packageEntity.pendingPaidAmount || 0);
+	return 0 < remainingAmount ? remainingAmount : 0;
+}
+
 function resolveTimestamp(value: string): number | undefined {
 	if (!value) {
 		return undefined;
@@ -154,7 +171,7 @@ async function save(): Promise<void> {
 
 onMounted(async () => {
 	if (userStore.hasPermissions(permissionCodes.fundReceive.create)) {
-		navBarStore.setRightText("提交收款", "var(--td-brand-color)", save);
+		navBarStore.setRightText("提交", "var(--td-brand-color)", save);
 	}
 	await loadData();
 });
@@ -169,6 +186,39 @@ onUnmounted(() => navBarStore.clearRight());
 	display: flex;
 	flex-direction: column;
 
+	.customer {
+		margin: 0 1rem;
+	}
+
+	.amount {
+
+		:deep(.t-cell__note) {
+			font-weight: bold;
+		}
+
+		:deep(.t-cell__title-text),
+		:deep(.t-cell__note) {
+			color: var(--td-text-color-secondary);
+		}
+
+		&.sale :deep(.t-cell__title-text),
+		&.sale :deep(.t-cell__note) {
+			color: var(--td-brand-color);
+		}
+
+		&.paid :deep(.t-cell__title-text),
+		&.paid :deep(.t-cell__note) {
+			color: var(--td-success-color);
+		}
+
+		&.pending :deep(.t-cell__title-text),
+		&.pending :deep(.t-cell__note),
+		&.remaining :deep(.t-cell__title-text),
+		&.remaining :deep(.t-cell__note) {
+			color: var(--td-warning-color);
+		}
+	}
+
 	.form {
 		border-radius: .75rem;
 	}