merge
This commit is contained in:
Mamalizz
+40
-22
@@ -14,27 +14,34 @@ const debouncedSearch = refDebounced(search, 300);
|
||||
// computed
|
||||
|
||||
const filteredCategories = computed(() => {
|
||||
|
||||
if (debouncedSearch.value.length > 0) {
|
||||
return categories.value!.filter((cat) =>
|
||||
cat.name.includes(debouncedSearch.value)
|
||||
);
|
||||
return categories.value!.map((cat) => {
|
||||
cat.subcategorys = cat.subcategorys.filter((subcat) => {
|
||||
return subcat.name.includes(debouncedSearch.value);
|
||||
});
|
||||
|
||||
return cat;
|
||||
});
|
||||
}
|
||||
|
||||
return categories.value!;
|
||||
});
|
||||
|
||||
// lifecycle
|
||||
// ssr
|
||||
|
||||
await useAsyncData(async () => {
|
||||
|
||||
onServerPrefetch(async () => {
|
||||
const response = await suspense();
|
||||
|
||||
if (response.isError) {
|
||||
throw createError({
|
||||
statusCode: 500,
|
||||
statusMessage: `Error in categories page prefetch`,
|
||||
statusMessage: `Error in categories page prefetch`
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -42,7 +49,7 @@ onServerPrefetch(async () => {
|
||||
<div class="py-[5rem] flex gap-6 justify-between items-center">
|
||||
<span class="typo-h-3 text-black">دسته بندی ها</span>
|
||||
<Input
|
||||
class="max-w-[400px] w-full"
|
||||
class="max-w-[400px] w-full rounded-full"
|
||||
variant="outlined"
|
||||
placeholder="جستجو..."
|
||||
v-model="search"
|
||||
@@ -59,21 +66,32 @@ onServerPrefetch(async () => {
|
||||
</Input>
|
||||
</div>
|
||||
<Transition name="fade" mode="out-in">
|
||||
<div
|
||||
v-if="filteredCategories.length !== 0"
|
||||
v-auto-animate
|
||||
class="grid grid-cols-3 gap-4 w-full mt-12"
|
||||
>
|
||||
<CategoryCard
|
||||
v-for="category in filteredCategories"
|
||||
:key="category.id"
|
||||
:id="category.id"
|
||||
:category="category.name"
|
||||
picture="/img/product-1.jpg"
|
||||
:count="20"
|
||||
description="یک دسته بندی تستasdasd"
|
||||
dark-layer
|
||||
/>
|
||||
<div v-if="filteredCategories">
|
||||
<div
|
||||
class="flex flex-col gap-6"
|
||||
v-for="mainCategory in filteredCategories"
|
||||
>
|
||||
<div class="w-full flex items-center justify-between">
|
||||
<span>
|
||||
{{ mainCategory.name }}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
v-auto-animate
|
||||
class="grid grid-cols-3 gap-4 w-full mt-12"
|
||||
>
|
||||
<CategoryCard
|
||||
v-for="category in mainCategory.subcategorys"
|
||||
:key="category.id"
|
||||
:id="category.id"
|
||||
:category="category.name"
|
||||
:picture="category.icon"
|
||||
:count="20"
|
||||
description="یک دسته بندی تستasdasd"
|
||||
dark-layer
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="flex w-full mt-12">
|
||||
|
||||
@@ -8,9 +8,9 @@ import useHomeData from "~/composables/api/home/useHomeData";
|
||||
|
||||
const { suspense } = useHomeData();
|
||||
|
||||
// lifecycle
|
||||
// ssr
|
||||
|
||||
onServerPrefetch(async () => {
|
||||
await useAsyncData(async () => {
|
||||
const response = await suspense();
|
||||
|
||||
if (response.isError) {
|
||||
|
||||
@@ -9,7 +9,9 @@ const id = route.params.id as string | undefined;
|
||||
|
||||
const { suspense } = useGetProduct(id);
|
||||
|
||||
onServerPrefetch(async () => {
|
||||
// ssr
|
||||
|
||||
await useAsyncData(async () => {
|
||||
const response = await suspense();
|
||||
|
||||
if (response.isError) {
|
||||
@@ -23,7 +25,7 @@ onServerPrefetch(async () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full flex flex-col">
|
||||
<div class="w-full flex flex-col gap-20">
|
||||
<ProductHero />
|
||||
<ProductVideo />
|
||||
<ProductComments />
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
// import
|
||||
|
||||
import useGetProducts, {
|
||||
@@ -65,15 +66,26 @@ watch(
|
||||
<span>/</span>
|
||||
<span>همه</span>
|
||||
</div> -->
|
||||
<h1 class="typo-h-3">همه محصولات</h1>
|
||||
<h1 class="typo-h-3">لیست محصولات</h1>
|
||||
</div>
|
||||
|
||||
<div class="w-full flex items-center justify-end gap-4">
|
||||
<Input
|
||||
placeholder="جست و جو محصول ..."
|
||||
v-model="search"
|
||||
class="bg-slate-50 !border-slate-200 hover:border-slate-300 focus:!border-slate-800 !rounded-full w-8/12"
|
||||
/>
|
||||
variant="outlined"
|
||||
class="rounded-full w-8/12"
|
||||
>
|
||||
<template #endItem>
|
||||
<div class="flex items-center gap-1">
|
||||
<Icon
|
||||
class="translate-y-[-1px]"
|
||||
name="ci:search"
|
||||
size="24"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Input>
|
||||
<FilterButton />
|
||||
</div>
|
||||
</div>
|
||||
@@ -101,17 +113,18 @@ watch(
|
||||
<ul v-else class="w-full grid grid-cols-3 gap-[1.5rem]">
|
||||
<li v-for="(product, index) in products" :key="index">
|
||||
<ProductCard
|
||||
brand="Samsung"
|
||||
:id="product.id"
|
||||
brand="برند محصول"
|
||||
:title="product.name"
|
||||
picture="/assets/img/product-1.jpg"
|
||||
:colors="['#0000ff', '#00ff00', 'red']"
|
||||
:picture="product.image1"
|
||||
:colors="['white', 'black']"
|
||||
:price="product.price"
|
||||
:rate="product.rating"
|
||||
tag="New"
|
||||
:dark-layer="true"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="w-full flex-center py-10">
|
||||
<div v-if="products!.length > 10" class="w-full flex-center py-10">
|
||||
<Pagination :items="paginationData" :total="data?.count" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user