create searchBox section
This commit is contained in:
+223
-12
@@ -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>
|
||||
+169
-126
@@ -1,148 +1,191 @@
|
||||
<template>
|
||||
<div class="flex justify-between flex-col text-[#383E43]">
|
||||
|
||||
<div class="relative">
|
||||
<img
|
||||
src="/public/images/client3.png"
|
||||
:src="authUser?.avatarMedia"
|
||||
class="w-[40.256vw] md:w-[8.177vw] h-[40.256vw] md:h-[8.177vw] rounded-[50%]"
|
||||
alt=""
|
||||
/>
|
||||
<svg
|
||||
class="h-[10.769vw] md:h-[2.188vw] w-[10.769vw] md:w-[2.188vw] absolute -bottom-[0.2vw] right-[4vw] md:right-[0.7vw]"
|
||||
viewBox="0 0 42 42"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle cx="21" cy="21" r="21" fill="#0D3F40" />
|
||||
<path
|
||||
d="M10.167 19.9167V17.75C10.167 13.9583 12.3337 12.3333 15.5837 12.3333H26.417C29.667 12.3333 31.8337 13.9583 31.8337 17.75V24.25C31.8337 28.0417 29.667 29.6667 26.417 29.6667H21.0003"
|
||||
stroke="white"
|
||||
stroke-width="2"
|
||||
stroke-miterlimit="10"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M21.0003 23.7083C22.4961 23.7083 23.7087 22.4958 23.7087 21C23.7087 19.5042 22.4961 18.2917 21.0003 18.2917C19.5046 18.2917 18.292 19.5042 18.292 21C18.292 22.4958 19.5046 23.7083 21.0003 23.7083Z"
|
||||
stroke="white"
|
||||
stroke-width="2"
|
||||
stroke-miterlimit="10"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M28.042 18.2917V23.7083"
|
||||
stroke="white"
|
||||
stroke-width="2"
|
||||
stroke-miterlimit="10"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M10.167 24.7917H15.952C16.6454 24.7917 17.2087 25.355 17.2087 26.0483V27.435"
|
||||
stroke="white"
|
||||
stroke-width="1.5"
|
||||
stroke-miterlimit="10"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M11.4886 23.47L10.167 24.7917L11.4886 26.1133"
|
||||
stroke="white"
|
||||
stroke-width="1.5"
|
||||
stroke-miterlimit="10"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M17.2087 30.5117H11.4236C10.7303 30.5117 10.167 29.9483 10.167 29.255V27.8683"
|
||||
stroke="white"
|
||||
stroke-width="1.5"
|
||||
stroke-miterlimit="10"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M15.8887 31.8337L17.2103 30.512L15.8887 29.1903"
|
||||
stroke="white"
|
||||
stroke-width="1.5"
|
||||
stroke-miterlimit="10"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<FormKit type="form" @submit="edit" :incomplete-message="false" :actions="false">
|
||||
<div class="relative items-center gap-[5vw] md:gap-0 grid grid-cols-1 md:grid-cols-2 mt-[2vw] w-full md:w-[65%]">
|
||||
<div class="flex flex-col space-y-[0.2vw] mb-[0.5vw]">
|
||||
<label for="" class="text-[3.19vw] md:text-[0.833vw] font-[400]">شماره موبایل</label>
|
||||
<input type="text" name="name"
|
||||
:value="authUser?.phone"
|
||||
readonly
|
||||
class="bg-[#F5F5F5] h-[13.59vw] md:h-[2.969vw] w-full md:w-[19.01vw] rounded-[2.564vw] md:rounded-[0.521vw] px-[1vw]"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col space-y-[0.2vw] mb-[0.5vw]">
|
||||
<label for="" class="text-[3.19vw] md:text-[0.833vw] font-[400]"
|
||||
>نام و نام خانوادگی</label
|
||||
<label for="file-upload" class="custom-file-upload">
|
||||
<svg
|
||||
class="h-[10.769vw] md:h-[2.188vw] w-[10.769vw] md:w-[2.188vw] absolute -bottom-[0.2vw] right-[4vw] md:right-[0.7vw]"
|
||||
viewBox="0 0 42 42"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle cx="21" cy="21" r="21" fill="#0D3F40" />
|
||||
<path
|
||||
d="M10.167 19.9167V17.75C10.167 13.9583 12.3337 12.3333 15.5837 12.3333H26.417C29.667 12.3333 31.8337 13.9583 31.8337 17.75V24.25C31.8337 28.0417 29.667 29.6667 26.417 29.6667H21.0003"
|
||||
stroke="white"
|
||||
stroke-width="2"
|
||||
stroke-miterlimit="10"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M21.0003 23.7083C22.4961 23.7083 23.7087 22.4958 23.7087 21C23.7087 19.5042 22.4961 18.2917 21.0003 18.2917C19.5046 18.2917 18.292 19.5042 18.292 21C18.292 22.4958 19.5046 23.7083 21.0003 23.7083Z"
|
||||
stroke="white"
|
||||
stroke-width="2"
|
||||
stroke-miterlimit="10"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M28.042 18.2917V23.7083"
|
||||
stroke="white"
|
||||
stroke-width="2"
|
||||
stroke-miterlimit="10"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M10.167 24.7917H15.952C16.6454 24.7917 17.2087 25.355 17.2087 26.0483V27.435"
|
||||
stroke="white"
|
||||
stroke-width="1.5"
|
||||
stroke-miterlimit="10"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M11.4886 23.47L10.167 24.7917L11.4886 26.1133"
|
||||
stroke="white"
|
||||
stroke-width="1.5"
|
||||
stroke-miterlimit="10"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M17.2087 30.5117H11.4236C10.7303 30.5117 10.167 29.9483 10.167 29.255V27.8683"
|
||||
stroke="white"
|
||||
stroke-width="1.5"
|
||||
stroke-miterlimit="10"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M15.8887 31.8337L17.2103 30.512L15.8887 29.1903"
|
||||
stroke="white"
|
||||
stroke-width="1.5"
|
||||
stroke-miterlimit="10"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</label>
|
||||
<input type="file" id="file-upload" @change="changePhoto" />
|
||||
</div>
|
||||
|
||||
|
||||
<FormKit
|
||||
type="form"
|
||||
@submit="edit"
|
||||
:incomplete-message="false"
|
||||
:actions="false"
|
||||
>
|
||||
<div
|
||||
class="relative items-center gap-[5vw] md:gap-0 grid grid-cols-1 md:grid-cols-2 mt-[2vw] w-full md:w-[65%]"
|
||||
>
|
||||
<div class="flex flex-col space-y-[0.2vw] mb-[0.5vw]">
|
||||
<label for="" class="text-[3.19vw] md:text-[0.833vw] font-[400]"
|
||||
>شماره موبایل</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
:value="authUser?.phone"
|
||||
readonly
|
||||
class="bg-[#F5F5F5] h-[13.59vw] md:h-[2.969vw] w-full md:w-[19.01vw] rounded-[2.564vw] md:rounded-[0.521vw] px-[1vw]"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col space-y-[0.2vw] mb-[0.5vw]">
|
||||
<label for="" class="text-[3.19vw] md:text-[0.833vw] font-[400]"
|
||||
>نام و نام خانوادگی</label
|
||||
>
|
||||
<FormKit
|
||||
name="name"
|
||||
:value="authUser?.name"
|
||||
type="text"
|
||||
input-class="bg-[#F5F5F5] h-[13.59vw] md:h-[2.969vw] w-full md:w-[19.01vw] rounded-[2.564vw] md:rounded-[0.521vw] px-[1vw]"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col space-y-[0.2vw]">
|
||||
<label for="" class="text-[3.19vw] md:text-[0.833vw] font-[400]"
|
||||
>نام کاربری</label
|
||||
>
|
||||
<FormKit
|
||||
name="userName"
|
||||
:value="authUser?.userName"
|
||||
type="text"
|
||||
input-class="bg-[#F5F5F5] h-[13.59vw] md:h-[2.969vw] w-full md:w-[19.01vw] rounded-[2.564vw] md:rounded-[0.521vw] px-[1vw]"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col space-y-[0.2vw]">
|
||||
<label for="" class="text-[3.19vw] md:text-[0.833vw] font-[400]"
|
||||
>ایمیل</label
|
||||
>
|
||||
<FormKit
|
||||
name="email"
|
||||
:value="authUser?.email"
|
||||
type="text"
|
||||
input-class="bg-[#F5F5F5] h-[13.59vw] md:h-[2.969vw] w-full md:w-[19.01vw] rounded-[2.564vw] md:rounded-[0.521vw] px-[1vw]"
|
||||
/>
|
||||
</div>
|
||||
<FormKit
|
||||
name="name"
|
||||
:value="authUser?.name"
|
||||
type="text"
|
||||
input-class="bg-[#F5F5F5] h-[13.59vw] md:h-[2.969vw] w-full md:w-[19.01vw] rounded-[2.564vw] md:rounded-[0.521vw] px-[1vw]"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col space-y-[0.2vw]">
|
||||
<label for="" class="text-[3.19vw] md:text-[0.833vw] font-[400]">نام کاربری</label>
|
||||
<FormKit
|
||||
name="userName"
|
||||
:value="authUser?.userName"
|
||||
type="text"
|
||||
input-class="bg-[#F5F5F5] h-[13.59vw] md:h-[2.969vw] w-full md:w-[19.01vw] rounded-[2.564vw] md:rounded-[0.521vw] px-[1vw]"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col space-y-[0.2vw]">
|
||||
<label for="" class="text-[3.19vw] md:text-[0.833vw] font-[400]">ایمیل</label>
|
||||
<FormKit
|
||||
name="email"
|
||||
:value="authUser?.email"
|
||||
type="text"
|
||||
input-class="bg-[#F5F5F5] h-[13.59vw] md:h-[2.969vw] w-full md:w-[19.01vw] rounded-[2.564vw] md:rounded-[0.521vw] px-[1vw]"
|
||||
/>
|
||||
</div>
|
||||
<FormKit
|
||||
input-class="
|
||||
input-class="
|
||||
text-[3.59vw] md:text-[0.833vw] absolute md:left-[1vw] top-[80vw] md:top-[11vw] greenButton h-[13.59vw]
|
||||
md:h-[2.813vw] w-full md:w-[8.438vw] rounded-[2.564vw] md:rounded-[0.521vw] flexBox px-0
|
||||
"
|
||||
type="submit">
|
||||
ویرایش
|
||||
</FormKit>
|
||||
</div>
|
||||
type="submit"
|
||||
>
|
||||
ویرایش
|
||||
</FormKit>
|
||||
</div>
|
||||
</FormKit>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import { useToast } from 'vue-toastification'
|
||||
const toast = useToast()
|
||||
import { useToast } from "vue-toastification";
|
||||
const toast = useToast();
|
||||
const { authUser } = useAuth();
|
||||
const loading = ref(false)
|
||||
const loading = ref(false);
|
||||
const edit = async (formData) => {
|
||||
try {
|
||||
loading.value = true;
|
||||
await $fetch("/api/user/update", {
|
||||
method: "PUT",
|
||||
body: formData,
|
||||
});
|
||||
location.reload();
|
||||
} catch (error) {
|
||||
toast.error(error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
const changePhoto = async (val) => {
|
||||
const fd = new FormData('hi')
|
||||
fd.append('name', 'hi')
|
||||
console.log('fd', fd);
|
||||
// const data = await useFetch("/api/uploader", {
|
||||
// method: "POST",
|
||||
// body: {
|
||||
// file: val.target.value,
|
||||
// directoryName: "profileAvatar",
|
||||
// },
|
||||
// });
|
||||
// console.log("done", data);
|
||||
};
|
||||
</script>
|
||||
|
||||
const edit = async(formData) => {
|
||||
try {
|
||||
loading.value = true;
|
||||
await $fetch('/api/user/update', {
|
||||
method: 'PUT',
|
||||
body: formData
|
||||
})
|
||||
location.reload()
|
||||
} catch (error) {
|
||||
toast.error(error)
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
<style scoped>
|
||||
input[type="file"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
</script>
|
||||
.custom-file-upload {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
+60
-14
@@ -17,20 +17,28 @@
|
||||
<div class="flex flex-col flex-col-reverse pb-[10vw]">
|
||||
<ul
|
||||
class="space-y-[2vw] md:space-y-[0.5vw] mt-[0.5vw] border-b"
|
||||
v-for="ticket in tickets"
|
||||
v-for="(ticket, index) in tickets"
|
||||
:key="ticket.id"
|
||||
>
|
||||
|
||||
<li class="flex justify-between items-center pt-[1.5vw] md:pt-0">
|
||||
<p
|
||||
<li class="flex justify-between pt-[1.5vw] md:pt-0">
|
||||
|
||||
|
||||
<p
|
||||
@click="openTicket(ticket.id)"
|
||||
class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
|
||||
class="basis-2/6 text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
|
||||
{{ ticket.subject }}
|
||||
</p>
|
||||
<p class="text-[3.19vw] md:text-[0.833vw] text-[#878787]">
|
||||
{{ ticket.createdAt }}
|
||||
|
||||
|
||||
<p class="basis-2/6 flexBox relative text-[3.19vw] md:text-[0.833vw] text-[#878787]">
|
||||
<span v-show="num === index"
|
||||
v-for="(item, num) in jalali" :key="num"
|
||||
>{{item[2]}} / {{item[1]}} / {{item[0]}}</span>
|
||||
</p>
|
||||
<div class="flex items-center gap-[1vw]">
|
||||
|
||||
|
||||
<div class="basis-2/6 flex items-center justify-end gap-[1vw]">
|
||||
<button
|
||||
@click="openTicket(ticket.id)"
|
||||
class="hidden md:block text-[0.741vw] bg-[#F5F5F5] text-[#878787] h-[2.135vw] w-[3.646vw] rounded-[0.521vw]"
|
||||
@@ -52,7 +60,7 @@
|
||||
<div class="flex flex-col flex-col-reverse">
|
||||
<div v-if="loading" class="loadingText">درحال دریافت اطلاعات...</div>
|
||||
<div
|
||||
class="justify-self-start mt-[5vw] md:mt-0"
|
||||
class="grid mt-[5vw] md:mt-0"
|
||||
v-for="(message, index) in ticketMessages[0]
|
||||
?.ticketMessages"
|
||||
:key="index"
|
||||
@@ -60,13 +68,20 @@
|
||||
|
||||
|
||||
<div
|
||||
class="rounded-b-[5.128vw] md:rounded-b-[1.042vw] rounded-l-[5.128vw] md:rounded-l-[1.042vw] w-[80vw] md:w-[40vw] p-[4vw] md:p-[2vw] bg-[#F8F8F8] mb-[1vw] text-[#383E43]"
|
||||
class="justify-self-start rounded-b-[5.128vw] md:rounded-b-[1.042vw] rounded-l-[5.128vw] md:rounded-l-[1.042vw] w-[80vw] md:w-[40vw] p-[4vw] md:p-[2vw] bg-[#F8F8F8] mb-[1vw] text-[#383E43]"
|
||||
:class="{ 'justify-self-end rounded-b-[5.128vw] md:rounded-b-[1.042vw] rounded-l-[5.128vw] md:rounded-l-[1.042vw] w-[80vw] md:w-[40vw] p-[4vw] md:p-[2vw] !bg-[#F4FDFD] mb-[1vw] text-[#383E43]' : message.createdBy.roles[0] === 'Admin' }"
|
||||
|
||||
>
|
||||
<p class="text-[3.59vw] md:text-[1.055vw]">
|
||||
{{ message.createdBy && "کاربر مهمان" }}
|
||||
{{ message.createdBy && "کاربر مهمان" }} {{ }}
|
||||
</p>
|
||||
<p class="text-[#878787] text-[2.836vw] md:text-[0.741vw] mt-[0.5vw]">
|
||||
<!-- <p class="text-[#878787] text-[2.836vw] md:text-[0.741vw] mt-[0.5vw]">
|
||||
{{ message.createdAt }}
|
||||
</p> -->
|
||||
<p class="text-[#878787] text-[2.836vw] md:text-[0.741vw] mt-[0.5vw]">
|
||||
<span v-show="num === index"
|
||||
v-for="(item, num) in jalali" :key="num"
|
||||
>{{item[2]}} / {{item[1]}} / {{item[0]}}</span>
|
||||
</p>
|
||||
<p class="text-[3.19vw] md:text-[0.833vw] mt-[5vw] md:mt-[2vw]">
|
||||
{{ message.content }}
|
||||
@@ -252,6 +267,7 @@
|
||||
<p class="text-[3.59vw] md:text-[1.055vw]">
|
||||
{{ message.createdBy && "کاربر مهمان" }}
|
||||
</p>
|
||||
|
||||
<p class="text-[#878787] text-[2.836vw] md:text-[0.741vw] mt-[0.5vw]">
|
||||
{{ message.createdAt }}
|
||||
</p>
|
||||
@@ -365,6 +381,35 @@ const subject = ref(null);
|
||||
const content = ref(null);
|
||||
const ticketMessages = ref([]);
|
||||
const update = ref(null)
|
||||
const day = ref([])
|
||||
const month = ref([])
|
||||
const year = ref([])
|
||||
const shamsi = ref([])
|
||||
|
||||
tickets.value.map(item =>{
|
||||
item = new Date(item.createdAt)
|
||||
year.value.push(item.getFullYear())
|
||||
month.value.push(item.getMonth() + 1)
|
||||
day.value.push(item.getDate())
|
||||
})
|
||||
|
||||
const combinedItems = year.value.map((year, index) => ({
|
||||
year,
|
||||
month: month.value[index],
|
||||
day: day.value[index],
|
||||
}));
|
||||
|
||||
|
||||
const values = combinedItems.map(item =>(
|
||||
Object.values(item)
|
||||
))
|
||||
const jalali = ref([])
|
||||
const shamsis = values.map(item => (
|
||||
jalali.value.push(gregorian_to_jalali(item[0],item[1],item[2]))
|
||||
|
||||
))
|
||||
|
||||
|
||||
|
||||
|
||||
const sendTicket = async () => {
|
||||
@@ -377,9 +422,10 @@ const sendTicket = async () => {
|
||||
subject: subject.value,
|
||||
},
|
||||
});
|
||||
load()
|
||||
// load()
|
||||
addTicketForm.value = false;
|
||||
subject.value = null;
|
||||
location.reload()
|
||||
|
||||
};
|
||||
|
||||
@@ -390,7 +436,7 @@ const openTicket = async (data) => {
|
||||
const slides = document.getElementsByClassName("close");
|
||||
for (let i = 0; i < slides.length; i++) {
|
||||
if (slides[i].id === data) {
|
||||
slides[i].style.maxHeight = (slides[i].scrollHeight * 2) + "px";
|
||||
slides[i].style.maxHeight = slides[i].scrollHeight + "vh";
|
||||
} else {
|
||||
slides[i].style.maxHeight = null;
|
||||
}
|
||||
@@ -406,7 +452,6 @@ const openTicket = async (data) => {
|
||||
ticketMessages.value.push(single.value);
|
||||
reload()
|
||||
loading.value = false;
|
||||
|
||||
};
|
||||
const sendMessage = async (data, reload) => {
|
||||
if (content.value === null || '') {
|
||||
@@ -424,6 +469,7 @@ const sendMessage = async (data, reload) => {
|
||||
openTicket().reload()
|
||||
};
|
||||
|
||||
|
||||
const tab1 = `<p class="flex items-center gap-[0.5vw] p-[2vw] md:p-0 md:px-[0.6vw] rounded-[2.564vw]">
|
||||
<svg
|
||||
class="hidden md:block w-[1.406vw] h-[1.406vw]"
|
||||
|
||||
@@ -51,15 +51,15 @@
|
||||
</svg>
|
||||
</div>
|
||||
<p class="w-full text-end text-[4.544vw] md:text-[1.055vw]">
|
||||
60,000
|
||||
{{ data }},000
|
||||
<span class="text-[2.836vw] md:text-[0.741vw] font-[400]">
|
||||
تومان
|
||||
</span>
|
||||
</p>
|
||||
<div class="pt-[10vw] md:pt-0 space-y-[3vw] md:space-y-[1vw]">
|
||||
<p class="text-[3.19vw] md:text-[0.833vw] text-[#383E43]">مبلغ مورد نظر</p>
|
||||
<input type="number" placeholder="تومان" class="text-[2.836vw] md:text-[0.741vw] h-[13.59vw] md:h-[2.969vw] w-full rounded-[2.564vw] md:rounded-[0.521vw] bg-[#F5F5F5] ps-[4vw] md:ps-[1vw]">
|
||||
<button class="text-[3.59vw] md:text-[0.938vw] greenButton text-center h-[11.538vw] md:h-[2.969vw] w-full rounded-[2.564vw] md:rounded-[0.521vw]">شارژ حساب</button>
|
||||
<input v-model="price" type="number" placeholder="تومان" class="text-[2.836vw] md:text-[0.741vw] h-[13.59vw] md:h-[2.969vw] w-full rounded-[2.564vw] md:rounded-[0.521vw] bg-[#F5F5F5] ps-[4vw] md:ps-[1vw]">
|
||||
<button @click="charge" class="text-[3.59vw] md:text-[0.938vw] greenButton text-center h-[11.538vw] md:h-[2.969vw] w-full rounded-[2.564vw] md:rounded-[0.521vw]">شارژ حساب</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -79,6 +79,35 @@
|
||||
|
||||
<script setup>
|
||||
import {Tabs, Tab} from 'vue3-tabs-component';
|
||||
|
||||
const {data, refresh} = await useFetch('/api/user/balance')
|
||||
const price = ref(null)
|
||||
const charge = async () =>{
|
||||
console.log(price.value);
|
||||
const toPay = await useFetch("/api/user/add", {
|
||||
method: "POST",
|
||||
body: {
|
||||
amount: price.value,
|
||||
}
|
||||
});
|
||||
refresh()
|
||||
price.value = null
|
||||
console.log(toPay);
|
||||
}
|
||||
console.log('wallet,' , data.value);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const tab1 =
|
||||
`<p
|
||||
class="flex items-center gap-[0.5vw] p-[2vw] md:p-0 md:px-[0.6vw] rounded-[2.564vw]">
|
||||
|
||||
+30
-4
@@ -61,6 +61,8 @@
|
||||
</svg>
|
||||
|
||||
<input
|
||||
v-model="search"
|
||||
@change="searchHandler"
|
||||
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="نام آموزش ، دوره و ... را وارد کنید"
|
||||
@@ -450,6 +452,7 @@ function prevPage(){
|
||||
if (pageNumber.value > 1) {
|
||||
pageNumber.value -= 1
|
||||
query.value = { ...route.query, page: pageNumber };
|
||||
|
||||
router.push({
|
||||
path: "/courses",
|
||||
query: query.value,
|
||||
@@ -482,12 +485,16 @@ function removeCategory(){
|
||||
}
|
||||
if (query.value.hasOwnProperty("price")) {
|
||||
delete query.value.price;
|
||||
}
|
||||
if (query.value.hasOwnProperty("name")) {
|
||||
delete query.value.name;
|
||||
}
|
||||
router.push({
|
||||
path: "/courses",
|
||||
query: query.value,
|
||||
});
|
||||
pageNumber.value = 1
|
||||
search.value = null
|
||||
refresh()
|
||||
}
|
||||
|
||||
@@ -499,6 +506,7 @@ const categories = categoryLis.data.value;
|
||||
|
||||
function selectCategory(id) {
|
||||
query.value = { ...route.query, category: id };
|
||||
|
||||
if (query.value.hasOwnProperty("page")) {
|
||||
delete query.value.page;
|
||||
}
|
||||
@@ -514,9 +522,9 @@ function selectCategory(id) {
|
||||
});
|
||||
pageNumber.value = 1
|
||||
refresh();
|
||||
watch(data , () => {
|
||||
paginationLength.value = Math.ceil(data.value.count / 2);
|
||||
})
|
||||
// watch(data , () => {
|
||||
// paginationLength.value = Math.ceil(data.value.count / 2);
|
||||
// })
|
||||
}
|
||||
|
||||
|
||||
@@ -565,8 +573,26 @@ const closeSortOptions = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const search = ref(null)
|
||||
// watch(search, () =>{
|
||||
// if (search.value.length > 2) {
|
||||
|
||||
|
||||
// }
|
||||
// })
|
||||
const searchHandler = () =>{
|
||||
query.value = { ...route.query, name: search.value };
|
||||
if (query.value.hasOwnProperty("page")) {
|
||||
delete query.value.page;
|
||||
}
|
||||
router.push({
|
||||
path: "/courses",
|
||||
query: query.value,
|
||||
});
|
||||
refresh();
|
||||
}
|
||||
watch(data , () => {
|
||||
paginationLength.value = Math.ceil(data.value.count / 2);
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
@@ -269,4 +269,11 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<!-- <Markdown :source="source" /> -->
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// import Markdown from 'vue3-markdown-it';
|
||||
// const source = 'The *quick* brown fox, jumped **over** the lazy [dog](https://en.wikipedia.org/wiki/Dog)'
|
||||
</script>
|
||||
Reference in New Issue
Block a user