Kaynağa Gözat

feat(page): добавлена страница с галерей

horanchikk 5 ay önce
ebeveyn
işleme
00ae09f3fd
2 değiştirilmiş dosya ile 84 ekleme ve 0 silme
  1. 39 0
      pages/gallery/[id].vue
  2. 45 0
      pages/gallery/index.vue

+ 39 - 0
pages/gallery/[id].vue

@@ -0,0 +1,39 @@
+<template>
+  <div
+    v-if="photos"
+    class="flex flex-col gap-2"
+  >
+    <h1
+      class="text-2xl text-center pt-2 font-semibold"
+      v-text="photos.title"
+    />
+    <div class="flex flex-col gap-5 p-1 mb-2">
+      <img
+        v-for="(photo, idx) of photos.photos"
+        :key="idx"
+        :src="photo"
+        class="rounded-md"
+      >
+    </div>
+  </div>
+  <div
+    v-else
+    class="w-screen h-full flex justify-center items-center"
+  >
+    <ILoader class="w-16 h-16 text-foreground" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ApiModules } from '~/repository/api'
+
+const { params: { id } } = useRoute('gallery-id')
+const photos = ref<null | object>(null)
+
+definePageMeta({
+  name: 'Фотографии',
+  middleware: ['user-only'],
+})
+
+onMounted(async () => photos.value = await ApiModules.gallery.getPhotos(id))
+</script>

+ 45 - 0
pages/gallery/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <div
+    v-if="albums"
+    class="w-screen h-full flex flex-col gap-5 mt-3"
+  >
+    <NuxtLink
+      v-for="album in albums"
+      :key="album.id"
+      :to="`/gallery/${album.id}`"
+      class="bg-background-100 bg-opacity-80 rounded-md mx-1 select-none hover:opacity-60 duration-150 transition-all"
+    >
+      <img
+        class="w-full rounded-t-md"
+        :src="album.preview"
+        alt="Фото"
+      >
+      <p
+        class="text-center text-sm font-semibold my-3"
+        v-text="album.title"
+      />
+      <p
+        class="text-xs text-right mb-2 pr-2"
+        v-text="album.date"
+      />
+    </NuxtLink>
+  </div>
+  <div
+    v-else
+    class="w-screen h-full flex justify-center items-center"
+  >
+    <ILoader class="w-16 h-16 text-foreground" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ApiModules } from '~/repository/api'
+
+definePageMeta({
+  name: 'Галерея',
+  middleware: ['user-only'],
+})
+
+const albums = ref<null | object>(null)
+onMounted(async () => albums.value = await ApiModules.gallery.getAlbums())
+</script>