From 200cc5fd3fd00c1b9f1f8d539169ccad8ab9b2a2 Mon Sep 17 00:00:00 2001
From: Timi <imyeyu6@qq.com>
Date: Tue, 11 Aug 2026 22:45:41 +0800
Subject: [PATCH] update customer style

---
 src/pages/customer/CustomerDetail.vue | 279 +++++++++++++-------------
 src/pages/customer/CustomerList.vue   |  25 ++-
 2 files changed, 158 insertions(+), 146 deletions(-)

diff --git a/src/pages/customer/CustomerDetail.vue b/src/pages/customer/CustomerDetail.vue
index 4c65cc3..1dce28d 100644
--- a/src/pages/customer/CustomerDetail.vue
+++ b/src/pages/customer/CustomerDetail.vue
@@ -17,21 +17,29 @@
 				<span v-else v-text="birthdateText" />
 			</t-cell>
 			<t-cell title="年龄" :note="ageText" />
-			<t-cell title="住址" :note="customer.address || '无'" />
-			<t-cell title="病症" :note="customer.disease || '无'" />
-			<t-cell title="备注" :note="customer.remark || '无'" />
-			<t-cell title="录入用户" :note="creatorName" />
-			<t-cell title="录入时间" :note="createdAtText" />
+			<t-cell title="住址" :note="Text.display(customer.address)" />
+			<t-cell title="病症" :note="Text.display(customer.disease)" />
+			<t-cell title="备注" :note="Text.display(customer.remark)" />
+			<t-cell title="录入用户" :note="Text.display(customer.creatorUser?.nick || customer.creatorUser?.name)" />
+			<t-cell title="录入时间" :note="Time.toPassedDateTime(customer.createdAt)" />
 		</t-cell-group>
-		<t-cell-group v-if="customer && canReadStat" theme="card">
-			<t-cell title="客户数据图表" arrow @click="toCustomerDataCharts">
-				<template #leftIcon>
-					<t-icon name="chart" size="1.5rem" />
+		<t-cell-group v-if="customer" theme="card">
+			<t-cell v-if="canReadStat" title="客户数据图表" arrow @click="toCustomerDataCharts">
+				<template #left-icon>
+					<t-icon name="chart" />
+				</template>
+			</t-cell>
+			<t-cell
+				v-if="canReadPointAccount"
+				title="积分余额"
+				:note="pointBalanceText"
+				arrow
+				@click="toPointAccount"
+			>
+				<template #left-icon>
+					<t-icon name="money" />
 				</template>
 			</t-cell>
-		</t-cell-group>
-		<t-cell-group v-if="customer && canReadPointAccount" title="积分" class="point-account" theme="card">
-			<t-cell title="当前积分余额" :note="pointBalanceText" arrow hover @click="toPointAccount" />
 		</t-cell-group>
 		<t-cell-group theme="card">
 			<div class="conditioning-part bg-white">
@@ -148,7 +156,7 @@
 
 <script setup lang="ts">
 import { DialogPlugin, Toast } from "tdesign-mobile-vue";
-import { Time, useUserStore } from "timi-web";
+import { Text, Time, useUserStore } from "timi-web";
 import CustomerAPI from "@/api/CustomerAPI";
 import PointAPI from "@/api/PointAPI";
 import BodyAreaSelector from "@/components/BodyAreaSelector.vue";
@@ -171,31 +179,19 @@ const router = useRouter();
 const settingStore = useSettingStore();
 const userStore = useUserStore();
 
-const customer = ref<Customer>();
-const pointAccount = ref<PointAccount>();
-const invitees = ref<Customer[]>([]);
-const selectedInviteeId = ref("");
-const selectorVisible = ref(false);
-const scanPopupVisible = ref(false);
-const pendingInvitee = ref<Customer>();
-const scanStatus = ref("点击扫码开始识别。");
 const isRemoving = ref(false);
-const showSolarBirthdate = ref(false);
-let latestDecodedText = "";
 
-const inviter = computed(() => customer.value?.introducerCustomer);
 const canReadStat = computed(() => userStore.hasPermissions(permissionCodes.stat.read));
 const canReadPointAccount = computed(() => userStore.hasPermissions(permissionCodes.point.accountRead));
-const pointBalanceText = computed(() => pointAccount.value ? `${(pointAccount.value.balance ?? 0).toLocaleString("zh-CN")} 分` : "尚未产生积分流水");
-const creatorName = computed(() => {
-	const creatorUser = customer.value?.creatorUser;
-	return creatorUser?.nick || creatorUser?.name || customer.value?.creatorUserId || "无";
-});
-const createdAtText = computed(() => customer.value?.createdAt ? Time.toPassedDateTime(customer.value.createdAt) : "无");
+
+// ---------- 资料 ----------
+
+const customer = ref<Customer>();
+const showSolarBirthdate = ref(false);
 const isLunarBirthdate = computed(() => customer.value?.birthdateCalendar === "LUNAR" && !!customer.value?.birthdate);
 const solarBirthdateText = computed(() => formatSolarBirthdate(customer.value));
 const birthdateText = computed(() => showSolarBirthdate.value && isLunarBirthdate.value ? solarBirthdateText.value : formatBirthdate(customer.value));
-const ageText = computed(() => customer.value?.age === undefined || customer.value?.age === null ? "无" : `${customer.value.age} 岁`);
+const ageText = computed(() => customer.value?.age === undefined || customer.value?.age === null ? "" : `${customer.value.age} 岁`);
 const selectedAreas = computed<BodyAreaValue>({
 	get() {
 		return normalizeBodyAreaValue(customer.value?.conditioningPart);
@@ -205,6 +201,27 @@ const selectedAreas = computed<BodyAreaValue>({
 	}
 });
 
+function formatBirthdate(value?: Customer): string {
+	if (!value?.birthdate) {
+		return "";
+	}
+	if (value.birthdateCalendar !== "LUNAR") {
+		return `公历 ${value.birthdate}`;
+	}
+	const lunarDate = LunarCalendar.solarToLunar(value.birthdate);
+	return lunarDate ? LunarCalendar.formatLunarDate(lunarDate) : "农历日期";
+}
+
+function formatSolarBirthdate(value?: Customer): string {
+	return value?.birthdate ? `公历 ${value.birthdate}` : "无";
+}
+
+function toggleBirthdateText(): void {
+	if (isLunarBirthdate.value) {
+		showSolarBirthdate.value = !showSolarBirthdate.value;
+	}
+}
+
 async function loadCustomer(): Promise<void> {
 	const id = String(route.params.id || "");
 	if (!id) {
@@ -227,15 +244,56 @@ async function loadCustomer(): Promise<void> {
 	}
 }
 
-async function loadPointAccount(): Promise<void> {
-	pointAccount.value = undefined;
-	if (!customer.value?.id || !canReadPointAccount.value) {
+// ---------- 邀请来源和邀请列表 ----------
+let latestDecodedText = "";
+const invitees = ref<Customer[]>([]);
+const selectedInviteeId = ref("");
+const selectorVisible = ref(false);
+const scanPopupVisible = ref(false);
+const pendingInvitee = ref<Customer>();
+const scanStatus = ref("点击扫码开始识别");
+const inviter = computed(() => customer.value?.introducerCustomer);
+
+function openScanPopup(): void {
+	pendingInvitee.value = undefined;
+	latestDecodedText = "";
+	scanStatus.value = "正在启动扫码预览";
+	scanPopupVisible.value = true;
+}
+
+function closeScanPopup(): void {
+	scanPopupVisible.value = false;
+}
+
+async function handleDecodedText(rawText: string): Promise<void> {
+	const normalizedText = rawText.trim();
+	if (!normalizedText || normalizedText === latestDecodedText) {
 		return;
 	}
-	try {
-		pointAccount.value = await PointAPI.accountDetail(customer.value.id, customer.value.storeId);
-	} catch {
-		pointAccount.value = undefined;
+
+	latestDecodedText = normalizedText;
+	await settingStore.playScanSuccessSound();
+	const matched = await loadCustomerByCode(normalizedText);
+	if (!matched) {
+		scanStatus.value = `已识别 ${normalizedText}，未匹配客户档案。`;
+		return;
+	}
+
+	pendingInvitee.value = matched;
+	scanStatus.value = `已识别 ${matched.code}，请确认是否添加 ${matched.name}。`;
+}
+
+function handleScanStatusChange(value: string): void {
+	scanStatus.value = value;
+}
+
+async function confirmScannedInvitee(): Promise<void> {
+	if (!pendingInvitee.value) {
+		Toast.warning("请先扫码识别客户");
+		return;
+	}
+	if (await addInvitee(pendingInvitee.value)) {
+		closeScanPopup();
 	}
 }
 
@@ -249,6 +307,31 @@ async function loadInvitees(): Promise<void> {
 	invitees.value = await CustomerAPI.listInvited(customerId);
 }
 
+async function addInvitee(invitee: Customer): Promise<boolean> {
+	if (!customer.value?.id || !invitee.id) {
+		return false;
+	}
+	if (invitee.id === customer.value.id) {
+		Toast.warning("不能把客户本人添加为邀请客户");
+		return false;
+	}
+	if (isCustomerAncestor(invitee)) {
+		Toast.warning("不能把上级邀请人添加为邀请客户");
+		return false;
+	}
+
+	await CustomerAPI.saveInvite(customer.value.id, invitee.id);
+	await loadCustomer();
+	Toast.success(`已添加 ${invitee.name || invitee.code}`);
+	return true;
+}
+
+async function handleInviteeSelected(id: string): Promise<void> {
+	selectedInviteeId.value = id;
+	const invitee = await CustomerAPI.detail(id);
+	await addInvitee(invitee);
+}
+
 async function removeInvitee(item: Customer): Promise<void> {
 	if (!item.id) {
 		return;
@@ -259,6 +342,8 @@ async function removeInvitee(item: Customer): Promise<void> {
 	Toast.success("已删除邀请关系");
 }
 
+// ---------- 删除客户 ----------
+
 async function confirmRemoveCustomer(): Promise<void> {
 	const currentCustomer = customer.value;
 	if (!currentCustomer?.id) {
@@ -300,6 +385,23 @@ async function toEdit(): Promise<void> {
 	await router.push(`/management/customers/${customer.value.id}/edit`);
 }
 
+// ---------- 积分账户 ----------
+
+const pointAccount = ref<PointAccount>();
+const pointBalanceText = computed(() => pointAccount.value ? `${(pointAccount.value.balance ?? 0).toLocaleString("zh-CN")}` : "未产生积分流水");
+
+async function loadPointAccount(): Promise<void> {
+	pointAccount.value = undefined;
+	if (!customer.value?.id || !canReadPointAccount.value) {
+		return;
+	}
+	try {
+		pointAccount.value = await PointAPI.accountDetail(customer.value.id, customer.value.storeId);
+	} catch {
+		pointAccount.value = undefined;
+	}
+}
+
 async function toPointAccount(): Promise<void> {
 	if (!customer.value?.id) {
 		return;
@@ -310,32 +412,10 @@ async function toPointAccount(): Promise<void> {
 	});
 }
 
-function formatBirthdate(value?: Customer): string {
-	if (!value?.birthdate) {
-		return "无";
-	}
-	if (value.birthdateCalendar !== "LUNAR") {
-		return `公历 ${value.birthdate}`;
-	}
-	const lunarDate = LunarCalendar.solarToLunar(value.birthdate);
-	return lunarDate ? LunarCalendar.formatLunarDate(lunarDate) : "农历日期";
-}
-
-function formatSolarBirthdate(value?: Customer): string {
-	return value?.birthdate ? `公历 ${value.birthdate}` : "无";
-}
-
-function toggleBirthdateText(): void {
-	if (isLunarBirthdate.value) {
-		showSolarBirthdate.value = !showSolarBirthdate.value;
-	}
-}
-
 function isCustomerAncestor(invitee: Customer): boolean {
 	if (!customer.value?.id) {
 		return false;
 	}
-
 	let current = customer.value.introducerCustomer;
 	while (current?.id) {
 		if (current.id === invitee.id) {
@@ -343,78 +423,10 @@ function isCustomerAncestor(invitee: Customer): boolean {
 		}
 		current = current.introducerCustomer;
 	}
-
 	return false;
 }
 
-async function addInvitee(invitee: Customer): Promise<boolean> {
-	if (!customer.value?.id || !invitee.id) {
-		return false;
-	}
-	if (invitee.id === customer.value.id) {
-		Toast.warning("不能把客户本人添加为邀请客户");
-		return false;
-	}
-	if (isCustomerAncestor(invitee)) {
-		Toast.warning("不能把上级邀请人添加为邀请客户");
-		return false;
-	}
-
-	await CustomerAPI.saveInvite(customer.value.id, invitee.id);
-	await loadCustomer();
-	Toast.success(`已添加 ${invitee.name || invitee.code}`);
-	return true;
-}
-
-async function handleInviteeSelected(id: string): Promise<void> {
-	selectedInviteeId.value = id;
-	const invitee = await CustomerAPI.detail(id);
-	await addInvitee(invitee);
-}
-
-function openScanPopup(): void {
-	pendingInvitee.value = undefined;
-	latestDecodedText = "";
-	scanStatus.value = "正在启动扫码预览";
-	scanPopupVisible.value = true;
-}
-
-function closeScanPopup(): void {
-	scanPopupVisible.value = false;
-}
-
-async function handleDecodedText(rawText: string): Promise<void> {
-	const normalizedText = rawText.trim();
-	if (!normalizedText || normalizedText === latestDecodedText) {
-		return;
-	}
-
-	latestDecodedText = normalizedText;
-	await settingStore.playScanSuccessSound();
-	const matched = await loadCustomerByCode(normalizedText);
-	if (!matched) {
-		scanStatus.value = `已识别 ${normalizedText}，未匹配客户档案。`;
-		return;
-	}
-
-	pendingInvitee.value = matched;
-	scanStatus.value = `已识别 ${matched.code}，请确认是否添加 ${matched.name}。`;
-}
-
-function handleScanStatusChange(value: string): void {
-	scanStatus.value = value;
-}
-
-async function confirmScannedInvitee(): Promise<void> {
-	if (!pendingInvitee.value) {
-		Toast.warning("请先扫码识别客户");
-		return;
-	}
-
-	if (await addInvitee(pendingInvitee.value)) {
-		closeScanPopup();
-	}
-}
+// ---------- 加载客户 ----------
 
 async function loadCustomerByCode(code: string): Promise<Customer | undefined> {
 	return await CustomerAPI.findByCode(code) || undefined;
@@ -435,13 +447,8 @@ async function toCustomerDataCharts(): Promise<void> {
 	await router.push(`/management/customers/${customer.value.id}/data-charts`);
 }
 
-onMounted(async () => {
-	await loadCustomer();
-});
-
-watch(() => route.params.id, async () => {
-	await loadCustomer();
-});
+onMounted(loadCustomer);
+watch(() => route.params.id, loadCustomer);
 </script>
 
 <style scoped lang="less">
diff --git a/src/pages/customer/CustomerList.vue b/src/pages/customer/CustomerList.vue
index a4a4f29..7c8d21d 100644
--- a/src/pages/customer/CustomerList.vue
+++ b/src/pages/customer/CustomerList.vue
@@ -1,7 +1,7 @@
 <template>
 	<div v-can="permissionCodes.customer.read" class="customer-list">
-		<div class="filter-bar">
-			<t-dropdown-menu v-if="isGlobalManager">
+		<div class="filter bg-white">
+			<t-dropdown-menu v-if="isGlobalManager" class="store">
 				<t-dropdown-item
 					v-model="selectedStoreId"
 					:label="storeFilterLabel"
@@ -11,7 +11,7 @@
 			</t-dropdown-menu>
 			<t-input
 				v-model.trim="keyword"
-				class="text-input"
+				class="search"
 				placeholder="搜索编码、姓名、电话"
 				clearable
 				borderless
@@ -217,24 +217,29 @@ async function doExport(): Promise<void> {
 .customer-list {
 	padding: calc(var(--app-nav-height)) 0 5.5rem 0;
 
-	.filter-bar {
+	.filter {
+		gap: .5rem;
 		top: var(--app-nav-height);
 		left: 0;
 		right: 0;
 		z-index: 10;
-		gap: .5rem;
+		padding: .5rem;
 		display: flex;
-		padding: .75rem 1rem;
 		position: sticky;
-		flex-direction: column;
-		background: #F5F5F8;
 		box-shadow: var(--td-shadow-1);
+		align-items: center;
 
-		.text-input {
+		.store {
+
+			&:after {
+				display: none;
+			}
+		}
+
+		.search {
 			width: 100%;
 			border: 1px solid rgba(148, 163, 184, .28);
 			padding: .5rem 1rem;
-			background: #f8fbff;
 			border-radius: 1rem;
 		}
 	}