139 lines
3.1 KiB
Vue
139 lines
3.1 KiB
Vue
<template>
|
|
<div class="my-info">
|
|
<div class="credits-box">
|
|
<span class="credits">{{ $t('Home.creditsNum', { num: 6000 }) }}</span>
|
|
<span class="icon" @click="onRefresh" :class="{ loading }">
|
|
<svg-icon name="refresh" size="21" />
|
|
</span>
|
|
<span class="link"></span>
|
|
<span class="icon" @click="onShop"><svg-icon name="shop" size="21" /></span>
|
|
</div>
|
|
<el-popover
|
|
placement="bottom-end"
|
|
popper-style="width:auto; min-width: 22rem; padding: 0.8rem; border-radius: 1.4rem;"
|
|
>
|
|
<template #reference>
|
|
<img class="pic" src="@/assets/images/pic.jpg" />
|
|
</template>
|
|
<div class="menu-box">
|
|
<div>
|
|
<span class="label">{{ email }}</span>
|
|
</div>
|
|
<p></p>
|
|
<div class="btn" @click="onSetting">
|
|
<span class="icon"><svg-icon name="setting" size="18" /></span>
|
|
<span class="label">{{ $t('Home.setting') }}</span>
|
|
</div>
|
|
<div class="btn" @click="onLogout">
|
|
<span class="icon"><svg-icon name="logout" size="18" /></span>
|
|
<span class="label">{{ $t('Home.logout') }}</span>
|
|
</div>
|
|
</div>
|
|
</el-popover>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import MyEvent from '@/utils/myEvent'
|
|
import { computed, ref } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { useUserInfoStore } from '@/stores'
|
|
const userInfoStore = useUserInfoStore()
|
|
const email = computed(() => userInfoStore.state.userInfo?.email || '------')
|
|
const router = useRouter()
|
|
const loading = ref(false)
|
|
const onShop = () => {
|
|
console.log('onShop')
|
|
// router.push({ name: 'shop' })
|
|
}
|
|
const onRefresh = () => {
|
|
console.log('onRefresh')
|
|
loading.value = true
|
|
setTimeout(() => {
|
|
loading.value = false
|
|
}, 1500)
|
|
}
|
|
const onSetting = () => {
|
|
MyEvent.emit('openSettingDialog')
|
|
}
|
|
const onLogout = () => {
|
|
userInfoStore.logOut()
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.my-info {
|
|
display: flex;
|
|
align-items: center;
|
|
> .credits-box {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 18rem;
|
|
height: 4.3rem;
|
|
margin-right: 1rem;
|
|
border: 1px solid #ffcf90;
|
|
border-radius: 0.8rem;
|
|
background-color: var(--my-info-bgColor, rgba(255, 252, 244, 1));
|
|
> .credits {
|
|
flex: 1;
|
|
font-size: 1.3rem;
|
|
margin-left: 1rem;
|
|
}
|
|
> .link {
|
|
height: 100%;
|
|
width: 0;
|
|
border-right: 1px solid #ffcf90;
|
|
}
|
|
> .icon {
|
|
cursor: pointer;
|
|
margin: 0 1rem;
|
|
}
|
|
> .loading {
|
|
animation: loading 0.6s linear infinite;
|
|
}
|
|
}
|
|
.pic {
|
|
width: 4.65rem;
|
|
height: 4.65rem;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
.menu-box {
|
|
user-select: none;
|
|
> * {
|
|
margin-bottom: 0.4rem;
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
> div {
|
|
height: 3.7rem;
|
|
display: flex;
|
|
align-items: center;
|
|
// justify-content: center;
|
|
&.btn {
|
|
cursor: pointer;
|
|
}
|
|
&.btn:hover {
|
|
background-color: rgba(0, 0, 0, 0.06);
|
|
}
|
|
> .label {
|
|
font-size: 1.4rem;
|
|
color: #000;
|
|
margin-left: 0.8rem;
|
|
}
|
|
> .icon {
|
|
margin-left: 1rem;
|
|
--svg-icon-color: #000;
|
|
}
|
|
}
|
|
> p {
|
|
width: 100%;
|
|
height: 0;
|
|
border-bottom: 0.1rem solid #e5e5e5;
|
|
}
|
|
}
|
|
</style>
|