create searchBox section

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
+169 -126
View File
@@ -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
View File
@@ -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]"
+32 -3
View File
@@ -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]">