timi/gao-customer-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change type in PhotoScroller

Browse Source
This commit is contained in:
Timi
2026-08-24 17:53:21 +08:00
parent 9b843fc921
commit f42e865430
9 changed files with 316 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/PhotoScroller.vue
+181 -18
View File
@@ -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 = {
attachType?: string;
previewUrl?: string;
url: string;
type ViewerPhotoItem = PhotoItem & {
sourceIndex: number;
};
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 {
if (index < 0 || props.modelValue.length <= index) {
async function removePhoto(index: number): Promise<void> {
if (index < 0 || displayPhotoList.value.length <= index) {
return;
}
const nextValue = props.modelValue.filter((_, itemIndex) => itemIndex !== index);
emit("update:modelValue", nextValue);
await applyPhotoItems(displayPhotoList.value.filter((_, itemIndex) => itemIndex !== index));
}
function openPhotoViewer(index: number): void {
const photoList = [...displayPhotoList.value.slice(index), ...displayPhotoList.value.slice(0, index)];
photoViewerImages.value = photoList.map(item => item.previewUrl || item.url);
const viewerItems = displayPhotoList.value.map((item, sourceIndex) => ({ item, sourceIndex }));
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,