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

update CustomerPackagePayment.vue info

Browse Source
This commit is contained in:
Timi
2026-09-02 15:18:40 +08:00
parent a33260a2c0
commit 7f669621fb
1 changed files with 54 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/package/CustomerPackagePayment.vue
+54 -4
View File
@@ -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 title="已核销收款" :note="formatPackageAmount(customerPackage.paidAmount)" />
<t-cell title="待核销收款" :note="formatPackageAmount(customerPackage.pendingPaidAmount)" />
<t-cell class="amount sale" title="成交价" :note="formatPackageAmount(customerPackage.saleAmount)" />
<t-cell class="amount paid" title="已核销收款" :note="formatPackageAmount(customerPackage.paidAmount)" />
<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;
}