fix FundRecordList.vue style

src/pages/salesOrder/FundRecordList.vue

@@ -1,30 +1,62 @@
 <template>
-	<div v-can="permissionCodes.fundRecord.read" class="package-record-list">
+	<div v-can="permissionCodes.fundRecord.read" class="sales-order-record-list">
 		<div class="filters">
-			<t-dropdown-menu>
+			<t-dropdown-menu class="menus">
-				<t-dropdown-item v-model="operationType" label="操作类型" :options="operationOptions" @change="selectOperation" />
+				<t-dropdown-item
-				<t-dropdown-item v-model="status" label="状态" :options="statusOptions" @change="selectStatus" />
+					v-model="operationType"
+					label="操作类型"
+					:options="operationOptions"
+					@change="selectOperation"
+				/>
+				<t-dropdown-item
+					v-model="status"
+					label="状态"
+					:options="statusOptions"
+					@change="selectStatus"
+				/>
 			</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
+					class="item"
 					v-for="(item, index) in recordList"
 					:key="item.id"
-					:title="`${getFundOperationText(item.operationType)} · ${getFundStatusText(item.status)}`"
-					:description="getDescription(item)"
 					arrow
-					hover
 					v-entrance-transition="index * 30"
 					@click="toDetail(item)"
 				>
 					<template #title>
-						<div class="title-row">
+						<div class="title">
 							<span v-text="getFundOperationText(item.operationType)" />
-							<t-tag :content="getFundStatusText(item.status)" variant="light-outline" :theme="getStatusTheme(item.status)" />
+							<t-tag
+								:content="getFundStatusText(item.status)"
+								variant="light-outline"
+								:theme="getStatusTheme(item.status)"
+							/>
+						</div>
+					</template>
+					<template #description>
+						<div class="description">
+							<div class="user">
+								<span class="field">
+									<span class="label">发起人</span>
+									<span class="text-bold" v-text="getOperatorText(item)" />
+								</span>
+								<span v-if="item.verifier" class="field">
+									<span class="label">核销人</span>
+									<span class="text-bold" v-text="getVerifierText(item)" />
+								</span>
+							</div>
+							<pass-time-label :timestamp="item.occurredAt" underline />
+						</div>
+					</template>
+					<template #note>
+						<div class="amount">
+							<span class="red">￥</span>
+							<span class="value red" v-text="formatPackageAmount(item.amount)" />
 						</div>
 					</template>
-					<template #note><span class="amount" v-text="formatPackageAmount(item.amount)" /></template>
 				</t-cell>
 			</t-cell-group>
 			<div v-else class="empty" v-text="loading ? '正在加载资金流水' : '暂无资金流水'" />
@@ -35,15 +67,15 @@
 
 <script setup lang="ts">
 import { type DropdownValue } from "tdesign-mobile-vue";
-import { Time } from "timi-web";
 import SalesOrderAPI from "@/api/SalesOrderAPI";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { FundOperationType, FundRecord, FundRecordStatus } from "@/types/SalesOrder";
 import { getErrorMessage } from "@/utils/error";
 import { formatPackageAmount } from "@/utils/package";
-import { getFundOperationText, getFundStatusText } from "@/utils/salesOrder";
+import { getFundBizTypeText, getFundOperationText, getFundStatusText } from "@/utils/salesOrder";
 import { Message } from "@/utils/message";
 import { permissionCodes } from "@/utils/permission";
+import { PassTimeLabel } from "timi-web";
 
 defineOptions({ name: "FundRecordList" });
 
@@ -122,8 +154,12 @@ async function selectStatus(value: DropdownValue): Promise<void> {
 	}
 }
 
-function getDescription(item: FundRecord): string {
+function getOperatorText(item: FundRecord): string {
-	return `${item.customer?.name || item.customerId || "未知客户"}｜订单 ${item.bizId || "未知"}｜${item.occurredAt ? Time.toDateTime(item.occurredAt) : "时间未知"}`;
+	return item.operator?.name || item.operator?.nick || item.operatorUserId || "未知";
+}
+
+function getVerifierText(item: FundRecord): string {
+	return item.verifier?.name || item.verifier?.nick || item.verifierUserId || "未核销";
 }
 
 function getStatusTheme(statusValue?: FundRecordStatus): "success" | "warning" | "danger" | "default" {
@@ -163,19 +199,44 @@ onUnmounted(() => navBarStore.clearRight());
 </script>
 
 <style scoped lang="less">
-.package-record-list {
+.sales-order-record-list {
 	padding: var(--app-nav-height) 0 1rem;
 
 	.filters {
 		top: var(--app-nav-height);
+		left: 0;
+		right: 0;
 		z-index: 10;
-		padding: .75rem 1rem .5rem;
+		display: flex;
+		padding: .75rem 1rem;
 		position: sticky;
-		background: var(--td-bg-color-page);
+		background: #F5F5F8;
 		box-shadow: var(--td-shadow-1);
+		flex-direction: column;
 
-		:deep(.t-dropdown-menu) {
+		.menus {
-			border-radius: .875rem;
+			--td-spacer-1: 6px;
+
+			width: 100%;
+			border: 1px solid rgba(148, 163, 184, .18);
+			overflow: hidden;
+			background: #fff;
+			border-top: none;
+			border-radius: 1rem;
+
+			&:after {
+				display: none;
+			}
+
+			:deep(.t-dropdown-menu__item) {
+				min-width: 0;
+			}
+
+			:deep(.t-dropdown-menu__title) {
+				overflow: hidden;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+			}
 		}
 	}
 
@@ -183,14 +244,45 @@ onUnmounted(() => navBarStore.clearRight());
 		padding-top: .75rem;
 	}
 
-	.title-row {
+	.item {
+
+		.title {
 			gap: .5rem;
 			display: flex;
 			align-items: center;
 		}
 
+		.description {
+			gap: 0;
+			color: var(--td-text-color-secondary);
+			display: flex;
+			font-size: .8125rem;
+			flex-wrap: wrap;
+			line-height: 1.5;
+			flex-direction: column;
+
+			.user {
+				gap: 1rem;
+				display: flex;
+				align-items: center;
+
+				.field {
+					gap: .25rem;
+					display: inline-flex;
+				}
+
+				.label {
+					color: var(--td-text-color-placeholder);
+				}
+			}
+		}
+
 		.amount {
-		color: var(--td-brand-color);
+
+			.value {
+				font-size: 1.25rem;
+			}
+		}
 	}
 
 	.empty {

src/router/routes/packageRoutes.ts

@@ -5,9 +5,6 @@ import PackageConfigDetail from "@/pages/package/PackageConfigDetail.vue";
 import PackagePurchase from "@/pages/package/PackagePurchase.vue";
 import CustomerPackageList from "@/pages/package/CustomerPackageList.vue";
 import CustomerPackageDetail from "@/pages/package/CustomerPackageDetail.vue";
-import FundRecordList from "@/pages/package/FundRecordList.vue";
-import FundRecordDetail from "@/pages/package/FundRecordDetail.vue";
-import FundRecordRevoke from "@/pages/package/FundRecordRevoke.vue";
 
 function pageMeta(title: string, depth = 3, background = "#F5F5F8"): RouteRecordRaw["meta"] {
 	return { depth, navBarVisible: true, navBarCanBack: true, navBarTitle: title, tabBarVisible: false, bodyBackground: background, darkBodyBackground: "#10161f" };
@@ -20,8 +17,5 @@ export default [
 	{ path: "/management/package-configs/:id/edit", name: "PackageConfigEdit", component: PackageConfigEdit, meta: pageMeta("编辑套餐配置", 5) },
 	{ path: "/management/package-configs/:id/purchase", name: "PackagePurchase", component: PackagePurchase, meta: pageMeta("购买套餐", 5) },
 	{ path: "/management/customer-packages", name: "CustomerPackageList", component: CustomerPackageList, meta: pageMeta("客户套餐") },
-	{ path: "/management/customer-packages/:id", name: "CustomerPackageDetail", component: CustomerPackageDetail, meta: pageMeta("客户套餐详情", 4) },
+	{ path: "/management/customer-packages/:id", name: "CustomerPackageDetail", component: CustomerPackageDetail, meta: pageMeta("客户套餐详情", 4) }
-	{ path: "/management/fund-records", name: "FundRecordList", component: FundRecordList, meta: pageMeta("资金流水") },
-	{ path: "/management/fund-records/:id", name: "FundRecordDetail", component: FundRecordDetail, meta: pageMeta("资金记录详情", 4, "#FFF") },
-	{ path: "/management/fund-records/:id/revoke", name: "FundRecordRevoke", component: FundRecordRevoke, meta: pageMeta("资金冲正", 5) }
 ] as RouteRecordRaw[];

src/router/routes/salesOrderRoutes.ts

@@ -6,9 +6,12 @@ import SalesOrderPayment from "@/pages/salesOrder/SalesOrderPayment.vue";
 import SalesOrderRefund from "@/pages/salesOrder/SalesOrderRefund.vue";
 import SalesOrderNoRefund from "@/pages/salesOrder/SalesOrderNoRefund.vue";
 import SalesOrderCancel from "@/pages/salesOrder/SalesOrderCancel.vue";
+import FundRecordList from "@/pages/salesOrder/FundRecordList.vue";
+import FundRecordDetail from "@/pages/salesOrder/FundRecordDetail.vue";
+import FundRecordRevoke from "@/pages/salesOrder/FundRecordRevoke.vue";
 
-function meta(title: string, depth = 3): RouteRecordRaw["meta"] {
+function meta(title: string, depth = 3, background = "#F5F5F8"): RouteRecordRaw["meta"] {
-	return { depth, navBarVisible: true, navBarCanBack: true, navBarTitle: title, tabBarVisible: false, bodyBackground: "#F5F5F8", darkBodyBackground: "#10161f" };
+	return { depth, navBarVisible: true, navBarCanBack: true, navBarTitle: title, tabBarVisible: false, bodyBackground: background, darkBodyBackground: "#10161f" };
 }
 
 export default [
@@ -18,5 +21,8 @@ export default [
 	{ path: "/management/sales-orders/:id/payment", name: "SalesOrderPayment", component: SalesOrderPayment, meta: meta("登记收款", 5) },
 	{ path: "/management/sales-orders/:id/refund", name: "SalesOrderRefund", component: SalesOrderRefund, meta: meta("登记退款", 5) },
 	{ path: "/management/sales-orders/:id/no-refund", name: "SalesOrderNoRefund", component: SalesOrderNoRefund, meta: meta("确认无需退款", 5) },
-	{ path: "/management/sales-orders/:id/cancel", name: "SalesOrderCancel", component: SalesOrderCancel, meta: meta("取消销售订单", 5) }
+	{ path: "/management/sales-orders/:id/cancel", name: "SalesOrderCancel", component: SalesOrderCancel, meta: meta("取消销售订单", 5) },
+	{ path: "/management/fund-records", name: "FundRecordList", component: FundRecordList, meta: meta("资金流水") },
+	{ path: "/management/fund-records/:id", name: "FundRecordDetail", component: FundRecordDetail, meta: meta("资金记录详情", 4, "#FFF") },
+	{ path: "/management/fund-records/:id/revoke", name: "FundRecordRevoke", component: FundRecordRevoke, meta: meta("资金冲正", 5) }
 ] as RouteRecordRaw[];

src/utils/salesOrder.ts

@@ -1,6 +1,9 @@
 import type { FulfillmentStatus, FulfillmentType } from "@/types/Fulfillment";
-import type { FundOperationType, FundRecordStatus, SalesOrderStatus, SalesOrderType, SalesPaymentStatus, SalesRefundStatus } from "@/types/SalesOrder";
+import type { FundBizType, FundOperationType, FundRecordStatus, SalesOrderStatus, SalesOrderType, SalesPaymentStatus, SalesRefundStatus } from "@/types/SalesOrder";
 
+export function getFundBizTypeText(type?: FundBizType): string {
+	return type === "SALES_ORDER" ? "销售订单" : "未知";
+}
 export function getSalesOrderTypeText(type?: SalesOrderType): string {
 	return type === "PACKAGE" ? "套餐订单" : type === "DIRECT_PRODUCT" ? "直接产品订单" : "未知订单";
 }