WxxyDeveloper/JSL_OrganizeInternalOAWeb_Archive
9
0
Fork 0
mirror of https://gitee.com/XiaoLFeng/JSL_OrganizeInternalOA_Web.git synced 2025-06-08 11:43:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

add emaillogin

Browse Source
This commit is contained in:
GUjiYN 2024-01-19 16:06:54 +08:00
parent 8248f7b969
commit ad254135c6
8 changed files with 153 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
src/components/EmailLogin.vue Normal file
View File

@ -0,0 +1,88 @@
<template>
<div class="relative h-screen w-full bg-gray-200">
<nav class="text-base z-50 sticky top-0 bg-white border-gray-200 dark:bg-gray-900 dark:border-gray-700">
<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
<a href="/" class="flex items-center space-x-3 rtl:space-x-reverse">
<span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">LOGO</span>
</a>
<button data-collapse-toggle="navbar-dropdown" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-dropdown" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
</svg>
</button>
</div>
</nav>
<div class="flex items-center justify-center">
<div class="container mx-auto mt-20" >
<div class="max-w-md mx-auto bg-white border border-gray-200 shadow p-10 dark:bg-gray-800 dark:border-gray-700">
<h2 class="text-3xl font-bold mb-6 text-center text-gray-900 dark:text-white">邮箱登录</h2>
<form class="max-w-lg mx-auto w-auto">
<div class="mb-5">
<label for="email" class="flex items-center space-x-4 text-sm font-medium text-gray-900 dark:text-white ">
<svg class="w-5 h-5 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 14 18">
<path d="M7 9a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Zm2 1H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2a5.006 5.006 0 0 0-5-5Z"/>
</svg>
邮箱
</label>
<input type="email" id="email" v-model="data.userNum" class="mt-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required>
</div>
<div class="mb-5">
<label for="password" class="flex items-center space-x-4 mb-2 text-sm font-medium text-gray-900 dark:text-white">
<svg class="w-5 h-5 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 20">
<path d="M14 7h-1.5V4.5a4.5 4.5 0 1 0-9 0V7H2a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2Zm-5 8a1 1 0 1 1-2 0v-3a1 1 0 1 1 2 0v3Zm1.5-8h-5V4.5a2.5 2.5 0 1 1 5 0V7Z"/>
</svg>
验证码
</label>
<input type="password" v-model="data.password" id="password" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required>
</div>
<div class="flex items-start mb-5">
<a href="" class="ml-auto text-blue-500 font-medium rounded-lg text-sm sm:w-auto text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">获取邮箱验证码</a>
</div>
<div class="flex flex-col ">
<a @click="loginUser" class="text-white bg-sky-500 hover:bg-sky-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-32 sm:w-auto mt-2 mb-3 mx-8 px-10 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">登录</a>
<div class="flex space-x-2 ml-24">
<a href="/login" class="text-blue-500 font-medium rounded-lg text-sm sm:w-auto text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">账号密码登录 |</a>
<a href="/register" class="text-blue-500 font-medium rounded-lg text-sm sm:w-auto text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">立即注册</a>
</div>
</div>
</form>
</div>
</div>
</div>
<Icp class="absolute bottom-0"/>
</div>
</template>
<script setup>
import axios from 'axios';
import getCurrentTimestamp from '../public/methods.js';
import Icp from "@/components/MainPage/Icp.vue";
const data = {
userNum: '',
password: ''
}
function loginUser(){
axios({
url: "api/user/login",
method: "post",
data: {
"userNum": data.userNum,
"password": data.password
},
headers: {
'content-type': 'application/json;charset=utf-8',
'Timestamp':getCurrentTimestamp()
},
}).then((res) => {
if (res.data.code === 200) {
//登录成功，跳转页面+消息提示+存储登录用户的数据
} else {
//登录失败，消息提示
}
});
}
</script>

16
src/components/MainPage/Icp.vue Normal file
View File

@ -0,0 +1,16 @@
<template>
<!--版权-->
<div class="w-full h-12 flex items-center justify-center bg-gray-700 text-gray-400">
<div class="flex space-x-10">
<div>
ICP备案
</div>
<div>
公安备案
</div>
<div>
Copyright (C) 2023 xxx Group All Right Services.
</div>
</div>
</div>
</template>

2
src/components/MainPage/More.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="w-full mt-40 bg-gray-700 h-[400px]"> <div class="w-full bg-gray-700 h-[400px]">
<div class="flex text-white"> <div class="flex text-white">
<div class=""> <div class="">
<p class="pt-32 pl-52 text-2xl"> <p class="pt-32 pl-52 text-2xl">

6
src/components/MainPage/TeamProfile.vue
View File

@ -13,11 +13,11 @@
</button> </button>
</div> </div>
</div> </div>
<div class="flex"> <div class="mt-16 flex space-x-5">
<div class="flex-1 mt-16 h-96 w-[600px] border-2 border-gray-400"> <div class="flex-1 h-96 w-1/2">
团队介绍 团队介绍
</div> </div>
<div role="status" class="flex-1 ml-10 mt-16 mb-40 h-96 w-2/5 bg-white shadow-lg"> <div role="status" class="flex-1 mb-40 h-96 w-1/2 bg-white shadow-lg">
<img src="@/assets/images/img15.jpg" alt=""> <img src="@/assets/images/img15.jpg" alt="">
</div> </div>
</div> </div>

14
src/components/index.vue
View File

@ -16,16 +16,7 @@ onMounted(() => {
<NewProfile/> <NewProfile/>
<ExcellentMember/> <ExcellentMember/>
<More/> <More/>
</div> <Icp/>
<!--版权-->
<div class="mt-40 flex items-center justify-center">
<div class="text-center">
ICP备案
<br>
公安备案
<br>
Copyright (C) 2023 xxx Group All Right Services.
</div>
</div> </div>
</div> </div>
</template> </template>
@ -38,8 +29,9 @@ import NewProfile from "@/components/MainPage/NewProfile.vue";
import ExcellentMember from "@/components/MainPage/ExcellentMember.vue"; import ExcellentMember from "@/components/MainPage/ExcellentMember.vue";
import ProjectList from "@/components/MainPage/ProjectList.vue"; import ProjectList from "@/components/MainPage/ProjectList.vue";
import More from "@/components/MainPage/More.vue"; import More from "@/components/MainPage/More.vue";
import Icp from "@/components/MainPage/Icp.vue";
export default{ export default{
components: {More,ProjectList, ExcellentMember, NewProfile, TeamProfile, Carousel, NavBar}, components: {Icp, More,ProjectList, ExcellentMember, NewProfile, TeamProfile, Carousel, NavBar},
} }
</script> </script>

29
src/components/login.vue
View File

@ -1,8 +1,21 @@
<template> <template>
<div class="w-full h-screen"> <div class="relative h-screen w-full bg-gray-200">
<nav class="text-base z-50 sticky top-0 bg-white border-gray-200 dark:bg-gray-900 dark:border-gray-700">
<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
<a href="/" class="flex items-center space-x-3 rtl:space-x-reverse">
<span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">LOGO</span>
</a>
<button data-collapse-toggle="navbar-dropdown" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-dropdown" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
</svg>
</button>
</div>
</nav>
<div class="flex items-center justify-center"> <div class="flex items-center justify-center">
<div class="container mx-auto mt-20" > <div class="container mx-auto mt-20" >
<div class="max-w-md mx-auto bg-white border border-gray-200 rounded-lg shadow p-10 dark:bg-gray-800 dark:border-gray-700"> <div class="max-w-md mx-auto bg-white border border-gray-200 shadow p-10 dark:bg-gray-800 dark:border-gray-700">
<h2 class="text-3xl font-bold mb-6 text-center text-gray-900 dark:text-white">账号登录</h2> <h2 class="text-3xl font-bold mb-6 text-center text-gray-900 dark:text-white">账号登录</h2>
<form class="max-w-lg mx-auto w-auto"> <form class="max-w-lg mx-auto w-auto">
<div class="mb-5"> <div class="mb-5">
@ -28,6 +41,7 @@
<input id="remember" type="checkbox" value="" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800" required> <input id="remember" type="checkbox" value="" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800" required>
</div> </div>
<label for="remember" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">记住我</label> <label for="remember" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">记住我</label>
<a href="/emaillogin" class="ml-auto text-blue-500 font-medium rounded-lg text-sm sm:w-auto text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">邮箱验证码登录</a>
</div> </div>
<div class="flex flex-col "> <div class="flex flex-col ">
<a @click="loginUser" class="text-white bg-sky-500 hover:bg-sky-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-32 sm:w-auto mt-2 mb-3 mx-8 px-10 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">登录</a> <a @click="loginUser" class="text-white bg-sky-500 hover:bg-sky-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-32 sm:w-auto mt-2 mb-3 mx-8 px-10 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">登录</a>
@ -41,20 +55,13 @@
</div> </div>
</div> </div>
</div> </div>
<div class="mt-40 flex items-center justify-center"> <Icp class="absolute bottom-0"/>
<div class="text-center">
ICP备案
<br>
公安备案
<br>
Copyright (C) 2023 xxx Group All Right Services.
</div> </div>
</div>
</div>
</template> </template>
<script setup> <script setup>
import axios from 'axios'; import axios from 'axios';
import getCurrentTimestamp from '../public/methods.js'; import getCurrentTimestamp from '../public/methods.js';
import Icp from "@/components/MainPage/Icp.vue";
const data = { const data = {
userNum: '', userNum: '',

30
src/components/register.vue
View File

@ -1,8 +1,21 @@
<template> <template>
<div class="w-auto h-auto bg-sky-200"> <div class="relative h-screen w-full bg-gray-200">
<nav class="text-base z-50 sticky top-0 bg-white border-gray-200 dark:bg-gray-900 dark:border-gray-700">
<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
<a href="/" class="flex items-center space-x-3 rtl:space-x-reverse">
<span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">LOGO</span>
</a>
<button data-collapse-toggle="navbar-dropdown" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-dropdown" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
</svg>
</button>
</div>
</nav>
<div class="flex items-center justify-center"> <div class="flex items-center justify-center">
<div class="container w-full max-w-md mx-auto mt-8 " > <div class="container w-full max-w-md mx-auto mt-2" >
<div class=" mx-auto bg-white border border-gray-200 rounded-lg shadow p-8 dark:bg-gray-800 dark:border-gray-700"> <div class=" mx-auto bg-white border border-gray-200 shadow p-8 dark:bg-gray-800 dark:border-gray-700">
<h2 class="text-3xl font-bold mb-6 text-center text-gray-900 dark:text-white">用户注册</h2> <h2 class="text-3xl font-bold mb-6 text-center text-gray-900 dark:text-white">用户注册</h2>
<form class="flex flex-col space-y-5 max-w-sm w-96"> <form class="flex flex-col space-y-5 max-w-sm w-96">
<div class="mb-5"> <div class="mb-5">
@ -76,15 +89,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="mt-40 flex items-center justify-center"> <Icp class="absolute bottom-0"/>
<div class="text-center">
ICP备案
<br>
公安备案
<br>
Copyright (C) 2023 xxx Group All Right Services.
</div>
</div>
</div> </div>
</template> </template>
@ -94,6 +99,7 @@
<script setup> <script setup>
import axios from 'axios'; import axios from 'axios';
import getCurrentTimestamp from '../public/methods.js'; import getCurrentTimestamp from '../public/methods.js';
import Icp from "@/components/MainPage/Icp.vue";
const data = { const data = {
username: '', username: '',

5
src/router/index.js
View File

@ -24,6 +24,11 @@ const router = createRouter({
name:'success', name:'success',
component:()=>import('../components/success.vue') component:()=>import('../components/success.vue')
}, },
{
path:'/emaillogin',
name:'emaillogin',
component:()=>import('../components/EmailLogin.vue')
},
{ {
path:'/manager', path:'/manager',
name:'manager', name:'manager',