LoginView.vue 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. <script setup lang="ts">
  2. import { reactive, ref } from 'vue';
  3. import user from "@/services/user.service";
  4. import { useAuthStore } from '@/stores/auth.store';
  5. import { routeToName } from '@/router';
  6. interface FormState {
  7. username: string;
  8. password: string;
  9. remember: boolean;
  10. }
  11. // 授权store
  12. const authStore = useAuthStore();
  13. const formState = reactive<FormState>({
  14. username: '',
  15. password: '',
  16. remember: true,
  17. });
  18. const loading = ref(false);
  19. const onFinish = (values: any) => {
  20. loading.value = true;
  21. let param = {
  22. mobilePhone: values.username,
  23. password: values.password,
  24. type: 1
  25. }
  26. user.login(param).then((resp) => {
  27. authStore.setCurrentUser(resp.data.data);
  28. authStore.setToken(resp.data.data.token);
  29. routeToName("SearchIndex");
  30. loading.value = false;
  31. }).catch((err) => {
  32. loading.value = false;
  33. console.log(err);
  34. })
  35. };
  36. const onFinishFailed = (errorInfo: any) => {
  37. console.log('Failed:', errorInfo);
  38. };
  39. </script>
  40. <template>
  41. <div class="login-main">
  42. <a-row type="flex">
  43. <a-col class="left" :flex="1">
  44. <h1 class="login-title">技淘平台智慧产权大脑</h1>
  45. <p class="login-banner">
  46. <img src="@/assets/imgs/login-banner@2x.png" />
  47. </p>
  48. </a-col>
  49. <a-col class="right" :flex="1">
  50. <h1>用户登录</h1>
  51. <a-divider></a-divider>
  52. <div class="login-form-wrapper">
  53. <a-form
  54. :model="formState"
  55. name="basic"
  56. :label-col="{ span: 4 }"
  57. :wrapper-col="{ span: 20 }"
  58. autocomplete="off"
  59. @finish="onFinish"
  60. @finishFailed="onFinishFailed"
  61. >
  62. <a-form-item label="用户名" name="username" :rules="[{ required: true, message: '请输入用户名' }]">
  63. <a-input v-model:value="formState.username" />
  64. </a-form-item>
  65. <a-form-item label="密码" name="password" :rules="[{ required: true, message: '请输入密码' }]">
  66. <a-input-password v-model:value="formState.password" />
  67. </a-form-item>
  68. <a-form-item :wrapper-col="{ sm: { span: 20, offset: 4 }, xs: { span: 24, offset: 0 } }">
  69. <a-button type="primary" html-type="submit" block :loading="loading">登&nbsp;&nbsp;&nbsp;&nbsp;录</a-button>
  70. </a-form-item>
  71. </a-form>
  72. <p class="forgot-password-wrap">
  73. <a href="#">忘记密码?</a>
  74. </p>
  75. </div>
  76. </a-col>
  77. </a-row>
  78. </div>
  79. </template>
  80. <style scoped lang="scss">
  81. .login-main {
  82. height: 100vh;
  83. background-color: #00A09A;
  84. .left {
  85. text-align: center;
  86. padding-top: 100px;
  87. .login-title {
  88. color: #ffffff;
  89. }
  90. .login-banner {
  91. margin: 0 auto;
  92. width: 300px;
  93. img {
  94. margin-top: 50px;
  95. width: 100%;
  96. }
  97. }
  98. }
  99. .right {
  100. height: 100vh;
  101. padding-top: 100px;
  102. padding-left: 60px;
  103. border-top-left-radius: 1em;
  104. border-bottom-left-radius: 1em;
  105. background-color: #ffffff;
  106. .login-form-wrapper {
  107. width: 400px;
  108. }
  109. }
  110. }
  111. .forgot-password-wrap {
  112. text-align: right;
  113. // a {
  114. // color: #ffffff;
  115. // &:hover {
  116. // text-decoration: underline;
  117. // }
  118. // }
  119. }
  120. </style>