LiLongLong
/
graphite_vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat:登录重构

master
guoapeng 5 months ago
parent
1d13e9fa5d
commit
a9c35dd4f9
2 changed files with 314 additions and 153 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 274
      src/views/login/index.vue
  2. 193
      src/views/login/index1.vue

274
src/views/login/index.vue
View File

@ -1,174 +1,142 @@
<template>
<div class="login-container">
<!-- 背景图 -->
<div class="background-image"></div>
<!-- 登录表单 -->
<div class="login-form">
<div class="login_logo">
<img :src="logoSvg" class="logo_size"/>
<div class="company_name">长春黄金研究院有限公司</div>
</div>
<!-- 用户名输入框 -->
<div class="login-user-input">
<div class="user_name">用户名</div>
<img class="user_name_icon" :src="userIconSvg"/>
<input type="text" v-model="username" placeholder="用户名" class="input-field" />
</div>
<!-- 密码输入框 -->
<div class="login-pwd-input">
<div class="user_name">密码</div>
<img class="pwd_icon" :src="pwdIconSvg"/>
<input type="password" v-model="password" placeholder="密码" class="input-field" />
</div>
<!-- 登录按钮 -->
<button @click="handleLogin" class="login-button">登录</button>
</div>
</div>
<div class="main">
<div class="login-form">
<img :src="logo" class="logo" alt=""/>
<div class="title">长春黄金研究院有限公司</div>
<el-form :model="form" :rules="rules" ref="formRef" style="width: 100%">
<div class="input-title">用户名</div>
<el-form-item prop="username">
<el-input
v-model="form.username"
placeholder="请输入用户名"
prefix-icon="userIconSvg"
style="width: 100%"
size="large"
>
<template #prefix>
<img :src="userIconSvg" alt="" class="icon" />
</template>
</el-input>
</el-form-item>
<div class="input-title">密码</div>
<el-form-item prop="password">
<el-input
v-model="form.password"
placeholder="请输入密码"
prefix-icon="pwdIconSvg"
type="password"
style="width: 100%"
size="large"
>
<template #prefix>
<img :src="pwdIconSvg" alt="" class="icon"/>
</template>
</el-input>
</el-form-item>
<el-form-item>
<el-button style="width: 100%; margin-top: 10px" type="primary" @click="loginHandle" :loading="loading">登录</el-button>
</el-form-item>
</el-form>
<span class="info">Changchun Gold Research Institute Co.,Ltd.</span>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import { showToast } from "vant";
import logoSvg from '@/assets/logo.svg'
import logo from '@/assets/logo.svg'
import userIconSvg from '@/assets/user_icon.svg'
import pwdIconSvg from '@/assets/pwdw_icon.svg'
import { getCurrentUser, login, type User } from "@/services/user/userManager";
import { useUserStore } from "@/stores/user";
import {ElMessage} from "element-plus";
const router = useRouter();
// 定义用户名和密码的响应式变量
const username = ref("");
const password = ref("");
const form = ref({
username: "",
password: "",
});
const formRef = ref();
const rules = {
username: [
{ required: true, message: "请输入用户名", trigger: "blur" },
{ min: 3, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur" },
],
password: [
{ required: true, message: "请输入密码", trigger: "blur" },
{ min: 3, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur" },
]
}
const loading = ref(false);
const userStore = useUserStore();
// 处理登录的函数
const handleLogin = async () => {
if(!username.value || !password.value){
showToast('请输入用户名或密码！');
return;
}
const res = await login({ username: username.value, password: password.value });
if (res.success) {
sessionStorage.setItem("token", res.data);
const response = await getCurrentUser();
if (response.success) {
const { username, nickname, role } = response.data;
userStore.setUser({ username, nickname, role } as User);
}
router.push("/home");
} else {
showToast(res.msg);
}
};
const router = useRouter();
const loginHandle = () => {
formRef.value.validate(async(valid: any) => {
if (!valid) {
return;
}
loading.value = true;
const res = await login(form.value);
if(res.success) {
sessionStorage.setItem("token", res.data);
const response = await getCurrentUser();
if (response.success) {
const { username, nickname, role } = response.data;
userStore.setUser({ username, nickname, role } as User);
}
await router.push("/home");
loading.value = false;
}else {
ElMessage.error(res.msg);
loading.value = false;
}
})
}
</script>
<style lang="scss" scoped>
@use "@/assets/style/mixin.scss" as *;
.login-container {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
background: linear-gradient(180deg, rgba(250, 252, 255, 0.51) 0%, rgba(255, 255, 255, 0.52) 100%);
.login_logo{
.logo_size{
width: 2.875rem;
height: 2.875rem;
margin-top:2.875rem;
margin-left: 12rem;
}
.company_name{
color: #8799AB;
font-size: 1.25rem;
margin-top:1.5rem;
}
}
}
.background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://via.placeholder.com/1920x1080'); /* 替换为你自己的背景图 URL */
background-size: cover;
background-position: center;
filter: blur(5px);
z-index: -1;
}
.main {
width: 100%;
height: 100vh;
background: #BDE2FE;
display: flex;
justify-content: center;
align-items: center;
.login-form {
position: absolute;
top: 50%;
left: 50%;
height: 33.5rem;
width:27.125rem;
transform: translate(-50%, -50%);
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
width: 25%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 50px 50px 10px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
text-align: center;
}
.input-field {
width:19.75rem;
height: 2.75rem;
border: 1px solid #ccc;
border-radius: 5px;
margin-left: 3.625rem;
padding-left: 1.625rem;
}
.login-button {
width: 19.75rem;
height: 3rem;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 2rem;
margin-left: 2rem;
}
.login-button:hover {
background-color: #0056b3;
}
.login-user-input{
width: 10.2rem;
margin-top: 3rem;
.user_name{
color: #2C3E59;
font-size: 1rem;
}
.user_name_icon{
position: absolute;
margin-left: 4rem;
margin-top: 0.85rem;
width: 1.25rem;
height: 1.25rem;
}
}
.login-pwd-input{
width: 9.6rem;
margin-top: 2rem;
.pwd_icon{
position: absolute;
margin-left: 4rem;
margin-top: 0.75rem;
width: 1.25rem;
height: 1.25rem;
}
background: linear-gradient(180deg, rgba(250, 252, 255, 0.51) 0%, rgba(255, 255, 255, 0.52) 100%);
.logo {
width: 50px;
}
.title {
color: #8799AB;
margin: 20px 0 30px 0;
}
.info {
margin-top: 10px;
color: #8799AB;
font-size: 10px;
}
}
}
.icon {
width: 15px;
}
.input-title {
font-size: 14px;
color: #2C3E59;
margin-bottom: 10px;
}
</style>

193
src/views/login/index1.vue
View File

@ -0,0 +1,193 @@
<template>
<div class="login-container">
<!-- 背景图 -->
<div class="background-image"></div>
<!-- 登录表单 -->
<div class="login-form">
<div class="login_logo">
<img :src="logoSvg" class="logo_size"/>
<div class="company_name">长春黄金研究院有限公司</div>
</div>
<el-form>
<el-form-item label="账号">
<el-input v-model="username" placehold="请输入用户名">
<template #prefix>
<img :src="userIconSvg" class="icon" alt=""/>
</template>
</el-input>
</el-form-item>
<el-form-item label="密码">
<el-input v-model="password" placehold="请输入密码">
<template #prefix>
<img :src="pwdIconSvg" class="icon" alt=""/>
</template>
</el-input>
</el-form-item>
</el-form>
<!-- 用户名输入框 -->
<!-- <div class="login-user-input">-->
<!-- <div class="user_name">用户名</div>-->
<!-- <img class="user_name_icon" :src="userIconSvg"/>-->
<!-- <input type="text" v-model="username" placeholder="用户名" class="input-field" />-->
<!-- </div>-->
<!-- &lt;!&ndash; 密码输入框 &ndash;&gt;-->
<!-- <div class="login-pwd-input">-->
<!-- <div class="user_name">密码</div>-->
<!-- <img class="pwd_icon" :src="pwdIconSvg"/>-->
<!-- <input type="password" v-model="password" placeholder="密码" class="input-field" />-->
<!-- </div>-->
<!-- 登录按钮 -->
<button @click="handleLogin" class="login-button">登录</button>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import { showToast } from "vant";
import logoSvg from '@/assets/logo.svg'
import userIconSvg from '@/assets/user_icon.svg'
import pwdIconSvg from '@/assets/pwdw_icon.svg'
import { getCurrentUser, login, type User } from "@/services/user/userManager";
import { useUserStore } from "@/stores/user";
const router = useRouter();
// 定义用户名和密码的响应式变量
const username = ref("");
const password = ref("");
const userStore = useUserStore();
// 处理登录的函数
const handleLogin = async () => {
if(!username.value || !password.value){
showToast('请输入用户名或密码！');
return;
}
const res = await login({ username: username.value, password: password.value });
if (res.success) {
sessionStorage.setItem("token", res.data);
const response = await getCurrentUser();
if (response.success) {
const { username, nickname, role } = response.data;
userStore.setUser({ username, nickname, role } as User);
}
router.push("/home");
} else {
showToast(res.msg);
}
};
</script>
<style lang="scss" scoped>
@use "@/assets/style/mixin.scss" as *;
.icon {
width: 20px;
}
.login-container {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
background: linear-gradient(180deg, rgba(250, 252, 255, 0.51) 0%, rgba(255, 255, 255, 0.52) 100%);
.login_logo{
.logo_size{
width: 2.875rem;
height: 2.875rem;
margin-top:2.875rem;
margin-left: 12rem;
}
.company_name{
color: #8799AB;
font-size: 1.25rem;
margin-top:1.5rem;
}
}
}
.background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://via.placeholder.com/1920x1080'); /* 替换为你自己的背景图 URL */
background-size: cover;
background-position: center;
filter: blur(5px);
z-index: -1;
}
.login-form {
position: absolute;
top: 50%;
left: 50%;
width:27.125rem;
transform: translate(-50%, -50%);
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
text-align: center;
}
.input-field {
width:19.75rem;
height: 2.75rem;
border: 1px solid #ccc;
border-radius: 5px;
margin-left: 3.625rem;
padding-left: 1.625rem;
}
.login-button {
width: 19.75rem;
height: 3rem;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 2rem;
margin-left: 2rem;
}
.login-button:hover {
background-color: #0056b3;
}
.login-user-input{
width: 10.2rem;
margin-top: 3rem;
.user_name{
color: #2C3E59;
font-size: 1rem;
}
.user_name_icon{
position: absolute;
margin-left: 4rem;
margin-top: 0.85rem;
width: 1.25rem;
height: 1.25rem;
}
}
.login-pwd-input{
width: 9.6rem;
margin-top: 2rem;
.pwd_icon{
position: absolute;
margin-left: 4rem;
margin-top: 0.75rem;
width: 1.25rem;
height: 1.25rem;
}
}
</style>
Write Preview
Loading…
Cancel
Save