Mamalizz
159 lines
5.8 KiB
Vue
159 lines
5.8 KiB
Vue
<script setup lang="ts">
|
|
// imports
|
|
|
|
import useGetAccount from "~/composables/api/account/useGetAccount";
|
|
|
|
// meta
|
|
|
|
definePageMeta({
|
|
middleware: "check-is-logged-in",
|
|
layout: "profile",
|
|
});
|
|
|
|
// state
|
|
|
|
const personalData = ref({
|
|
name: "",
|
|
last_name: "",
|
|
phone: "",
|
|
gender: undefined,
|
|
email: "",
|
|
birthDate: "",
|
|
});
|
|
|
|
const alises = ref([
|
|
"شکارچی",
|
|
"آیفون باز",
|
|
"خوش سلیقه",
|
|
"دست و دلباز",
|
|
"چرم باز",
|
|
]);
|
|
|
|
// queries
|
|
|
|
const { data: account } = useGetAccount();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full flex flex-col gap-10">
|
|
<ProfilePageTitle title="پروفایل" icon="bi:person-vcard" />
|
|
|
|
<div class="flex flex-col gap-6">
|
|
<div
|
|
class="w-full flex items-center justify-between border p-6 rounded-xl border-slate-200"
|
|
>
|
|
<div class="flex items-center justify-start gap-5 w-8/12">
|
|
<div
|
|
class="size-32 shrink-0 rounded-full border border-slate-200 flex-center relative"
|
|
>
|
|
<Avatar
|
|
:src="account!.profile_photo"
|
|
:alt="
|
|
account?.first_name && account?.last_name
|
|
? `${account?.first_name.charAt(
|
|
0
|
|
)} ${account?.last_name.charAt(0)}`
|
|
: 'بدون نام کاربری'
|
|
"
|
|
/>
|
|
|
|
<PictureModal />
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-3">
|
|
<span class="typo-sub-h-lg"
|
|
>{{ account?.first_name }}
|
|
{{ account?.last_name }}</span
|
|
>
|
|
<span class="typo-sub-h-sm font-light text-slate-600">
|
|
با اولین خریدتون هوش مصنوعی وبسایتمون واستون یک
|
|
بایوگرافی درست میکنه :)
|
|
</span>
|
|
<span
|
|
class="flex-center border border-yellow-500 pe-3.5 ps-1 w-max rounded-full"
|
|
>
|
|
<div class="rounded-full p-2">
|
|
<Icon
|
|
name="bi:patch-check"
|
|
class="**:fill-yellow-400"
|
|
size="20"
|
|
/>
|
|
</div>
|
|
<span class="text-xs text-yellow-500"
|
|
>جزو ۳ مشتری برتر</span
|
|
>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col items-start gap-3 w-4/12">
|
|
<span class="typo-sub-h-lg">لقب های شما</span>
|
|
<span class="flex w-full flex-wrap gap-2">
|
|
<span
|
|
v-for="(alise, index) in alises"
|
|
:key="index"
|
|
class="flex-center bg-slate-50 border border-slate-200 py-2 px-3 w-max rounded-full"
|
|
>
|
|
<span class="text-xs text-black">{{ alise }}</span>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<ProfileSection title="اطلاعات شما">
|
|
<div
|
|
class="w-full grid grid-cols-1 lg:grid-cols-2 gap-x-3 gap-y-5"
|
|
>
|
|
<PersonalDataField id="personal-data-name" label="نام">
|
|
<Input v-model="personalData.name" variant="outlined" />
|
|
</PersonalDataField>
|
|
<PersonalDataField
|
|
id="personal-data-last-name"
|
|
label="نام خانوادگی"
|
|
>
|
|
<Input
|
|
v-model="personalData.last_name"
|
|
variant="outlined"
|
|
/>
|
|
</PersonalDataField>
|
|
<PersonalDataField id="personal-data-gender" label="جنسیت">
|
|
<Select
|
|
v-model="personalData.gender"
|
|
:options="['مرد', 'زن']"
|
|
variant="outlined"
|
|
/>
|
|
</PersonalDataField>
|
|
<PersonalDataField
|
|
id="personal-data-birth-date"
|
|
label="تاریخ تولد"
|
|
>
|
|
<Datepicker v-model="personalData.birthDate" />
|
|
</PersonalDataField>
|
|
<PersonalDataField
|
|
id="personal-data-phone"
|
|
label="تلفن همراه"
|
|
>
|
|
<Input
|
|
v-model="personalData.phone"
|
|
variant="outlined"
|
|
/>
|
|
</PersonalDataField>
|
|
<PersonalDataField
|
|
id="personal-email"
|
|
label="حساب الکترونیکی"
|
|
>
|
|
<Input
|
|
v-model="personalData.email"
|
|
variant="outlined"
|
|
/>
|
|
</PersonalDataField>
|
|
</div>
|
|
</ProfileSection>
|
|
</div>
|
|
<!-- <div class="w-fill grid grid-cols-1 lg:grid-cols-2">
|
|
|
|
</div> -->
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|