From 65dc3085bb85e4b3d4a30a20941799e18ab6ae22 Mon Sep 17 00:00:00 2001
From: DongZeLiang <2746733890@qq.com>
Date: Fri, 13 Sep 2024 20:23:11 +0800
Subject: [PATCH] =?UTF-8?q?fix():=20=E5=A2=9E=E5=8A=A0=E6=B3=A8=E5=86=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/user.js                  |   9 ++-
 src/layout/components/Navbar.vue |  10 +--
 src/views/login/index.vue        | 116 ++++++++++++++++++++++++++-----
 3 files changed, 109 insertions(+), 26 deletions(-)

diff --git a/src/api/user.js b/src/api/user.js
index c626921..77eaada 100644
--- a/src/api/user.js
+++ b/src/api/user.js
@@ -4,7 +4,14 @@ export function login(data) {
   return request({
     url: '/system/auth/login',
     method: 'post',
-    data
+    data: data
+  })
+}
+export function reg(data) {
+  return request({
+    url: '/system/auth/reg',
+    method: 'post',
+    data: data
   })
 }
 
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 0ca5cf6..413174f 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -13,17 +13,11 @@
         <el-dropdown-menu slot="dropdown" class="user-dropdown">
           <router-link to="/">
             <el-dropdown-item>
-              Home
+              主页
             </el-dropdown-item>
           </router-link>
-          <a target="_blank" href="https://github.com/PanJiaChen/vue-admin-template/">
-            <el-dropdown-item>Github</el-dropdown-item>
-          </a>
-          <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">
-            <el-dropdown-item>Docs</el-dropdown-item>
-          </a>
           <el-dropdown-item divided @click.native="logout">
-            <span style="display:block;">Log Out</span>
+            <span style="display:block;">退出登录</span>
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 71e0ec2..41e7e47 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,14 +1,15 @@
 <template>
   <div class="login-container">
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
+    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on"
+             label-position="left">
 
       <div class="title-container">
-        <h3 class="title">车辆模拟</h3>
+        <h3 class="title">智能车联-车机模拟器</h3>
       </div>
 
       <el-form-item prop="userName">
         <span class="svg-container">
-          <svg-icon icon-class="user" />
+          <svg-icon icon-class="user"/>
         </span>
         <el-input
           ref="userName"
@@ -23,7 +24,7 @@
 
       <el-form-item prop="password">
         <span class="svg-container">
-          <svg-icon icon-class="password" />
+          <svg-icon icon-class="password"/>
         </span>
         <el-input
           ref="password"
@@ -37,15 +38,68 @@
         />
       </el-form-item>
 
-      <el-button :loading="loading" type="primary" style="width:48%;margin-bottom:30px;" @click.native.prevent="handleLogin">登录系统</el-button>
-      <el-button :loading="loading" type="primary" style="width:48%;margin-bottom:30px; margin-left: 4%" @click.native.prevent="handleLogin">注册系统</el-button>
+      <el-button :loading="loading" type="primary" style="width:48%;margin-bottom:30px;"
+                 @click.native.prevent="handleLogin">登录系统
+      </el-button>
+      <el-button :loading="loading" type="primary" style="width:48%;margin-bottom:30px; margin-left: 4%"
+                 @click="regUser">注册系统
+      </el-button>
 
     </el-form>
+    <el-dialog
+      :visible.sync="regUserStatus"
+      width="30%">
+      <el-form ref="regForm" :model="regForm" :rules="loginRules" class="login-form" auto-complete="on"
+               style="padding: 0 30px 0"
+               label-position="left">
+
+        <div class="title-container">
+          <h3 class="title">用户注册</h3>
+        </div>
+
+        <el-form-item prop="userName">
+        <span class="svg-container">
+          <svg-icon icon-class="user"/>
+        </span>
+          <el-input
+            ref="userName"
+            v-model="regForm.userName"
+            placeholder="用户登录名称"
+            name="userName"
+            type="text"
+            tabindex="1"
+            auto-complete="on"
+          />
+        </el-form-item>
+
+        <el-form-item prop="password">
+        <span class="svg-container">
+          <svg-icon icon-class="password"/>
+        </span>
+          <el-input
+            ref="password"
+            v-model="regForm.password"
+            type="password"
+            placeholder="用户登录密码"
+            name="password"
+            tabindex="2"
+            auto-complete="on"
+            @keyup.enter.native="handleLogin"
+          />
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="regUserStatus = false">取 消</el-button>
+        <el-button type="primary" @click="doRegUser">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 
+import {reg} from "@/api/user";
+
 export default {
   name: 'Login',
   data() {
@@ -54,9 +108,14 @@ export default {
         userName: '',
         password: ''
       },
+      regForm: {
+        userName: '',
+        password: ''
+      },
+      regUserStatus: false,
       loginRules: {
-        userName: [{ required: true, trigger: 'blur' }],
-        password: [{ required: true, trigger: 'blur' }]
+        userName: [{required: true, trigger: 'blur',message: '请输入用户名称'}],
+        password: [{required: true, trigger: 'blur',message: '请输入用户密码'}]
       },
       loading: false,
       passwordType: 'password',
@@ -65,24 +124,45 @@ export default {
   },
   watch: {
     $route: {
-      handler: function(route) {
+      handler: function (route) {
         this.redirect = route.query && route.query.redirect
       },
       immediate: true
     }
   },
   methods: {
+    // 注册用户
+    doRegUser() {
+      this.$refs.regForm.validate(valid => {
+        if (valid) {
+          reg(this.regForm).then(response => {
+            this.$message({
+              message: '注册成功',
+              type: 'success'
+            })
+            this.regUserStatus = false
+          })
+        }
+      })
+    },
+    regUser() {
+      this.regUserStatus = true
+      this.regForm = {
+        userName: '',
+        password: ''
+      }
+    },
     handleLogin() {
       this.$refs.loginForm.validate(valid => {
         if (valid) {
           this.loading = true
           this.$store.dispatch('user/login', this.loginForm).then(() => {
-            this.$router.push({ path: this.redirect || '/' })
+            this.$router.push({path: this.redirect || '/'})
             this.loading = false
           }).catch(() => {
             this.loading = false
           })
-          this.$router.push({ path: this.redirect || '/' })
+          this.$router.push({path: this.redirect || '/'})
         } else {
           console.log('error submit!!')
           return false
@@ -97,10 +177,12 @@ export default {
 /* 修复input 背景不协调 和光标变色 */
 /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
 
-$bg:#283443;
-$light_gray:#fff;
+$bg: #283443;
+$light_gray: #fff;
 $cursor: #fff;
-
+.el-dialog{
+  background-color: #2d3a4b;
+}
 @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
   .login-container .el-input input {
     color: $cursor;
@@ -141,9 +223,9 @@ $cursor: #fff;
 </style>
 
 <style lang="scss" scoped>
-$bg:#2d3a4b;
-$dark_gray:#889aa4;
-$light_gray:#eee;
+$bg: #2d3a4b;
+$dark_gray: #889aa4;
+$light_gray: #eee;
 
 .login-container {
   min-height: 100%;