From a9c35dd4f9d216d6235b8411c641c2d1a57b4fb1 Mon Sep 17 00:00:00 2001
From: guoapeng <GuoAnPeng@163.com>
Date: Sat, 22 Feb 2025 15:01:40 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E7=99=BB=E5=BD=95=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/login/index.vue  | 274 ++++++++++++++++++++-------------------------
 src/views/login/index1.vue | 193 +++++++++++++++++++++++++++++++
 2 files changed, 314 insertions(+), 153 deletions(-)
 create mode 100644 src/views/login/index1.vue

diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 5a98673..349a109 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -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>
diff --git a/src/views/login/index1.vue b/src/views/login/index1.vue
new file mode 100644
index 0000000..2536a69
--- /dev/null
+++ b/src/views/login/index1.vue
@@ -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>