58 lines
1.4 KiB
Vue
58 lines
1.4 KiB
Vue
<template>
|
|
<div>
|
|
<div class="label">User Name</div>
|
|
<div class="value">{{ userInfo?.username || '------' }}</div>
|
|
</div>
|
|
<div>
|
|
<div class="label">Email</div>
|
|
<div class="value">{{ userInfo?.email || '------' }}</div>
|
|
</div>
|
|
<div>
|
|
<div class="label">Language</div>
|
|
<dropdown-menu v-model="locale" :list="langs" @change="changeLang" />
|
|
</div>
|
|
<div>
|
|
<div class="label">Log out on this device</div>
|
|
<button class="logout-btn" @click="logout">Log out</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, ref, nextTick, inject } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import dropdownMenu from '@/components/dropdown-menu.vue'
|
|
import { useUserInfoStore } from '@/stores'
|
|
import { useI18n } from 'vue-i18n'
|
|
const router = useRouter()
|
|
const { locale } = useI18n()
|
|
const userInfoStore = useUserInfoStore()
|
|
const userInfo = computed(() => userInfoStore.state.userInfo)
|
|
const langs = ref([
|
|
{ label: 'English', value: 'ENGLISH' },
|
|
{ label: '中文', value: 'CHINESE_SIMPLIFIED' }
|
|
])
|
|
const changeLang = (value: string) => {
|
|
locale.value = value
|
|
localStorage.setItem('language', value)
|
|
nextTick(() => {
|
|
router.go(0)
|
|
})
|
|
}
|
|
const logout = () => {
|
|
userInfoStore.logOut()
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.logout-btn {
|
|
cursor: pointer;
|
|
height: 3.7rem;
|
|
width: 9.6rem;
|
|
border-radius: 3.7rem;
|
|
border: none;
|
|
background-color: #ff7a51;
|
|
color: #fff;
|
|
font-size: 1.4rem;
|
|
}
|
|
</style>
|