48 lines
1.4 KiB
Vue
48 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import { computed, onMounted, ref } from "vue";
|
|
import { useRoute } from "vue-router";
|
|
import { getCatalog, pageUrl } from "../api";
|
|
import CatalogViewer from "../components/CatalogViewer.vue";
|
|
import type { CatalogPublic } from "@shared/types";
|
|
|
|
const route = useRoute();
|
|
const id = computed(() => String(route.params.id));
|
|
const catalog = ref<CatalogPublic | null>(null);
|
|
const error = ref("");
|
|
const loading = ref(true);
|
|
|
|
const images = computed(() => {
|
|
if (!catalog.value) return [];
|
|
return Array.from({ length: catalog.value.pageCount }, (_, i) =>
|
|
pageUrl(catalog.value!.id, i + 1),
|
|
);
|
|
});
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
catalog.value = await getCatalog(id.value);
|
|
} catch (err) {
|
|
error.value = err instanceof Error ? err.message : "کاتالوگ پیدا نشد";
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="stage-page">
|
|
<header class="stage-bar">
|
|
<h1>{{ catalog?.title || "کاتالوگ دیجیتال" }}</h1>
|
|
<router-link class="btn" to="/">ساخت جدید</router-link>
|
|
</header>
|
|
<p v-if="loading" class="viewer-wrap">در حال بارگذاری…</p>
|
|
<p v-else-if="error" class="viewer-wrap error">{{ error }}</p>
|
|
<CatalogViewer
|
|
v-else-if="catalog"
|
|
:effect="catalog.effect"
|
|
:images="images"
|
|
:flip-ms="catalog.flipMs"
|
|
/>
|
|
</div>
|
|
</template>
|