Merge branch 'main' of http://18.167.251.121:10003/aidlab/Code-Create
This commit is contained in:
X1627315083@163.com
115
src/pages/my-account/account-info.vue
Normal file
115
src/pages/my-account/account-info.vue
Normal file
@@ -0,0 +1,115 @@
|
||||
<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/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>
|
||||
107
src/pages/my-account/css/style.css
Normal file
107
src/pages/my-account/css/style.css
Normal file
@@ -0,0 +1,107 @@
|
||||
.login,
|
||||
.register {
|
||||
padding: 35px;
|
||||
border: 1px solid #e1e1e1;
|
||||
background-color: #fff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.login > h2,
|
||||
.register > h2 {
|
||||
font-weight: 600;
|
||||
color: #222;
|
||||
font-size: 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.login > form > *,
|
||||
.register > form > * {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.login > form > .form-item,
|
||||
.register > form > .form-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.login > form > .form-item > label,
|
||||
.register > form > .form-item > label {
|
||||
margin-bottom: 5px;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
font-weight: 400;
|
||||
}
|
||||
.login > form > .form-item > label::after,
|
||||
.register > form > .form-item > label::after {
|
||||
content: ' *';
|
||||
color: #f00;
|
||||
}
|
||||
.login > form > .form-item > .input-container > input,
|
||||
.register > form > .form-item > .input-container > input,
|
||||
.login > form > .form-item > input,
|
||||
.register > form > .form-item > input {
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
padding: 0 17px;
|
||||
font-size: 16px;
|
||||
border: 1px solid #e1e1e1;
|
||||
outline: none;
|
||||
}
|
||||
.login > form > .form-item > .input-container > input:focus,
|
||||
.register > form > .form-item > .input-container > input:focus,
|
||||
.login > form > .form-item > input:focus,
|
||||
.register > form > .form-item > input:focus {
|
||||
border-color: #000;
|
||||
}
|
||||
.login > form > .form-item > .input-container,
|
||||
.register > form > .form-item > .input-container {
|
||||
position: relative;
|
||||
}
|
||||
.login > form > .form-item > .input-container > input,
|
||||
.register > form > .form-item > .input-container > input {
|
||||
padding-right: 35px;
|
||||
}
|
||||
.login > form > .form-item > .input-container > .iconfont,
|
||||
.register > form > .form-item > .input-container > .iconfont {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.login > form > .remember,
|
||||
.register > form > .remember {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.login > form > .remember > input,
|
||||
.register > form > .remember > input {
|
||||
margin: 4px 8px 0 0;
|
||||
}
|
||||
.login > form > .remember > label,
|
||||
.register > form > .remember > label {
|
||||
color: #333;
|
||||
}
|
||||
.login > form > .remember > .link,
|
||||
.register > form > .remember > .link {
|
||||
margin-left: auto;
|
||||
color: #222;
|
||||
}
|
||||
.login > form > .subscribe,
|
||||
.register > form > .subscribe {
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
}
|
||||
.login > form > .tip,
|
||||
.register > form > .tip {
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
}
|
||||
.login > form > .tip > a,
|
||||
.register > form > .tip > a {
|
||||
color: #000;
|
||||
}
|
||||
61
src/pages/my-account/index.vue
Normal file
61
src/pages/my-account/index.vue
Normal file
@@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<div class="my-account">
|
||||
<div class="header">
|
||||
<h1 class="title">
|
||||
<span class="iconfont icon-tubiao-"></span>
|
||||
<span>My account</span>
|
||||
</h1>
|
||||
</div>
|
||||
<div class="content" v-if="!token">
|
||||
<Login />
|
||||
<Register />
|
||||
</div>
|
||||
<div class="content" v-else>
|
||||
<AccountInfo />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import Login from './login.vue'
|
||||
import Register from './register.vue'
|
||||
import AccountInfo from './account-info.vue'
|
||||
import { useUserInfoStore } from '@/stores/userInfo'
|
||||
const userInfoStore = useUserInfoStore()
|
||||
const token = computed(() => userInfoStore.state.token)
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.my-account {
|
||||
background-color: #f9f9f9;
|
||||
> .header {
|
||||
border-top: var(--main-header-height, 85px) solid #000;
|
||||
background-color: #666;
|
||||
padding: 32px 0;
|
||||
color: #fff;
|
||||
margin-bottom: 32px;
|
||||
> h1 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 80px;
|
||||
> span {
|
||||
font-size: 40px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 80px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 60px;
|
||||
> * {
|
||||
flex: 1;
|
||||
}
|
||||
animation: opacity-in 0.3s linear both;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
107
src/pages/my-account/less/style.less
Normal file
107
src/pages/my-account/less/style.less
Normal file
@@ -0,0 +1,107 @@
|
||||
.login,
|
||||
.register {
|
||||
padding: 35px;
|
||||
border: 1px solid #e1e1e1;
|
||||
background-color: #fff;
|
||||
border-radius: 5px;
|
||||
|
||||
>h2 {
|
||||
font-weight: 600;
|
||||
color: #222;
|
||||
font-size: 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
>form {
|
||||
>* {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
>.form-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
>label {
|
||||
margin-bottom: 5px;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
font-weight: 400;
|
||||
|
||||
&::after {
|
||||
content: ' *';
|
||||
color: #f00;
|
||||
}
|
||||
}
|
||||
|
||||
>.input-container>input,
|
||||
>input {
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
padding: 0 17px;
|
||||
font-size: 16px;
|
||||
border: 1px solid #e1e1e1;
|
||||
outline: none;
|
||||
|
||||
&:focus {
|
||||
border-color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
>.input-container {
|
||||
position: relative;
|
||||
|
||||
>input {
|
||||
padding-right: 35px;
|
||||
}
|
||||
|
||||
>.iconfont {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
>.remember {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
>input {
|
||||
margin: 4px 8px 0 0;
|
||||
}
|
||||
|
||||
>label {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
>.link {
|
||||
margin-left: auto;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
>.subscribe {
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
>.tip {
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
|
||||
>a {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
62
src/pages/my-account/login.vue
Normal file
62
src/pages/my-account/login.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<div class="login">
|
||||
<h2>Login</h2>
|
||||
<form @submit.prevent="handleSubmit">
|
||||
<div class="form-item">
|
||||
<label for="email">Username or email address</label>
|
||||
<input type="email" id="email" name="email" required v-model="fromData.email" />
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label for="password">Password</label>
|
||||
<div class="input-container">
|
||||
<input
|
||||
id="password"
|
||||
name="password"
|
||||
required
|
||||
:type="passShow ? 'text' : 'password'"
|
||||
v-model="fromData.password"
|
||||
/>
|
||||
<span
|
||||
class="iconfont"
|
||||
:class="[passShow ? 'icon-hide' : 'icon-show']"
|
||||
@click="passShow = !passShow"
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="remember">
|
||||
<input type="checkbox" id="remember" name="remember" v-model="remember" />
|
||||
<label for="remember">Remember me</label>
|
||||
<router-link class="link" to="/my-account/lost-password"
|
||||
>Lost your password?</router-link
|
||||
>
|
||||
</div>
|
||||
<button type="submit" custom>LOG IN</button>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useGlobalStore } from '@/stores/global'
|
||||
const globalStore = useGlobalStore()
|
||||
import { useUserInfoStore } from '@/stores/userInfo'
|
||||
const userInfoStore = useUserInfoStore()
|
||||
const passShow = ref(false)
|
||||
const remember = ref(false)
|
||||
const fromData = ref({
|
||||
email: '',
|
||||
password: ''
|
||||
})
|
||||
|
||||
const handleSubmit = () => {
|
||||
console.log(fromData.value, remember.value)
|
||||
globalStore.setLoading(true)
|
||||
setTimeout(() => {
|
||||
globalStore.setLoading(false)
|
||||
userInfoStore.setToken('123456')
|
||||
}, 1000)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import './less/style.less';
|
||||
</style>
|
||||
11
src/pages/my-account/orders.vue
Normal file
11
src/pages/my-account/orders.vue
Normal 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>
|
||||
78
src/pages/my-account/register.vue
Normal file
78
src/pages/my-account/register.vue
Normal file
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<div class="register">
|
||||
<h2>Register</h2>
|
||||
<form @submit.prevent="handleSubmit">
|
||||
<div class="form-item">
|
||||
<label for="username">Username</label>
|
||||
<input
|
||||
type="username"
|
||||
id="username"
|
||||
name="username"
|
||||
required
|
||||
v-model="fromData.username"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label for="email">Email address</label>
|
||||
<input type="email" id="email" name="email" required v-model="fromData.email" />
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label for="password">Password</label>
|
||||
<div class="input-container">
|
||||
<input
|
||||
id="password"
|
||||
name="password"
|
||||
required
|
||||
:type="passShow ? 'text' : 'password'"
|
||||
v-model="fromData.password"
|
||||
/>
|
||||
<span
|
||||
class="iconfont"
|
||||
:class="[passShow ? 'icon-hide' : 'icon-show']"
|
||||
@click="passShow = !passShow"
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="subscribe">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="subscribe"
|
||||
name="subscribe"
|
||||
v-model="fromData.subscribe"
|
||||
/>
|
||||
<label for="subscribe"
|
||||
>Subscribe to Code Create product/service news and newsletter</label
|
||||
>
|
||||
</div>
|
||||
<div class="tip">
|
||||
Your personal data will be used to support your experience throughout this website,
|
||||
to manage access to your account, and for other purposes described in our
|
||||
<router-link class="link" to="/my-account/privacy-policy"
|
||||
>Privacy Policy</router-link
|
||||
>
|
||||
</div>
|
||||
<button type="submit" custom>REGISTER</button>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useUserInfoStore } from '@/stores/userInfo'
|
||||
const userInfoStore = useUserInfoStore()
|
||||
const passShow = ref(false)
|
||||
const remember = ref(false)
|
||||
const fromData = ref({
|
||||
username: '',
|
||||
email: '',
|
||||
password: '',
|
||||
subscribe: false
|
||||
})
|
||||
|
||||
const handleSubmit = () => {
|
||||
console.log(fromData.value, remember.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import './less/style.less';
|
||||
</style>
|
||||
64
src/pages/my-account/welcome.vue
Normal file
64
src/pages/my-account/welcome.vue
Normal 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>
|
||||
Reference in New Issue
Block a user