From aea71aafd57403898e8e9463bb8a0ff7aa25a27f Mon Sep 17 00:00:00 2001
From: Timi <imyeyu6@qq.com>
Date: Thu, 20 Aug 2026 13:12:04 +0800
Subject: [PATCH] better customer photo selector

---
 src/components/PhotoScroller.vue      | 314 ++++++++++++++++++--------
 src/pages/customer/CustomerDetail.vue |   7 +
 src/pages/customer/CustomerEdit.vue   | 159 +++++++------
 src/pages/home/QuickEntryPage.vue     | 116 ++++++++--
 src/types/Customer.ts                 |  10 +-
 5 files changed, 404 insertions(+), 202 deletions(-)

diff --git a/src/components/PhotoScroller.vue b/src/components/PhotoScroller.vue
index a71cd0c..9ac6488 100644
--- a/src/components/PhotoScroller.vue
+++ b/src/components/PhotoScroller.vue
@@ -2,16 +2,25 @@
 	<div class="photo-section">
 		<div class="t-form__label" v-text="title" />
 		<div class="photo-shell" :class="{ 'without-add': !showAdd }">
-			<div class="photo-row">
-				<div v-if="!displayPhotoList.length" class="photo-empty" v-text="emptyText" />
+			<div class="items">
+				<div v-if="!displayPhotoList.length" class="empty" v-text="emptyText" />
 				<div
 					v-for="(item, index) in displayPhotoList"
-					:key="`${item}-${index}`"
-					class="photo-item"
+					:key="`${item.url}-${item.attachType}-${index}`"
+					class="item"
 				>
-					<t-button variant="text" class="photo-preview-trigger" @click="openPhotoViewer(index)">
-						<t-image :src="item" alt="登记照片" fit="cover" class="photo-image" />
+					<t-button variant="text" class="preview-trigger" @click="openPhotoViewer(index)">
+						<t-image
+							class="image"
+							:src="item.url"
+							:alt="getAttachTypeText(item.attachType)"
+							fit="cover"
+						/>
 					</t-button>
+					<div
+						class="type-label white glass-black clip-text"
+						v-text="getAttachTypeText(item.attachType)"
+					/>
 					<t-button
 						v-if="showRemove && modelValue.length"
 						theme="danger"
@@ -24,17 +33,53 @@
 					</t-button>
 				</div>
 			</div>
-			<t-button
-				v-if="showAdd"
-				theme="primary"
-				variant="dashed"
-				class="add"
-				:loading="loading"
-				:disabled="loading"
-				@click="$emit('add')"
-			>
-				<span v-text="addText" />
-			</t-button>
+			<div v-if="showAdd" class="add-trigger">
+				<t-button
+					v-if="addActionList.length === 1"
+					theme="primary"
+					variant="dashed"
+					class="add"
+					:loading="loading"
+					:disabled="loading"
+					@click="handleAddAction(addActionList[0])"
+				>
+					<span v-text="addActionList[0].text" />
+				</t-button>
+				<t-popover
+					v-else
+					v-model:visible="addPopoverVisible"
+					placement="left"
+					theme="light"
+				>
+					<t-button
+						class="add"
+						theme="primary"
+						variant="dashed"
+						:loading="loading"
+						:disabled="loading"
+					>
+						<span v-text="addText" />
+					</t-button>
+					<template #content>
+						<div class="add-actions">
+							<t-button
+								v-for="(action, index) in addActionList"
+								:key="`${action.emit}-${index}`"
+								variant="text"
+								:theme="action.theme"
+								class="add-action"
+								:disabled="loading"
+								@click="handleAddAction(action)"
+							>
+								<template #icon v-if="action.icon">
+									<t-icon :name="action.icon" />
+								</template>
+								<span v-text="action.text" />
+							</t-button>
+						</div>
+					</template>
+				</t-popover>
+			</div>
 		</div>
 		<t-image-viewer
 			v-model:visible="photoViewerVisible"
@@ -45,18 +90,41 @@
 </template>
 
 <script setup lang="ts">
+import type { ButtonProps } from "tdesign-mobile-vue";
+
 interface Props {
+	addActions?: readonly AddAction[];
 	addText?: string;
 	emptyText?: string;
 	fallbackImage?: string;
 	loading?: boolean;
 	modelValue: string[];
+	photoItems?: readonly PhotoItem[];
 	showAdd?: boolean;
 	showRemove?: boolean;
 	title?: string;
 }
 
+type AddAction = {
+	icon?: string;
+	emit: string;
+	text: string;
+	theme?: ButtonProps["theme"];
+};
+
+type PhotoItem = {
+	attachType?: string;
+	url: string;
+};
+
+const ATTACH_TYPE_TEXT_MAP: Record<string, string> = {
+	PHOTO: "照片",
+	POINT_CARD: "积分卡",
+	OTHER: "其他文件"
+};
+
 const props = withDefaults(defineProps<Props>(), {
+	addActions: () => [],
 	title: "照片列表",
 	addText: "拍照",
 	emptyText: "暂无照片",
@@ -65,21 +133,44 @@ const props = withDefaults(defineProps<Props>(), {
 	showRemove: true
 });
 
-const emit = defineEmits<{
-	add: [];
-	"update:modelValue": [value: string[]];
-}>();
+type Emits = {
+	(event: string): void;
+	(event: "update:modelValue", value: string[]): void;
+};
+
+const emit = defineEmits<Emits>();
 
 const photoViewerVisible = ref(false);
 const photoViewerImages = ref<string[]>([]);
-const displayPhotoList = computed(() => {
+const addPopoverVisible = ref(false);
+const addActionList = computed<readonly AddAction[]>(() => props.addActions.length ? props.addActions : [{
+	emit: "add",
+	text: props.addText,
+	theme: "default"
+}]);
+const displayPhotoList = computed<PhotoItem[]>(() => {
+	if (props.photoItems?.length) {
+		return [...props.photoItems];
+	}
 	if (props.modelValue.length) {
-		return props.modelValue;
+		return props.modelValue.map(url => ({ url, attachType: "PHOTO" }));
 	}
 
-	return props.fallbackImage ? [props.fallbackImage] : [];
+	return props.fallbackImage ? [{ url: props.fallbackImage, attachType: "PHOTO" }] : [];
 });
 
+function getAttachTypeText(attachType?: string): string {
+	return ATTACH_TYPE_TEXT_MAP[attachType || "PHOTO"] || "其他文件";
+}
+
+function handleAddAction(action?: AddAction): void {
+	if (!action) {
+		return;
+	}
+	addPopoverVisible.value = false;
+	emit(action.emit);
+}
+
 function removePhoto(index: number): void {
 	if (index < 0 || props.modelValue.length <= index) {
 		return;
@@ -90,15 +181,17 @@ function removePhoto(index: number): void {
 }
 
 function openPhotoViewer(index: number): void {
-	photoViewerImages.value = [...displayPhotoList.value.slice(index), ...displayPhotoList.value.slice(0, index)];
+	const photoList = [...displayPhotoList.value.slice(index), ...displayPhotoList.value.slice(0, index)];
+	photoViewerImages.value = photoList.map(item => item.url);
 	photoViewerVisible.value = true;
 }
 </script>
 
 <style scoped lang="less">
 .photo-section {
-	display: grid;
 	gap: .375rem;
+	width: 100%;
+	display: grid;
 
 	.photo-shell {
 		display: grid;
@@ -109,78 +202,113 @@ function openPhotoViewer(index: number): void {
 		&.without-add {
 			grid-template-columns: minmax(0, 1fr);
 		}
-	}
 
-	.photo-row {
-		gap: .75rem;
-		width: 100%;
-		height: 100%;
-		min-width: 0;
-		display: flex;
-		overflow-x: auto;
-		overflow-y: hidden;
-		-webkit-overflow-scrolling: touch;
-		scrollbar-width: thin;
-	}
-
-	.add {
-		--td-button-border-radius: .875rem;
-
-		flex: 0 0 5.5rem;
-		width: 5.5rem;
-		height: 5.5rem;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.photo-item {
-		width: 5.5rem;
-		height: 5.5rem;
-		flex: 0 0 5.5rem;
-		position: relative;
-		overflow: hidden;
-		border-radius: 1rem;
-	}
-
-	.photo-preview-trigger {
-		padding: 0;
-		border: 0;
-		width: 100%;
-		height: 100%;
-		display: block;
-		cursor: pointer;
-		background: transparent;
-		border-radius: 1rem;
-	}
-
-	.photo-image {
-		width: 100%;
-		height: 100%;
-		display: block;
-		border-radius: 1rem;
-	}
-
-	.remove {
-		top: .375rem;
-		right: .375rem;
-		position: absolute;
-
-		:deep(.t-button__content) {
+		.items {
+			gap: .75rem;
+			width: 100%;
+			height: 100%;
+			min-width: 0;
 			display: flex;
-			align-items: center;
+			overflow-x: auto;
+			overflow-y: hidden;
+			-webkit-overflow-scrolling: touch;
+			scrollbar-width: thin;
+
+			.empty {
+				width: 100%;
+				color: #52607a;
+				display: flex;
+				padding: 1rem 0;
+				align-items: center;
+				justify-content: center;
+				background: #f8fbff;
+				border-radius: 1rem;
+			}
+
+			.item {
+				width: 5.5rem;
+				height: 5.5rem;
+				flex: 0 0 5.5rem;
+				position: relative;
+				overflow: hidden;
+				border-radius: 1rem;
+
+				.preview-trigger {
+					padding: 0;
+					border: 0;
+					width: 100%;
+					height: 100%;
+					display: block;
+					cursor: pointer;
+					background: transparent;
+
+					.image {
+						height: 100%;
+					}
+				}
+
+				.type-label {
+					width: 100%;
+					bottom: 0;
+					padding: .125rem .5rem;
+					position: absolute;
+					overflow: hidden;
+					font-size: .875rem;
+					text-align: center;
+					line-height: 1.2;
+					border-radius: 0 0 1rem 1rem;
+					pointer-events: none;
+				}
+
+				.remove {
+					top: .375rem;
+					right: .375rem;
+					position: absolute;
+
+					:deep(.t-button__content) {
+						display: flex;
+						align-items: center;
+					}
+				}
+			}
 		}
 	}
 
-	.photo-empty {
-		width: 100%;
-		color: #52607a;
-		display: flex;
-		padding: 1rem 0;
-		align-items: center;
-		justify-content: center;
-		background: #f8fbff;
-		border-radius: 1rem;
+	.add-trigger {
+		--td-popover-padding: 0 .5rem;
+		width: 5.5rem;
+		height: 5.5rem;
+
+		:deep(.t-popover__content) {
+			border-radius: .875rem;
+		}
+
+		.add {
+			--td-button-border-radius: .875rem;
+
+			width: 5.5rem;
+			height: 5.5rem;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+
+		.add-actions {
+			gap: .25rem;
+			display: grid;
+			padding: .5rem 0;
+
+			.add-action {
+				--td-button-medium-height: 32px;
+				--td-button-medium-padding-horizontal: 10px;
+
+				gap: .5rem;
+				width: 100%;
+				position: relative;
+				font-weight: unset;
+				justify-content: start;
+			}
+		}
 	}
 }
 
diff --git a/src/pages/customer/CustomerDetail.vue b/src/pages/customer/CustomerDetail.vue
index 2c46393..0a4e74d 100644
--- a/src/pages/customer/CustomerDetail.vue
+++ b/src/pages/customer/CustomerDetail.vue
@@ -30,6 +30,7 @@
 				<template #title>
 					<photo-scroller
 						:model-value="photoList"
+						:photo-items="photoItemList"
 						:show-add="false"
 						:show-remove="false"
 						title="照片列表"
@@ -227,6 +228,12 @@ const ageText = computed(() => customer.value?.age === undefined || customer.val
 const photoList = computed(() => (customer.value?.attachmentList || [])
 	.filter(item => !!item.id)
 	.map(item => AttachmentAPI.getReadURL(item.id || "")));
+const photoItemList = computed(() => (customer.value?.attachmentList || [])
+	.filter(item => !!item.id)
+	.map(item => ({
+		attachType: item.attachType || "PHOTO",
+		url: AttachmentAPI.getReadURL(item.id || "")
+	})));
 const selectedAreas = computed<BodyAreaValue>({
 	get() {
 		return normalizeBodyAreaValue(customer.value?.conditioningPart);
diff --git a/src/pages/customer/CustomerEdit.vue b/src/pages/customer/CustomerEdit.vue
index bda28df..28c2458 100644
--- a/src/pages/customer/CustomerEdit.vue
+++ b/src/pages/customer/CustomerEdit.vue
@@ -52,25 +52,15 @@
 					borderless
 				/>
 			</t-form-item>
-			<t-form-item label="照片">
-				<photo-field
-					v-model="photoURL"
-					alt-text="客户照片"
+			<t-form-item label-width="0">
+				<photo-scroller
+					v-model="photoList"
+					:photo-items="photoItemList"
+					:add-actions="photoAddActions"
 					:loading="isPhotoUploading"
-					:preview="false"
-					@add="openPhotoPicker('photo')"
-					@clear="handlePhotoClear"
-				/>
-			</t-form-item>
-			<t-form-item label="积分卡">
-				<photo-field
-					v-model="pointCardURL"
-					add-text="拍积分卡"
-					alt-text="积分卡"
-					:loading="isPointCardUploading"
-					:preview="false"
-					@add="openPhotoPicker('pointCard')"
-					@clear="handlePointCardClear"
+					@add-photo="openPhotoPicker('PHOTO')"
+					@add-point-card="openPhotoPicker('POINT_CARD')"
+					@add-other="openPhotoPicker('OTHER')"
 				/>
 			</t-form-item>
 			<t-form-item label="性别">
@@ -185,11 +175,11 @@ import CustomerAPI from "@/api/CustomerAPI";
 import BodyAreaSelector from "@/components/BodyAreaSelector.vue";
 import CodeScanner from "@/components/CodeScanner.vue";
 import CustomerSelector from "@/components/CustomerSelector.vue";
-import PhotoField from "@/components/PhotoField.vue";
+import PhotoScroller from "@/components/PhotoScroller.vue";
 import { useCurrentStoreStore } from "@/store/currentStoreStore";
 import { useSettingStore } from "@/store/settingStore";
-import type { BodyAreaValue, Customer } from "@/types/Customer";
-import { createBodyAreaValue, getCustomerPhotoURL, getCustomerPointCardURL, normalizeBodyAreaValue } from "@/utils/customer";
+import type { BodyAreaValue, Customer, CustomerAttachmentType, EditableCustomerPhoto } from "@/types/Customer";
+import { createBodyAreaValue, normalizeBodyAreaValue } from "@/utils/customer";
 import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
 import { compressUploadImage } from "@/utils/imageCompression";
 
@@ -287,22 +277,43 @@ async function handleIntroducerChange(id: string): Promise<void> {
 // ---------- 表单 ----------
 
 const photoInputRef = ref<HTMLInputElement>();
-type PhotoPickerTarget = "photo" | "pointCard";
-const photoPickerTarget = ref<PhotoPickerTarget>("photo");
-const photoTempFileId = ref("");
+const photoAddActions = [
+	{
+		icon: "user-avatar",
+		text: "拍照片",
+		emit: "add-photo",
+		theme: "primary"
+	},
+	{
+		icon: "cardmembership",
+		text: "拍积分卡",
+		emit: "add-point-card",
+		theme: "primary"
+	},
+	{
+		icon: "file-attachment",
+		text: "其他文件",
+		emit: "add-other",
+		theme: "default"
+	}
+] as const;
+const photoPickerTarget = ref<CustomerAttachmentType>("PHOTO");
 const isPhotoUploading = ref(false);
-const photoURL = ref();
-const pointCardTempFileId = ref("");
-const isPointCardUploading = ref(false);
-const pointCardURL = ref("");
-const originalAttachmentList = ref<Attachment[]>([]);
-const photoChanged = ref(false);
-const pointCardChanged = ref(false);
+const photoItemList = ref<EditableCustomerPhoto[]>([]);
+const photoList = computed<string[]>({
+	get() {
+		return photoItemList.value.map(item => item.url);
+	},
+	set(value) {
+		const urlSet = new Set(value);
+		photoItemList.value = photoItemList.value.filter(item => urlSet.has(item.url));
+	}
+});
 const selectedAreas = ref<BodyAreaValue>(createBodyAreaValue());
 const formData = reactive<Customer>({
 });
 
-function openPhotoPicker(target: PhotoPickerTarget): void {
+function openPhotoPicker(target: CustomerAttachmentType): void {
 	photoPickerTarget.value = target;
 	photoInputRef.value?.click();
 }
@@ -369,13 +380,13 @@ async function loadDetail() {
 		const customer = await CustomerAPI.detail(id);
 		Object.assign(formData, customer);
 		formData.storeId = customer.storeId || formData.storeId;
-		photoURL.value = getCustomerPhotoURL(customer);
-		pointCardURL.value = getCustomerPointCardURL(customer);
-		originalAttachmentList.value = [...(customer.attachmentList || [])];
-		photoTempFileId.value = "";
-		pointCardTempFileId.value = "";
-		photoChanged.value = false;
-		pointCardChanged.value = false;
+		photoItemList.value = (customer.attachmentList || [])
+			.filter(item => !!item.id)
+			.map(item => ({
+				attachment: item,
+				attachType: normalizeAttachmentType(item.attachType),
+				url: AttachmentAPI.getReadURL(item.id || "")
+			}));
 		selectedAreas.value = normalizeBodyAreaValue(customer.conditioningPart);
 		introducerCustomerId.value = customer.introducerCustomerId || customer.introducerCustomer?.id || "";
 	} catch (err) {
@@ -409,50 +420,37 @@ watch(() => formData.birthdate, (value) => {
 
 // ---------- 照片 ----------
 
+function normalizeAttachmentType(attachType?: string): CustomerAttachmentType {
+	if (attachType === "POINT_CARD" || attachType === "OTHER") {
+		return attachType;
+	}
+
+	return "PHOTO";
+}
+
 async function handlePhotoSelected(event: Event): Promise<void> {
 	const input = event.target as HTMLInputElement;
 	const file = input.files?.[0];
 	if (!file) {
 		return;
 	}
-	const isPointCard = photoPickerTarget.value === "pointCard";
-	if (isPointCard) {
-		isPointCardUploading.value = true;
-	} else {
-		isPhotoUploading.value = true;
-	}
+	isPhotoUploading.value = true;
 	try {
 		const compressedFile = await compressUploadImage(file);
 		const [tempFile] = await AttachmentAPI.upload(compressedFile);
-		if (isPointCard) {
-			pointCardTempFileId.value = tempFile.id;
-			pointCardURL.value = AttachmentAPI.getTempReadURL(tempFile.id);
-			pointCardChanged.value = true;
-		} else {
-			photoTempFileId.value = tempFile.id;
-			photoURL.value = AttachmentAPI.getTempReadURL(tempFile.id);
-			photoChanged.value = true;
+		if (tempFile?.id) {
+			photoItemList.value.push({
+				attachType: photoPickerTarget.value,
+				tempFileId: tempFile.id,
+				url: AttachmentAPI.getTempReadURL(tempFile.id)
+			});
 		}
 	} finally {
-		if (isPointCard) {
-			isPointCardUploading.value = false;
-		} else {
-			isPhotoUploading.value = false;
-		}
+		isPhotoUploading.value = false;
 		input.value = "";
 	}
 }
 
-function handlePhotoClear(): void {
-	photoTempFileId.value = "";
-	photoChanged.value = true;
-}
-
-function handlePointCardClear(): void {
-	pointCardTempFileId.value = "";
-	pointCardChanged.value = true;
-}
-
 // ---------- 保存 ----------
 
 const isSubmitting = ref(false);
@@ -493,19 +491,18 @@ async function doSubmit(): Promise<void> {
 }
 
 function buildAttachmentList(): Attachment[] {
-	let attachmentList = [...originalAttachmentList.value];
-	if (photoChanged.value) {
-		attachmentList = replaceAttachment(attachmentList, "PHOTO", photoTempFileId.value);
-	}
-	if (pointCardChanged.value) {
-		attachmentList = replaceAttachment(attachmentList, "POINT_CARD", pointCardTempFileId.value);
-	}
-	return attachmentList;
-}
-
-function replaceAttachment(attachmentList: Attachment[], attachType: "PHOTO" | "POINT_CARD", tempFileId: string): Attachment[] {
-	const preservedList = attachmentList.filter(item => item.attachType !== attachType);
-	return tempFileId ? [...preservedList, { attachType, tempFileId }] : preservedList;
+	return photoItemList.value.flatMap(item => {
+		if (item.attachment) {
+			return [item.attachment];
+		}
+		if (item.tempFileId) {
+			return [{
+				attachType: item.attachType,
+				tempFileId: item.tempFileId
+			}];
+		}
+		return [];
+	});
 }
 </script>
 
diff --git a/src/pages/home/QuickEntryPage.vue b/src/pages/home/QuickEntryPage.vue
index f1b47b8..819d6d8 100644
--- a/src/pages/home/QuickEntryPage.vue
+++ b/src/pages/home/QuickEntryPage.vue
@@ -48,14 +48,16 @@
 					</template>
 				</t-input>
 			</t-form-item>
-			<t-form-item label="客户照片">
-				<photo-field
-					v-model="customerPhoto"
-					alt-text="客户照片"
+			<t-form-item label-width="0">
+				<photo-scroller
+					title="客户照片列表"
+					v-model="customerPhotoList"
+					:photo-items="customerPhotoItemList"
+					:add-actions="customerPhotoAddActions"
 					:loading="customerPhotoUploading"
-					:preview="false"
-					@add="openCustomerPhotoPicker"
-					@clear="customerPhotoTempFileId = ''"
+					@add-photo="openCustomerPhotoPicker('PHOTO')"
+					@add-point-card="openCustomerPhotoPicker('POINT_CARD')"
+					@add-other="openCustomerPhotoPicker('OTHER')"
 				/>
 			</t-form-item>
 			<t-form-item label-width="0">
@@ -134,20 +136,18 @@
 </template>
 
 <script setup lang="ts">
-import { AttachmentAPI, Toolkit, useUserStore } from "timi-web";
+import { AttachmentAPI, Toolkit, useUserStore, type Attachment } from "timi-web";
 import type { TdInputProps } from "tdesign-mobile-vue";
 import { Toast } from "tdesign-mobile-vue";
 import CustomerAPI from "@/api/CustomerAPI";
 import EventAPI from "@/api/EventAPI";
 import CodeScanner from "@/components/CodeScanner.vue";
 import CustomerSelector from "@/components/CustomerSelector.vue";
-import PhotoField from "@/components/PhotoField.vue";
 import PhotoScroller from "@/components/PhotoScroller.vue";
 import { useSettingStore } from "@/store/settingStore";
 import type { Customer } from "@/types/Customer";
 import type { EventItem } from "@/types/EventItem";
 import type { PointAction } from "@/types/Point";
-import { getCustomerPhotoURL } from "@/utils/customer";
 import { getEventNumberValuePlaceholder, resolveEventNumberValue } from "@/utils/eventValue";
 import { permissionCodes } from "@/utils/permission";
 import { loadSourceValueConfig, type SourceValueConfig } from "@/utils/point";
@@ -254,6 +254,14 @@ type QuickPhoto = {
 	url: string;
 };
 
+type CustomerAttachmentType = "PHOTO" | "POINT_CARD" | "OTHER";
+type QuickCustomerPhoto = {
+	attachment?: Attachment;
+	attachType: CustomerAttachmentType;
+	tempFileId?: string;
+	url: string;
+};
+
 // ---------- 扫码 ----------
 const scanCode = ref("");
 const currentCode = ref("");
@@ -474,18 +482,61 @@ function getCustomerName(customer?: Customer): string {
 }
 
 // ---------- 客户照片 ----------
-const customerPhoto = ref("");
-const customerPhotoTempFileId = ref("");
+const customerPhotoAddActions = [
+	{
+		icon: "user-avatar",
+		text: "拍照片",
+		emit: "add-photo",
+		theme: "primary"
+	},
+	{
+		icon: "cardmembership",
+		text: "拍积分卡",
+		emit: "add-point-card",
+		theme: "primary"
+	},
+	{
+		icon: "file-attachment",
+		text: "其他文件",
+		emit: "add-other",
+		theme: "default"
+	}
+] as const;
+const customerPhotoItemList = ref<QuickCustomerPhoto[]>([]);
 const customerPhotoInputRef = ref<HTMLInputElement>();
 const customerPhotoUploading = ref(false);
+const customerPhotoPickerTarget = ref<CustomerAttachmentType>("PHOTO");
+const customerPhotoList = computed<string[]>({
+	get() {
+		return customerPhotoItemList.value.map(item => item.url);
+	},
+	set(value) {
+		const urlSet = new Set(value);
+		customerPhotoItemList.value = customerPhotoItemList.value.filter(item => urlSet.has(item.url));
+	}
+});
 
-function openCustomerPhotoPicker(): void {
+function openCustomerPhotoPicker(target: CustomerAttachmentType): void {
+	customerPhotoPickerTarget.value = target;
 	customerPhotoInputRef.value?.click();
 }
 
 function syncCustomerPhoto(customer?: Customer): void {
-	customerPhotoTempFileId.value = "";
-	customerPhoto.value = getCustomerPhotoURL(customer);
+	customerPhotoItemList.value = (customer?.attachmentList || [])
+		.filter(item => !!item.id)
+		.map(item => ({
+			attachment: item,
+			attachType: normalizeCustomerAttachmentType(item.attachType),
+			url: AttachmentAPI.getReadURL(item.id || "")
+		}));
+}
+
+function normalizeCustomerAttachmentType(attachType?: string): CustomerAttachmentType {
+	if (attachType === "POINT_CARD" || attachType === "OTHER") {
+		return attachType;
+	}
+
+	return "PHOTO";
 }
 
 async function handleCustomerPhotoSelected(event: Event): Promise<void> {
@@ -502,8 +553,11 @@ async function handleCustomerPhotoSelected(event: Event): Promise<void> {
 			showToast("客户照片上传失败", "warning");
 			return;
 		}
-		customerPhotoTempFileId.value = tempFile.id;
-		customerPhoto.value = AttachmentAPI.getTempReadURL(tempFile.id);
+		customerPhotoItemList.value.push({
+			attachType: customerPhotoPickerTarget.value,
+			tempFileId: tempFile.id,
+			url: AttachmentAPI.getTempReadURL(tempFile.id)
+		});
 	} finally {
 		customerPhotoUploading.value = false;
 		input.value = "";
@@ -579,11 +633,9 @@ async function saveRecord(): Promise<void> {
 			}))
 		};
 		// 客户照片
-		if (customerPhotoTempFileId.value) {
-			customer.attachmentList = [{
-				tempFileId: customerPhotoTempFileId.value,
-				attachType: "PHOTO"
-			}];
+		const customerAttachmentList = buildCustomerAttachmentList();
+		if (customerAttachmentList.length) {
+			customer.attachmentList = customerAttachmentList;
 		}
 		// 记录照片
 		if (Toolkit.isNotEmpty(customer.eventRecordList)) {
@@ -618,9 +670,8 @@ function resetFormAfterSubmit(): void {
 	selectedCustomerId.value = "";
 	currentCustomer.value = undefined;
 	boundCodeCustomer.value = undefined;
-	customerPhoto.value = "";
-	customerPhotoTempFileId.value = "";
-		recordPhotoItemList.value = [];
+	customerPhotoItemList.value = [];
+	recordPhotoItemList.value = [];
 	pointValueText.value = "";
 	for (const eventId of Object.keys(numberValueTextMap)) {
 		delete numberValueTextMap[eventId];
@@ -628,6 +679,21 @@ function resetFormAfterSubmit(): void {
 	refreshInputTips();
 }
 
+function buildCustomerAttachmentList(): Attachment[] {
+	return customerPhotoItemList.value.flatMap(item => {
+		if (item.attachment) {
+			return [item.attachment];
+		}
+		if (item.tempFileId) {
+			return [{
+				attachType: item.attachType,
+				tempFileId: item.tempFileId
+			}];
+		}
+		return [];
+	});
+}
+
 function validateForm(): string {
 	const customerCode = (currentCode.value || scanCode.value).trim();
 	if (!customerCode) {
diff --git a/src/types/Customer.ts b/src/types/Customer.ts
index edb2322..08a12e0 100644
--- a/src/types/Customer.ts
+++ b/src/types/Customer.ts
@@ -32,9 +32,13 @@ export type Customer = {
 	attachmentList?: Attachment[];
 } & Model;
 
-export type CustomerSearchReq = {
-	keyword?: string;
-	introducerCustomerId?: string;
+export type CustomerAttachmentType = "PHOTO" | "POINT_CARD" | "OTHER";
+
+export type EditableCustomerPhoto = {
+	attachment?: Attachment;
+	attachType: CustomerAttachmentType;
+	tempFileId?: string;
+	url: string;
 };
 
 export type CustomerTrendStatReq = {