mohadese namavar
81 lines
2.1 KiB
Vue
81 lines
2.1 KiB
Vue
<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>
|