LoginView.vue 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  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 { routeToHome, 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. //routeToHome();
  30. routeToName("SearchIndex");
  31. loading.value = false;
  32. }).catch((err) => {
  33. loading.value = false;
  34. console.log(err);
  35. })
  36. };
  37. const onFinishFailed = (errorInfo: any) => {
  38. console.log('Failed:', errorInfo);
  39. };
  40. </script>
  41. <template>
  42. <div class="login-main">
  43. <a-row type="flex">
  44. <a-col class="left" :flex="1">
  45. <h1 class="login-title">技淘平台智慧产权大脑</h1>
  46. <p class="login-banner">
  47. <img src="@/assets/imgs/login-banner@2x.png" />
  48. </p>
  49. </a-col>
  50. <a-col class="right" :flex="1">
  51. <h1>用户登录</h1>
  52. <a-divider></a-divider>
  53. <div class="login-form-wrapper">
  54. <a-form
  55. :model="formState"
  56. name="basic"
  57. :label-col="{ span: 4 }"
  58. :wrapper-col="{ span: 20 }"
  59. autocomplete="off"
  60. @finish="onFinish"
  61. @finishFailed="onFinishFailed"
  62. >
  63. <a-form-item label="用户名" name="username" :rules="[{ required: true, message: '请输入用户名' }]">
  64. <a-input v-model:value="formState.username" />
  65. </a-form-item>
  66. <a-form-item label="密码" name="password" :rules="[{ required: true, message: '请输入密码' }]">
  67. <a-input-password v-model:value="formState.password" />
  68. </a-form-item>
  69. <a-form-item :wrapper-col="{ sm: { span: 20, offset: 4 }, xs: { span: 24, offset: 0 } }">
  70. <a-button type="primary" html-type="submit" block :loading="loading">登&nbsp;&nbsp;&nbsp;&nbsp;录</a-button>
  71. </a-form-item>
  72. </a-form>
  73. <p class="forgot-password-wrap">
  74. <a href="#">忘记密码?</a>
  75. </p>
  76. </div>
  77. </a-col>
  78. </a-row>
  79. </div>
  80. </template>
  81. <style scoped lang="scss">
  82. .login-main {
  83. height: 100vh;
  84. background-color: #00A09A;
  85. .left {
  86. text-align: center;
  87. padding-top: 100px;
  88. .login-title {
  89. color: #ffffff;
  90. }
  91. .login-banner {
  92. margin: 0 auto;
  93. width: 300px;
  94. img {
  95. margin-top: 50px;
  96. width: 100%;
  97. }
  98. }
  99. }
  100. .right {
  101. height: 100vh;
  102. padding-top: 100px;
  103. padding-left: 60px;
  104. border-top-left-radius: 1em;
  105. border-bottom-left-radius: 1em;
  106. background-color: #ffffff;
  107. .login-form-wrapper {
  108. width: 400px;
  109. }
  110. }
  111. }
  112. .forgot-password-wrap {
  113. text-align: right;
  114. // a {
  115. // color: #ffffff;
  116. // &:hover {
  117. // text-decoration: underline;
  118. // }
  119. // }
  120. }
  121. </style>