86 lines
3.2 KiB
Vue
86 lines
3.2 KiB
Vue
<script setup>
|
|
import coverImg from "@images/pages/membershipBanner.jpg";
|
|
import { onMounted } from "vue";
|
|
import { useStore } from "vuex";
|
|
const store = useStore();
|
|
const profileHeaderData = ref(null)
|
|
const props = defineProps({
|
|
userData: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
})
|
|
onMounted(async () => {
|
|
store.dispatch("updateIsLoading", true);
|
|
profileHeaderData.value = props.userData;
|
|
console.log('profileHeaderData', profileHeaderData)
|
|
store.dispatch("updateIsLoading", false);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<VDialog v-model="store.getters.getIsLoading" width="110" height="150" color="primary">
|
|
<VCardText class="" style="color: white !important;">
|
|
<div class="demo-space-x">
|
|
<VProgressCircular :size="40" color="primary" indeterminate />
|
|
</div>
|
|
</VCardText>
|
|
</VDialog>
|
|
<VCard v-if="profileHeaderData">
|
|
<VImg :src="coverImg" min-height="125" max-height="250" cover />
|
|
|
|
<VCardText class="d-flex align-bottom flex-sm-row flex-column justify-center gap-x-6">
|
|
<div class="d-flex h-0">
|
|
<VAvatar rounded size="130" :image="profileHeaderData.profile_picture"
|
|
class="user-profile-avatar mx-auto">
|
|
<VImg :src="profileHeaderData.profile_picture" height="120" width="120" />
|
|
</VAvatar>
|
|
</div>
|
|
|
|
<div class="user-profile-info w-100 mt-16 pt-6 pt-sm-0 mt-sm-0">
|
|
<h4 class="text-h4 text-center text-sm-start mb-2">
|
|
{{ profileHeaderData.first_name + ' ' + profileHeaderData.last_name }}
|
|
</h4>
|
|
|
|
<div class="d-flex align-center justify-center justify-sm-space-between flex-wrap gap-4">
|
|
<div class="d-flex flex-wrap justify-center justify-sm-start flex-grow-1 gap-6">
|
|
<div class="d-flex align-center gap-x-2">
|
|
<VIcon size="24" icon="ri-palette-line" />
|
|
<div class="text-body-1 font-weight-medium">
|
|
{{ profileHeaderData.marital_status }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex align-center gap-x-2">
|
|
<VIcon size="24" icon="ri-calendar-line" />
|
|
<div class="text-body-1 font-weight-medium">
|
|
{{ profileHeaderData.dob }}
|
|
</div>
|
|
</div>
|
|
<div class="d-flex align-center gap-x-2">
|
|
<VIcon size="24" icon="ri-map-pin-line" />
|
|
<div class="text-body-1 font-weight-medium">
|
|
{{ profileHeaderData.city + ',' + profileHeaderData.country }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</VCardText>
|
|
</VCard>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.user-profile-avatar {
|
|
border: 5px solid rgb(var(--v-theme-surface));
|
|
background-color: rgb(var(--v-theme-surface)) !important;
|
|
inset-block-start: -3rem;
|
|
|
|
.v-img__img {
|
|
border-radius: 0.375rem;
|
|
}
|
|
}
|
|
</style>
|