better customer photo selector

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) {