| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141 |
- <script setup lang="ts">
- import { reactive, ref } from 'vue';
- import user from "@/services/user.service";
- import { useAuthStore } from '@/stores/auth.store';
- import { routeToName } from '@/router';
- interface FormState {
- username: string;
- password: string;
- remember: boolean;
- }
- // 授权store
- const authStore = useAuthStore();
- const formState = reactive<FormState>({
- username: '',
- password: '',
- remember: true,
- });
- const loading = ref(false);
- const onFinish = (values: any) => {
- loading.value = true;
- let param = {
- mobilePhone: values.username,
- password: values.password,
- type: 1
- }
- user.login(param).then((resp) => {
- authStore.setCurrentUser(resp.data.data);
- authStore.setToken(resp.data.data.token);
- routeToName("SearchIndex");
- loading.value = false;
- }).catch((err) => {
- loading.value = false;
- console.log(err);
- })
- };
- const onFinishFailed = (errorInfo: any) => {
- 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 :loading="loading">登 录</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-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;
- }
- }
- }
- .forgot-password-wrap {
- text-align: right;
- // a {
- // color: #ffffff;
- // &:hover {
- // text-decoration: underline;
- // }
- // }
- }
- </style>
|