134 lines
3.7 KiB
Vue
134 lines
3.7 KiB
Vue
<template>
|
||
<div class="space-y-3">
|
||
<label class="block text-sm font-medium text-muted">تصاویر کسبوکار</label>
|
||
<p class="text-xs text-muted">حداکثر ۱۰ تصویر — هر کدام تا ۵ مگابایت (JPG, PNG, WebP)</p>
|
||
|
||
<div v-if="existing.length" class="grid grid-cols-3 gap-2">
|
||
<div
|
||
v-for="img in existing"
|
||
:key="img.id"
|
||
class="relative aspect-square overflow-hidden rounded-xl border border-border bg-surface-3"
|
||
>
|
||
<img :src="uploadUrl(img.url)" :alt="img.originalName ?? ''" class="h-full w-full object-cover" />
|
||
<span
|
||
v-if="img.isCover"
|
||
class="absolute left-1 top-1 rounded bg-brand-600/90 px-1.5 py-0.5 text-[10px] text-white"
|
||
>
|
||
کاور
|
||
</span>
|
||
<button
|
||
type="button"
|
||
class="absolute bottom-1 left-1 right-1 rounded-lg bg-black/60 py-1 text-xs text-white"
|
||
:disabled="deletingId === img.id"
|
||
@click="emit('remove-existing', img.id)"
|
||
>
|
||
حذف
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="pendingPreviews.length" class="grid grid-cols-3 gap-2">
|
||
<div
|
||
v-for="(src, idx) in pendingPreviews"
|
||
:key="idx"
|
||
class="relative aspect-square overflow-hidden rounded-xl border border-dashed border-brand-500/50"
|
||
>
|
||
<img :src="src" alt="" class="h-full w-full object-cover" />
|
||
<button
|
||
type="button"
|
||
class="absolute bottom-1 left-1 right-1 rounded-lg bg-black/60 py-1 text-xs text-white"
|
||
@click="removePending(idx)"
|
||
>
|
||
حذف
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<label
|
||
class="flex cursor-pointer flex-col items-center justify-center rounded-xl border border-dashed border-border bg-surface-3 px-4 py-6 text-sm text-muted transition hover:border-brand-500/50 hover:bg-brand-500/5"
|
||
>
|
||
<span class="text-2xl">📷</span>
|
||
<span class="mt-2">افزودن تصویر</span>
|
||
<input
|
||
type="file"
|
||
accept="image/jpeg,image/png,image/webp,image/gif"
|
||
multiple
|
||
class="hidden"
|
||
@change="onPick"
|
||
/>
|
||
</label>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { onBeforeUnmount, ref, watch } from 'vue';
|
||
import type { BusinessImage } from '@/api/types';
|
||
import { uploadUrl } from '@/utils/media';
|
||
|
||
const props = defineProps<{
|
||
existing: BusinessImage[];
|
||
deletingId?: string | null;
|
||
}>();
|
||
|
||
const emit = defineEmits<{
|
||
'remove-existing': [imageId: string];
|
||
'pending-change': [files: File[]];
|
||
}>();
|
||
|
||
const pendingFiles = ref<File[]>([]);
|
||
const pendingPreviews = ref<string[]>([]);
|
||
|
||
function revokeAll() {
|
||
for (const url of pendingPreviews.value) {
|
||
URL.revokeObjectURL(url);
|
||
}
|
||
}
|
||
|
||
function syncPending() {
|
||
emit('pending-change', [...pendingFiles.value]);
|
||
}
|
||
|
||
function onPick(e: Event) {
|
||
const input = e.target as HTMLInputElement;
|
||
const picked = Array.from(input.files ?? []);
|
||
input.value = '';
|
||
if (!picked.length) return;
|
||
|
||
const total = props.existing.length + pendingFiles.value.length + picked.length;
|
||
if (total > 10) {
|
||
alert('حداکثر ۱۰ تصویر مجاز است.');
|
||
return;
|
||
}
|
||
|
||
for (const file of picked) {
|
||
pendingFiles.value.push(file);
|
||
pendingPreviews.value.push(URL.createObjectURL(file));
|
||
}
|
||
syncPending();
|
||
}
|
||
|
||
function removePending(index: number) {
|
||
URL.revokeObjectURL(pendingPreviews.value[index]);
|
||
pendingFiles.value.splice(index, 1);
|
||
pendingPreviews.value.splice(index, 1);
|
||
syncPending();
|
||
}
|
||
|
||
watch(
|
||
() => props.existing.length,
|
||
() => syncPending(),
|
||
);
|
||
|
||
onBeforeUnmount(revokeAll);
|
||
|
||
defineExpose({
|
||
clearPending() {
|
||
revokeAll();
|
||
pendingFiles.value = [];
|
||
pendingPreviews.value = [];
|
||
syncPending();
|
||
},
|
||
getPendingFiles: () => [...pendingFiles.value],
|
||
});
|
||
</script>
|