80 lines
2.2 KiB
Vue
80 lines
2.2 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
|
|
v-for="(v, i) in tabs"
|
|
style="list-style: none"
|
|
>
|
|
<a
|
|
:class="`${v.code === tab ? 'has-background-primary has-text-white' : 'has-text-dark'} fsb-17 mt-4`"
|
|
@click="changeTab(v)"
|
|
:key="i"
|
|
>
|
|
{{ isVietnamese ? v.vi : v.en }}
|
|
</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();
|
|
const lang = computed(() => store.lang);
|
|
const isVietnamese = computed(() => lang.value === "vi");
|
|
var login = store.login;
|
|
var tabs = [
|
|
{ code: "info", vi: "Hồ sơ cá nhân", en: "Personal Information" },
|
|
{ code: "password", vi: "Đổi mật khẩu", en: "Change Password" },
|
|
{ code: "logout", vi: "Đăng xuất", en: "Logout" },
|
|
];
|
|
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>
|