116 lines
2.2 KiB
Vue
116 lines
2.2 KiB
Vue
<template>
|
|
<div class="account-info">
|
|
<div class="left">
|
|
<div class="info">
|
|
<img alt="" src="" class="avatar" />
|
|
<div class="name">12312</div>
|
|
<div class="email">12312@example.com</div>
|
|
</div>
|
|
<router-link
|
|
class="link"
|
|
v-for="(v, i) in navs"
|
|
:key="i"
|
|
:to="v.path"
|
|
@click="typeof v.onClick === 'function' && v.onClick()"
|
|
>
|
|
<span class="iconfont" :class="v.icon"></span>
|
|
<span class="label">{{ v.label }}</span>
|
|
</router-link>
|
|
</div>
|
|
<div class="content">
|
|
<router-view></router-view>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { computed, ref } from 'vue'
|
|
import { useUserInfoStore } from '@/stores/userInfo'
|
|
const userInfoStore = useUserInfoStore()
|
|
const navs = ref([
|
|
{
|
|
path: '/my-account',
|
|
label: 'Dashboard',
|
|
icon: 'icon-dashboard'
|
|
},
|
|
{
|
|
path: '/my-account/orders',
|
|
label: 'Orders',
|
|
icon: 'icon-orders'
|
|
},
|
|
{
|
|
path: '/my-account/subscriptions',
|
|
label: 'Subscriptions',
|
|
icon: 'icon-subscriptions'
|
|
},
|
|
{
|
|
path: '/my-account/address',
|
|
label: 'Address',
|
|
icon: 'icon-address'
|
|
},
|
|
{
|
|
path: '/my-account/payment-methods',
|
|
label: 'Payment methods',
|
|
icon: 'icon-duidiaojiaohuanduihuan'
|
|
},
|
|
{
|
|
path: '/my-account/details',
|
|
label: 'Account details',
|
|
icon: 'icon-tubiao-'
|
|
},
|
|
{
|
|
path: '/my-account',
|
|
label: 'Log out',
|
|
icon: 'icon-tuichu',
|
|
onClick: () => {
|
|
console.log('logout')
|
|
userInfoStore.setToken('')
|
|
}
|
|
}
|
|
])
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.account-info {
|
|
display: flex;
|
|
> .left {
|
|
width: 270px;
|
|
border-right: 1px solid #e1e1e1;
|
|
margin-right: 30px;
|
|
> .info {
|
|
margin-bottom: 30px;
|
|
> .avatar {
|
|
width: 86px;
|
|
height: 86px;
|
|
margin-bottom: 15px;
|
|
border-radius: 50%;
|
|
}
|
|
> .name {
|
|
color: #222;
|
|
font-size: 16px;
|
|
}
|
|
> .email {
|
|
color: #333;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
> .link {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
color: #222;
|
|
font-size: 16px;
|
|
text-decoration: none;
|
|
padding: 7px 0;
|
|
line-height: 1.6;
|
|
> .iconfont {
|
|
font-size: 20px;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
}
|
|
> .content {
|
|
flex: 1;
|
|
}
|
|
}
|
|
</style>
|