init git

pages/panel/orders.vue

@@ -0,0 +1,52 @@
+<template>
+    <NuxtLayout :name="device" :config="config">
+        <main class="panel-orders">
+            <ul>
+                <li v-for="(order, i) in items" :key="i">
+                    <PanelOrderItem :data="order" />
+                </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('orders') } },
+})
+
+const { meta, query } = useRoute()
+const { page = 1 } = query
+
+const { status, data, error } = await useFetch(`/api/orders/user/${page}`, {
+    headers: {
+        Authorization: useCookie('token')
+    }
+})
+
+const items = ref([])
+const pages = ref(1)
+
+if (status.value == 'success') {
+    items.value = data.value.items
+    pages.value = data.value.pages
+
+} else throw createError(error.value)
+</script>
+
+<style lang="scss">
+.panel-orders {
+    @apply w-full lg:container flex flex-col gap-y-10 lg:gap-[2.6rem];
+    @apply px-6 sm:px-4 lg:px-0 pt-8 pb-20 lg:pt-14 lg:pb-[14.9rem];
+
+    &>ul:first-child {
+        @apply flex flex-col gap-x-6 gap-y-10 lg:gap-[2.6rem];
+    }
+
+    .pagination {
+        @apply self-center mt-auto;
+    }
+}
+</style>