fixed faq bugs

This commit is contained in:
HAM!DREZA
2024-07-02 18:19:51 +03:30
parent a8e723ddf0
commit d2f71b6b14
21 changed files with 205 additions and 307 deletions
+6 -6
View File
@@ -8,7 +8,7 @@
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" />
test
<product-page-course-detailsHeadlines :props="data.course" />
<!-- <product-page-course-detailsComments :props="data.comments" /> -->
@@ -157,7 +157,7 @@
</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]"
class="md: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]">
@@ -165,16 +165,16 @@
v-if="authUser?.avatarMedia"
:src="authUser.avatarMedia"
alt=""
class="h-[10.256vw0] md:h-[3.385vw] w-[10.256vw] md:w-[3.385vw] rounded-[50%]"
class="h-[8.256vw0] md:h-[3.385vw] w-[10.256vw] md:w-[3.385vw] rounded-[50%]"
/>
<img
v-else
src="/public/images/alt.png"
alt=""
class="h-[10.256vw0] md:h-[3.385vw] w-[10.256vw] md:w-[3.385vw] rounded-[50%]"
class="h-[8.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"
class="space-y-[2vw] mt-[1vw] md:mt-0 ms-[1vw] md:ms-0 md:space-y-0"
>
<p class="text-[3.59vw] md:text-[0.938vw]">
{{ authUser?.name ? authUser.name : "کاربر مهمان" }}
@@ -192,7 +192,7 @@
</div>
<textarea
v-model="comment"
class="h-[50vw] md:h-[18vw] w-full rounded-[3.846vw] md:rounded-[0.781vw] p-[1vw]"
class="focus:outline-none h-[50vw] md:h-[18vw] w-full rounded-[3.846vw] md:rounded-[0.781vw] p-[1vw]"
name=""
id=""
cols="30"
+4 -6
View File
@@ -133,7 +133,7 @@
<p
class="text-[3.59vw] md:text-[1.055vw] font-[600] text-[#383E43]"
>
{{ tickets?.data.value.length }}
{{ tickets?.data.value.result.length }}
تیکت
</p>
<p
@@ -361,8 +361,8 @@
<div class="flex justify-center items-center flex-col mt-[1.823vw]">
<img
v-if="profileImage"
:src="profileImage"
v-if="authUser.avatarMedia"
:src="authUser.avatarMedia"
class="h-[27.949vw] md:h-[7.24vw] w-[27.949vw] md:w-[7.24vw] rounded-full"
alt=""
/>
@@ -518,10 +518,8 @@
<script setup>
const profileImage = useState('profileImage')
const tickets = await useFetch("/api/ticket/getTickets");
console.log('tick',tickets.data);
const lastTickets = tickets?.data?.value.slice(-2);
const lastTickets = tickets?.data?.value.result.slice(-2);
const myCourses = await useFetch("/api/auth/me");
const lastCourses = myCourses.data?.value.course.slice(-2);
const balance = await useFetch("/api/user/balance");
+8 -15
View File
@@ -2,8 +2,8 @@
<div class="flex justify-between flex-col text-[#383E43]">
<div class="relative">
<img
v-if="profileImage"
:src="profileImage"
v-if="authUser.avatarMedia"
:src="authUser.avatarMedia"
class="w-[40.256vw] md:w-[8.177vw] h-[40.256vw] md:h-[8.177vw] rounded-[50%]"
alt="profile"
/>
@@ -153,8 +153,6 @@
<script setup>
const profileName = useState('profileName')
const profileImage = useState('profileImage')
import { useToast } from "vue-toastification";
const toast = useToast();
const { authUser } = useAuth();
@@ -162,11 +160,7 @@ const loading = ref(false);
const {data, refresh} = await useFetch('/api/auth/me')
const edit = async (formData) => {
if (formData.name !== authUser.value.name) {
profileName.value = formData.name
}
authUser.value.name = formData.name
try {
loading.value = true;
await $fetch("/api/user/update", {
@@ -184,27 +178,26 @@ const edit = async (formData) => {
};
//const token = getCookie(event, 'token');
async function changePhoto(val) {
const formData = new FormData();
formData.append("directoryName", "test");
formData.append("directoryName", "profileImage");
formData.append("file", val.target.files[0]);
const data = await useFetch("/api/uploader", {
method: "POST",
body: formData,
});
if (data.data.value.url) {
console.log('done');
await $fetch("/api/user/update", {
method: "PUT",
body: {
avatarMedia: data.data.value.url
},
});
profileImage.value = data.data.value.url
authUser.value.avatarMedia = data.data.value.url
// profileImage.value = data.data.value.url
toast.success('تصویر پروفایل تغییر کرد')
refresh()
}
}
+9 -8
View File
@@ -17,7 +17,7 @@
<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 in tickets.result"
:key="ticket.id"
>
@@ -118,7 +118,7 @@
<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 in tickets.result"
:key="ticket.id"
v-show="ticket.status === 'active'"
>
@@ -212,7 +212,7 @@
<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 in tickets.result"
:key="ticket.id"
v-show="ticket.status !== 'active'"
>
@@ -383,7 +383,7 @@ const month = ref([])
const year = ref([])
const shamsi = ref([])
tickets.value.map(item =>{
tickets.value.result.map(item =>{
item = new Date(item.createdAt)
year.value.push(item.getFullYear())
month.value.push(item.getMonth() + 1)
@@ -442,13 +442,14 @@ const openTicket = async (data) => {
}
}
const {data: single, refresh: reload} = await useFetch("/api/ticket/id", {
method: "POST",
body: {
method: 'POST',
query: {
id: data,
},
});
ticketMessages.value.push(single.value);
reload()
loading.value = false;
};
const sendMessage = async (data, reload) => {
@@ -464,7 +465,7 @@ const sendMessage = async (data, reload) => {
});
content.value = "";
toast.success("تیکت جدید با موفقیت ثبت")
openTicket().reload()
openTicket().reload()
};
+83 -141
View File
@@ -1,5 +1,5 @@
<template>
<div class="flexBox overflow-x-hidden !max-w-[100vw]">
<div class="flexBox overflow-x-hidden">
<div class="relative flexBox round">
<img
src="/public/images/questions.jpg"
@@ -22,17 +22,22 @@
</svg>
</div>
</div>
<div class="text-[#878787] mt-[10vw] mb-[10vw] flex flex-col mx-auto justify-center w-[80vw]">
<button class="rounded-t-[1.302vw] !px-[3vw] !pt-[1.1vw] mt-[0.5vw] accordion flex justify-between items-center">
<div
class="text-[#878787] mt-[10vw] mb-[10vw] flex flex-col mx-auto justify-center w-[80vw]"
>
<div v-for="(item, index) in data" :key="item.id">
<button
class="rounded-t-[1.302vw] !px-[3vw] !pt-[1.1vw] mt-[0.5vw] accordion flex justify-between items-center"
>
<div class="flexBox gap-[2vw]">
<p class="text-[1.901vw] font-bold ">01</p>
<h2 class="text-[0.938vw] font-semibold thin">
آیا در صورت خرید دوره، گواهی نامه آن به من تعلق می گیرد؟
</h2>
</div>
<svg
<p class="text-[1.901vw] font-bold">
{{ index < 9 ? "0" + (index + 1) : index + 1 }}
</p>
<h2 class="text-[0.938vw] font-semibold thin">
{{ item.title }}
</h2>
</div>
<svg
class="h-[2.604vw] w-[2.604vw] transition"
viewBox="0 0 50 51"
fill="none"
@@ -40,7 +45,7 @@
>
<rect y="0.5" width="50" height="50" rx="25" fill="#E5E5E5" />
<path
id="center"
id="center"
d="M17.6665 25.5H32.3332"
stroke="#878787"
stroke-width="2.5"
@@ -48,7 +53,7 @@
stroke-linejoin="round"
/>
<path
id="around"
id="around"
d="M25 32.8334V18.1667"
stroke="#878787"
stroke-width="2.5"
@@ -56,150 +61,87 @@
stroke-linejoin="round"
/>
</svg>
</button>
<div class="text-[#878787] content overflow-x-hidden !max-w-[100vw] !bg-[#E0FEFF] rounded-b-[1.302vw]">
<p class="px-[4vw] pb-[3vw]">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی در شصت و سه درصد گذشته حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد
</p>
</div>
<div class="border-b py-[0.2vw]"></div>
<button class="rounded-t-[1.302vw] !px-[3vw] !pt-[1.1vw] mt-[0.5vw] accordion flex justify-between items-center">
<div class="flexBox gap-[2vw]">
<p class="text-[1.901vw] font-bold ">01</p>
<h2 class="text-[0.938vw] font-semibold thin">
آیا در صورت خرید دوره، گواهی نامه آن به من تعلق می گیرد؟
</h2>
</div>
<svg
class="h-[2.604vw] w-[2.604vw] transition"
viewBox="0 0 50 51"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect y="0.5" width="50" height="50" rx="25" fill="#E5E5E5" />
<path
id="center"
d="M17.6665 25.5H32.3332"
stroke="#878787"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
id="around"
d="M25 32.8334V18.1667"
stroke="#878787"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
<div class="text-[#878787] content overflow-x-hidden !max-w-[100vw] !bg-[#E0FEFF] rounded-b-[1.302vw]">
<p class="px-[4vw] pb-[3vw]">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی در شصت و سه درصد گذشته حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد
</p>
</div>
<div class="border-b py-[0.2vw]"></div>
<!-- <button class="accordion ">متن تست 2</button>
<div class="content">
<p>لوریپسوم...</p>
</button>
<div class="text-[#878787] content !bg-[#E0FEFF] rounded-b-[1.302vw]">
<p class="px-[4vw] pb-[3vw]">
{{ item.description }}
</p>
</div>
<div class="border-b py-[0.2vw]"></div>
</div>
<button class="accordion">متن تست 3</button>
<div class="content">
<p>لوریپسوم...</p>
</div> -->
</div>
</div>
</template>
<script setup>
if (process.client) {
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null;
}
else
{
content.style.maxHeight = content.scrollHeight + 50 + "px";
}
});
}
}
const { data } = await useFetch("/api/faq");
onMounted(() => {
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function () {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + 50 + "px";
}
});
}
})
</script>
<style scoped>
.accordion {
max-width: 100vw !important;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: center;
border: none;
outline: none;
transition: 0.4s;
}
.active {
background-color: #E0FEFF;
}
.active svg {
transform: rotate(45deg);
transition: 0.2s;
}
.active svg path {
stroke: #E0FEFF;
}
.active rect {
fill: #0D3F40;
}
.active p {
color: #0D3F40;
}
.active h2 {
color: #383E43;
}
/*.panel {
cursor: pointer;
padding: 18px;
width: 100%;
text-align: center;
border: none;
outline: none;
transition: 0.4s;
}
.active {
background-color: #e0feff;
}
.active svg {
transform: rotate(45deg);
transition: 0.2s;
}
.active svg path {
stroke: #e0feff;
}
.active rect {
fill: #0d3f40;
}
.active p {
color: #0d3f40;
}
.active h2 {
color: #383e43;
}
/*.panel {
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
}*/
.content {
max-width: 100vw !important;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.content {
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.ask {
filter: brightness(50%);
border-radius:0 0 200% 200% / 80%;
border-radius: 0 0 200% 200% / 80%;
}
</style>