init git

2024-06-16 00:22:14 +04:30
commit ec84dfd222
322 changed files with 77942 additions and 0 deletions
@@ -0,0 +1,80 @@
+<template>
+    <NuxtLayout :name="device" :config="config">
+        <main class="panel-favorites">
+            <ul>
+                <li v-for="(product, i) in items" :key="i">
+                    <ProductCard :data="product" type="main" />
+                </li>
+            </ul>
+            <AppPagination :pages="pages" />
+        </main>
+    </NuxtLayout>
+</template>
+
+<script setup>
+const { device, t } = inject('service')
+const config = reactive({
+    desktop: { toolbar: true }, mobile: { header: { back: true, title: t('favorites') } },
+})
+
+const items = ref([])
+const pages = ref(1)
+const { meta, query } = useRoute()
+const { page = 1 } = query
+
+const { status, data, error } = await useFetch(`/api/users/current/fave/${page}`, {
+    headers: {
+        Authorization: useCookie('token')
+    }
+})
+
+
+if (status.value == 'success') {
+    items.value = data.value.favoriteProducts
+    pages.value = data.value.pages
+
+} else throw createError(error.value)
+</script>
+
+<style lang="scss">
+.panel-favorites {
+    @apply flex flex-col gap-3 lg:gap-6 justify-center lg:justify-start mx-auto lg:container;
+    @apply pt-8 pb-20 lg:pt-14 lg:pb-[7.5rem] lg:min-h-[60vh];
+
+    &>ul {
+        @apply w-full flex flex-wrap gap-3 lg:gap-6 justify-center lg:justify-start mx-auto lg:container;
+
+
+        @media (max-width: 1024px) {
+            .product-card {
+                @apply w-[21.4rem] h-[9.4rem] flex-row shadow-none border-0 rounded-none gap-4 p-0;
+                @apply mt-[1.1rem] border-b border-[#E5E5E5];
+
+                &>img {
+                    @apply w-[7.4rem] h-[7.4rem] object-contain object-top self-start;
+                }
+
+                &>div {
+                    @apply pb-6;
+
+                    h2 {
+                        @apply mt-0 text-[0.7em];
+                    }
+
+                    h1 {
+                        @apply text-xs;
+                    }
+
+                    &>button {
+                        @apply left-0 bottom-3;
+
+                        .p-button-icon {
+                            @apply text-xl;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+</style>