pagination / category / sort
This commit is contained in:
HAM!DREZA
@@ -37,7 +37,7 @@ body {
|
|||||||
@apply h-[2.917vw] rounded-[1.563vw] py-[0.833vw] px-[4.167vw] text-white bg-primaryGreen gap-[0.521vw] text-[0.833vw]
|
@apply h-[2.917vw] rounded-[1.563vw] py-[0.833vw] px-[4.167vw] text-white bg-primaryGreen gap-[0.521vw] text-[0.833vw]
|
||||||
}
|
}
|
||||||
.categoriesOption{
|
.categoriesOption{
|
||||||
@apply font-semibold py-[2.051vw] md:py-[0.625vw] w-[22.821vw] md:w-[8vw] mx-[0.5vw] md:mx-auto gap-2 rounded-[2.051vw] md:rounded-[0.521vw] border-[1px] border-primaryGreen text-primaryGreen text-[3.59vw] md:text-[1.055vw]
|
@apply font-semibold py-[2.051vw] md:py-[0.625vw] w-[22.821vw] md:w-[8vw] mx-[0.5vw] md:ms-[0.01vw] gap-2 rounded-[2.051vw] md:rounded-[0.521vw] border-[1px] border-primaryGreen text-primaryGreen text-[3.59vw] md:text-[1.055vw]
|
||||||
}
|
}
|
||||||
.courses{
|
.courses{
|
||||||
@apply w-[87.69%] md:w-[81.04%] flex flex-col justify-center mt-[18vw] md:mt-[4.688vw] px-[3.846vw] md:px-[1.563vw] bg-[#F8F8F8] rounded-[3.846vw] md:rounded-[0.781vw]
|
@apply w-[87.69%] md:w-[81.04%] flex flex-col justify-center mt-[18vw] md:mt-[4.688vw] px-[3.846vw] md:px-[1.563vw] bg-[#F8F8F8] rounded-[3.846vw] md:rounded-[0.781vw]
|
||||||
|
|||||||
@@ -1,97 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div
|
|
||||||
class="suggestions px-[1vw] md:px-[1.042vw] mt-[12vw] md:mt-[3.3vw] md:bg-white rounded-[0.781vw] flex flex-col gap-[0.417vw] pb-[1.667vw]"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ps-[1.5vw] border-b-[0.104vw] mt-[2vw] flex gap-x-[1vw] items-center text-[0.833vw] text-[#878787]"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="text-[0.741vw] text-[#383E43] flex items-center gap-[0.5vw] pb-[0.681vw]"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
class="w-[6.154vw] md:w-[1.25vw] h-[6.154vw] md:h-[1.302vw]"
|
|
||||||
viewBox="0 0 24 25"
|
|
||||||
fill="none"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M3 7.5H21"
|
|
||||||
stroke="#383E43"
|
|
||||||
stroke-width="1.5"
|
|
||||||
stroke-linecap="round"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M6 12.5H18"
|
|
||||||
stroke="#383E43"
|
|
||||||
stroke-width="1.5"
|
|
||||||
stroke-linecap="round"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M10 17.5H14"
|
|
||||||
stroke="#383E43"
|
|
||||||
stroke-width="1.5"
|
|
||||||
stroke-linecap="round"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
<span class="hidden md:block"> مرتب سازی بر اساس: </span>
|
|
||||||
<span
|
|
||||||
class="block md:hidden text-[3.59vw] py-[2vw] ps-[1vw]"
|
|
||||||
@click="openSortOptions"
|
|
||||||
>مرتب سازی</span
|
|
||||||
>
|
|
||||||
</span>
|
|
||||||
<ul class="gap-x-[1vw] items-center hidden md:flex">
|
|
||||||
<li class="relative pb-[0.681vw] text-primaryGreen active">
|
|
||||||
همه دوره ها
|
|
||||||
</li>
|
|
||||||
<li class="pb-[0.681vw]">دوره های رایگان</li>
|
|
||||||
<li class="pb-[0.681vw]">ارزان ترین</li>
|
|
||||||
<li class="pb-[0.681vw]">گران ترین</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="mt-[4.051vw] md:mt-[2.1vw] grid gap-[4vw] md:gap-[1.25vw] grid-cols-1 md:grid-cols-4"
|
|
||||||
>
|
|
||||||
<div v-for="(course, index) in data.data.courses"
|
|
||||||
:key="index">
|
|
||||||
<Card :course="course" />
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
// const pages = 17 / 16
|
|
||||||
// console.log(Math.ceil(pages));
|
|
||||||
//const data = await useFetch("/api/course");
|
|
||||||
const data = defineProps(['data']);
|
|
||||||
const openSortOptions = () => {
|
|
||||||
if (process.client) {
|
|
||||||
document
|
|
||||||
.getElementById("filters")
|
|
||||||
.classList.remove("translate-y-[80.769vw]");
|
|
||||||
document.getElementsByTagName("html")[0].classList.add("overflow-hidden");
|
|
||||||
document.getElementById("brightnessFilter").style.filter =
|
|
||||||
"brightness(50%)";
|
|
||||||
document.getElementById("brightnessFilter").style.backdropFilter =
|
|
||||||
"brightness(90%)";
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const loading = ref(false);
|
|
||||||
onMounted(() => {
|
|
||||||
setTimeout(() => {
|
|
||||||
loading.value = true;
|
|
||||||
}, 2000);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.active::before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
background-color: #0d3f40;
|
|
||||||
width: 100%;
|
|
||||||
height: 0.01vw;
|
|
||||||
top: 2vw;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,51 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="flexBox py-[5vw] md:py-[2vw]">
|
|
||||||
<ul class="flexBox gap-[6vw] md:gap-[2vw] text-[4.038vw] md:text-[1.055vw] text-[#383E43]">
|
|
||||||
<li>
|
|
||||||
<svg
|
|
||||||
class="w-[4.103vw] md:w-[1.25vw] h-[4.103vw] md:h-[1.25vw]"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M8.91016 19.9201L15.4302 13.4001C16.2002 12.6301 16.2002 11.3701 15.4302 10.6001L8.91016 4.08008"
|
|
||||||
stroke="#292D32"
|
|
||||||
stroke-width="1.5"
|
|
||||||
stroke-miterlimit="10"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li>53</li>
|
|
||||||
|
|
||||||
<li>...</li>
|
|
||||||
|
|
||||||
<li>3</li>
|
|
||||||
|
|
||||||
<li>2</li>
|
|
||||||
|
|
||||||
<li class="flexBox bg-primaryGreen text-white w-[7.692vw] md:w-[2.292vw] h-[7.692vw] md:h-[2.292vw] rounded-[50%]">1</li>
|
|
||||||
|
|
||||||
<li>
|
|
||||||
<svg
|
|
||||||
class="w-[4.103vw] md:w-[1.25vw] h-[4.103vw] md:h-[1.25vw]"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M14.9998 19.9201L8.47984 13.4001C7.70984 12.6301 7.70984 11.3701 8.47984 10.6001L14.9998 4.08008"
|
|
||||||
stroke="#292D32"
|
|
||||||
stroke-width="1.5"
|
|
||||||
stroke-miterlimit="10"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@@ -3,9 +3,86 @@
|
|||||||
<div
|
<div
|
||||||
class="courses"
|
class="courses"
|
||||||
>
|
>
|
||||||
<home-page-courses-sectionCategories />
|
<div class="category">
|
||||||
<home-page-courses-sectionSuggestedCourses />
|
<h3
|
||||||
<home-page-courses-sectionWatchCoursesButton />
|
class="font-semibold text-[#383E43] text-[5.11vw] md:text-[1.69vw] mt-[4.103vw] md:mt-[3.49vw] ms-0 md:ms-[1.563vw]"
|
||||||
|
>
|
||||||
|
انتخاب گسترده ای از دوره ها
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<p
|
||||||
|
class="hidden md:block ms-0 md:ms-[1.563vw] text-[#878787] text-[3.59vw] md:text-[1.055vw] mt-[2vw] md:mt-[1vw]"
|
||||||
|
>
|
||||||
|
انتخاب از بین بیش از 210000 دوره آنلاین ویدیویی با افزودنی های جدید که هر
|
||||||
|
ماه منتشر می شود
|
||||||
|
</p>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- <home-page-courses-sectionCategories /> -->
|
||||||
|
<div
|
||||||
|
class="suggestions px-[1vw] md:px-[1.042vw] mt-[12vw] md:mt-[3.2vw] md:bg-white rounded-[0.781vw] flex flex-col gap-[0.417vw] pb-[1.667vw]"
|
||||||
|
>
|
||||||
|
<h5
|
||||||
|
class="border-b pb-[1.5vw] text-[4.544vw] mt-[1.5vw] md:mt-[1.6vw] md:text-[1.481vw] text-[#383E43] font-bold"
|
||||||
|
>
|
||||||
|
دوره های پیشنهادی
|
||||||
|
</h5>
|
||||||
|
<div
|
||||||
|
class="mt-[4.051vw] md:mt-[2.1vw] grid gap-[4vw] md:gap-[1.25vw] grid-cols-1 md:grid-cols-4"
|
||||||
|
>
|
||||||
|
<div v-for="(course, index) in data.courses"
|
||||||
|
:key="index">
|
||||||
|
<Card :course="course" />
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="flex text-[#383E43] py-[4vw] md:py-[1.1vw] md:pt-[1.9vw] text-[3.59vw] md:text-[0.938vw] justify-center mt-[2vw] md:mt-[0.417vw]"
|
||||||
|
>
|
||||||
|
<nuxt-link to="/courses"
|
||||||
|
class="flex justify-center items-center border-b-2 border-[#878787] w-[45.59vw] md:w-[13.542vw]"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="mb-[0.417vw] h-[4.103vw] w-[4.103vw] md:h-[1.146vw] md:w-[1.146vw]"
|
||||||
|
viewBox="0 0 22 23"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M11.917 10.5833L19.4337 3.06665"
|
||||||
|
stroke="#383E43"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M20.1666 6.73325V2.33325H15.7666"
|
||||||
|
stroke="#383E43"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M10.083 2.33325H8.24967C3.66634 2.33325 1.83301 4.16659 1.83301 8.74992V14.2499C1.83301 18.8333 3.66634 20.6666 8.24967 20.6666H13.7497C18.333 20.6666 20.1663 18.8333 20.1663 14.2499V12.4166"
|
||||||
|
stroke="#383E43"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span class="ms-[2vw] md:ms-[0.417vw] pb-[0.417vw]"> دیدن همه ی دوره ها </span>
|
||||||
|
</nuxt-link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
const {data} = await useFetch("/api/course");
|
||||||
|
// const selectedItems = data.data.value.courses.slice(0, 8);
|
||||||
|
</script>
|
||||||
@@ -1,147 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="category">
|
|
||||||
<h3
|
|
||||||
v-if="$route.path === '/'"
|
|
||||||
class="font-semibold text-[#383E43] text-[5.11vw] md:text-[1.69vw] mt-[4.103vw] md:mt-[3.49vw] ms-0 md:ms-[1.563vw]"
|
|
||||||
>
|
|
||||||
انتخاب گسترده ای از دوره ها
|
|
||||||
</h3>
|
|
||||||
<div
|
|
||||||
class="flex flex-col md:flex-row items-start justify-between md:items-center"
|
|
||||||
v-else
|
|
||||||
>
|
|
||||||
<h3
|
|
||||||
class="font-semibold text-[#383E43] text-[5.11vw] md:text-[1.69vw] mt-[6vw] md:mt-[4.103vw] md:mt-[3.2vw] ms-0 md:ms-[1.563vw]"
|
|
||||||
>
|
|
||||||
حرفه آینده را کشف کنید
|
|
||||||
</h3>
|
|
||||||
<span
|
|
||||||
class="mt-[3vw] md:mt-[3vw] text-[#878787] text-[3.59vw] md:text-[0.833vw] md:me-[1.563vw]"
|
|
||||||
>
|
|
||||||
{{data?.count}}
|
|
||||||
ویدیو آموزشی</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<p
|
|
||||||
class="hidden md:block ms-0 md:ms-[1.563vw] text-[#878787] text-[3.59vw] md:text-[1.055vw] mt-[2vw] md:mt-[1vw]"
|
|
||||||
>
|
|
||||||
انتخاب از بین بیش از 210000 دوره آنلاین ویدیویی با افزودنی های جدید که هر
|
|
||||||
ماه منتشر می شود
|
|
||||||
</p>
|
|
||||||
<div
|
|
||||||
v-show="$route.path === '/courses'"
|
|
||||||
class="mt-[5vw] md:mt-[2.3vw] mb-[3.2vw] relative"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
class="absolute top-[3vw] md:top-[0.9vw] right-[4.5vw] md:right-[2.5vw] h-[5.128vw] md:h-[1.458vw] w-[5.128vw] md:w-[1.458vw]"
|
|
||||||
viewBox="0 0 28 28"
|
|
||||||
fill="none"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M13.4168 24.5C19.538 24.5 24.5002 19.5378 24.5002 13.4167C24.5002 7.29552 19.538 2.33334 13.4168 2.33334C7.29567 2.33334 2.3335 7.29552 2.3335 13.4167C2.3335 19.5378 7.29567 24.5 13.4168 24.5Z"
|
|
||||||
stroke="#878787"
|
|
||||||
stroke-width="1.5"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M25.6668 25.6667L23.3335 23.3333"
|
|
||||||
stroke="#878787"
|
|
||||||
stroke-width="1.5"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<input
|
|
||||||
class="thin w-[100%] md:w-[45vw] h-[10.769vw] md:h-[3.333vw] text-[2.836vw] md:text-[0.741vw] text-[#878787] rounded-[2.564vw] md:rounded-[0.781vw] ps-[12vw] md:ps-[3vw] md:ms-[1.563vw] shadow-sm"
|
|
||||||
type="text"
|
|
||||||
placeholder="نام آموزش ، دوره و ... را وارد کنید"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="flexBox px-0 md:px-[1vw] h-[2.813vw] mt-[10vw] md:mt-[2.5vw]">
|
|
||||||
<svg
|
|
||||||
@click="this.$refs.carousel.next()"
|
|
||||||
class="hidden md:block h-[1.563vw] w-[1.563vw] cursor-pointer"
|
|
||||||
viewBox="0 0 30 30"
|
|
||||||
fill="none"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
class="fill-[#878787] hover:fill-[#383E43]"
|
|
||||||
d="M18.9996 13.1125L16.5371 10.65L12.5246 6.63753C11.6746 5.80003 10.2246 6.40003 10.2246 7.60003V15.3875V22.4C10.2246 23.6 11.6746 24.2 12.5246 23.35L18.9996 16.875C20.0371 15.85 20.0371 14.15 18.9996 13.1125Z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<Carousel
|
|
||||||
:items-to-show="8.3"
|
|
||||||
ref="carousel"
|
|
||||||
:breakpoints="breakpoints"
|
|
||||||
:wrapAround="true"
|
|
||||||
class="w-full md:w-[95%]"
|
|
||||||
>
|
|
||||||
<Slide v-for="slide in categories" :key="slide" @click="selectCategory(slide.id)">
|
|
||||||
<div class="categoriesOption"
|
|
||||||
>{{ slide.name }}</div>
|
|
||||||
</Slide>
|
|
||||||
</Carousel>
|
|
||||||
|
|
||||||
<svg
|
|
||||||
@click="this.$refs.carousel.prev()"
|
|
||||||
class="hidden md:block h-[1.563vw] w-[1.563vw] cursor-pointer"
|
|
||||||
viewBox="0 0 30 30"
|
|
||||||
fill="none"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M17.4748 6.65005L13.4623 10.6626L10.9998 13.1126C9.9623 14.1501 9.9623 15.8376 10.9998 16.8751L17.4748 23.3501C18.3248 24.2001 19.7748 23.5876 19.7748 22.4001V15.3876V7.60005C19.7748 6.40005 18.3248 5.80005 17.4748 6.65005Z"
|
|
||||||
class="fill-[#878787] hover:fill-[#383E43]"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-if="pending" class="grid grid-cols-4 gap-[2vw] mt-[2vw]">
|
|
||||||
<Loading />
|
|
||||||
<Loading />
|
|
||||||
<Loading />
|
|
||||||
<Loading />
|
|
||||||
</div>
|
|
||||||
<courses-pageCourses-list :data="data"/>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
const changeCategory = ref('')
|
|
||||||
const {data, refresh, pending} = await useFetch(() => "/api/course", {
|
|
||||||
method: "POST",
|
|
||||||
body: {
|
|
||||||
changeCategory
|
|
||||||
}
|
|
||||||
});
|
|
||||||
const categoryLis = await useFetch("/api/category");
|
|
||||||
// console.log('daste bandy', categoryLis.data.value);
|
|
||||||
const categories = categoryLis.data.value;
|
|
||||||
function selectCategory (id){
|
|
||||||
changeCategory.value = '/category/' + id
|
|
||||||
refresh()
|
|
||||||
}
|
|
||||||
|
|
||||||
const breakpoints = {
|
|
||||||
// 700px and up
|
|
||||||
300: {
|
|
||||||
itemsToShow: 3.5,
|
|
||||||
snapAlign: "end",
|
|
||||||
},
|
|
||||||
700: {
|
|
||||||
itemsToShow: 8.6,
|
|
||||||
snapAlign: "end",
|
|
||||||
},
|
|
||||||
// 1024 and up
|
|
||||||
1024: {
|
|
||||||
itemsToShow: 8.6,
|
|
||||||
snapAlign: "end",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
</style>
|
|
||||||
@@ -1,24 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div
|
|
||||||
class="suggestions px-[1vw] md:px-[1.042vw] mt-[12vw] md:mt-[3.2vw] md:bg-white rounded-[0.781vw] flex flex-col gap-[0.417vw] pb-[1.667vw]"
|
|
||||||
>
|
|
||||||
<h5
|
|
||||||
class="text-[4.544vw] mt-[1.5vw] md:mt-[1.6vw] md:text-[1.481vw] text-[#383E43] font-bold"
|
|
||||||
>
|
|
||||||
دوره های پیشنهادی
|
|
||||||
</h5>
|
|
||||||
<div
|
|
||||||
class="mt-[4.051vw] md:mt-[2.1vw] grid gap-[4vw] md:gap-[1.25vw] grid-cols-1 md:grid-cols-4"
|
|
||||||
>
|
|
||||||
<div v-for="(course, index) in selectedItems"
|
|
||||||
:key="index">
|
|
||||||
<Card :course="course" />
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
const data = await useFetch("/api/course");
|
|
||||||
const selectedItems = data.data.value.courses.slice(0, 8);
|
|
||||||
</script>
|
|
||||||
@@ -1,39 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div
|
|
||||||
class="flex text-[#383E43] py-[4vw] md:py-[1.1vw] md:pt-[1.9vw] text-[3.59vw] md:text-[0.938vw] justify-center mt-[2vw] md:mt-[0.417vw]"
|
|
||||||
>
|
|
||||||
<nuxt-link to="/courses"
|
|
||||||
class="flex justify-center items-center border-b-2 border-[#878787] w-[45.59vw] md:w-[13.542vw]"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
class="mb-[0.417vw] h-[4.103vw] w-[4.103vw] md:h-[1.146vw] md:w-[1.146vw]"
|
|
||||||
viewBox="0 0 22 23"
|
|
||||||
fill="none"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M11.917 10.5833L19.4337 3.06665"
|
|
||||||
stroke="#383E43"
|
|
||||||
stroke-width="1.5"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M20.1666 6.73325V2.33325H15.7666"
|
|
||||||
stroke="#383E43"
|
|
||||||
stroke-width="1.5"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M10.083 2.33325H8.24967C3.66634 2.33325 1.83301 4.16659 1.83301 8.74992V14.2499C1.83301 18.8333 3.66634 20.6666 8.24967 20.6666H13.7497C18.333 20.6666 20.1663 18.8333 20.1663 14.2499V12.4166"
|
|
||||||
stroke="#383E43"
|
|
||||||
stroke-width="1.5"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
<span class="ms-[2vw] md:ms-[0.417vw] pb-[0.417vw]"> دیدن همه ی دوره ها </span>
|
|
||||||
</nuxt-link>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
+427
-9
@@ -1,12 +1,430 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="brightnessFilter" class="flex justify-center -mt-[12vw] mb-[25vw] md:my-[5.9vw] ">
|
<div
|
||||||
<div class="courses">
|
id="brightnessFilter"
|
||||||
<div >
|
class="flex justify-center -mt-[12vw] mb-[25vw] md:my-[5.9vw]"
|
||||||
<home-page-courses-sectionCategories />
|
>
|
||||||
<!-- <courses-pageCourses-list /> -->
|
<div class="courses">
|
||||||
<courses-pagePagination />
|
<div>
|
||||||
</div>
|
<div class="category">
|
||||||
|
<h3
|
||||||
|
v-if="$route.path === '/'"
|
||||||
|
class="font-semibold text-[#383E43] text-[5.11vw] md:text-[1.69vw] mt-[4.103vw] md:mt-[3.49vw] ms-0 md:ms-[1.563vw]"
|
||||||
|
>
|
||||||
|
انتخاب گسترده ای از دوره ها
|
||||||
|
</h3>
|
||||||
|
<div
|
||||||
|
class="flex flex-col md:flex-row items-start justify-between md:items-center"
|
||||||
|
v-else
|
||||||
|
>
|
||||||
|
<h3
|
||||||
|
class="font-semibold text-[#383E43] text-[5.11vw] md:text-[1.69vw] mt-[6vw] md:mt-[4.103vw] md:mt-[3.2vw] ms-0 md:ms-[1.563vw]"
|
||||||
|
>
|
||||||
|
حرفه آینده را کشف کنید
|
||||||
|
</h3>
|
||||||
|
<span
|
||||||
|
class="mt-[3vw] md:mt-[3vw] text-[#878787] text-[3.59vw] md:text-[0.833vw] md:me-[1.563vw]"
|
||||||
|
>
|
||||||
|
{{ data?.count }}
|
||||||
|
ویدیو آموزشی</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<p
|
||||||
|
class="hidden md:block ms-0 md:ms-[1.563vw] text-[#878787] text-[3.59vw] md:text-[1.055vw] mt-[2vw] md:mt-[1vw]"
|
||||||
|
>
|
||||||
|
انتخاب از بین بیش از 210000 دوره آنلاین ویدیویی با افزودنی های جدید
|
||||||
|
که هر ماه منتشر می شود
|
||||||
|
</p>
|
||||||
|
<div
|
||||||
|
v-show="$route.path === '/courses'"
|
||||||
|
class="mt-[5vw] md:mt-[2.3vw] mb-[3.2vw] relative"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="absolute top-[3vw] md:top-[0.9vw] right-[4.5vw] md:right-[2.5vw] h-[5.128vw] md:h-[1.458vw] w-[5.128vw] md:w-[1.458vw]"
|
||||||
|
viewBox="0 0 28 28"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M13.4168 24.5C19.538 24.5 24.5002 19.5378 24.5002 13.4167C24.5002 7.29552 19.538 2.33334 13.4168 2.33334C7.29567 2.33334 2.3335 7.29552 2.3335 13.4167C2.3335 19.5378 7.29567 24.5 13.4168 24.5Z"
|
||||||
|
stroke="#878787"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M25.6668 25.6667L23.3335 23.3333"
|
||||||
|
stroke="#878787"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<input
|
||||||
|
class="thin w-[100%] md:w-[45vw] h-[10.769vw] md:h-[3.333vw] text-[2.836vw] md:text-[0.741vw] text-[#878787] rounded-[2.564vw] md:rounded-[0.781vw] ps-[12vw] md:ps-[3vw] md:ms-[1.563vw] shadow-sm"
|
||||||
|
type="text"
|
||||||
|
placeholder="نام آموزش ، دوره و ... را وارد کنید"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="flexBox px-0 md:px-[1vw] h-[2.813vw] mt-[10vw] md:mt-[2.5vw]"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
@click="this.$refs.carousel.next()"
|
||||||
|
class="hidden md:block h-[1.563vw] w-[1.563vw] cursor-pointer"
|
||||||
|
viewBox="0 0 30 30"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
class="fill-[#878787] hover:fill-[#383E43]"
|
||||||
|
d="M18.9996 13.1125L16.5371 10.65L12.5246 6.63753C11.6746 5.80003 10.2246 6.40003 10.2246 7.60003V15.3875V22.4C10.2246 23.6 11.6746 24.2 12.5246 23.35L18.9996 16.875C20.0371 15.85 20.0371 14.15 18.9996 13.1125Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<Carousel
|
||||||
|
dir="rtl"
|
||||||
|
:items-to-show="2"
|
||||||
|
ref="carousel"
|
||||||
|
:wrapAround="false"
|
||||||
|
class="w-full flex"
|
||||||
|
>
|
||||||
|
|
||||||
|
<Slide
|
||||||
|
v-for="slide in categories"
|
||||||
|
:key="slide.id"
|
||||||
|
@click="selectCategory(slide.id)"
|
||||||
|
>
|
||||||
|
<p
|
||||||
|
class="categoriesOption cursor-pointer"
|
||||||
|
:class="{'bg-primaryGreen text-white' : route.query.hasOwnProperty('category') && route.query.category == slide.id }"
|
||||||
|
>{{ slide.name }}</p>
|
||||||
|
</Slide>
|
||||||
|
</Carousel>
|
||||||
|
|
||||||
|
<svg
|
||||||
|
@click="this.$refs.carousel.prev()"
|
||||||
|
class="hidden md:block h-[1.563vw] w-[1.563vw] cursor-pointer"
|
||||||
|
viewBox="0 0 30 30"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M17.4748 6.65005L13.4623 10.6626L10.9998 13.1126C9.9623 14.1501 9.9623 15.8376 10.9998 16.8751L17.4748 23.3501C18.3248 24.2001 19.7748 23.5876 19.7748 22.4001V15.3876V7.60005C19.7748 6.40005 18.3248 5.80005 17.4748 6.65005Z"
|
||||||
|
class="fill-[#878787] hover:fill-[#383E43]"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="suggestions px-[1vw] md:px-[1.042vw] mt-[12vw] md:mt-[3.3vw] md:bg-white rounded-[0.781vw] flex flex-col gap-[0.417vw] pb-[1.667vw]"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ps-[1.5vw] border-b-[0.104vw] mt-[2vw] flex gap-x-[1vw] items-center text-[0.833vw] text-[#878787]"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="text-[0.741vw] text-[#383E43] flex items-center gap-[0.5vw] pb-[0.681vw]"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-[6.154vw] md:w-[1.25vw] h-[6.154vw] md:h-[1.302vw]"
|
||||||
|
viewBox="0 0 24 25"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M3 7.5H21"
|
||||||
|
stroke="#383E43"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M6 12.5H18"
|
||||||
|
stroke="#383E43"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M10 17.5H14"
|
||||||
|
stroke="#383E43"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span class="hidden md:block"> مرتب سازی بر اساس: </span>
|
||||||
|
<span
|
||||||
|
class="block md:hidden text-[3.59vw] py-[2vw] ps-[1vw]"
|
||||||
|
@click="openSortOptions"
|
||||||
|
>مرتب سازی</span
|
||||||
|
>
|
||||||
|
</span>
|
||||||
|
<ul class="gap-x-[1vw] items-center hidden md:flex">
|
||||||
|
<li class="pb-[0.681vw] cursor-pointer"
|
||||||
|
:class="{'relative text-primaryGreen active' : !route.query.hasOwnProperty('price') || route.query.price == '' }"
|
||||||
|
@click="sortByHandler('')">
|
||||||
|
همه دوره ها
|
||||||
|
</li>
|
||||||
|
<li class="pb-[0.681vw] cursor-pointer"
|
||||||
|
:class="{'relative text-primaryGreen active' : route.query.hasOwnProperty('price') && route.query.price == 'free' }"
|
||||||
|
@click="sortByHandler('free')">دوره های رایگان</li>
|
||||||
|
|
||||||
|
<li class="pb-[0.681vw] cursor-pointer"
|
||||||
|
:class="{'relative text-primaryGreen active' : route.query.hasOwnProperty('price') && route.query.price == 'low_to_high' }"
|
||||||
|
@click="sortByHandler('low_to_high')"
|
||||||
|
>ارزان ترین</li>
|
||||||
|
<li class="pb-[0.681vw] cursor-pointer"
|
||||||
|
:class="{'relative text-primaryGreen active' : route.query.hasOwnProperty('price') && route.query.price == 'high_to_low' }"
|
||||||
|
@click="sortByHandler('high_to_low')">گران ترین</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="mt-[4.051vw] md:mt-[2.1vw] grid gap-[4vw] md:gap-[1.25vw] grid-cols-1 md:grid-cols-4"
|
||||||
|
>
|
||||||
|
|
||||||
|
<Loading v-if="pending"/>
|
||||||
|
<Loading v-if="pending"/>
|
||||||
|
<Loading v-if="pending"/>
|
||||||
|
<Loading v-if="pending"/>
|
||||||
|
<div v-else v-for="(course, index) in data.courses" :key="index">
|
||||||
|
<Card :course="course" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flexBox py-[5vw] md:py-[2vw]" dir="ltr">
|
||||||
|
<ul
|
||||||
|
class="flexBox gap-[6vw] md:gap-[2vw] text-[4.038vw] md:text-[1.055vw] text-[#383E43]"
|
||||||
|
>
|
||||||
|
<li class="w-[1.5vw]">
|
||||||
|
|
||||||
|
<svg
|
||||||
|
@click="prevPage"
|
||||||
|
class="cursor-pointer w-[4.103vw] md:w-[1.25vw] h-[4.103vw] md:h-[1.25vw]"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
:class="{'stroke-slate-300': route.query.hasOwnProperty('page') && route.query.page == 1 }"
|
||||||
|
d="M14.9998 19.9201L8.47984 13.4001C7.70984 12.6301 7.70984 11.3701 8.47984 10.6001L14.9998 4.08008"
|
||||||
|
stroke="#292D32"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke-miterlimit="10"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</li>
|
||||||
|
<!-- <li
|
||||||
|
v-for="(page, index) in paginationLength"
|
||||||
|
:key="index"
|
||||||
|
@click="changePage(page)"
|
||||||
|
class="cursor-pointer"
|
||||||
|
:class="{
|
||||||
|
'flexBox bg-primaryGreen text-white w-[7.692vw] md:w-[2.292vw] h-[7.692vw] md:h-[2.292vw] rounded-[50%]':
|
||||||
|
$route.query.page == page,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
{{ page }}
|
||||||
|
</li> -->
|
||||||
|
<li
|
||||||
|
:class="{'hidden': route.query.hasOwnProperty('page') && route.query.page < 7 || !route.query.hasOwnProperty('page')}"
|
||||||
|
class="w-[1.5vw] cursor-pointer" @click="nextPage(1)">{{pageNumber - 4}}</li>
|
||||||
|
|
||||||
|
<li
|
||||||
|
:class="{'hidden': route.query.hasOwnProperty('page') && route.query.page < 6 || !route.query.hasOwnProperty('page')}"
|
||||||
|
class="w-[1.5vw] cursor-pointer" @click="nextPage(1)">{{pageNumber - 3}}</li>
|
||||||
|
|
||||||
|
<li
|
||||||
|
:class="{'hidden': route.query.hasOwnProperty('page') && route.query.page < 5 || !route.query.hasOwnProperty('page')}"
|
||||||
|
class="w-[1.5vw] cursor-pointer" @click="nextPage(1)">{{pageNumber - 2}}</li>
|
||||||
|
|
||||||
|
<li
|
||||||
|
:class="{'hidden': route.query.hasOwnProperty('page') && route.query.page == 1|| !route.query.hasOwnProperty('page')}"
|
||||||
|
class="w-[1.5vw] cursor-pointer" @click="prevPage">{{pageNumber - 1}}</li>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<li class="w-[1.5vw] cursor-pointer flexBox bg-primaryGreen text-white w-[7.692vw] md:w-[2.292vw] h-[7.692vw] md:h-[2.292vw] rounded-[50%]">{{pageNumber}}</li>
|
||||||
|
|
||||||
|
<li
|
||||||
|
:class="{'hidden': route.query.hasOwnProperty('page') && route.query.page >= 7}"
|
||||||
|
class="w-[1.5vw] cursor-pointer" @click="nextPage(1)">{{parseInt(pageNumber) + 1}}</li>
|
||||||
|
|
||||||
|
|
||||||
|
<li
|
||||||
|
:class="{'hidden': route.query.hasOwnProperty('page') && route.query.page >= 2}"
|
||||||
|
class="w-[1.5vw] cursor-pointer" @click="nextPage(2)">{{parseInt(pageNumber) + 2}}</li>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<li class="w-[1.5vw]" v-if="pageNumber < 5">...</li>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<li
|
||||||
|
class="w-[1.5vw]"
|
||||||
|
:class="{'hidden': route.query.hasOwnProperty('page') && route.query.page > 5}" @click="nextPage"
|
||||||
|
>{{paginationLength}}</li>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<li class="w-[1.5vw]">
|
||||||
|
|
||||||
|
<svg
|
||||||
|
@click="nextPage(1)"
|
||||||
|
class="cursor-pointer w-[4.103vw] md:w-[1.25vw] h-[4.103vw] md:h-[1.25vw]"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
:class="{'stroke-slate-300': route.query.hasOwnProperty('page') && route.query.page == paginationLength }"
|
||||||
|
d="M8.91016 19.9201L15.4302 13.4001C16.2002 12.6301 16.2002 11.3701 15.4302 10.6001L8.91016 4.08008"
|
||||||
|
stroke="#292D32"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke-miterlimit="10"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<courses-pageSort-filter />
|
</div>
|
||||||
</template>
|
<courses-pageSort-filter />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import Loading from "./../../components/Loading.vue";
|
||||||
|
const query = ref({});
|
||||||
|
const router = useRouter();
|
||||||
|
const route = useRoute();
|
||||||
|
const pageNumber = ref(0);
|
||||||
|
const tedad = ref(0)
|
||||||
|
console.log('tedad 1', tedad.value);
|
||||||
|
const paginationLength = ref(0);
|
||||||
|
query.value = route.query;
|
||||||
|
//console.log(route.query.page);
|
||||||
|
pageNumber.value = route.query.hasOwnProperty('page') ? route.query.page : 1
|
||||||
|
const { data, refresh, pending } = await useFetch(() => "/api/course", {
|
||||||
|
method: "POST",
|
||||||
|
query: query,
|
||||||
|
});
|
||||||
|
watch(data => {
|
||||||
|
if (Object.keys(route.query).length == 0) {
|
||||||
|
query.value = {},
|
||||||
|
refresh()
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
paginationLength.value = Math.ceil(data.value.count / 2);
|
||||||
|
function changePage(page) {
|
||||||
|
pageNumber.value = page;
|
||||||
|
query.value = { ...route.query, page: pageNumber };
|
||||||
|
|
||||||
|
router.push({
|
||||||
|
path: "/courses",
|
||||||
|
query: query.value,
|
||||||
|
});
|
||||||
|
refresh();
|
||||||
|
}
|
||||||
|
function prevPage(){
|
||||||
|
if (pageNumber.value > 1) {
|
||||||
|
pageNumber.value -= 1
|
||||||
|
query.value = { ...route.query, page: pageNumber };
|
||||||
|
router.push({
|
||||||
|
path: "/courses",
|
||||||
|
query: query.value,
|
||||||
|
});
|
||||||
|
refresh();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function nextPage(num){
|
||||||
|
if (pageNumber.value < 7) {
|
||||||
|
pageNumber.value++
|
||||||
|
query.value = { ...route.query, page: pageNumber };
|
||||||
|
|
||||||
|
router.push({
|
||||||
|
path: "/courses",
|
||||||
|
query: query.value,
|
||||||
|
});
|
||||||
|
refresh();
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const categoryLis = await useFetch("/api/category");
|
||||||
|
const categories = categoryLis.data.value;
|
||||||
|
function selectCategory(id) {
|
||||||
|
query.value = { ...route.query, category: id };
|
||||||
|
if (query.value.hasOwnProperty("page")) {
|
||||||
|
delete query.value.page;
|
||||||
|
}
|
||||||
|
router.push({
|
||||||
|
path: "/courses",
|
||||||
|
query: query.value,
|
||||||
|
});
|
||||||
|
refresh();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function sortByHandler(param){
|
||||||
|
console.log(param);
|
||||||
|
query.value = { ...route.query, price: param };
|
||||||
|
|
||||||
|
if (param === '') {
|
||||||
|
if (query.value.hasOwnProperty("price")) {
|
||||||
|
delete query.value.price;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
router.push({
|
||||||
|
path: "/courses",
|
||||||
|
query: query.value,
|
||||||
|
});
|
||||||
|
refresh();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
watch(data , () => {
|
||||||
|
paginationLength.value = Math.ceil(data.value.count / 2);
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
const openSortOptions = () => {
|
||||||
|
if (process.client) {
|
||||||
|
document
|
||||||
|
.getElementById("filters")
|
||||||
|
.classList.remove("translate-y-[80.769vw]");
|
||||||
|
document.getElementsByTagName("html")[0].classList.add("overflow-hidden");
|
||||||
|
document.getElementById("brightnessFilter").style.filter =
|
||||||
|
"brightness(50%)";
|
||||||
|
document.getElementById("brightnessFilter").style.backdropFilter =
|
||||||
|
"brightness(90%)";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.active::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
background-color: #0d3f40;
|
||||||
|
width: 100%;
|
||||||
|
height: 0.01vw;
|
||||||
|
top: 2vw;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,5 +1,4 @@
|
|||||||
<template>
|
<template>
|
||||||
|
|
||||||
<home-pageIntro />
|
<home-pageIntro />
|
||||||
<home-pageSuggested-courses />
|
<home-pageSuggested-courses />
|
||||||
<home-pageInformation />
|
<home-pageInformation />
|
||||||
|
|||||||
+11
-5
@@ -1,10 +1,16 @@
|
|||||||
export default defineEventHandler(async (event) => {
|
export default defineEventHandler(async (event) => {
|
||||||
const { public: { apiBase } } = useRuntimeConfig();
|
const { public: { apiBase } } = useRuntimeConfig();
|
||||||
const body = await readBody(event);
|
|
||||||
console.log(body);
|
const query = getQuery(event);
|
||||||
|
console.log('server query :',query);
|
||||||
try {
|
// const category = '/category/' + query.category
|
||||||
const data = await $fetch(`${apiBase}/course${body.changeCategory}`, {
|
let category = query.hasOwnProperty('category') ? `categoryId=${query.category}` : '';
|
||||||
|
let page = query.hasOwnProperty('page') ? `page=${query.page}` : '';
|
||||||
|
let sortBy = query.hasOwnProperty('price') ? `price=${query.price}` : '';
|
||||||
|
// const category = 'categoryId=66587ae698d0a0db14693a5e'
|
||||||
|
// const page = 'page=1'
|
||||||
|
try {
|
||||||
|
const data = await $fetch(`${apiBase}/course?${category}&${page}&${sortBy}&pageSize=2`, {
|
||||||
method: 'GET',
|
method: 'GET',
|
||||||
headers: {
|
headers: {
|
||||||
'Accept': 'application/json',
|
'Accept': 'application/json',
|
||||||
|
|||||||
Reference in New Issue
Block a user