From ed094549370592f44eba8a47e1ffbf9d25ee8d18 Mon Sep 17 00:00:00 2001
From: heshunme <heshunme@outlook.com>
Date: Sat, 29 Jun 2024 23:25:23 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E4=BA=86=E6=B3=A8=E5=86=8C?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E7=9A=84=E7=BB=98=E5=88=B6=EF=BC=8C=E5=9C=A8?=
 =?UTF-8?q?=E7=99=BB=E5=BD=95=E5=92=8C=E6=B3=A8=E5=86=8C=E7=95=8C=E9=9D=A2?=
 =?UTF-8?q?=E4=B8=8A=E5=88=86=E5=88=AB=E6=B7=BB=E5=8A=A0=E4=BA=86=E7=9B=B8?=
 =?UTF-8?q?=E4=BA=92=E8=B7=B3=E8=BD=AC=E7=9A=84=E9=93=BE=E6=8E=A5=E3=80=82?=
 =?UTF-8?q?=20=E6=B3=A8=E5=86=8C=E4=BA=86=E6=B3=A8=E5=86=8C=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E7=9A=84=E8=B7=AF=E7=94=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/authentication.js          |   4 +-
 src/views/authentication/Login.vue    |  68 +++++++--------
 src/views/authentication/Register.vue | 116 ++++++++++++++++++++++++++
 3 files changed, 148 insertions(+), 40 deletions(-)
 create mode 100644 src/views/authentication/Register.vue

diff --git a/src/router/authentication.js b/src/router/authentication.js
index 188be90..50c3785 100644
--- a/src/router/authentication.js
+++ b/src/router/authentication.js
@@ -1,10 +1,10 @@
 // ！！！这是一个示例，请根据实际情况修改！！！
 import Login from '../views/authentication/Login.vue'
-// import Register from '../views/authentication/Register.vue'
+import Register from '../views/authentication/Register.vue'
 // import Profile from '../views/authentication/Profile.vue'
 
 export default [
     { path: '/login', component: Login },
-    // { path: '/register', component: Register },
+    { path: '/register', component: Register },
     // { path: '/profile', component: Profile }
 ]
diff --git a/src/views/authentication/Login.vue b/src/views/authentication/Login.vue
index ff32c0f..ed79644 100644
--- a/src/views/authentication/Login.vue
+++ b/src/views/authentication/Login.vue
@@ -1,5 +1,7 @@
 <script setup>
 import { ref } from 'vue';
+import { ElInput, ElButton, ElCheckbox, ElForm, ElFormItem } from 'element-plus';
+import 'element-plus/dist/index.css';
 
 const username = ref('');
 const password = ref('');
@@ -15,25 +17,29 @@ const handleLogin = () => {
   <div class="login-container">
     <div class="login-box">
       <h2>测盟汇管理系统</h2>
-      <form @submit.prevent="handleLogin">
-        <div class="input-group">
+      <ElForm @submit.prevent="handleLogin">
+        <ElFormItem>
           <label for="username">
             <i class="fas fa-user"></i> 账号
           </label>
-          <input v-model="username" type="text" id="username" placeholder="请输入您的账号" required />
-        </div>
-        <div class="input-group">
+          <ElInput v-model="username" type="text" id="username" placeholder="请输入您的账号" required />
+        </ElFormItem>
+        <ElFormItem>
           <label for="password">
             <i class="fas fa-lock"></i> 密码
           </label>
-          <input v-model="password" type="password" id="password" placeholder="请输入您的密码" required />
-        </div>
-        <div class="checkbox-group">
-          <input v-model="rememberMe" type="checkbox" id="rememberMe" />
-          <label for="rememberMe">记住密码</label>
-        </div>
-        <button type="submit" class="login-button">登录</button>
-      </form>
+          <ElInput v-model="password" type="password" id="password" placeholder="请输入您的密码" required />
+        </ElFormItem>
+        <ElFormItem>
+          <ElCheckbox v-model="rememberMe" id="rememberMe">记住密码</ElCheckbox>
+        </ElFormItem>
+        <ElFormItem>
+          <ElButton type="primary" native-type="submit" class="login-button">登录</ElButton>
+        </ElFormItem>
+        <ElFormItem>
+          <ElButton type="text" @click="() => $router.push('/register')">注册</ElButton>
+        </ElFormItem>
+      </ElForm>
     </div>
   </div>
 </template>
@@ -61,45 +67,31 @@ h2 {
   margin-bottom: 1rem;
 }
 
-.input-group {
+.el-form-item {
   margin-bottom: 1rem;
   text-align: left;
 }
 
-.input-group label {
+.el-form-item label {
   display: block;
   margin-bottom: 0.5rem;
 }
 
-.input-group input {
+.el-input {
   width: 100%;
-  padding: 0.5rem;
-  border: 1px solid #ccc;
-  border-radius: 4px;
 }
 
-.checkbox-group {
-  display: flex;
-  align-items: center;
-  margin-bottom: 1rem;
-}
-
-.checkbox-group input {
-  margin-right: 0.5rem;
-}
-
-.login-button {
+.el-button {
   width: 100%;
   padding: 0.75rem;
-  border: none;
-  border-radius: 4px;
-  background-color: #007bff;
-  color: white;
-  font-size: 1rem;
-  cursor: pointer;
 }
 
-.login-button:hover {
+.el-button--primary {
+  background-color: #007bff;
+  color: white;
+}
+
+.el-button--primary:hover {
   background-color: #0056b3;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/authentication/Register.vue b/src/views/authentication/Register.vue
new file mode 100644
index 0000000..df976ba
--- /dev/null
+++ b/src/views/authentication/Register.vue
@@ -0,0 +1,116 @@
+<script setup>
+import { ref } from 'vue';
+import { ElInput, ElButton, ElForm, ElFormItem, ElMessage } from 'element-plus';
+import 'element-plus/dist/index.css';
+
+const companyName = ref('');
+const contactInfo = ref('');
+const password = ref('');
+const verificationCode = ref('');
+
+const handleRegister = () => {
+  console.log('Registering with', { companyName: companyName.value, contactInfo: contactInfo.value, password: password.value, verificationCode: verificationCode.value });
+  // 处理注册逻辑
+};
+
+const sendVerificationCode = () => {
+  ElMessage.success('验证码已发送');
+  // 处理发送验证码逻辑
+};
+</script>
+
+<template>
+  <div class="register-container">
+    <div class="register-box">
+      <h2>企业租户注册</h2>
+      <ElForm @submit.prevent="handleRegister">
+        <ElFormItem>
+          <label for="companyName">企业名称</label>
+          <ElInput v-model="companyName" type="text" id="companyName" placeholder="请输入企业名称" required />
+        </ElFormItem>
+        <ElFormItem>
+          <label for="contactInfo">企业联系方式</label>
+          <ElInput v-model="contactInfo" type="text" id="contactInfo" placeholder="请输入企业联系方式" required />
+        </ElFormItem>
+        <ElFormItem>
+          <label for="password">密码</label>
+          <ElInput v-model="password" type="password" id="password" placeholder="请输入密码" required />
+        </ElFormItem>
+        <ElFormItem>
+          <label for="verificationCode">验证码</label>
+          <ElInput v-model="verificationCode" type="text" id="verificationCode" placeholder="请输入验证码" required>
+            <template #append>
+              <ElButton type="primary" @click="sendVerificationCode" class="verification-button">获取验证码</ElButton>
+            </template>
+          </ElInput>
+        </ElFormItem>
+        <ElFormItem>
+          <ElButton type="primary" native-type="submit" class="register-button">注册</ElButton>
+        </ElFormItem>
+        <ElFormItem>
+          <ElButton type="text" @click="() => $router.push('/login')">返回登录</ElButton>
+        </ElFormItem>
+      </ElForm>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.register-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background: url('background.jpg') no-repeat center center;
+  background-size: cover;
+}
+
+.register-box {
+  background: white;
+  padding: 2rem;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  text-align: center;
+  width: 20%;
+}
+
+h2 {
+  margin-bottom: 1rem;
+}
+
+.el-form-item {
+  margin-bottom: 1rem;
+  text-align: left;
+}
+
+.el-form-item label {
+  display: block;
+  margin-bottom: 0.5rem;
+}
+
+.el-input {
+  width: 100%;
+}
+
+.verification-button {
+  width: 120px; /* 确保按钮宽度合适 */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0; /* 去除默认内边距 */
+}
+
+.el-button {
+  width: 100%;
+  padding: 0.75rem;
+}
+
+.el-button--primary {
+  background-color: #007bff;
+  color: white;
+}
+
+.el-button--primary:hover {
+  background-color: #0056b3;
+}
+</style>