create searchBox section
This commit is contained in:
HAM!DREZA
+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>
|
||||
Reference in New Issue
Block a user