From b5463a75d3846981058e309183257a1fa74a7a6f Mon Sep 17 00:00:00 2001
From: 21819 <tomorasd@foxmail.com>
Date: Sat, 27 Jan 2024 17:15:19 +0800
Subject: [PATCH] =?UTF-8?q?=E7=99=BB=E5=BD=95=E5=8A=9F=E8=83=BD=E5=AE=9E?=
 =?UTF-8?q?=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/LoginView.vue | 57 ++++++++++++++++++++++++++++++++++++
 src/layout/Index.vue         |  2 +-
 src/router/index.js          | 12 ++++++++
 3 files changed, 70 insertions(+), 1 deletion(-)
 create mode 100644 src/components/LoginView.vue

diff --git a/src/components/LoginView.vue b/src/components/LoginView.vue
new file mode 100644
index 0000000..cac1c37
--- /dev/null
+++ b/src/components/LoginView.vue
@@ -0,0 +1,57 @@
+<template>
+    <h1 style="text-align: center;">登录</h1>
+    <el-card style="display: flex; justify-content: center; align-items: center; height: 100vh;">
+        <el-form :model="login">
+            <el-form-item label="账号">
+                <el-input v-model="login.account" placeholder="请输入手机号" clearable @input="inputCheck"></el-input>
+            </el-form-item>
+            <el-form-item label="密码">
+                <el-container>
+                    <el-input v-model="login.captcha" placeholder="请输入验证码" clearable @input="inputCheck"></el-input>
+                    <el-button type="primary" @click="sendCaptcha">发送验证码</el-button>
+                </el-container>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" @click="loginIn" style="width: 100%;">登录</el-button>
+            </el-form-item>
+        </el-form>
+    </el-card>
+</template>
+
+<script setup>
+import { reactive } from 'vue'
+import axios from 'axios'
+import router from '../router'
+
+const login = reactive({
+    account: '',
+    captcha: ''
+})
+
+const inputCheck = () => {
+    login.account = login.account.replace(/[^\d]/g, '')
+    login.captcha = login.captcha.replace(/[^\d]/g, '')
+}
+
+const sendCaptcha = () => {
+    axios.post('/api/captcha', login, { headers: { 'Content-Type': 'application/json' } }).then(res => {
+        console.log(res)
+        login.captcha = res.data
+    }).catch(err => {
+        console.log(err)
+    })
+}
+
+const loginIn = () => {
+    axios.post('/api/login', login, { headers: { 'Content-Type': 'application/json' } }).then(res => {
+        console.log(res)
+        if (res.data === 200) {
+            sessionStorage.setItem('user', login.account)
+            router.push('/')
+        }
+    }).catch(err => {
+        console.log(err)
+    })
+}
+
+</script>
\ No newline at end of file
diff --git a/src/layout/Index.vue b/src/layout/Index.vue
index 47141b2..7c2e4b9 100644
--- a/src/layout/Index.vue
+++ b/src/layout/Index.vue
@@ -4,7 +4,7 @@
             <div class="title"><a href="">局长信箱即接即办管理端</a></div>
         </div>
         <div>
-            <el-button type="primary">退出</el-button>
+            <el-button type="primary" @click="router.push('/login')">退出</el-button>
         </div>
     </header>
     <div class="flex">
diff --git a/src/router/index.js b/src/router/index.js
index 27a6cad..47d2c97 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -34,6 +34,10 @@ const constantRoutes = [
             }
         ]
     },
+    {
+        path: '/login',
+        component: () => import('@/components/LoginView.vue')
+    },
     {
         path: '/:catchAll(.*)',
         component: NotFound,
@@ -48,4 +52,12 @@ const router = createRouter({
     routes: constantRoutes
 });
 
+router.beforeEach((to, from, next) => {
+    const user = sessionStorage.getItem("user");
+    if (!user && to.path !== '/login') {
+        next('/login');
+    } else {
+        next();
+    }
+});
 export default router;