total value in t-cell

src/pages/point/PointRedemptionList.vue

@@ -47,7 +47,8 @@
 			@scrolltolower="load"
 		>
 			<div class="list-wrap">
-				<t-cell-group v-if="isCustomDate" class="date-summary" theme="card">
+				<t-cell-group class="date-summary" theme="card" v-entrance-transition>
+					<template v-if="isCustomDate">
 						<t-cell
 							title="开始时间"
 							:note="dateRange[0] || '-'"
@@ -60,6 +61,8 @@
 							arrow
 							@click="openEndTime"
 						/>
+					</template>
+					<t-cell title="总数据量" :note="Text.display(result.total)" />
 				</t-cell-group>
 				<div v-if="result.list.length" class="items">
 					<t-cell-group theme="card">
@@ -68,7 +71,7 @@
 							:key="item.id"
 							class="item"
 							arrow
-							v-entrance-transition="index * 30"
+							v-entrance-transition="70 + index * 30"
 							@click="toDetail(item)"
 						>
 							<template #left-icon>
@@ -95,8 +98,11 @@
 									/>
 								</div>
 							</template>
+							<template #note>
+								<span class="orange" v-text="formatPoint(item.actualPointCost)" />
+							</template>
 							<template #description>
-								<span v-text="`${item.customer?.name || item.customerId || '未知客户'} · ${quantityText(item.quantity)} ${item.unitSnapshot || ''} · 实扣 ${formatPoint(item.actualPointCost)}`" />
+								<span v-text="`${item.customer?.name || item.customerId || '未知客户'} · ${quantityText(item.quantity)} ${item.unitSnapshot || ''}`" />
 							</template>
 						</t-cell>
 					</t-cell-group>
@@ -105,7 +111,6 @@
 					v-else
 					:description="loading ? '正在加载兑换记录' : hasFilter ? '未找到匹配的兑换记录' : '暂无兑换记录'"
 				/>
-				<div class="tips" v-text="`共 ${result.total} 条兑换记录`" />
 			</div>
 		</t-pull-down-refresh>
 	</div>
@@ -146,7 +151,7 @@
 
 <script setup lang="ts">
 import { type DropdownValue } from "tdesign-mobile-vue";
-import { Time } from "timi-web";
+import { Text, Time, Toolkit } from "timi-web";
 import CustomerAPI from "@/api/CustomerAPI";
 import PointAPI from "@/api/PointAPI";
 import CustomerSelector from "@/components/CustomerSelector.vue";
@@ -188,7 +193,6 @@ const index = ref(0);
 const loading = ref(false);
 const refreshing = ref(false);
 const noMore = ref(false);
-let keywordTimer: number | undefined;
 let reloadRequested = false;
 const dateFilterLabel = computed(() => dateOptions.find(item => item.value === dateFilterType.value)?.label || "时间范围");
 const isCustomDate = computed(() => dateFilterType.value === "custom");
@@ -443,15 +447,16 @@ onMounted(async () => {
 	}
 });
 
-watch(keyword, () => {
-	window.clearTimeout(keywordTimer);
-	keywordTimer = window.setTimeout(async () => {
+const reloadByKeyword = Toolkit.debounce(async () => {
 	await reload();
-	}, 300);
+}, false);
+
+watch(keyword, () => {
+	reloadByKeyword();
 });
 
 onUnmounted(() => {
-	window.clearTimeout(keywordTimer);
+	reloadByKeyword.cancel();
 	navBarStore.clearRight();
 });
 </script>
@@ -506,22 +511,11 @@ onUnmounted(() => {
 	}
 
 	.list-wrap {
+		gap: 1rem;
+		display: flex;
+		min-height: 70vh;
 		padding-top: 1rem;
-
-		.date-summary {
-			:deep(.t-cell__title) {
-				flex: 0 0 4.5rem;
-			}
-
-			:deep(.t-cell__note) {
-				flex: 1 1 0;
-				min-width: 0;
-				overflow: hidden;
-				text-align: right;
-				text-overflow: ellipsis;
-				white-space: nowrap;
-			}
-		}
+		flex-direction: column;
 
 		.items {
 			gap: 1rem;
@@ -546,12 +540,6 @@ onUnmounted(() => {
 				}
 			}
 		}
-
-		.tips {
-			color: var(--td-text-color-secondary);
-			padding: 1rem;
-			text-align: center;
-		}
 	}
 }