mohadese namavar
93 lines
2.5 KiB
Vue
93 lines
2.5 KiB
Vue
<template>
|
|
<div class="user-profile-card">
|
|
<img :src="profilePhoto" />
|
|
<h2>{{ firstName }} {{ lastName }}</h2>
|
|
<ul>
|
|
<li v-for="(value, key) in data" :key="key">
|
|
<label>{{ $t(key) }}</label>
|
|
<span>{{ value }}</span>
|
|
</li>
|
|
</ul>
|
|
<template v-if="device == 'desktop'">
|
|
<router-link to="/panel/edit">
|
|
<Button v-bind="btns.edit.props" />
|
|
</router-link>
|
|
<Button v-bind="btns.security.props" @click="handleClick" />
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import init from '../../initialize/userProfileCard.js'
|
|
const { btns, items } = init()
|
|
const { device, dialog } = inject('service')
|
|
const profile = inject('data')
|
|
const { profilePhoto = '/images/empty-profile.svg', firstName, lastName } = profile
|
|
const data = reactive({});
|
|
|
|
const temp = {
|
|
true: 'تایید شده', false: 'تایید نشده', 'WHOLESALER': 'عمده فروش', 'BUYER': 'خریدار', 'RETAILER': 'خرده فروش'
|
|
}
|
|
|
|
items.forEach(key => {
|
|
const value = profile[key];
|
|
data[key] = temp[value] || value
|
|
});
|
|
|
|
const handleClick = () =>
|
|
dialog.show(resolveComponent('PanelDialogPasswordChange'))
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.user-profile-card {
|
|
@apply bg-[#FAFAFA] rounded-[0.6rem] border-[#E5E5E5];
|
|
@apply flex flex-col gap-3 p-6 relative overflow-hidden;
|
|
@apply w-[21.4rem] h-[20.1rem] lg:w-[20.8rem] lg:h-[34.9rem] lg:border-2;
|
|
|
|
&::before {
|
|
@apply content-['_'] top-0 inset-x-0 h-[4.4rem] lg:h-[6.3rem] bg-primary-600 absolute;
|
|
}
|
|
|
|
img {
|
|
@apply w-20 h-20 lg:w-[7.5rem] lg:h-[7.5rem] rounded-full border-2 border-[#FAFAFA] z-0 self-center mt-4;
|
|
}
|
|
|
|
h2 {
|
|
@apply text-[#333333] text-sm lg:text-xl font-bold font-vazir self-center;
|
|
}
|
|
|
|
ul {
|
|
@apply flex flex-col gap-4 my-auto;
|
|
|
|
li {
|
|
@apply flex justify-between items-center pb-4 border-b border-dotted;
|
|
@apply text-xs lg:text-base font-medium font-vazir border-[#E5E5E5] last:border-0;
|
|
|
|
label {
|
|
@apply text-[#999999];
|
|
}
|
|
|
|
span {
|
|
@apply text-[#333333];
|
|
}
|
|
}
|
|
}
|
|
|
|
a {
|
|
@apply w-full flex;
|
|
}
|
|
|
|
button {
|
|
@apply w-full h-[2.8rem] lg:h-12 justify-center #{!important};
|
|
|
|
span:not(.isax) {
|
|
@apply grow-0 text-[0.7em] lg:text-sm font-medium font-iran-sans;
|
|
}
|
|
|
|
.isax {
|
|
@apply text-xl;
|
|
}
|
|
}
|
|
}
|
|
</style>
|