change type in PhotoScroller

src/components/PhotoScroller.vue

@@ -22,7 +22,7 @@
 						v-text="getAttachTypeText(item.attachType)"
 					/>
 					<t-button
-						v-if="showRemove && modelValue.length"
+						v-if="showRemove && hasRemovablePhotos"
 						theme="danger"
 						class="remove"
 						shape="circle"
@@ -81,27 +81,82 @@
 				</t-popover>
 			</div>
 		</div>
-		<t-image-viewer
-			v-model:visible="photoViewerVisible"
-			:images="photoViewerImages"
-			show-index
-		/>
 	</div>
+	<t-image-viewer
+		v-model:visible="photoViewerVisible"
+		:images="photoViewerImages"
+		show-index
+		@close="photoActionVisible = false"
+		@index-change="handlePhotoViewerIndexChange"
+	>
+		<template #delete-btn>
+			<div v-if="showViewerActions" class="viewer-action" @click.stop>
+				<t-popover
+					v-model:visible="photoActionVisible"
+					placement="bottom"
+					theme="light"
+					:show-arrow="false"
+				>
+					<t-button class="white" variant="text">
+						<t-icon name="ellipsis" />
+					</t-button>
+					<template #content>
+						<div class="actions" @click.stop>
+							<div class="title">修改类型</div>
+							<div class="type">
+								<t-button
+									class="button"
+									v-for="item in attachTypeOptions"
+									:key="item.value"
+									:theme="item.value === currentPhotoItem?.attachType ? 'primary' : 'default'"
+									variant="text"
+									size="extra-small"
+									:disabled="isSubmitting"
+									@click="changePhotoType(item.value)"
+								>
+									<span v-text="item.text" />
+								</t-button>
+							</div>
+							<t-divider />
+							<t-button
+								class="button delete-action"
+								theme="danger"
+								size="extra-small"
+								variant="text"
+								:disabled="isSubmitting"
+								@click="removeCurrentPhoto"
+							>
+								<template #icon>
+									<t-icon name="delete" />
+								</template>
+								删除
+							</t-button>
+						</div>
+					</template>
+				</t-popover>
+			</div>
+		</template>
+	</t-image-viewer>
 </template>
 
 <script setup lang="ts">
 import type { ButtonProps } from "tdesign-mobile-vue";
+import type { PhotoItem } from "@/types/Photo";
+import { Message } from "@/utils/message";
 
 interface Props {
 	addActions?: readonly AddAction[];
 	addText?: string;
+	editMode?: boolean;
 	emptyText?: string;
 	fallbackImage?: string;
 	loading?: boolean;
 	modelValue: string[];
 	photoItems?: readonly PhotoItem[];
+	showViewerActions?: boolean;
 	showAdd?: boolean;
 	showRemove?: boolean;
+	submit?: (photoItems: PhotoItem[]) => Promise<void>;
 	title?: string;
 }
 
@@ -112,10 +167,8 @@ type AddAction = {
 	theme?: ButtonProps["theme"];
 };
 
-type PhotoItem = {
+type ViewerPhotoItem = PhotoItem & {
-	attachType?: string;
+	sourceIndex: number;
-	previewUrl?: string;
-	url: string;
 };
 
 const ATTACH_TYPE_TEXT_MAP: Record<string, string> = {
@@ -128,21 +181,28 @@ const props = withDefaults(defineProps<Props>(), {
 	addActions: () => [],
 	title: "照片列表",
 	addText: "拍照",
+	editMode: false,
 	emptyText: "暂无照片",
 	loading: false,
 	showAdd: true,
-	showRemove: true
+	showRemove: true,
+	showViewerActions: true
 });
 
 type Emits = {
 	(event: string): void;
 	(event: "update:modelValue", value: string[]): void;
+	(event: "update:photoItems", value: PhotoItem[]): void;
 };
 
 const emit = defineEmits<Emits>();
 
 const photoViewerVisible = ref(false);
 const photoViewerImages = ref<string[]>([]);
+const photoViewerItems = ref<ViewerPhotoItem[]>([]);
+const photoViewerIndex = ref(0);
+const photoActionVisible = ref(false);
+const isSubmitting = ref(false);
 const addPopoverVisible = ref(false);
 const addActionList = computed<readonly AddAction[]>(() => props.addActions.length ? props.addActions : [{
 	emit: "add",
@@ -151,7 +211,7 @@ const addActionList = computed<readonly AddAction[]>(() => props.addActions.leng
 }]);
 const displayPhotoList = computed<PhotoItem[]>(() => {
 	if (props.photoItems?.length) {
-		return [...props.photoItems];
+		return props.photoItems.map(normalizePhotoItem);
 	}
 	if (props.modelValue.length) {
 		return props.modelValue.map(url => ({ url, attachType: "PHOTO" }));
@@ -159,6 +219,13 @@ const displayPhotoList = computed<PhotoItem[]>(() => {
 
 	return props.fallbackImage ? [{ url: props.fallbackImage, attachType: "PHOTO" }] : [];
 });
+const hasRemovablePhotos = computed(() => !!props.photoItems?.length || !!props.modelValue.length);
+const attachTypeOptions = [
+	{ text: "照片", value: "PHOTO" },
+	{ text: "积分卡", value: "POINT_CARD" },
+	{ text: "其他文件", value: "OTHER" }
+] as const;
+const currentPhotoItem = computed(() => photoViewerItems.value[photoViewerIndex.value]);
 
 function getAttachTypeText(attachType?: string): string {
 	return ATTACH_TYPE_TEXT_MAP[attachType || "PHOTO"] || "其他文件";
@@ -172,20 +239,86 @@ function handleAddAction(action?: AddAction): void {
 	emit(action.emit);
 }
 
-function removePhoto(index: number): void {
+async function removePhoto(index: number): Promise<void> {
-	if (index < 0 || props.modelValue.length <= index) {
+	if (index < 0 || displayPhotoList.value.length <= index) {
 		return;
 	}
 
-	const nextValue = props.modelValue.filter((_, itemIndex) => itemIndex !== index);
+	await applyPhotoItems(displayPhotoList.value.filter((_, itemIndex) => itemIndex !== index));
-	emit("update:modelValue", nextValue);
 }
 
 function openPhotoViewer(index: number): void {
-	const photoList = [...displayPhotoList.value.slice(index), ...displayPhotoList.value.slice(0, index)];
+	const viewerItems = displayPhotoList.value.map((item, sourceIndex) => ({ item, sourceIndex }));
-	photoViewerImages.value = photoList.map(item => item.previewUrl || item.url);
+	const rotatedItems = [...viewerItems.slice(index), ...viewerItems.slice(0, index)];
+	photoViewerItems.value = rotatedItems.map(({ item, sourceIndex }) => ({ ...item, sourceIndex }));
+	photoViewerImages.value = photoViewerItems.value.map(item => item.previewUrl || item.url);
+	photoViewerIndex.value = 0;
+	photoActionVisible.value = false;
 	photoViewerVisible.value = true;
 }
+
+function handlePhotoViewerIndexChange(index: number): void {
+	photoViewerIndex.value = index;
+	photoActionVisible.value = false;
+}
+
+async function changePhotoType(attachType: string): Promise<void> {
+	const currentItem = currentPhotoItem.value;
+	if (!currentItem || currentItem.attachType === attachType) {
+		photoActionVisible.value = false;
+		return;
+	}
+
+	const nextPhotoItems = displayPhotoList.value.map((item, index) => index === currentItem.sourceIndex ? {
+		...item,
+		attachType
+	} : item);
+	await applyPhotoItems(nextPhotoItems);
+}
+
+async function removeCurrentPhoto(): Promise<void> {
+	const currentItem = currentPhotoItem.value;
+	if (!currentItem) {
+		return;
+	}
+
+	await applyPhotoItems(displayPhotoList.value.filter((_, index) => index !== currentItem.sourceIndex));
+}
+
+async function applyPhotoItems(nextPhotoItems: PhotoItem[]): Promise<void> {
+	if (isSubmitting.value) {
+		return;
+	}
+
+	if (!props.editMode && !props.submit) {
+		Message.warning("展示模式未配置照片保存方法");
+		return;
+	}
+
+	if (!props.editMode) {
+		isSubmitting.value = true;
+		try {
+			await props.submit!(nextPhotoItems);
+		} catch {
+			Message.error("照片修改失败");
+			return;
+		} finally {
+			isSubmitting.value = false;
+		}
+	}
+
+	emit("update:photoItems", nextPhotoItems);
+	emit("update:modelValue", nextPhotoItems.map(item => item.url));
+	photoActionVisible.value = false;
+	photoViewerVisible.value = false;
+}
+
+function normalizePhotoItem(item: PhotoItem): PhotoItem {
+	return {
+		...item,
+		attachType: item.attachType || item.attachment?.attachType || "PHOTO"
+	};
+}
 </script>
 
 <style scoped lang="less">
@@ -313,6 +446,36 @@ function openPhotoViewer(index: number): void {
 	}
 }
 
+.viewer-action {
+	color: #fff;
+	margin-left: -1rem;
+
+	.actions {
+		display: flex;
+		min-width: 8rem;
+		flex-direction: column;
+
+		.title {
+			padding: 0 .75rem;
+			font-weight: 700;
+		}
+
+		.type {
+			display: flex;
+			justify-content: start;
+			flex-direction: column;
+
+			.button {
+				text-indent: 1.5em;
+			}
+		}
+
+		.button {
+			justify-content: start;
+		}
+	}
+}
+
 :global(html.theme-dark) {
 	.photo-scroller {
 		.field-title,

src/pages/customer/CustomerDetail.vue

@@ -33,8 +33,10 @@
 					<photo-scroller
 						:model-value="photoList"
 						:photo-items="photoItemList"
+						:show-viewer-actions="canUpdateCustomer"
 						:show-add="false"
 						:show-remove="false"
+						:submit="submitPhotoItems"
 						title="照片列表"
 					/>
 				</template>
@@ -152,7 +154,7 @@
 
 <script setup lang="ts">
 import { Message } from "@/utils/message";
-import { PassTimeLabel, Text, useUserStore } from "timi-web";
+import { PassTimeLabel, Text, useUserStore, type Attachment } from "timi-web";
 import CustomerAPI from "@/api/CustomerAPI";
 import PointAPI from "@/api/PointAPI";
 import TagAPI from "@/api/TagAPI";
@@ -164,6 +166,7 @@ import CustomerTagCard from "@/pages/customer/component/CustomerTagCard.vue";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { BodyAreaValue, Customer } from "@/types/Customer";
 import type { PointAccount } from "@/types/Point";
+import type { PhotoItem } from "@/types/Photo";
 import type { Tag } from "@/types/Tag";
 import { bodyAreaLabelMap } from "@/utils/bodyArea";
 import { getAttachmentReadURL } from "@/utils/attachment";
@@ -189,6 +192,7 @@ const canReadStat = computed(() => userStore.hasPermissions(permissionCodes.stat
 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 canUpdateCustomer = computed(() => userStore.hasPermissions(permissionCodes.customer.update));
 const removeCustomerName = computed(() => removeTarget.value?.name || "");
 const canConfirmRemove = computed(() => !!removeCustomerName.value && removeConfirmName.value === removeCustomerName.value);
 
@@ -204,11 +208,50 @@ const inviteeCountText = computed(() => `${customer.value?.invitedCount ?? 0}
 const photoItemList = computed(() => (customer.value?.attachmentList || [])
 	.filter(item => !!item.id)
 	.map(item => ({
+		attachment: item,
 		attachType: item.attachType || "PHOTO",
 		previewUrl: getAttachmentReadURL(item.id || ""),
 		url: getAttachmentReadURL(item.id || "", 90)
 	})));
 const photoList = computed(() => photoItemList.value.map(item => item.url));
+
+async function submitPhotoItems(photoItems: PhotoItem[]): Promise<void> {
+	const currentCustomer = customer.value;
+	if (!currentCustomer?.id || !currentCustomer.name) {
+		throw new Error("客户资料不完整");
+	}
+
+	const attachmentList = buildPhotoAttachmentList(photoItems);
+	const payload: Customer = {
+		...currentCustomer,
+		attachmentList
+	};
+	delete payload.tagApply;
+	delete payload.introducerCustomer;
+	await CustomerAPI.update(payload);
+	customer.value = {
+		...currentCustomer,
+		attachmentList
+	};
+}
+
+function buildPhotoAttachmentList(photoItems: PhotoItem[]): Attachment[] {
+	return photoItems.flatMap(item => {
+		if (item.attachment) {
+			return [{
+				...item.attachment,
+				attachType: item.attachType || item.attachment.attachType || "PHOTO"
+			}];
+		}
+		if (item.tempFileId) {
+			return [{
+				attachType: item.attachType || "PHOTO",
+				tempFileId: item.tempFileId
+			}];
+		}
+		return [];
+	});
+}
 const selectedAreas = computed<BodyAreaValue>({
 	get() {
 		return normalizeBodyAreaValue(customer.value?.conditioningPart);

src/pages/customer/CustomerEdit.vue

@@ -53,7 +53,8 @@
 				<div class="photo">
 					<photo-scroller
 						v-model="photoList"
-						:photo-items="photoItemList"
+						v-model:photo-items="photoItemList"
+						:edit-mode="true"
 						:add-actions="photoAddActions"
 						:loading="isPhotoUploading"
 						@add-photo="openPhotoPicker('PHOTO')"
@@ -581,7 +582,10 @@ onUnmounted(() => {
 function buildAttachmentList(): Attachment[] {
 	return photoItemList.value.flatMap(item => {
 		if (item.attachment) {
-			return [item.attachment];
+			return [{
+				...item.attachment,
+				attachType: item.attachType || item.attachment.attachType || "PHOTO"
+			}];
 		}
 		if (item.tempFileId) {
 			return [{

src/pages/customer/CustomerQrCode.vue

@@ -238,7 +238,7 @@ async function printQrCode(): Promise<void> {
 .qr-page {
 	gap: 1rem;
 	min-height: 100vh;
-	padding: calc(var(--app-nav-height) + 1rem) 0 6rem 0;
+	padding: calc(var(--app-nav-height) + 1rem) 0 2rem 0;
 	display: flex;
 	flex-direction: column;
 

src/pages/event/EventRecordDetail.vue

@@ -23,8 +23,10 @@
 			class="photo-panel"
 			:model-value="recordPhotoList"
 			:photo-items="recordPhotoItemList"
+			:show-viewer-actions="canUpdateRecord"
 			:show-add="false"
 			:show-remove="false"
+			:submit="submitPhotoItems"
 			title="登记照片"
 		/>
 		<t-empty v-else :description="isLoading ? '正在加载登记事件记录' : '登记事件记录不存在'" />
@@ -32,13 +34,14 @@
 </template>
 
 <script setup lang="ts">
-import { Text, Time, useUserStore } from "timi-web";
+import { Text, Time, useUserStore, type Attachment } from "timi-web";
 import EventRecordAPI from "@/api/EventRecordAPI";
 import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
 import PhotoScroller from "@/components/PhotoScroller.vue";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { EventRecord } from "@/types/EventRecord";
-import { getEventRecordPhotoURL } from "@/utils/eventRecord";
+import type { PhotoItem } from "@/types/Photo";
+import { getAttachmentReadURL } from "@/utils/attachment";
 import { formatEventNumberValue } from "@/utils/eventValue";
 import { permissionCodes } from "@/utils/permission";
 
@@ -57,13 +60,52 @@ const record = ref<EventRecord>();
 const isLoading = ref(false);
 
 const canUpdateRecord = computed(() => userStore.hasPermissions(permissionCodes.eventRecord.update));
-const recordPhotoItemList = computed(() => {
+const recordPhotoItemList = computed(() => (record.value?.attachmentList || [])
-	const url = getEventRecordPhotoURL(record.value);
+	.filter(item => !!item.id)
-	const thumbnailURL = getEventRecordPhotoURL(record.value, 64);
+	.map(item => ({
-	return thumbnailURL ? [{ url: thumbnailURL, previewUrl: url }] : [];
+		attachment: item,
-});
+		attachType: item.attachType || "PHOTO",
+		previewUrl: getAttachmentReadURL(item.id || ""),
+		url: getAttachmentReadURL(item.id || "", 64)
+	})));
 const recordPhotoList = computed(() => recordPhotoItemList.value.map(item => item.url));
 
+async function submitPhotoItems(photoItems: PhotoItem[]): Promise<void> {
+	const currentRecord = record.value;
+	if (!currentRecord?.id) {
+		throw new Error("登记记录不存在");
+	}
+
+	const attachmentList = buildPhotoAttachmentList(photoItems);
+	await EventRecordAPI.update({
+		id: currentRecord.id,
+		remark: currentRecord.remark || "",
+		attachmentList
+	});
+	record.value = {
+		...currentRecord,
+		attachmentList
+	};
+}
+
+function buildPhotoAttachmentList(photoItems: PhotoItem[]): Attachment[] {
+	return photoItems.flatMap(item => {
+		if (item.attachment) {
+			return [{
+				...item.attachment,
+				attachType: item.attachType || item.attachment.attachType || "PHOTO"
+			}];
+		}
+		if (item.tempFileId) {
+			return [{
+				attachType: item.attachType || "PHOTO",
+				tempFileId: item.tempFileId
+			}];
+		}
+		return [];
+	});
+}
+
 function getNumberValueText(value: EventRecord): string {
 	return formatEventNumberValue(value.event, value.numberValue);
 }

src/pages/event/EventRecordEdit.vue

@@ -115,7 +115,8 @@
 			<div class="photo-part">
 				<photo-scroller
 					v-model="photoList"
-					:photo-items="photoItemList"
+					v-model:photo-items="photoItemList"
+					:edit-mode="true"
 					:loading="isPhotoUploading"
 					@add="capturePhoto"
 				/>
@@ -225,6 +226,7 @@ const navBarStore = useNavBarStore();
 
 type EditablePhoto = {
 	attachment?: Partial<Attachment>;
+	attachType?: string;
 	previewUrl?: string;
 	tempFileId?: string;
 	url: string;
@@ -694,12 +696,15 @@ function buildTempFileIdList(): string[] {
 function buildPhotoAttachmentList(): Array<Partial<Attachment>> {
 	return photoItemList.value.map((item) => {
 		if (item.attachment) {
-			return item.attachment;
+			return {
+				...item.attachment,
+				attachType: item.attachType || item.attachment.attachType || "PHOTO"
+			};
 		}
 
 		return {
 			tempFileId: item.tempFileId,
-			attachType: "PHOTO"
+			attachType: item.attachType || "PHOTO"
 		};
 	});
 }

src/pages/home/QuickEntryPage.vue

@@ -53,7 +53,8 @@
 					<photo-scroller
 						title="客户照片列表"
 						v-model="customerPhotoList"
-						:photo-items="customerPhotoItemList"
+						v-model:photo-items="customerPhotoItemList"
+						:edit-mode="true"
 						:add-actions="customerPhotoAddActions"
 						:loading="customerPhotoUploading"
 						@add-photo="openCustomerPhotoPicker('PHOTO')"
@@ -109,6 +110,8 @@
 				<photo-scroller
 					title="登记事件照片"
 					v-model="recordPhotoList"
+					v-model:photo-items="recordPhotoItemList"
+					:edit-mode="true"
 					:loading="recordPhotoUploading"
 					@add="openRecordPhotoPicker"
 				/>
@@ -254,6 +257,7 @@ let latestDecodedText = "";
 const inputCode = computed(() => currentCode.value || scanCode.value || "");
 
 type QuickPhoto = {
+	attachType?: string;
 	tempFileId: string;
 	url: string;
 };
@@ -671,7 +675,7 @@ async function saveRecord(): Promise<void> {
 		if (Toolkit.isNotEmpty(customer.eventRecordList)) {
 			customer.eventRecordList![0].attachmentList = recordPhotoItemList.value.map(item => ({
 				tempFileId: item.tempFileId,
-				attachType: "PHOTO"
+				attachType: item.attachType || "PHOTO"
 			}));
 		}
 		await EventRecordAPI.createWithCustomer(customer);
@@ -712,7 +716,10 @@ function resetFormAfterSubmit(): void {
 function buildCustomerAttachmentList(): Attachment[] {
 	return customerPhotoItemList.value.flatMap(item => {
 		if (item.attachment) {
-			return [item.attachment];
+			return [{
+				...item.attachment,
+				attachType: item.attachType || item.attachment.attachType || "PHOTO"
+			}];
 		}
 		if (item.tempFileId) {
 			return [{

src/styles/global.less

@@ -93,6 +93,13 @@ html.theme-dark body {
 	}
 }
 
+.t-popover {
+
+	.t-popover__content {
+		border-radius: 1rem;
+	}
+}
+
 .entrance-fade-up-enter-active {
 	transition: opacity .4s ease, transform .4s ease;
 	transition-delay: var(--entrance-delay, 0ms);

src/types/Photo.ts

@@ -0,0 +1,10 @@
+import type { Attachment } from "timi-web";
+
+/** 照片滚动组件使用的附件展示项。 */
+export type PhotoItem = {
+	attachment?: Partial<Attachment>;
+	attachType?: string;
+	previewUrl?: string;
+	tempFileId?: string;
+	url: string;
+};