mohadese namavar
53 lines
1.2 KiB
Vue
53 lines
1.2 KiB
Vue
<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>
|