fix CustomerPackageList.vue style

src/pages/package/CustomerPackageList.vue

@@ -1,33 +1,81 @@
 <template>
 	<div v-can="permissionCodes.customerPackage.read" class="customer-package-list">
 		<div class="filters">
-			<t-input v-model.trim="keyword" class="keyword" borderless clearable placeholder="搜索客户、编码或套餐名称" @enter="reload" />
+			<t-input
-			<t-button theme="primary" size="small" @click="reload">搜索</t-button>
+				v-model.trim="keyword"
+				class="search-input"
+				type="search"
+				borderless
+				clearable
+				placeholder="搜索客户、编码或套餐名称"
+			/>
+			<div class="filter-line">
+				<t-dropdown-menu class="filter-menu">
+					<t-dropdown-item
+						v-model="status"
+						label="套餐状态"
+						:options="statusOptions"
+						@change="selectStatus"
+					/>
+					<t-dropdown-item
+						v-model="paymentStatus"
+						label="收款状态"
+						:options="paymentOptions"
+						@change="selectPaymentStatus"
+					/>
+				</t-dropdown-menu>
+			</div>
 		</div>
-		<t-dropdown-menu>
+		<t-pull-down-refresh
-			<t-dropdown-item v-model="status" label="套餐状态" :options="statusOptions" @change="selectStatus" />
+			v-model="isRefreshing"
-			<t-dropdown-item v-model="paymentStatus" label="收款状态" :options="paymentOptions" @change="selectPaymentStatus" />
+			:refresh-timeout="30000"
-		</t-dropdown-menu>
+			@refresh="reload"
-		<t-pull-down-refresh v-model="isRefreshing" :refresh-timeout="30000" @refresh="reload" @scrolltolower="loadMore">
+			@scrolltolower="loadMore"
-			<t-cell-group v-if="packageList.length" theme="card" class="list">
+		>
-				<t-cell v-for="(item, index) in packageList" :key="item.id" class="item" :arrow="!!item.id" :hover="!!item.id" v-entrance-transition="index * 30" @click="toDetail(item)">
+			<t-cell-group
+				class="list"
+				v-if="packageList.length"
+				theme="card"
+			>
+				<t-cell
+					v-for="(item, index) in packageList"
+					:key="item.id"
+					class="item"
+					arrow
+					v-entrance-transition="index * 30"
+					@click="toDetail(item)"
+				>
+					<template #leftIcon>
+						<t-image
+							v-if="getCustomerPhotoURL(item.customer, 64)"
+							:src="getCustomerPhotoURL(item.customer, 64)"
+							:alt="item.customer?.name || item.customer?.code || '客户头像'"
+							fit="cover"
+							class="avatar"
+						/>
+						<div v-else class="avatar fallback" v-text="(item.customer?.name || item.customer?.code || '客').slice(0, 1)" />
+					</template>
 					<template #title>
-						<div class="title-row">
+						<div class="title">
-							<strong v-text="item.packageNameSnapshot || '未命名套餐'" />
+							<div class="text text-bold">
+								<span class="customer" v-text="Text.display(item.customer?.name)" />
+								<span> - </span>
+								<span v-text="item.packageNameSnapshot || '未命名套餐'" />
+							</div>
 							<t-tag :content="getCustomerPackageStatusText(item.status)" variant="light-outline" :theme="getStatusTheme(item.status)" />
 						</div>
 					</template>
 					<template #description>
 						<div class="description">
-							<span v-text="item.customer?.name || item.customer?.code || item.customerId || '未知客户'" />
+							<t-tag
-							<span v-text="formatPackageAmount(item.saleAmount)" />
+								class="line"
-							<span v-text="getPaymentStatusText(item.paymentStatus)" />
+								theme="primary"
-							<span v-text="item.purchasedAt ? Time.toPassedDateTime(item.purchasedAt) : '未知时间'" />
+								variant="outline"
+								v-text="getPaymentStatusText(item.paymentStatus)"
+							/>
+							<div class="line" v-text="`成交价：${formatPackageAmount(item.saleAmount)}`" />
 						</div>
 					</template>
-					<template #note>
-						<div class="paid" v-text="`已收 ${formatPackageAmount(item.paidAmount)}`" />
-					</template>
 				</t-cell>
 			</t-cell-group>
 			<div v-else class="empty" v-text="loading ? '正在加载客户套餐' : '暂无客户套餐'" />
@@ -38,10 +86,11 @@
 
 <script setup lang="ts">
 import { type DropdownValue } from "tdesign-mobile-vue";
-import { Time } from "timi-web";
+import { Text, Toolkit } from "timi-web";
 import PackageAPI from "@/api/PackageAPI";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { CustomerPackageStatus, GaoCustomerPackage, PaymentStatus } from "@/types/Package";
+import { getCustomerPhotoURL } from "@/utils/customer";
 import { getErrorMessage } from "@/utils/error";
 import { formatPackageAmount, getCustomerPackageStatusText, getPaymentStatusText } from "@/utils/package";
 import { Message } from "@/utils/message";
@@ -124,6 +173,18 @@ async function selectPaymentStatus(value: DropdownValue): Promise<void> {
 	await reload();
 }
 
+const reloadByKeyword = Toolkit.debounce(async () => {
+	try {
+		await reload();
+	} catch (error) {
+		Message.error(getErrorMessage(error, "客户套餐加载失败"));
+	}
+}, false);
+
+watch(keyword, () => {
+	reloadByKeyword();
+});
+
 async function toDetail(item: GaoCustomerPackage): Promise<void> {
 	if (item.id) {
 		await router.push(`/management/customer-packages/${item.id}`);
@@ -143,43 +204,99 @@ onMounted(async () => {
 	}
 });
 
-onUnmounted(() => navBarStore.clearRight());
+onUnmounted(() => {
+	navBarStore.clearRight();
+	reloadByKeyword.cancel();
+});
 </script>
 
 <style scoped lang="less">
 .customer-package-list {
-	padding: calc(var(--app-nav-height) + 1rem) 0 1rem;
+	padding: var(--app-nav-height) 0 1rem 0;
 
 	.filters {
+		top: var(--app-nav-height);
+		left: 0;
+		right: 0;
+		z-index: 10;
 		gap: .5rem;
-		margin: 0 1rem .75rem;
 		display: flex;
+		padding: .75rem 1rem;
+		position: sticky;
+		background: #F5F5F8;
+		box-shadow: var(--td-shadow-1);
+		flex-direction: column;
 
-		.keyword {
+		.search-input {
-			flex: 1;
+			--td-input-vertical-padding: 8px;
-			border: 1px solid var(--td-component-border);
+
-			border-radius: .75rem;
+			border: 1px solid rgba(148, 163, 184, .28);
+			z-index: 1;
+			background: #f8fbff;
+			border-radius: 1rem;
+		}
+
+		.filter-menu {
+			--td-spacer-1: 6px;
+
+			width: 100%;
+			overflow: hidden;
+			margin-top: -1.5rem;
+			padding-top: .8rem;
+			background: #fff;
+			border: 1px solid rgba(148, 163, 184, .18);
+			border-radius: 0 0 1rem 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;
+			}
 		}
 	}
 
-	.item {
+	.list {
-		.title-row,
+		margin-top: 1rem;
-		.description {
-			gap: .5rem;
-			display: flex;
-			align-items: center;
-		}
 
-		.description {
+		.item {
-			color: var(--td-text-color-secondary);
+			padding: 10px;
-			margin-top: .35rem;
-			font-size: .8125rem;
-			flex-wrap: wrap;
-		}
 
-		.paid {
+			:deep(.t-cell__title) {
-			color: var(--td-brand-color);
+				margin: 0;
-			font-size: .75rem;
+			}
+
+			.avatar {
+				width: 3.5rem;
+				height: 3.5rem;
+			}
+
+			.title {
+				gap: .5rem;
+				flex: 1;
+				display: flex;
+				font-size: .875rem;
+				align-items: center;
+				justify-content: space-between;
+			}
+
+			.description {
+				gap: .5rem;
+				color: var(--td-text-color-secondary);
+				display: flex;
+				font-size: .8125rem;
+			}
+
+			.line {
+				white-space: nowrap;
+			}
 		}
 	}
 
@@ -189,4 +306,34 @@ onUnmounted(() => navBarStore.clearRight());
 		text-align: center;
 	}
 }
+
+:deep(.avatar .t-image__img) {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	border-radius: inherit;
+}
+
+:global(html.theme-dark) {
+	.customer-package-list {
+
+		.fallback {
+			background: #115e59;
+		}
+
+		.filters {
+			background: #10161f;
+
+			.search-input {
+				background: rgba(15, 23, 42, .72);
+				border-color: rgba(148, 163, 184, .16);
+			}
+
+			.filter-menu {
+				background: #172033;
+				border-color: rgba(148, 163, 184, .16);
+			}
+		}
+	}
+}
 </style>