51 lines
1.7 KiB
Vue
51 lines
1.7 KiB
Vue
<template>
|
|
<div class="columns mx-0" v-if="login">
|
|
<div class="column is-3">
|
|
<div class="leftbox">
|
|
<Avatarbox class="ml-4"
|
|
v-bind="{image: undefined, text: login.fullname.substring(0,1).toUpperCase(), type: 'primary', size: 'three'}"/>
|
|
<div>
|
|
<p class="ml-4 mt-3 fsb-16"><span>{{login.fullname}}</span></p>
|
|
<p class="ml-4 mt-1 fs-14 has-text-grey"><span>{{login.username}}</span></p>
|
|
<p class="border-bottom mt-2"></p>
|
|
<aside class="menu" style="padding-top: 22px;">
|
|
<ul class="menu-list">
|
|
<li><a :class="`${v.code===tab? 'has-background-primary has-text-white' : 'has-text-dark'} fsb-17 mt-4`" @click="changeTab(v)"
|
|
v-for="(v,i) in tabs" :key="i">
|
|
{{v.vi}}
|
|
</a></li>
|
|
</ul>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<UserInfo v-if="tab==='info'"></UserInfo>
|
|
<ChangePass v-else-if="tab==='password'"></ChangePass>
|
|
<Logout v-else-if="tab==='logout'"></Logout>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import Logout from "@/components/user/Logout"
|
|
import UserInfo from "@/components/user/UserInfo"
|
|
import ChangePass from "@/components/user/ChangePass"
|
|
import { useStore } from '~/stores/index'
|
|
const store = useStore()
|
|
var login = store.login
|
|
var tabs = [{code: 'info', vi: store.lang==='en'? 'Personal information' : 'Hồ sơ cá nhân'},
|
|
{code: 'password', vi: store.lang==='en'? 'Change password' : 'Đổi mật khẩu'},
|
|
{code: 'logout', vi: store.lang==='en'? 'Sign out' : 'Đăng xuất'}]
|
|
var tab = ref('info')
|
|
function changeTab(v) {
|
|
tab.value = v.code
|
|
}
|
|
</script>
|
|
<style>
|
|
.leftbox {
|
|
border-radius: 15px;
|
|
background: rgb(245,245,246);
|
|
padding: 20px;
|
|
}
|
|
</style>
|