update customer layout

src/components/CustomerProfileCard.vue

@@ -18,6 +18,7 @@
 					<gender-icon v-if="customer.gender" :value="customer.gender" size="1rem" />
 				</div>
 				<t-tag
+					v-if="customerCode"
 					class="code"
 					variant="outline"
 					shape="round"

src/pages/customer/CustomerDetail.vue

@@ -17,6 +17,7 @@
 				<span v-else v-text="birthdateText" />
 			</t-cell>
 			<t-cell title="年龄" :note="ageText" />
+			<t-cell title="调理部位" :note="selectedAreaText" arrow @click="openBodyAreaPicker" />
 			<t-cell title="住址" :note="Text.display(customer.address)" />
 			<t-cell title="病症" :note="Text.display(customer.disease)" />
 			<t-cell title="备注" :note="Text.display(customer.remark)" />
@@ -62,142 +63,102 @@
 				</template>
 			</t-cell>
 		</t-cell-group>
-		<t-cell-group theme="card">
+		<t-cell-group v-if="inviter" :title="`由 ${inviter.name} 邀请`" theme="card">
-			<div class="conditioning-part bg-white">
-				<span class="gray">调理部位</span>
-				<body-area-selector v-model="selectedAreas" />
-			</div>
-		</t-cell-group>
-		<t-cell-group v-if="inviter" :title="`由 ${inviter.name} 邀请`" class="invite-list" theme="card">
 			<customer-profile-card :customer="inviter" @click="toCustomerDetail(inviter)"/>
 		</t-cell-group>
-		<div class="invite-list">
+		<t-cell-group v-if="customer" theme="card">
-			<div class="header">
+			<t-cell title="邀请客户" :note="inviteeCountText" arrow @click="toInviteeList" />
-				<div class="title">邀请客户</div>
+		</t-cell-group>
-				<div v-can="permissionCodes.customer.update" class="actions">
+		<t-button
-					<t-button
+			v-can="permissionCodes.customer.delete"
-						theme="primary"
+			class="delete-action"
-						variant="outline"
+			theme="danger"
-						size="extra-small"
+			:loading="isRemoving"
-						content="选择添加"
+			@click="confirmRemoveCustomer"
-						@click="selectorVisible = true"
+		>
-					/>
+			删除客户
-					<t-button
+		</t-button>
-						theme="primary"
-						size="extra-small"
-						content="扫码添加"
-						@click="openScanPopup"
-					/>
-				</div>
-			</div>
-			<t-cell-group theme="card">
-				<t-swipe-cell
-					class="item"
-					v-for="(item, index) in invitees"
-					:key="item.id || item.code || index"
-				>
-					<t-cell
-						class="cell"
-						:title="item.name || item.code || '-'"
-						arrow
-						hover
-						@click="toCustomerDetail(item)"
-					>
-						<template #description>
-							<telephone-link :value="item.telephone" placeholder="未填写电话" />
-						</template>
-						<template #leftIcon>
-							<t-image
-								v-if="getCustomerPhotoURL(item)"
-								class="avatar"
-								:src="getCustomerPhotoURL(item)"
-								:alt="item.name"
-								fit="cover"
-							/>
-							<div v-else class="avatar fallback" v-text="(item.name || '客').slice(0, 1)" />
-						</template>
-					</t-cell>
-					<template #right>
-						<div v-can="permissionCodes.customer.update" class="remove bg-red white" @click="removeInvitee(item)">删除</div>
-					</template>
-				</t-swipe-cell>
-				<div v-if="!invitees.length" class="empty">暂无邀请客户</div>
-			</t-cell-group>
-		</div>
-		<div class="bottom-actions">
-			<t-button
-				v-can="permissionCodes.customer.delete"
-				class="delete bg-white"
-				theme="danger"
-				variant="outline"
-				:loading="isRemoving"
-				@click="confirmRemoveCustomer"
-			>
-				删除客户
-			</t-button>
-			<t-button v-can="permissionCodes.customer.update" theme="primary" class="edit" @click="toEdit">编辑客户</t-button>
-		</div>
-		<customer-selector
-			v-model="selectedInviteeId"
-			v-model:visible="selectorVisible"
-			@change="handleInviteeSelected"
-		/>
 		<tag-selector
 			v-model="selectedTagIdList"
 			v-model:visible="tagSelectorVisible"
 			@change="handleTagSelected"
 		/>
-		<t-popup v-model="scanPopupVisible" placement="bottom">
+		<bottom-popup
-			<div class="scan-popup bg-white">
+			v-model="bodyAreaPickerVisible"
-				<div class="header">
+			title="调理部位"
-					<t-button
+			height="38rem"
-						variant="text"
+			left-button-text="关闭"
-						size="small"
+			right-button-text=""
-						@click="closeScanPopup"
+			@left-button-click="closeBodyAreaPicker"
-						content="取消"
+		>
-					/>
+			<body-area-selector :model-value="selectedAreas" readonly />
-					<h3>扫码添加邀请客户</h3>
+		</bottom-popup>
-					<t-button
+		<t-dialog
-						theme="primary"
+			class="remove-dialog"
-						size="small"
+			v-model:visible="removeDialogVisible"
-						content="确认"
+			title="删除客户"
-						@click="confirmScannedInvitee"
+		>
-					/>
+			<div class="content">
+				<div class="warning">删除后无法恢复，将同时清除以下关联数据：</div>
+				<ul class="items">
+					<li>登记事件记录及其附件，并撤销这些登记产生的积分</li>
+					<li>客户积分账户、标签和客户附件</li>
+					<li>解除该客户与其被邀请客户之间的邀请关系，被邀请客户不会被删除</li>
+					<li>减少该客户原介绍人的邀请客户计数</li>
+					<li>客户档案本身</li>
+				</ul>
+				<div class="hint">
+					请输入客户姓名
+					<span class="name red" v-text="removeCustomerName" />
+					以确认删除
 				</div>
-				<code-scanner
+				<t-input
-					v-if="scanPopupVisible"
+					class="confirm-input"
-					:visible="scanPopupVisible"
+					v-model.trim="removeConfirmName"
-					:status-text="scanStatus"
+					size="small"
-					active-text="正在识别客户编码，请将二维码移入取景框"
+					borderless
-					@decode="handleDecodedText"
+					clearable
-					@status-change="handleScanStatusChange"
+					placeholder="请输入客户姓名"
 				/>
-				<div v-if="pendingInvitee" class="confirm">
-					<customer-profile-card :customer="pendingInvitee" />
-				</div>
 			</div>
-		</t-popup>
+			<template #cancelBtn>
+				<t-button
+					theme="default"
+					content="取消"
+					block
+					@click="closeRemoveDialog"
+				/>
+			</template>
+			<template #confirmBtn>
+				<t-button
+					theme="danger"
+					content="删除"
+					block
+					:disabled="!canConfirmRemove"
+					@click="removeConfirmedCustomer"
+				/>
+			</template>
+		</t-dialog>
 	</div>
 </template>
 
 <script setup lang="ts">
-import { DialogPlugin, Toast } from "tdesign-mobile-vue";
+import { Toast } from "tdesign-mobile-vue";
 import { AttachmentAPI, PassTimeLabel, Text, useUserStore } from "timi-web";
 import CustomerAPI from "@/api/CustomerAPI";
 import PointAPI from "@/api/PointAPI";
 import TagAPI from "@/api/TagAPI";
 import BodyAreaSelector from "@/components/BodyAreaSelector.vue";
-import CodeScanner from "@/components/CodeScanner.vue";
 import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
-import CustomerSelector from "@/components/CustomerSelector.vue";
 import PhotoScroller from "@/components/PhotoScroller.vue";
 import TagSelector from "@/components/TagSelector.vue";
 import CustomerTagCard from "@/pages/customer/component/CustomerTagCard.vue";
-import { useSettingStore } from "@/store/settingStore";
+import { useNavBarStore } from "@/store/navBarStore";
 import type { BodyAreaValue, Customer } from "@/types/Customer";
 import type { PointAccount } from "@/types/Point";
 import type { Tag } from "@/types/Tag";
-import { getCustomerPhotoURL, normalizeBodyAreaValue } from "@/utils/customer";
+import { bodyAreaLabelMap } from "@/utils/bodyArea";
+import { normalizeBodyAreaValue } from "@/utils/customer";
 import { corePermissionCodes, permissionCodes } from "@/utils/permission";
 import { LunarCalendar } from "@/utils/LunarCalendar";
 
@@ -207,15 +168,20 @@ defineOptions({
 
 const route = useRoute();
 const router = useRouter();
-const settingStore = useSettingStore();
+const navBarStore = useNavBarStore();
 const userStore = useUserStore();
 
 const isRemoving = ref(false);
+const removeDialogVisible = ref(false);
+const removeTarget = ref<Customer>();
+const removeConfirmName = ref("");
 
 const canReadStat = computed(() => userStore.hasPermissions(permissionCodes.stat.read));
 const canReadPointAccount = computed(() => userStore.hasPermissions(permissionCodes.point.accountRead));
 const canReadTag = computed(() => userStore.hasPermissions(corePermissionCodes.tag.read));
 const canApplyTag = computed(() => userStore.hasPermissions(corePermissionCodes.tag.apply));
+const removeCustomerName = computed(() => removeTarget.value?.name || "");
+const canConfirmRemove = computed(() => !!removeCustomerName.value && removeConfirmName.value === removeCustomerName.value);
 
 // ---------- 资料 ----------
 
@@ -225,6 +191,7 @@ const isLunarBirthdate = computed(() => customer.value?.birthdateCalendar === "L
 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 inviteeCountText = computed(() => `${customer.value?.invitedCount ?? 0} 人`);
 const photoList = computed(() => (customer.value?.attachmentList || [])
 	.filter(item => !!item.id)
 	.map(item => AttachmentAPI.getReadURL(item.id || "")));
@@ -242,6 +209,19 @@ const selectedAreas = computed<BodyAreaValue>({
 		return;
 	}
 });
+const bodyAreaPickerVisible = ref(false);
+const selectedAreaText = computed(() => {
+	const selectedLabelList = selectedAreas.value.selectedCodeList.map(item => bodyAreaLabelMap.get(item) || item);
+	return selectedLabelList.length ? selectedLabelList.join("、") : "未选择";
+});
+
+function openBodyAreaPicker(): void {
+	bodyAreaPickerVisible.value = true;
+}
+
+function closeBodyAreaPicker(): void {
+	bodyAreaPickerVisible.value = false;
+}
 
 function formatBirthdate(value?: Customer): string {
 	if (!value?.birthdate) {
@@ -270,7 +250,6 @@ async function loadCustomer(): Promise<void> {
 		customer.value = undefined;
 		customerTagList.value = [];
 		selectedTagIdList.value = [];
-		invitees.value = [];
 		showSolarBirthdate.value = false;
 		return;
 	}
@@ -280,12 +259,10 @@ async function loadCustomer(): Promise<void> {
 		customer.value = await CustomerAPI.detail(id);
 		await loadPointAccount();
 		await loadCustomerTags();
-		await loadInvitees();
 	} catch (err) {
 		customer.value = undefined;
 		customerTagList.value = [];
 		selectedTagIdList.value = [];
-		invitees.value = [];
 		console.warn("客户详情加载失败", err);
 		Toast.warning("客户详情加载失败");
 	}
@@ -332,127 +309,37 @@ async function handleTagSelected(tagList: Tag[]): Promise<void> {
 	Toast.success("客户标签已保存");
 }
 
-// ---------- 邀请来源和邀请列表 ----------
-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;
-	}
-
-	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 loadInvitees(): Promise<void> {
-	const customerId = customer.value?.id;
-	if (!customerId) {
-		invitees.value = [];
-		return;
-	}
-
-	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;
-	}
-
-	await CustomerAPI.deleteInvite(item.id);
-	await loadCustomer();
-	Toast.success("已删除邀请关系");
-}
-
 // ---------- 删除客户 ----------
 
 async function confirmRemoveCustomer(): Promise<void> {
 	const currentCustomer = customer.value;
-	if (!currentCustomer?.id) {
+	if (!currentCustomer?.id || isRemoving.value) {
 		return;
 	}
 
-	const customerId = currentCustomer.id;
+	removeTarget.value = currentCustomer;
-	const customerName = currentCustomer.name || currentCustomer.code || "未命名客户";
+	removeConfirmName.value = "";
-	const dialog = DialogPlugin.confirm({
+	removeDialogVisible.value = true;
-		title: "删除客户",
+}
-		content: `确定删除客户 ${customerName} 吗？删除后无法恢复。`,
+
-		cancelBtn: "取消",
+function closeRemoveDialog(): void {
-		confirmBtn: "删除",
+	removeDialogVisible.value = false;
-		onCancel() {
+	removeTarget.value = undefined;
-			dialog.destroy();
+	removeConfirmName.value = "";
-		},
+}
-		async onConfirm() {
+
-			dialog.destroy();
+async function removeConfirmedCustomer(): Promise<void> {
-			await removeCustomer(customerId);
+	const customerId = removeTarget.value?.id;
-		}
+	if (!customerId || !canConfirmRemove.value || isRemoving.value) {
-	});
+		return;
+	}
+
+	removeDialogVisible.value = false;
+	removeTarget.value = undefined;
+	removeConfirmName.value = "";
+	await removeCustomer(customerId);
 }
 
 async function removeCustomer(id: string): Promise<void> {
@@ -466,6 +353,13 @@ async function removeCustomer(id: string): Promise<void> {
 	}
 }
 
+async function toInviteeList(): Promise<void> {
+	if (!customer.value?.id) {
+		return;
+	}
+	await router.push(`/management/customers/${customer.value.id}/invitees`);
+}
+
 async function toEdit(): Promise<void> {
 	if (!customer.value?.id) {
 		return;
@@ -504,26 +398,8 @@ async function toPointAccount(): Promise<void> {
 	});
 }
 
-function isCustomerAncestor(invitee: Customer): boolean {
-	if (!customer.value?.id) {
-		return false;
-	}
-	let current = customer.value.introducerCustomer;
-	while (current?.id) {
-		if (current.id === invitee.id) {
-			return true;
-		}
-		current = current.introducerCustomer;
-	}
-	return false;
-}
-
 // ---------- 加载客户 ----------
 
-async function loadCustomerByCode(code: string): Promise<Customer | undefined> {
-	return await CustomerAPI.findByCode(code) || undefined;
-}
-
 async function toCustomerDetail(target: Customer): Promise<void> {
 	if (!target.id) {
 		return;
@@ -539,14 +415,25 @@ async function toCustomerDataCharts(): Promise<void> {
 	await router.push(`/management/customers/${customer.value.id}/data-charts`);
 }
 
-onMounted(loadCustomer);
+function updateNavBar(): void {
+	navBarStore.clearRight();
+	if (userStore.hasPermissions(permissionCodes.customer.update)) {
+		navBarStore.setRightText("编辑", "var(--td-brand-color)", toEdit);
+	}
+}
+
+onMounted(async () => {
+	await loadCustomer();
+	updateNavBar();
+});
 watch(() => route.params.id, loadCustomer);
+onUnmounted(() => navBarStore.clearRight());
 </script>
 
 <style scoped lang="less">
 .customer-detail {
 	gap: 1rem;
-	padding: calc(var(--app-nav-height) + 1rem) 0 4rem 0;
+	padding: calc(var(--app-nav-height) + 1rem) 0 2rem;
 	display: flex;
 	flex-direction: column;
 
@@ -566,113 +453,56 @@ watch(() => route.params.id, loadCustomer);
 			white-space: normal;
 			overflow-wrap: anywhere;
 		}
-	}
 
-	.conditioning-part {
+		.birthdate-trigger {
-		gap: .5rem;
+			text-align: right;
-		padding: 1rem;
+			text-decoration: underline;
-		display: flex;
+			text-underline-offset: .2rem;
-		flex-direction: column;
-	}
-
-	.invite-list {
-
-		.header {
-			display: flex;
-			padding: 0 var(--td-cell-group-title-padding-left, 16px);
-			font-size: var(--td-cell-group-title-font-size, 14px);
-			text-align: left;
-			background: var(--td-cell-group-title-bg-color, var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3)));
-			align-items: center;
-			line-height: var(--td-cell-group-title-line-height, 45px);
-			justify-content: space-between;
-
-			.title {
-				color: var(--td-cell-group-title-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, .4))));
-			}
-
-			.actions {
-				gap: .875rem;
-				display: flex;
-			}
-		}
-
-		.item {
-
-			&:last-child {
-
-				:deep(.t-cell:after) {
-					display: none;
-				}
-			}
-
-			.cell {
-				padding: 6px 10px 6px 6px;
-
-				.avatar {
-					width: 3.25rem;
-					height: 3.25rem;
-				}
-			}
-		}
-
-		.remove {
-			width: fit-content;
-			padding: 0 1rem;
-			display: flex;
-			align-items: center;
-		}
-
-		.empty {
-			color: #52607a;
-			padding: 1rem;
-			text-align: center;
-			background: #f7faff;
-			border-radius: 1rem;
 		}
 	}
 
-	.bottom-actions {
+	.delete-action {
-		gap: .75rem;
+		--td-button-border-radius: 1rem;
-		left: 1rem;
-		right: 1rem;
-		display: flex;
-		bottom: calc(.75rem + env(safe-area-inset-bottom, 0));
-		position: fixed;
 
-		.delete {
+		margin: 1rem;
-			flex: 1;
-		}
-
-		.edit {
-			flex: 2;
-		}
 	}
 }
 
-.birthdate-trigger {
+.remove-dialog {
-	text-align: right;
-	text-decoration: underline;
-	text-underline-offset: .2rem;
-}
 
-.scan-popup {
+	:deep(.t-dialog__footer) {
-	gap: 1rem;
+		gap: 1rem;
-	padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0)) 1rem;
+	}
-	display: flex;
-	overflow: auto;
-	max-height: 86vh;
-	border-radius: 1.25rem 1.25rem 0 0;
-	flex-direction: column;
 
-	.header {
+	.content {
-		display: flex;
+		text-align: left;
-		align-items: center;
-		justify-content: space-between;
 
-		h3 {
+		.warning {
-			margin: 0;
+			color: #b42318;
-			font-size: 1rem;
+			font-weight: 700;
+		}
+
+		.items {
+			gap: .5rem;
+			height: 9rem;
+			margin: .75rem 0 1rem;
+			display: flex;
+			overflow-y: auto;
+			line-height: 1.2;
+			padding-left: 1.25rem;
+			flex-direction: column;
+		}
+
+		.name {
+			font-weight: 700;
+		}
+
+		.confirm-input {
+			--td-input-vertical-padding: 10px;
+
+			border: 1px solid var(--td-component-border);
+			margin-top: .5rem;
+			border-radius: .75rem;
 		}
 	}
 }
@@ -688,9 +518,16 @@ watch(() => route.params.id, loadCustomer);
 			color: #94a3b8;
 		}
 
-		.scan-popup {
+		.remove-dialog {
-			color: #e2e8f0;
+
-			background: rgba(15, 23, 42, .96);
+			.warning {
+				color: #fda29b;
+			}
+
+			.confirm-input {
+				background: rgba(15, 23, 42, .72);
+				border-color: rgba(148, 163, 184, .16);
+			}
 		}
 	}
 }

src/pages/customer/CustomerInviteeList.vue

@@ -0,0 +1,385 @@
+<template>
+	<div v-can="permissionCodes.customer.read" class="customer-invitee-list">
+		<customer-profile-card
+			v-if="customer"
+			class="customer"
+			:customer="customer"
+		/>
+		<div class="invite-list">
+			<div class="header">
+				<div class="title">邀请客户</div>
+				<div v-can="permissionCodes.customer.update" class="actions">
+					<t-button
+						theme="primary"
+						variant="outline"
+						size="extra-small"
+						content="选择添加"
+						@click="selectorVisible = true"
+					/>
+					<t-button
+						theme="primary"
+						size="extra-small"
+						content="扫码添加"
+						@click="openScanPopup"
+					/>
+				</div>
+			</div>
+			<t-cell-group theme="card">
+				<t-swipe-cell
+					v-for="(item, index) in invitees"
+					:key="item.id || item.code || index"
+					class="item"
+				>
+					<t-cell
+						class="cell"
+						:title="item.name || item.code || '-'"
+						arrow
+						hover
+						@click="toCustomerDetail(item)"
+					>
+						<template #description>
+							<telephone-link :value="item.telephone" placeholder="未填写电话" />
+						</template>
+						<template #leftIcon>
+							<t-image
+								v-if="getCustomerPhotoURL(item)"
+								class="avatar"
+								:src="getCustomerPhotoURL(item)"
+								:alt="item.name"
+								fit="cover"
+							/>
+							<div v-else class="avatar fallback" v-text="(item.name || '客').slice(0, 1)" />
+						</template>
+					</t-cell>
+					<template #right>
+						<div v-can="permissionCodes.customer.update" class="remove bg-red white" @click="removeInvitee(item)">删除</div>
+					</template>
+				</t-swipe-cell>
+				<div v-if="!invitees.length" class="empty" v-text="isLoading ? '正在加载邀请客户' : '暂无邀请客户'" />
+			</t-cell-group>
+		</div>
+	</div>
+	<customer-selector
+		v-model="selectedInviteeId"
+		v-model:visible="selectorVisible"
+		@change="handleInviteeSelected"
+	/>
+	<t-popup v-model="scanPopupVisible" placement="bottom">
+		<div class="scan-popup bg-white">
+			<div class="header">
+				<t-button
+					variant="text"
+					size="small"
+					@click="closeScanPopup"
+					content="取消"
+				/>
+				<h3>扫码添加邀请客户</h3>
+				<t-button
+					theme="primary"
+					size="small"
+					content="确认"
+					@click="confirmScannedInvitee"
+				/>
+			</div>
+			<code-scanner
+				v-if="scanPopupVisible"
+				:visible="scanPopupVisible"
+				:status-text="scanStatus"
+				active-text="正在识别客户编码，请将二维码移入取景框"
+				@decode="handleDecodedText"
+				@status-change="handleScanStatusChange"
+			/>
+			<div v-if="pendingInvitee" class="confirm">
+				<customer-profile-card :customer="pendingInvitee" />
+			</div>
+		</div>
+	</t-popup>
+</template>
+
+<script setup lang="ts">
+import { Toast } from "tdesign-mobile-vue";
+import { useUserStore } from "timi-web";
+import CustomerAPI from "@/api/CustomerAPI";
+import CodeScanner from "@/components/CodeScanner.vue";
+import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
+import CustomerSelector from "@/components/CustomerSelector.vue";
+import { useSettingStore } from "@/store/settingStore";
+import type { Customer } from "@/types/Customer";
+import { getCustomerPhotoURL } from "@/utils/customer";
+import { permissionCodes } from "@/utils/permission";
+
+defineOptions({
+	name: "CustomerInviteeList"
+});
+
+const route = useRoute();
+const router = useRouter();
+const settingStore = useSettingStore();
+const userStore = useUserStore();
+
+const customer = ref<Customer>();
+const invitees = ref<Customer[]>([]);
+const isLoading = ref(false);
+const selectedInviteeId = ref("");
+const selectorVisible = ref(false);
+const scanPopupVisible = ref(false);
+const pendingInvitee = ref<Customer>();
+const scanStatus = ref("点击扫码开始识别");
+let latestDecodedText = "";
+
+const canUpdateCustomer = computed(() => userStore.hasPermissions(permissionCodes.customer.update));
+
+// ---------- 加载 ----------
+
+async function loadCustomer(): Promise<void> {
+	const customerId = String(route.params.id || "");
+	if (!customerId) {
+		customer.value = undefined;
+		invitees.value = [];
+		return;
+	}
+
+	isLoading.value = true;
+	try {
+		customer.value = await CustomerAPI.detail(customerId);
+		invitees.value = await CustomerAPI.listInvited(customerId);
+	} catch (err) {
+		customer.value = undefined;
+		invitees.value = [];
+		console.warn("邀请客户加载失败", err);
+		Toast.warning("邀请客户加载失败");
+	} finally {
+		isLoading.value = false;
+	}
+}
+
+async function loadInvitees(): Promise<void> {
+	const customerId = customer.value?.id;
+	if (!customerId) {
+		invitees.value = [];
+		return;
+	}
+	invitees.value = await CustomerAPI.listInvited(customerId);
+}
+
+// ---------- 添加邀请客户 ----------
+
+function openScanPopup(): void {
+	if (!canUpdateCustomer.value) {
+		return;
+	}
+	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 handleInviteeSelected(id: string): Promise<void> {
+	if (!id) {
+		return;
+	}
+	selectedInviteeId.value = id;
+	const invitee = await CustomerAPI.detail(id);
+	await addInvitee(invitee);
+}
+
+async function addInvitee(invitee: Customer): Promise<boolean> {
+	if (!canUpdateCustomer.value || !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 loadInvitees();
+	Toast.success(`已添加 ${invitee.name || invitee.code}`);
+	return true;
+}
+
+function isCustomerAncestor(invitee: Customer): boolean {
+	let current = customer.value?.introducerCustomer;
+	while (current?.id) {
+		if (current.id === invitee.id) {
+			return true;
+		}
+		current = current.introducerCustomer;
+	}
+	return false;
+}
+
+// ---------- 删除邀请关系 ----------
+
+async function removeInvitee(item: Customer): Promise<void> {
+	if (!canUpdateCustomer.value || !item.id) {
+		return;
+	}
+
+	await CustomerAPI.deleteInvite(item.id);
+	await loadInvitees();
+	Toast.success("已删除邀请关系");
+}
+
+// ---------- 导航 ----------
+
+async function loadCustomerByCode(code: string): Promise<Customer | undefined> {
+	return await CustomerAPI.findByCode(code) || undefined;
+}
+
+async function toCustomerDetail(target: Customer): Promise<void> {
+	if (!target.id) {
+		return;
+	}
+	await router.push(`/management/customers/${target.id}`);
+}
+
+onMounted(loadCustomer);
+watch(() => route.params.id, loadCustomer);
+</script>
+
+<style scoped lang="less">
+.customer-invitee-list {
+	gap: 1rem;
+	padding: calc(var(--app-nav-height) + 1rem) 0 2rem;
+	display: flex;
+	flex-direction: column;
+
+	.customer {
+		margin: 0 1rem;
+	}
+
+	.invite-list {
+
+		.header {
+			padding: 0 var(--td-cell-group-title-padding-left, 16px);
+			display: flex;
+			font-size: var(--td-cell-group-title-font-size, 14px);
+			text-align: left;
+			background: var(--td-cell-group-title-bg-color, var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3)));
+			align-items: center;
+			line-height: var(--td-cell-group-title-line-height, 45px);
+			justify-content: space-between;
+
+			.title {
+				color: var(--td-cell-group-title-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, .4))));
+			}
+
+			.actions {
+				gap: .875rem;
+				display: flex;
+			}
+		}
+
+		.item {
+
+			&:last-child {
+
+				:deep(.t-cell:after) {
+					display: none;
+				}
+			}
+
+			.cell {
+				padding: 6px 10px 6px 6px;
+
+				.avatar {
+					width: 3.25rem;
+					height: 3.25rem;
+				}
+			}
+		}
+
+		.remove {
+			width: fit-content;
+			padding: 0 1rem;
+			display: flex;
+			align-items: center;
+		}
+
+		.empty {
+			padding: 1rem;
+			color: #52607a;
+			text-align: center;
+			background: #f7faff;
+			border-radius: 1rem;
+		}
+	}
+}
+
+.scan-popup {
+	gap: 1rem;
+	padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0)) 1rem;
+	display: flex;
+	overflow: auto;
+	max-height: 86vh;
+	border-radius: 1.25rem 1.25rem 0 0;
+	flex-direction: column;
+
+	.header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+
+		h3 {
+			margin: 0;
+			font-size: 1rem;
+		}
+	}
+}
+
+:global(html.theme-dark) {
+	.customer-invitee-list {
+
+		.empty {
+			color: #94a3b8;
+			background: rgba(30, 41, 59, .9);
+		}
+	}
+
+	.scan-popup {
+		color: #e2e8f0;
+		background: rgba(15, 23, 42, .96);
+	}
+}
+</style>

src/router/routes/customerRoutes.ts

@@ -4,6 +4,7 @@ import QuickSignInPage from "@/pages/home/QuickSignInPage.vue";
 import EventRecordEdit from "@/pages/event/EventRecordEdit.vue";
 import CustomerList from "@/pages/customer/CustomerList.vue";
 import CustomerDetail from "@/pages/customer/CustomerDetail.vue";
+import CustomerInviteeList from "@/pages/customer/CustomerInviteeList.vue";
 import CustomerEdit from "@/pages/customer/CustomerEdit.vue";
 
 const customerRoutes: RouteRecordRaw[] = [
@@ -91,6 +92,20 @@ const customerRoutes: RouteRecordRaw[] = [
 			darkBodyBackground: "#10161f"
 		}
 	},
+	{
+		path: "/management/customers/:id/invitees",
+		name: "CustomerInviteeList",
+		component: CustomerInviteeList,
+		meta: {
+			depth: 5,
+			navBarVisible: true,
+			navBarCanBack: true,
+			navBarTitle: "邀请客户",
+			tabBarVisible: false,
+			bodyBackground: "#F5F5F8",
+			darkBodyBackground: "#10161f"
+		}
+	},
 	{
 		path: "/management/customers/:id/edit",
 		name: "CustomerEdit",

src/styles/global.less

@@ -55,6 +55,10 @@ html.theme-dark body {
 	}
 }
 
+.t-dialog__footer {
+	gap: 1rem;
+}
+
 .load-state {
 	color: var(--tui-gray);
 	padding: .75rem;