82 lines
2.5 KiB
Vue
82 lines
2.5 KiB
Vue
<template>
|
|
<div
|
|
v-if="store.login"
|
|
class="fixed-grid has-12-cols"
|
|
>
|
|
<div class="grid is-gap-0">
|
|
<div class="cell is-col-span-3">
|
|
<div
|
|
class="card h-full p-4 has-background-grey-100"
|
|
:style="{
|
|
borderTopRightRadius: 0,
|
|
borderBottomRightRadius: 0,
|
|
}"
|
|
>
|
|
<div class="mb-8 is-flex is-flex-direction-column is-align-items-center">
|
|
<Avatarbox
|
|
v-bind="{
|
|
image: undefined,
|
|
text: store.login.fullname.substring(0, 1).toUpperCase(),
|
|
type: 'primary',
|
|
size: 12,
|
|
}"
|
|
/>
|
|
<p class="mt-3 fsb-16">{{ store.login.fullname }}</p>
|
|
<p class="fs-14 has-text-grey">{{ store.login.username }}</p>
|
|
</div>
|
|
<div>
|
|
<aside class="menu">
|
|
<ul class="menu-list is-flex is-flex-direction-column is-gap-1">
|
|
<li
|
|
v-for="(v, i) in tabs"
|
|
:key="i"
|
|
style="list-style: none"
|
|
>
|
|
<a
|
|
:class="['button is-text', v.code === tab && 'has-background-primary has-text-white']"
|
|
style="text-decoration: none"
|
|
@click="changeTab(v)"
|
|
>
|
|
{{ isVietnamese ? v.vi : v.en }}
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cell is-col-span-9">
|
|
<div
|
|
class="card h-full p-4 has-background-grey-100"
|
|
:style="{
|
|
borderTopLeftRadius: 0,
|
|
borderBottomLeftRadius: 0,
|
|
borderLeft: 'none',
|
|
}"
|
|
>
|
|
<UserInfo v-if="tab === 'info'" />
|
|
<ChangePass v-else-if="tab === 'password'" />
|
|
<Logout v-else-if="tab === 'logout'" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import Logout from "~/components/user/Logout";
|
|
import UserInfo from "~/components/user/UserInfo";
|
|
import ChangePass from "~/components/user/ChangePass";
|
|
|
|
const store = useStore();
|
|
const isVietnamese = computed(() => store.lang === "vi");
|
|
const 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" },
|
|
];
|
|
const tab = ref("info");
|
|
function changeTab(v) {
|
|
tab.value = v.code;
|
|
}
|
|
</script>
|