fix FundRecordList.vue style

2026-09-05 16:50:35 +08:00
parent 16e77b5f61
commit 63f5f221cc
6 changed files with 132 additions and 37 deletions
@@ -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-item v-model="operationType" label="操作类型" :options="operationOptions" @change="selectOperation" />
-				<t-dropdown-item v-model="status" label="状态" :options="statusOptions" @change="selectStatus" />
+			<t-dropdown-menu class="menus">
+				<t-dropdown-item
+					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 {
-	return `${item.customer?.name || item.customerId || "未知客户"}｜订单 ${item.bizId || "未知"}｜${item.occurredAt ? Time.toDateTime(item.occurredAt) : "时间未知"}`;
+function getOperatorText(item: FundRecord): string {
+	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) {
-			border-radius: .875rem;
+		.menus {
+			--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 {
-		gap: .5rem;
-		display: flex;
-		align-items: center;
-	}
+	.item {

-	.amount {
-		color: var(--td-brand-color);
+		.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 {
+
+			.value {
+				font-size: 1.25rem;
+			}
+		}
 	}

 	.empty {