add point account list

2026-08-22 16:42:32 +08:00
parent e237b71f13
commit 1a333508cd
12 changed files with 523 additions and 342 deletions
@@ -0,0 +1,114 @@
+<template>
+	<t-cell class="customer-cell" :arrow="arrow" :hover="hover">
+		<template #leftIcon>
+			<t-image
+				v-if="photoURL"
+				:src="photoURL"
+				:alt="customerName"
+				fit="cover"
+				class="avatar"
+			/>
+			<div v-else class="avatar fallback" v-text="customerName.slice(0, 1) || '客'" />
+		</template>
+		<template #title>
+			<div class="title">
+				<div class="main">
+					<span class="name" v-text="customerName || '未命名客户'" />
+					<gender-icon :value="customer?.gender" size="1.125rem" />
+				</div>
+				<span class="code" v-text="customer?.code || ''" />
+			</div>
+		</template>
+		<template v-if="$slots.description" #description>
+			<slot name="description" />
+		</template>
+		<template v-if="$slots.note" #note>
+			<slot name="note" />
+		</template>
+	</t-cell>
+</template>
+
+<script setup lang="ts">
+import type { Customer } from "@/types/Customer";
+import { getCustomerPhotoURL } from "@/utils/customer";
+
+defineOptions({
+	name: "CustomerCell"
+});
+
+interface Props {
+	customer?: Customer;
+	arrow?: boolean;
+	hover?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	arrow: false,
+	hover: false
+});
+
+const customer = computed(() => props.customer);
+const customerName = computed(() => customer.value?.name || customer.value?.code || "");
+const photoURL = computed(() => customer.value ? getCustomerPhotoURL(customer.value, 64) : "");
+</script>
+
+<style scoped lang="less">
+.customer-cell {
+	padding: 10px;
+
+	:deep(.t-cell__title) {
+		margin-right: .75rem;
+	}
+
+	:deep(.t-cell__note) {
+		flex: 0;
+	}
+
+	.avatar {
+		width: 3.5rem;
+		height: 3.5rem;
+	}
+
+	.title {
+		gap: .5rem;
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+
+		.main {
+			gap: .5rem;
+			display: flex;
+			align-items: center;
+
+			.name {
+				font-weight: 600;
+			}
+		}
+
+		.code {
+			color: #52607a;
+			font-size: .75rem;
+		}
+	}
+}
+
+:deep(.avatar .t-image__img) {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	border-radius: inherit;
+}
+
+:global(html.theme-dark) {
+	.customer-cell {
+		.code {
+			color: #94a3b8;
+		}
+
+		.fallback {
+			background: #115e59;
+		}
+	}
+}
+</style>