From 9bb7e93d78e8afb9da25cbe87dcdc1ac5d437e93 Mon Sep 17 00:00:00 2001
From: yuping <82253452@qq.com>
Date: Tue, 29 Nov 2022 00:40:29 +0800
Subject: [PATCH] =?UTF-8?q?--=E6=B7=BB=E5=8A=A0=E7=99=BB=E5=BD=95=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue         | 13 ++++++++++--
 src/api/index.js    |  2 ++
 src/api/method.js   |  2 +-
 src/views/login.vue | 51 +++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 65 insertions(+), 3 deletions(-)
 create mode 100644 src/views/login.vue

diff --git a/src/App.vue b/src/App.vue
index 22dab8f3..a66681d8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="container">
+  <div id="container" v-if="!isLogin">
     <nav-top />
     <div style="display: flex">
       <nav-left />
@@ -14,9 +14,12 @@
       </div>
     </div>
   </div>
+  <div id="container" v-if="isLogin">
+    <router-view/>
+  </div>
 </template>
 <script>
-import { computed, defineComponent } from "vue";
+import {computed, defineComponent, ref, watch} from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { useStore } from "vuex";
 import NavLeft from "@/components/NavLeft";
@@ -36,11 +39,16 @@ export default defineComponent({
     const router = useRouter();
     const route = useRoute();
     const store = useStore();
+    const isLogin = ref(false)
     // console.log("router", router.getRoutes(), route);
     const routes = computed(() => {
       return router.getRoutes().filter((e) => e.meta?.isLink);
     });
 
+    watch(() => route.path, () => {
+      route.path === '/login' && (isLogin.value = true)
+    })
+
     const currentRouteName = computed(() => route.name);
 
     //获取组织树
@@ -68,6 +76,7 @@ export default defineComponent({
     getOrgTree();
 
     return {
+      isLogin,
       routes,
       name: currentRouteName,
       zhCN,
diff --git a/src/api/index.js b/src/api/index.js
index c62e1b47..489a97a8 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -75,3 +75,5 @@ export const getTemplateDetail = (obj) => http.get('/admin/project/template/deta
 //获取项目统计
 export const getProjectCount = (projectId) => http.get('/admin/project/projectCount', { params: { projectId: projectId } })
 
+export const login = (obj) => http.post('/admin/CheckUser/userLogin', obj)
+
diff --git a/src/api/method.js b/src/api/method.js
index 90e99871..78a6113b 100644
--- a/src/api/method.js
+++ b/src/api/method.js
@@ -169,7 +169,7 @@ const setCookie = (name, value, perpetual) => {
   console.log('存储token到cookie')
   let exdate = new Date()
   exdate.setDate(perpetual * 24 * 60 * 60 * 1000)  //exdate.setDate(exdate.getDate() + 365)
-  document.cookie = name + '=' + value + ';expires=' + exdate.toGMTString()
+  document.cookie = `${name}=${value};expires=${exdate.toGMTString()};path=/`
   //永久有效
   //document.cookie = name + '=' + value + ';expires=' + 'Fri, 31 Dec 9999 23:59:59 GMT'    
 }
diff --git a/src/views/login.vue b/src/views/login.vue
new file mode 100644
index 00000000..13882d6b
--- /dev/null
+++ b/src/views/login.vue
@@ -0,0 +1,51 @@
+<template>
+  <div :style="{
+       margin: 'auto',
+  background: 'url(http://img.gz2c.com/FoTcLY8ww-ISCFlwyCoYuLim1BMt) no-repeat',
+  backgroundSize: '100% 100%',
+  width: '100%',
+  height: '100vh',
+  display:'flex'
+  }">
+    <div
+        :style="{width:'300px', height: '300px', margin:'10% auto',padding:'20px 30px',textAlign:'center', borderRadius:'10px', background:'#e0e0e0',boxShadow:'20px 20px 60px #bebebe,-20px -20px 60px #ffffff'}">
+      <div :style="{fontSize:'24px',paddingBottom:'30px'}">用户登录</div>
+      <div>
+        <a-input placeholder='用户名' v-model:value="form.account"/>
+        <a-input placeholder='密码' v-model:value="form.password" :style="{marginTop: '30px'}" type='password'/>
+        <a-button :style="{marginTop:'30px'}" @click="loginUser">登录</a-button>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import {reactive, toRefs} from "vue";
+import * as api from "@/api";
+import {setCookie} from "@/api/method";
+import {useRouter} from "vue-router";
+
+export default {
+  name: "loginPage",
+  setup() {
+    const router = useRouter()
+    const state = reactive({
+      form: {
+        account: '10181461',
+        password: '1234567890Aa'
+      }
+    })
+
+    async function loginUser() {
+      const {data: {data: token}} = await api.login(state.form)
+      setCookie("token", token, 10)
+      await router.push({path: '/learningpath'})
+      location.reload()
+    }
+
+    return {
+      ...toRefs(state),
+      loginUser
+    }
+  }
+}
+</script>