登录注册
This commit is contained in:
李志鹏
40
src/App.vue
40
src/App.vue
@@ -3,16 +3,22 @@
|
||||
<RouterView />
|
||||
<MainFooter />
|
||||
<BackTop />
|
||||
|
||||
<VideoModel />
|
||||
<div v-show="loading" class="main-loading">
|
||||
<span class="iconfont icon-loading"></span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { RouterView } from "vue-router";
|
||||
import MainHeader from "./components/main-header.vue";
|
||||
import MainFooter from "./components/main-footer.vue";
|
||||
import BackTop from "./components/back-top.vue";
|
||||
import VideoModel from "./components/video-model.vue";
|
||||
import { ref, computed } from 'vue'
|
||||
import { RouterView } from 'vue-router'
|
||||
import MainHeader from './components/main-header.vue'
|
||||
import MainFooter from './components/main-footer.vue'
|
||||
import BackTop from './components/back-top.vue'
|
||||
import VideoModel from './components/video-model.vue'
|
||||
import { useGlobalStore } from './stores/global'
|
||||
const globalStore = useGlobalStore()
|
||||
const loading = computed(() => globalStore.state.loading)
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
// .main {
|
||||
@@ -25,4 +31,26 @@
|
||||
// height: auto;
|
||||
// }
|
||||
// }
|
||||
.main-loading {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999999999;
|
||||
> .iconfont {
|
||||
font-size: 80px;
|
||||
color: #fff;
|
||||
animation: loading 2s linear infinite;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="less">
|
||||
html:root {
|
||||
--main-header-height: 85px;
|
||||
}
|
||||
</style>
|
||||
@@ -27,11 +27,8 @@
|
||||
</down-menu>
|
||||
<router-link class="link" to="/my-account">
|
||||
<span class="iconfont icon-tubiao-"></span>
|
||||
<span>{{ $t('MainHeader.LoginOrSignin') }}</span>
|
||||
</router-link>
|
||||
<router-link class="link" to="/my-account">
|
||||
<span class="iconfont icon-tubiao-"></span>
|
||||
<span>{{ $t('MainHeader.MyAccount') }}</span>
|
||||
<span v-if="token">{{ $t('MainHeader.MyAccount') }}</span>
|
||||
<span v-else>{{ $t('MainHeader.LoginOrSignin') }}</span>
|
||||
</router-link>
|
||||
</div>
|
||||
</header>
|
||||
@@ -43,6 +40,9 @@
|
||||
import { useI18n } from 'vue-i18n'
|
||||
const { locale } = useI18n()
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useUserInfoStore } from '@/stores/userInfo'
|
||||
const userInfoStore = useUserInfoStore()
|
||||
const token = computed(() => userInfoStore.state.token)
|
||||
const route = useRoute()
|
||||
const lang = computed(() => route.params.lang)
|
||||
if (lang.value) setLang(lang.value)
|
||||
@@ -119,7 +119,7 @@
|
||||
.main-header {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 85px;
|
||||
height: var(--main-header-height, 85px);
|
||||
padding: 15px 30px;
|
||||
box-sizing: border-box;
|
||||
top: 0;
|
||||
|
||||
@@ -5,6 +5,7 @@ import { routes } from './routes'
|
||||
import '@/assets/css/style.less'
|
||||
import directives from './directives/index'
|
||||
import i18n from './lang/index'
|
||||
import store from './stores/index'
|
||||
|
||||
export const createApp = ViteSSG(App, {
|
||||
routes,
|
||||
@@ -13,6 +14,7 @@ export const createApp = ViteSSG(App, {
|
||||
({ app }) => {
|
||||
// 注册全局指令
|
||||
app.use(directives)
|
||||
app.use(store)
|
||||
app.use(i18n)
|
||||
}
|
||||
)
|
||||
|
||||
28
src/pages/my-account/account-info.vue
Normal file
28
src/pages/my-account/account-info.vue
Normal file
@@ -0,0 +1,28 @@
|
||||
<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>
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.account-info {
|
||||
display: flex;
|
||||
>.left{
|
||||
width: 270px;
|
||||
border-right: 1px solid #e1e1e1;
|
||||
margin-right: 30px;
|
||||
}
|
||||
>.content{
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
124
src/pages/my-account/css/style.css
Normal file
124
src/pages/my-account/css/style.css
Normal file
@@ -0,0 +1,124 @@
|
||||
.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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
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>
|
||||
124
src/pages/my-account/less/style.less
Normal file
124
src/pages/my-account/less/style.less
Normal file
@@ -0,0 +1,124 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
>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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
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">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>
|
||||
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">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>
|
||||
@@ -31,7 +31,12 @@ export const routes: RouteRecordRaw[] = [
|
||||
path: 'aida',
|
||||
name: 'Aida',
|
||||
component: () => import('./pages/aida/index.vue')
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'my-account',
|
||||
name: 'MyAccount',
|
||||
component: () => import('./pages/my-account/index.vue')
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
14
src/stores/global.ts
Normal file
14
src/stores/global.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref, computed } from 'vue'
|
||||
export const useGlobalStore = defineStore('global', () => {
|
||||
const state = ref({
|
||||
loading: false,// 全局loading
|
||||
})
|
||||
|
||||
const setLoading = (v: boolean) => { state.value.loading = v }
|
||||
|
||||
return {
|
||||
state,
|
||||
setLoading,
|
||||
}
|
||||
})
|
||||
9
src/stores/index.ts
Normal file
9
src/stores/index.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
import { createPinia } from 'pinia'
|
||||
import { createPersistedState } from 'pinia-persistedstate-plugin'
|
||||
// 创建store实例
|
||||
const store = createPinia()
|
||||
// 使用持久化插件(全局持久化)
|
||||
store.use(createPersistedState())
|
||||
export default store
|
||||
export * from './global'
|
||||
export * from './userInfo'
|
||||
30
src/stores/userInfo.ts
Normal file
30
src/stores/userInfo.ts
Normal file
@@ -0,0 +1,30 @@
|
||||
// 每一个存储的模块，命名规则use开头，store结尾
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref, computed } from 'vue'
|
||||
export const useUserInfoStore = defineStore('userInfo', () => {
|
||||
const state = ref({
|
||||
userInfo: {},
|
||||
token: '',
|
||||
|
||||
})
|
||||
|
||||
// actions
|
||||
const setUserInfo = (data: any) => {
|
||||
state.value.userInfo = data
|
||||
}
|
||||
|
||||
const setToken = (data: string) => {
|
||||
state.value.token = data
|
||||
}
|
||||
|
||||
const logOut = async () => {
|
||||
|
||||
}
|
||||
|
||||
return {
|
||||
state,
|
||||
setToken,
|
||||
setUserInfo,
|
||||
logOut,
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user