add customer for FundRecordList.vue

src/pages/salesOrder/FundRecordList.vue

@@ -18,7 +18,7 @@
 			</t-dropdown-menu>
 		</div>
 		<t-pull-down-refresh v-model="isRefreshing" :refresh-timeout="30000" @refresh="reload" @scrolltolower="loadMore">
-			<t-cell-group v-if="recordList.length" theme="card">
+			<t-cell-group v-if="recordList.length" class="empty-cell-title-margin" theme="card">
 				<t-cell
 					class="item"
 					v-for="(item, index) in recordList"
@@ -27,47 +27,59 @@
 					v-entrance-transition="index * 30"
 					@click="toDetail(item)"
 				>
+					<template #leftIcon>
+						<t-image
+							v-if="getCustomerPhotoURL(item.customer, 64)"
+							:src="getCustomerPhotoURL(item.customer, 64)"
+							:alt="getCustomerText(item)"
+							fit="cover"
+							class="avatar"
+						/>
+						<div v-else class="avatar fallback" v-text="getCustomerText(item).slice(0, 1)" />
+					</template>
 					<template #title>
 						<div class="title">
-							<span v-text="getFundOperationText(item.operationType)" />
+							<span class="customer" v-text="getCustomerText(item)" />
-							<t-tag
+							<div class="operation">
-								:content="getRecordStatusText(item)"
+								<span v-text="getFundOperationText(item.operationType)" />
-								variant="light-outline"
+								<t-tag
-								:theme="getRecordStatusTheme(item)"
+									size="small"
-							/>
+									:content="getRecordStatusText(item)"
+									variant="light-outline"
+									:theme="getRecordStatusTheme(item)"
+								/>
+							</div>
 						</div>
 					</template>
 					<template #description>
 						<div class="description">
-							<div class="field">
+							<div class="operator">
-								<span class="label">发起人</span>
+								<div class="field">
-								<span class="text-bold" v-text="getOperatorText(item)" />
+									<span class="label">发起人</span>
-							</div>
+									<span class="text-bold" v-text="getOperatorText(item)" />
-							<div v-if="item.verifier" class="field">
+								</div>
-								<span class="label">核销人</span>
+								<div v-if="item.verifier" class="field">
-								<span class="text-bold" v-text="getVerifierText(item)" />
+									<span class="label">核销人</span>
-							</div>
+									<span class="text-bold" v-text="getVerifierText(item)" />
-							<div>
+								</div>
 								<pass-time-label :timestamp="item.occurredAt" underline />
 							</div>
-						</div>
+							<div class="amounts">
-					</template>
+								<div class="order-amount">
-					<template #note>
+									<span class="label">订单总价</span>
-						<div class="amounts">
+									<span>￥</span>
-							<div class="order-amount">
+									<span v-text="formatPackageAmount(item.salesOrderAmount)" />
-								<span class="label">订单总价</span>
+								</div>
-								<span>￥</span>
+								<div class="unpaid-amount">
-								<span v-text="formatPackageAmount(item.salesOrderAmount)" />
+									<span class="label">剩余待收</span>
-							</div>
+									<span>￥</span>
-							<div class="unpaid-amount">
+									<span v-text="formatPackageAmount(item.salesOrderUnpaidAmountSnapshot)" />
-								<span class="label">剩余待收</span>
+								</div>
-								<span>￥</span>
+								<div class="record-amount">
-								<span v-text="formatPackageAmount(item.salesOrderUnpaidAmountSnapshot)" />
+									<span class="label">流水金额</span>
-							</div>
+									<span class="red">￥</span>
-							<div class="record-amount">
+									<span class="value red" v-text="formatPackageAmount(item.amount)" />
-								<span class="label">流水金额</span>
+								</div>
-								<span class="red">￥</span>
-								<span class="value red" v-text="formatPackageAmount(item.amount)" />
 							</div>
 						</div>
 					</template>
@@ -90,6 +102,7 @@ import { formatPackageAmount } from "@/utils/package";
 import { getFundOperationText, getFundStatusText } from "@/utils/salesOrder";
 import { Message } from "@/utils/message";
 import { permissionCodes } from "@/utils/permission";
+import { getCustomerPhotoURL } from "@/utils/customer";
 import { PassTimeLabel } from "timi-web";
 
 defineOptions({ name: "FundRecordList" });
@@ -184,6 +197,10 @@ function getVerifierText(item: FundRecord): string {
 	return item.verifier?.name || item.verifier?.nick || item.verifierUserId || "未核销";
 }
 
+function getCustomerText(item: FundRecord): string {
+	return item.customer?.name || item.customer?.code || item.customerId || "未知客户";
+}
+
 function getStatusTheme(statusValue?: FundRecordStatus): "success" | "warning" | "danger" | "default" {
 	return statusValue === "VERIFIED" ? "success" : statusValue === "PENDING" ? "warning" : statusValue === "REJECTED" ? "danger" : "default";
 }
@@ -276,52 +293,76 @@ onUnmounted(() => navBarStore.clearRight());
 
 	.item {
 
+		.avatar {
+			width: 3.5rem;
+			height: 3.5rem;
+		}
+
 		.title {
 			gap: .5rem;
 			display: flex;
+			font-size: .75rem;
 			align-items: center;
+			justify-content: space-between;
+
+			.customer {
+				min-width: 0;
+				overflow: hidden;
+				font-weight: 600;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+			}
+
+			.operation {
+				gap: .5rem;
+				display: flex;
+				flex-shrink: 0;
+				align-items: center;
+			}
 		}
 
 		.description {
-			gap: 0;
-			color: var(--td-text-color-secondary);
 			display: flex;
-			font-size: .75rem;
+			align-items: start;
-			flex-wrap: wrap;
+			justify-content: space-between;
-			line-height: 1.5;
-			flex-direction: column;
 
-			.field {
+			.operator {
-				gap: .25rem;
+				gap: 0;
-				display: inline-flex;
+				color: var(--td-text-color-secondary);
-			}
-
-			.label {
-				color: var(--td-text-color-placeholder);
-			}
-		}
-
-		.amounts {
-			display: flex;
-			font-size: .75rem;
-			align-items: end;
-			flex-direction: column;
-
-			.label {
-				color: var(--td-text-color-placeholder);
-			}
-
-			.order-amount,
-			.unpaid-amount,
-			.record-amount {
-				gap: .125rem;
 				display: flex;
-				align-items: baseline;
+				font-size: .75rem;
-				white-space: nowrap;
+				flex-wrap: wrap;
+				line-height: 1.5;
+				flex-direction: column;
+
+				.field {
+					gap: .25rem;
+					display: inline-flex;
+				}
+
+				.label {
+					color: var(--td-text-color-placeholder);
+				}
 			}
 
-			.record-amount .value {
+			.amounts {
-				font-size: 1.25rem;
+				display: flex;
+				font-size: .75rem;
+				line-height: 1.5;
+				align-items: end;
+				flex-direction: column;
+
+				.label {
+					color: var(--td-text-color-placeholder);
+				}
+
+				.order-amount,
+				.unpaid-amount,
+				.record-amount {
+					display: flex;
+					align-items: baseline;
+					white-space: nowrap;
+				}
 			}
 		}
 	}
@@ -332,4 +373,17 @@ onUnmounted(() => navBarStore.clearRight());
 		text-align: center;
 	}
 }
+
+:deep(.sales-order-record-list .avatar .t-image__img) {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	border-radius: inherit;
+}
+
+:global(html.theme-dark) .sales-order-record-list {
+	.fallback {
+		background: #115e59;
+	}
+}
 </style>

src/router/routes/managementRoutes.ts

@@ -173,6 +173,20 @@ export const managementSettingRoutes: RouteRecordRaw[] = [
 			darkBodyBackground: "#10161f"
 		}
 	},
+	{
+		path: "/management/about/agreement/:id",
+		name: "Agreement",
+		component: () => import("@/pages/setting/Agreement.vue"),
+		meta: {
+			depth: 4,
+			navBarVisible: true,
+			navBarCanBack: true,
+			navBarTitle: "协议",
+			tabBarVisible: false,
+			bodyBackground: "#FFF",
+			darkBodyBackground: "#10161f"
+		}
+	},
 	{
 		path: "/management/about/service-agreement/:id",
 		name: "ServiceAgreement",