danak/dlearn-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
HAM!DREZA
2024-06-02 14:34:03 +03:30
parent 69ad899b35
commit b6dcacce95
12 changed files with 221 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/courses/index.vue
+188 -27
View File
@@ -67,7 +67,34 @@
/>
</div>
<div
<div class="mt-[10vw] md:mt-[2.5vw] md:px-[1.6vw] w-full flex gap-[1vw] md:gap-[0.5vw] scrol relative overflow-auto whitespace-nowrap">
<p
:class="{'bg-primaryGreen text-white' : !route.query.hasOwnProperty('category')}"
@click="removeCategory()"
class="flexBox cursor-pointer
py-[2.051vw] md:py-[0.625vw] rounded-[2.051vw] md:rounded-[0.521vw]
border-[1px] border-primaryGreen text-primaryGreen
text-[3.59vw] md:text-[1.055vw]
px-[3.5vw] md:px-[1.5vw] font-semibold thin
">همه دسته بندی ها</p>
<p class="flexBox cursor-pointer
py-[2.051vw] md:py-[0.625vw] rounded-[2.051vw] md:rounded-[0.521vw]
border-[1px] border-primaryGreen text-primaryGreen
text-[3.59vw] md:text-[1.055vw]
px-[3.5vw] md:px-[1.5vw] font-semibold thin
"
:class="{'bg-primaryGreen text-white' : route.query.hasOwnProperty('category') && route.query.category == slide.id }"
v-for="slide in categories"
:key="slide.id"
@click="selectCategory(slide.id)"
>{{slide.name}}</p>
</div>
<!-- <div
class="flexBox px-0 md:px-[1vw] h-[2.813vw] mt-[10vw] md:mt-[2.5vw]"
>
<svg
@@ -83,6 +110,8 @@
/>
</svg>
<Carousel
dir="rtl"
:items-to-show="2"
@@ -115,11 +144,11 @@
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]"
class="suggestions px-[1vw] md:px-[1.042vw] mt-[5vw] 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]"
@@ -192,10 +221,14 @@
</div>
<p
class="flexBox min-h-[8vw]"
v-if="data?.count < 1">محصولی جهت نمایش وجود ندارد !!!</p>
</div>
<div class="flexBox py-[5vw] md:py-[2vw]" dir="ltr">
<ul
v-if="paginationLength > 2"
class="flexBox gap-[6vw] md:gap-[2vw] text-[4.038vw] md:text-[1.055vw] text-[#383E43]"
>
<li class="w-[1.5vw]">
@@ -231,19 +264,19 @@
{{ page }}
</li> -->
<li
:class="{'hidden': route.query.hasOwnProperty('page') && route.query.page < 7 || !route.query.hasOwnProperty('page')}"
:class="{'hidden': route.query.hasOwnProperty('page') && route.query.page < (paginationLength) || !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="{'hidden': route.query.hasOwnProperty('page') && route.query.page < (paginationLength - 1) || !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="{'hidden': route.query.hasOwnProperty('page') && route.query.page < (paginationLength - 2) || !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="{'hidden': route.query.hasOwnProperty('page') && route.query.page == 1 || !route.query.hasOwnProperty('page')}"
class="w-[1.5vw] cursor-pointer" @click="prevPage">{{pageNumber - 1}}</li>
@@ -251,7 +284,7 @@
<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="{'hidden': route.query.hasOwnProperty('page') && route.query.page >= paginationLength}"
class="w-[1.5vw] cursor-pointer" @click="nextPage(1)">{{parseInt(pageNumber) + 1}}</li>
@@ -261,7 +294,7 @@
<li class="w-[1.5vw]" v-if="pageNumber < 5">...</li>
<li class="w-[1.5vw]" v-if="pageNumber < (paginationLength - 2)">...</li>
@@ -269,7 +302,7 @@
<li
class="w-[1.5vw]"
:class="{'hidden': route.query.hasOwnProperty('page') && route.query.page > 5}" @click="nextPage"
:class="{'hidden': route.query.hasOwnProperty('page') && route.query.page > (paginationLength - 2)}" @click="nextPage"
>{{paginationLength}}</li>
@@ -296,12 +329,89 @@
</svg>
</li>
</ul>
</div>
</div>
</div>
</div>
<courses-pageSort-filter />
<div
id="filters"
class="text-[#333333] rounded-t-[4.103vw] p-[5vw] flex flex-col fixed bg-white bottom-0 left-0 z-[1000] h-[80.769vw] translate-y-[80.769vw] duration-500 w-[100vw]"
>
<div class="flex items-center justify-between w-full">
<span class="text-[3.59vw]">مرتب سازی بر اساس</span>
<svg
@click="closeSortOptions"
class="w-[5.641vw] h-[5.641vw]"
viewBox="0 0 22 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.41663 6.41675L15.5833 15.5834M6.41663 15.5834L15.5833 6.41675"
stroke="#878787"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<ul class="mt-[4vw] text-[3.19vw] px-[2vw]">
<li
@click="() => {sortByHandler(''); closeSortOptions()}"
class="border-b py-[4vw] flex justify-between items-center">
<span>
همه ی دوره ها
</span>
<svg
class="hidden w-[6.154vw] h-[6.154vw]"
:class="{'!block' : !route.query.hasOwnProperty('price') || route.query.price == '' }"
viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 7L10 17L5 12" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</li>
<li class="border-b py-[4vw] flex justify-between items-center" @click="() => {sortByHandler('free'); closeSortOptions()}">
<span>
دوره های رایگان
</span>
<svg
class="hidden w-[6.154vw] h-[6.154vw]"
:class="{'!block' : route.query.price == 'free' }"
viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 7L10 17L5 12" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</li>
<li class="border-b py-[4vw] flex justify-between items-center" @click="() => {sortByHandler('low_to_high'); closeSortOptions()}">
<span>
ارزان ترین
</span>
<svg
class="hidden w-[6.154vw] h-[6.154vw]"
:class="{'!block' : route.query.price == 'low_to_high' }"
viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 7L10 17L5 12" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</li>
<li class="py-[4vw] flex justify-between items-center" @click="() => {sortByHandler('high_to_low'); closeSortOptions()}">
<span>
ارزان ترین
</span>
<svg
class="hidden w-[6.154vw] h-[6.154vw]"
:class="{'!block' : route.query.price == 'high_to_low' }"
viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 7L10 17L5 12" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</li>
</ul>
</div>
</template>
@@ -312,23 +422,19 @@ 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;
@@ -352,7 +458,7 @@ function prevPage(){
}
}
function nextPage(num){
if (pageNumber.value < 7) {
if (pageNumber.value < paginationLength.value) {
pageNumber.value++
query.value = { ...route.query, page: pageNumber };
@@ -364,23 +470,60 @@ function nextPage(num){
}
}
function removeCategory(){
if (query.value.hasOwnProperty("category")) {
delete query.value.category;
}
if (query.value.hasOwnProperty("page")) {
delete query.value.page;
}
if (query.value.hasOwnProperty("price")) {
delete query.value.price;
}
router.push({
path: "/courses",
query: query.value,
});
pageNumber.value = 1
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;
}
if (id === '') {
if (query.value.hasOwnProperty("category")) {
delete query.value.category;
}
}
router.push({
path: "/courses",
query: query.value,
});
pageNumber.value = 1
refresh();
watch(data , () => {
paginationLength.value = Math.ceil(data.value.count / 2);
})
}
function sortByHandler(param){
console.log(param);
query.value = { ...route.query, price: param };
if (param === '') {
@@ -389,6 +532,7 @@ function sortByHandler(param){
}
}
router.push({
path: "/courses",
query: query.value,
@@ -397,11 +541,6 @@ function sortByHandler(param){
}
watch(data , () => {
paginationLength.value = Math.ceil(data.value.count / 2);
})
const openSortOptions = () => {
if (process.client) {
@@ -415,6 +554,20 @@ const openSortOptions = () => {
"brightness(90%)";
}
};
const closeSortOptions = () => {
if (process.client) {
document.getElementById("brightnessFilter").style.filter = "none";
document.getElementById("brightnessFilter").style.backdropFilter = "none";
document.getElementById("filters").classList.add("translate-y-[80.769vw]");
document
.getElementsByTagName("html")[0]
.classList.remove("overflow-hidden");
}
};
</script>
@@ -427,4 +580,12 @@ const openSortOptions = () => {
height: 0.01vw;
top: 2vw;
}
.scrol::-webkit-scrollbar {
display: none;
}
.scrol {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
</style>