|
|
@@ -1,124 +1,142 @@
|
|
|
-<script setup lang="ts">import { reactive } from 'vue';
|
|
|
+<script setup lang="ts">import {reactive} from 'vue';
|
|
|
+import {useRoute, useRouter} from "vue-router";
|
|
|
+import user from "@/services/user.service";
|
|
|
|
|
|
interface FormState {
|
|
|
- username: string;
|
|
|
- password: string;
|
|
|
- remember: boolean;
|
|
|
+ username: string;
|
|
|
+ password: string;
|
|
|
+ remember: boolean;
|
|
|
}
|
|
|
|
|
|
+// 路由管理器
|
|
|
+const router = useRouter();
|
|
|
+// 当前路由对象
|
|
|
+const route = useRoute();
|
|
|
+
|
|
|
const formState = reactive<FormState>({
|
|
|
- username: '',
|
|
|
- password: '',
|
|
|
- remember: true,
|
|
|
+ username: '',
|
|
|
+ password: '',
|
|
|
+ remember: true,
|
|
|
});
|
|
|
const onFinish = (values: any) => {
|
|
|
- console.log('Success:', values);
|
|
|
+ console.log(values);
|
|
|
+ let param = {
|
|
|
+ mobilePhone: values.username,
|
|
|
+ password: values.password,
|
|
|
+ type: 1
|
|
|
+ }
|
|
|
+ user.login(param).then((resp) => {
|
|
|
+ localStorage.setItem('token', resp.data.data.token);
|
|
|
+ router.push({name: "SearchIndex"});
|
|
|
+ }).catch((err) => {
|
|
|
+ console.log(err);
|
|
|
+ })
|
|
|
};
|
|
|
|
|
|
const onFinishFailed = (errorInfo: any) => {
|
|
|
- console.log('Failed:', errorInfo);
|
|
|
+ console.log('Failed:', errorInfo);
|
|
|
};
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <div class="login-main">
|
|
|
- <a-row type="flex">
|
|
|
- <a-col class="left" :flex="1">
|
|
|
- <h1 class="login-title">技淘平台智慧产权大脑</h1>
|
|
|
- <p class="login-banner">
|
|
|
- <img src="@/assets/imgs/login-banner@2x.png" />
|
|
|
- </p>
|
|
|
- </a-col>
|
|
|
- <a-col class="right" :flex="1">
|
|
|
- <h1>用户登录</h1>
|
|
|
- <a-divider></a-divider>
|
|
|
- <div class="login-form-wrapper">
|
|
|
- <a-form
|
|
|
- :model="formState"
|
|
|
- name="basic"
|
|
|
- :label-col="{ span: 4 }"
|
|
|
- :wrapper-col="{ span: 20 }"
|
|
|
- autocomplete="off"
|
|
|
- @finish="onFinish"
|
|
|
- @finishFailed="onFinishFailed"
|
|
|
- >
|
|
|
- <a-form-item
|
|
|
- label="用户名"
|
|
|
- name="username"
|
|
|
- :rules="[{ required: true, message: '请输入用户名' }]"
|
|
|
- >
|
|
|
- <a-input v-model:value="formState.username" />
|
|
|
- </a-form-item>
|
|
|
-
|
|
|
- <a-form-item
|
|
|
- label="密码"
|
|
|
- name="password"
|
|
|
- :rules="[{ required: true, message: '请输入密码' }]"
|
|
|
- >
|
|
|
- <a-input-password v-model:value="formState.password" />
|
|
|
- </a-form-item>
|
|
|
-
|
|
|
- <a-form-item :wrapper-col="{sm: {span: 20, offset: 4}, xs: {span: 24, offset: 0}}">
|
|
|
- <a-button type="primary" html-type="submit" block>登 录</a-button>
|
|
|
- </a-form-item>
|
|
|
- </a-form>
|
|
|
- <p class="forgot-password-wrap">
|
|
|
- <a href="#">忘记密码?</a>
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- </div>
|
|
|
+ <div class="login-main">
|
|
|
+ <a-row type="flex">
|
|
|
+ <a-col class="left" :flex="1">
|
|
|
+ <h1 class="login-title">技淘平台智慧产权大脑</h1>
|
|
|
+ <p class="login-banner">
|
|
|
+ <img src="@/assets/imgs/login-banner@2x.png"/>
|
|
|
+ </p>
|
|
|
+ </a-col>
|
|
|
+ <a-col class="right" :flex="1">
|
|
|
+ <h1>用户登录</h1>
|
|
|
+ <a-divider></a-divider>
|
|
|
+ <div class="login-form-wrapper">
|
|
|
+ <a-form
|
|
|
+ :model="formState"
|
|
|
+ name="basic"
|
|
|
+ :label-col="{ span: 4 }"
|
|
|
+ :wrapper-col="{ span: 20 }"
|
|
|
+ autocomplete="off"
|
|
|
+ @finish="onFinish"
|
|
|
+ @finishFailed="onFinishFailed"
|
|
|
+ >
|
|
|
+ <a-form-item
|
|
|
+ label="用户名"
|
|
|
+ name="username"
|
|
|
+ :rules="[{ required: true, message: '请输入用户名' }]"
|
|
|
+ >
|
|
|
+ <a-input v-model:value="formState.username"/>
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <a-form-item
|
|
|
+ label="密码"
|
|
|
+ name="password"
|
|
|
+ :rules="[{ required: true, message: '请输入密码' }]"
|
|
|
+ >
|
|
|
+ <a-input-password v-model:value="formState.password"/>
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <a-form-item :wrapper-col="{sm: {span: 20, offset: 4}, xs: {span: 24, offset: 0}}">
|
|
|
+ <a-button type="primary" html-type="submit" block>登 录</a-button>
|
|
|
+ </a-form-item>
|
|
|
+ </a-form>
|
|
|
+ <p class="forgot-password-wrap">
|
|
|
+ <a href="#">忘记密码?</a>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
-.login-main {
|
|
|
- height: 100vh;
|
|
|
- background-color: #00A09A;
|
|
|
-
|
|
|
- .left {
|
|
|
- text-align: center;
|
|
|
- padding-top: 100px;
|
|
|
-
|
|
|
- .login-title {
|
|
|
- color: #ffffff;
|
|
|
+ .login-main {
|
|
|
+ height: 100vh;
|
|
|
+ background-color: #00A09A;
|
|
|
+
|
|
|
+ .left {
|
|
|
+ text-align: center;
|
|
|
+ padding-top: 100px;
|
|
|
+
|
|
|
+ .login-title {
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-banner {
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 300px;
|
|
|
+
|
|
|
+ img {
|
|
|
+ margin-top: 50px;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ height: 100vh;
|
|
|
+ padding-top: 100px;
|
|
|
+ padding-left: 60px;
|
|
|
+ border-top-left-radius: 1em;
|
|
|
+ border-bottom-left-radius: 1em;
|
|
|
+ background-color: #ffffff;
|
|
|
+
|
|
|
+ .login-form-wrapper {
|
|
|
+ width: 400px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .login-banner {
|
|
|
- margin: 0 auto;
|
|
|
- width: 300px;
|
|
|
+ .forgot-password-wrap {
|
|
|
+ text-align: right;
|
|
|
|
|
|
- img {
|
|
|
- margin-top: 50px;
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .right {
|
|
|
- height: 100vh;
|
|
|
- padding-top: 100px;
|
|
|
- padding-left: 60px;
|
|
|
- border-top-left-radius: 1em;
|
|
|
- border-bottom-left-radius: 1em;
|
|
|
- background-color: #ffffff;
|
|
|
-
|
|
|
- .login-form-wrapper {
|
|
|
- width: 400px;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.forgot-password-wrap {
|
|
|
- text-align: right;
|
|
|
-
|
|
|
- // a {
|
|
|
- // color: #ffffff;
|
|
|
+ // a {
|
|
|
+ // color: #ffffff;
|
|
|
|
|
|
- // &:hover {
|
|
|
- // text-decoration: underline;
|
|
|
- // }
|
|
|
- // }
|
|
|
-}
|
|
|
+ // &:hover {
|
|
|
+ // text-decoration: underline;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ }
|
|
|
</style>
|