aidlab/Code-Create
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

登录注册

Browse Source
This commit is contained in:
李志鹏
2026-05-18 16:46:55 +08:00
parent 35df75d4ea
commit 4254f291f4
13 changed files with 241 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
src/pages/my-account/account-info.vue
View File

@@ -1,27 +1,114 @@
<template>
<div class="account-info">
<div class="left">
<img alt="" src="" class="avatar" />
<div class="name">12312</div>
<div class="name">12312</div>
<div class="name">12312</div>
<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 class="content"></div>
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
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/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{
> .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{
> .content {
flex: 1;
}
}

17
src/pages/my-account/css/style.css
View File

@@ -105,20 +105,3 @@
.register > form > .tip > a {
color: #000;
}
.login > form > button,
.register > form > button {
width: 100%;
height: 38px;
border-radius: 4px;
border: none;
background-color: #9a2125;
color: #fff;
transition: all 0.3s ease-in-out;
box-shadow: 0 2px 5px rgba(7, 129, 105, 0.3);
cursor: pointer;
font-size: 12px;
}
.login > form > button:hover,
.register > form > button:hover {
background-color: #99494c;
}

2
src/pages/my-account/index.vue
View File

@@ -3,7 +3,7 @@
<div class="header">
<h1 class="title">
<span class="iconfont icon-tubiao-"></span>
<span>My Account</span>
<span>My account</span>
</h1>
</div>
<div class="content" v-if="!token">

17
src/pages/my-account/less/style.less
View File

@@ -103,22 +103,5 @@
color: #000;
}
}
>button {
width: 100%;
height: 38px;
border-radius: 4px;
border: none;
background-color: #9a2125;
color: #fff;
transition: all 0.3s ease-in-out;
box-shadow: 0 2px 5px rgba(7, 129, 105, 0.3);
cursor: pointer;
font-size: 12px;
&:hover {
background-color: #99494c;
}
}
}
}

2
src/pages/my-account/login.vue
View File

@@ -30,7 +30,7 @@
>Lost your password?</router-link
>
</div>
<button type="submit">LOG IN</button>
<button type="submit" custom>LOG IN</button>
</form>
</div>
</template>

11
src/pages/my-account/orders.vue Normal file
View File

@@ -0,0 +1,11 @@
<template>
<div class="orders">No order has been made yet.</div>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue'
</script>
<style scoped lang="less">
.orders {
}
</style>

2
src/pages/my-account/register.vue
View File

@@ -51,7 +51,7 @@
>Privacy Policy</router-link
>
</div>
<button type="submit">REGISTER</button>
<button type="submit" custom>REGISTER</button>
</form>
</div>
</template>

64
src/pages/my-account/welcome.vue Normal file
View File

@@ -0,0 +1,64 @@
<template>
<div class="welcome">
<h3 class="title">Welcome to your account page</h3>
<div class="tip">
Hi <b>XXX</b>, today is a great day to check your account page. You can check also:
</div>
<div class="buttons">
<router-link class="link" v-for="(v, i) in navs" :key="i" :to="v.path">
<button custom>
<span class="iconfont" :class="v.icon"></span>
<span class="label">{{ v.label }}</span>
</button>
</router-link>
</div>
</div>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue'
const navs = ref([
{
path: '/my-account/orders',
label: 'RECENT ORDERS',
icon: 'icon-orders'
},
{
path: '/my-account/address',
label: 'ADDRESSSES',
icon: 'icon-address'
},
{
path: '/my-account/details',
label: 'ACCOUNT DETAILS',
icon: 'icon-tubiao-'
}
])
</script>
<style scoped lang="less">
.welcome {
> .title {
font-weight: 600;
letter-spacing: 2px;
color: #222222;
font-size: 24px;
margin-bottom: 10px;
}
> .tip {
color: #333;
margin-bottom: 20px;
}
> .buttons {
display: flex;
align-items: center;
justify-content: center;
> .link {
margin: 0 4px;
flex: 1;
text-decoration: none;
}
}
}
</style>