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

create searchBox section

Browse Source
This commit is contained in:
HAM!DREZA
2024-06-10 13:18:04 +03:30
parent 5310ec4dbc
commit c8bfc3c177
22 changed files with 1124 additions and 596 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/[product]/index.vue
+223 -12
View File
@@ -1,6 +1,6 @@
<template>
<div class="flex items-center flex-col pb-[30vw] md:pb-[7vw]">
<product-page-course-detailsHeader :props="data.course"/>
<product-page-course-detailsHeader :props="data.course" />
<div
class="flex flex-col flex-col-reverse md:flex-row justify-between w-[87.69%] md:w-[81.04%] mt-[10vw] md:mt-[4.7vw]"
>
@@ -8,25 +8,236 @@
class="w-full md:w-[56.354vw] text-[#383E43] text-[3.59vw] md:text-[1.055vw] leading-[5.897vw] md:leading-[1.582vw]"
>
<product-page-course-detailsDescription :props="data.course" />
<product-page-course-detailsHeadlines :props="data.course"/>
<product-page-course-detailsComments :props="data.course"/>
test
<product-page-course-detailsHeadlines :props="data.course" />
<!-- <product-page-course-detailsComments :props="data.comments" /> -->
<div
class="flex items-center gap-[3vw] md:gap-[0.7vw] mt-[12vw] md:mt-[6.3vw] mb-[6vw] md:mb-[2.1vw]"
>
<svg
class="w-[1.538vw] md:w-[0.521vw] h-[8.462vw] md:h-[2.76vw]"
viewBox="0 0 10 53"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 5C0 2.23858 2.23858 0 5 0H10V53H5C2.23858 53 0 50.7614 0 48V5Z"
fill="#0D3F40"
/>
</svg>
<span class="text-[4.544vw] md:text-[1.481vw] font-semibold"
>نظرات</span
>
</div>
<!-- comment 1 -->
<div
v-for="item in data.comments"
:key="item.id"
class="mt-[1vw] relative bg-[#F8F8F8] rounded-[3.846vw] md:rounded-[0.781vw] flex justify-between p-[4vw] md:p-[1.55vw]"
>
<img
src="/public/images/client1.png"
alt="profile"
class="w-[10.256vw] md:w-[3.958vw] h-[10.256vw] md:h-[3.958vw] rounded-[50%]"
/>
<div class="ps-[3vw] md:ps-[1vw] w-full">
<p class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
علی مصلحی
</p>
<div class="thin">
<p class="text-[2.836vw] md:text-[0.741vw] text-[#878787]">
1402/09/14
</p>
<p
class="w-[98%] text-[3.19vw] md:text-[0.833vw] text-[#383E43] leading-[4.785vw] md:leading-[1.25vw] mt-[2vw] md:mt-[0.5vw]"
>
{{ item.text }}
</p>
</div>
<div
v-for="reply in item.replies"
:key="reply.id"
class="relative bg-[#F8F8F8] rounded-[3.846vw] md:rounded-[0.781vw] flex justify-between ps-[16vw] md:ps-[6vw] p-[2vw] md:p-[1.55vw]"
>
<img
src="/public/images/client3.png"
alt="profile"
class="w-[10.256vw] md:w-[3.958vw] h-[10.256vw] md:h-[3.958vw] rounded-[50%]"
/>
<div class="ps-[3vw] md:ps-[1vw] w-full">
<p class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
علی مصلحی
</p>
<div class="thin">
<p class="text-[2.836vw] md:text-[0.741vw] text-[#878787]">
1402/09/14
</p>
<p
class="w-[98%] text-[3.19vw] md:text-[0.833vw] text-[#383E43] leading-[4.785vw] md:leading-[1.25vw] mt-[2vw] md:mt-[0.5vw]"
>
{{ reply.text }}
</p>
</div>
</div>
<!-- <svg
@click="sendReplay(reply.id)"
class="cursor-pointer absolute md:left-[2vw] left-[5vw] h-[4.615vw] w-[4.615vw] md:h-[1.25vw] md:w-[1.25vw]"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.12988 18.3101H15.1299C17.8899 18.3101 20.1299 16.0701 20.1299 13.3101C20.1299 10.5501 17.8899 8.31006 15.1299 8.31006H4.12988"
stroke="#383E43"
stroke-width="1.5"
stroke-miterlimit="10"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M6.43012 10.8099L3.87012 8.24994L6.43012 5.68994"
stroke="#383E43"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg> -->
</div>
</div>
<svg
@click="sendReplay(item.id)"
class="cursor-pointer absolute md:left-[2vw] left-[5vw] h-[4.615vw] w-[4.615vw] md:h-[1.25vw] md:w-[1.25vw]"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.12988 18.3101H15.1299C17.8899 18.3101 20.1299 16.0701 20.1299 13.3101C20.1299 10.5501 17.8899 8.31006 15.1299 8.31006H4.12988"
stroke="#383E43"
stroke-width="1.5"
stroke-miterlimit="10"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M6.43012 10.8099L3.87012 8.24994L6.43012 5.68994"
stroke="#383E43"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
</div>
<div class="w-full md:w-[23.438vw] text-[#383E43]">
<product-page-course-detailsCourse-status :props="data.course"/>
<product-page-course-detailsCourse-information :props="data.course"/>
<product-page-course-detailsCourse-status :props="data.course" />
<product-page-course-detailsCourse-information :props="data.course" />
</div>
</div>
<div
class="w-[63.438vw] bg-[#F8F8F8] p-[4vw] md:p-[1vw] rounded-[3.846vw] md:rounded-[0.781vw] mt-[6vw] md:mt-[2vw]"
>
<div class="space-y-[5vw] md:space-y-[1vw]">
<div class="flex gap-[1vw]">
<img
src="/public/images/client1.png"
alt=""
class="h-[10.256vw0] md:h-[3.385vw] w-[10.256vw] md:w-[3.385vw] rounded-[50%]"
/>
<div
class="space-y-[4vw] mt-[1vw] md:mt-0 ms-[1vw] md:ms-0 md:space-y-0"
>
<p class="text-[3.59vw] md:text-[0.938vw]">علی مصلحی</p>
<p
v-if="replayTarget === null"
class="text-[2.836vw] md:text-[0.741vw] text-[#878787]"
>
پرسش جدید
</p>
<p v-else class="text-[2.836vw] md:text-[0.741vw] text-[#878787]">
پاسخ به علی مصلحی
</p>
</div>
</div>
<textarea
v-model="comment"
class="h-[50vw] md:h-[18vw] w-full rounded-[3.846vw] md:rounded-[0.781vw] p-[1vw]"
name=""
id=""
cols="30"
rows="10"
></textarea>
<div
class="flex justify-end gap-[1vw] text-[3.19vw] md:text-[0.833vw] text-white"
>
<button
@click="deleteComment"
class="h-[8.974vw] md:h-[2.292vw] w-[20.769vw] md:w-[5.573vw] rounded-[2.051vw] md:rounded-[0.521vw] bg-[#5A6268]"
>
حذف
</button>
<button
@click="sendComment"
class="cursor-pointer h-[8.974vw] md:h-[2.292vw] w-[20.769vw] md:w-[5.573vw] rounded-[2.051vw] md:rounded-[0.521vw] bg-primaryGreen"
>
ثبت
</button>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { useToast } from "vue-toastification";
const toast = useToast();
const route = useRoute();
const {data} = await useFetch("/api/productId", {
method: "POST",
body: {
id: route.params.product,
},
})
console.log(data.value.course);
const replayTarget = ref(null);
const { data, refresh } = await useFetch("/api/productId", {
method: "POST",
body: {
id: route.params.product,
},
});
console.log(data.value.comments[0]);
const comment = ref(null);
const sendComment = async () => {
if (comment.value === "" || comment.value === null) {
return toast.error("متن خود را وارد کنید");
}
const comments = await useFetch("/api/comments/sendcomment", {
method: "POST",
query: {
id: data.value.course._id,
},
body: {
text: comment.value,
parent: replayTarget.value,
},
});
comment.value = null;
toast.success("نظر شما با موفقیت ثبت شد");
refresh();
};
const sendReplay = (id) => {
replayTarget.value = id;
};
const deleteComment = () => {
replayTarget.value = null;
comment.value = null;
};
</script>