gao-customer-h5/src/components/PhotoScroller.vue

<template>
	<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
					v-for="(item, index) in displayPhotoList"
					:key="`${item}-${index}`"
					class="photo-item"
				>
					<t-button variant="text" class="photo-preview-trigger" @click="openPhotoViewer(index)">
						<t-image :src="item" alt="登记照片" fit="cover" class="photo-image" />
					</t-button>
					<t-button
						v-if="showRemove && modelValue.length"
						theme="danger"
						class="remove"
						shape="circle"
						size="extra-small"
						@click="removePhoto(index)"
					>
						<t-icon name="close" size="1rem" />
					</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>
		<t-image-viewer
			v-model:visible="photoViewerVisible"
			:images="photoViewerImages"
			show-index
		/>
	</div>
</template>

<script setup lang="ts">
interface Props {
	addText?: string;
	emptyText?: string;
	fallbackImage?: string;
	loading?: boolean;
	modelValue: string[];
	showAdd?: boolean;
	showRemove?: boolean;
	title?: string;
}

const props = withDefaults(defineProps<Props>(), {
	title: "照片列表",
	addText: "拍照",
	emptyText: "暂无照片",
	loading: false,
	showAdd: true,
	showRemove: true
});

const emit = defineEmits<{
	add: [];
	"update:modelValue": [value: string[]];
}>();

const photoViewerVisible = ref(false);
const photoViewerImages = ref<string[]>([]);
const displayPhotoList = computed(() => {
	if (props.modelValue.length) {
		return props.modelValue;
	}

	return props.fallbackImage ? [props.fallbackImage] : [];
});

function removePhoto(index: number): void {
	if (index < 0 || props.modelValue.length <= index) {
		return;
	}

	const nextValue = props.modelValue.filter((_, itemIndex) => itemIndex !== index);
	emit("update:modelValue", nextValue);
}

function openPhotoViewer(index: number): void {
	photoViewerImages.value = [...displayPhotoList.value.slice(index), ...displayPhotoList.value.slice(0, index)];
	photoViewerVisible.value = true;
}
</script>

<style scoped lang="less">
.photo-section {
	display: grid;
	gap: .375rem;

	.photo-shell {
		display: grid;
		gap: .75rem;
		grid-template-columns: minmax(0, 1fr) 5.5rem;
		align-items: start;

		&.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) {
			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;
	}
}

:global(html.theme-dark) {
	.photo-section {
		.field-title,
		.photo-empty {
			color: #94a3b8;
		}

		.photo-empty {
			color: #e2e8f0;
			background: rgba(15, 23, 42, .72);
			border-color: rgba(148, 163, 184, .16);
		}

		.add {
			background: rgba(37, 99, 235, .16);
			border-color: rgba(96, 165, 250, .28);

			span {
				color: #93c5fd;
			}
		}
	}
}
</style>