login.vue 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. <template>
  2. <div class="container" :style="{ background: 'url(' + backUrl + ')' }">
  3. <div style="flex: 1"></div>
  4. <div style="display: flex; flex-direction: column">
  5. <div style="flex: 1"></div>
  6. <div id="login-box">
  7. <h1 class="title">ADM登录</h1>
  8. <div class="form">
  9. <div class="item">
  10. <i class="el-icon-user"></i>
  11. <input type="text" placeholder="请输入手机号" v-model="userName" />
  12. </div>
  13. <div class="item">
  14. <i class="el-icon-lock"></i>
  15. <input
  16. type="password"
  17. placeholder="请输入密码"
  18. v-model="userPass"
  19. @keyup.stop="passTxtKeyUp($event)"
  20. v-loading.fullscreen.lock="fullscreenLoading"
  21. />
  22. </div>
  23. </div>
  24. <button @click="startLogin">Login</button>
  25. </div>
  26. <div style="flex: 1"></div>
  27. </div>
  28. <div style="flex: 1"></div>
  29. </div>
  30. </template>
  31. <script>
  32. import vueStore from "@/store";
  33. import { sessionStore } from "@/store/sessionStore";
  34. import { userController } from "@/controller/userController";
  35. import { logicConfig } from "@/logicConfig";
  36. import { Message } from "element-ui";
  37. export default {
  38. name: "login",
  39. props: [],
  40. data() {
  41. return {
  42. backUrl: require("@/assets/images/login_bg.png"),
  43. userName: "",
  44. userPass: "",
  45. fullscreenLoading: false,
  46. };
  47. },
  48. computed: {},
  49. methods: {
  50. //登录按钮事件
  51. startLogin: async function () {
  52. if (!this.userName) return Message.warning("请填写用户名");
  53. if (!this.userPass) return Message.warning("请填写密码");
  54. this.fullscreenLoading = true;
  55. try {
  56. let loginResult = await userController.login(
  57. this.userName,
  58. this.userPass
  59. );
  60. if (loginResult.result != logicConfig.resultObj.success) {
  61. this.fullscreenLoading = false;
  62. Message.error("登录失败,原因:" + loginResult.message);
  63. return;
  64. }
  65. var userToken = loginResult.data;
  66. if (!userToken) {
  67. this.fullscreenLoading = false;
  68. Message.error("登录失败,原因:缺失用户token");
  69. return;
  70. }
  71. sessionStore.userToken = userToken;
  72. this.$router.replace({ path: vueStore.state.fromPath });
  73. } catch (err) {
  74. this.fullscreenLoading = false;
  75. console.error("登录失败:", err);
  76. Message.error("登录失败");
  77. }
  78. },
  79. //密码框键盘起来事件
  80. passTxtKeyUp: function (event) {
  81. if (event.keyCode == 13) this.startLogin();
  82. },
  83. },
  84. created() {},
  85. mounted() {},
  86. components: {},
  87. };
  88. </script>
  89. <style scoped>
  90. .container {
  91. display: flex;
  92. flex-direction: row;
  93. width: 100%;
  94. height: 100%;
  95. background-repeat: no-repeat !important;
  96. background-size: 100% 100% !important;
  97. overflow: hidden;
  98. }
  99. #login-box {
  100. text-align: center;
  101. background: #00000080;
  102. padding: 20px 50px;
  103. width: 450px;
  104. }
  105. .title {
  106. color: #ffffff;
  107. font-size: 32px;
  108. }
  109. .form {
  110. margin-top: 50px;
  111. }
  112. .item {
  113. margin-top: 15px;
  114. }
  115. .form i {
  116. font-size: 18px;
  117. color: #fff;
  118. width: 16px;
  119. height: 16px;
  120. }
  121. .form input {
  122. width: 180px;
  123. font-size: 18px;
  124. border: 0;
  125. border-bottom: 2px solid #fff;
  126. padding: 5px 10px;
  127. background: #ffffff00;
  128. color: #fff;
  129. }
  130. #login-box button {
  131. margin-top: 15px;
  132. cursor: pointer;
  133. width: 180px;
  134. height: 30px;
  135. font-size: 20px;
  136. font-weight: 700;
  137. border: 0;
  138. background-image: linear-gradient(
  139. 90deg,
  140. #b8cbb8 0,
  141. #b8cbb8 0,
  142. #ddbaee 0,
  143. #e8a8ee 33%,
  144. #b8d9f8 66%,
  145. #59bcf5
  146. );
  147. border-radius: 15px;
  148. }
  149. @font-face {
  150. font-family: login_iconfont;
  151. src: url(data:font/woff2;base64,d09GMgABAAAAAAOYAAsAAAAAB6QAAANLAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDBgqCfIJyATYCJAMMCwgABCAFhGcHOBvQBhHVm6PIfiQYN41nZd3meYYVNZK+CR4+//zuzLzkA/aSyUo4/VagStdbpwECwNhuzTlC4aMmS7J25NE/5P+L6aXpQHix///e8f+V+LwWAMwxuBM+sDygD9qYi6ZQJ0/QW2R3BWKR+yAAS+LlksWl1c3YTg8smIUnDbNSQFIspifGBjAXdGgNxQJzBHpoXw2xCx3IzfIZsDP4vPhHYuYg0SnMhepHS4a59XPkt5symAx0q28YxivB9SWgAxQQvTKD6G22taOiWDSFZZVMI9l6NARy1KDJRMDTJHrrDw8kAoQes9AagHASl/BzxGFBwm83wVkXKgD0OGEErlOK850UytvSPtNezBfGDx+2vHsHW57dQhpuP7ey2fryrlDGOy8GjXdfbn1+G6xHDJcsrbdcqZBcrUu7zFKjq7BzP3xofflRfOzrbjG8r/HaNO9zdjEcPr/14lEhrD6a1DarrVbv7S1WosLjKhad5Tj6GO/eFVtaPvjwQbwzteTpAwMZC2y2P2FmS9Bpz6CoQM8zQVeCzngGRgV5nl7c7EpKy2q3sPqKwybHK46bHKIcg3UcyZgbSJ2ynjBeHYq6lL+iVFRWrltffcxm++cQlWUFyw8NRhou24y76KXVnki3yD1WCLOq5lXrq2s1Bwtzlx2yU+zcOwVWezJdI89Y0p/unNLWlTRJd0J6izYe29WaUezkWNycHteeRD8ApveqVUWB6aY6oPJ/2294IaV9n132f3MrDYDvPsu0wGO6qQHLB3MkgHk/SQ4QqWl+UFoVv7FQAIqqe41IwNIKggnT5ehHf4cTEovAXOBjkJjhBQpzAjGNEgk6rEgEPebkgCVRSgZb4WQOCqFZAKHWIhDYuwwSW26Awt5DTKN8BB2ufoEee+QfNl7tx9s6ZI6MStCC/kFhqHW2UgKiN/RDrbgs/ELuCxyENEryySu2yEN06N8+E3HgmBq4cIthXRN0TCUaiYJIl8exq7pJZKgZHTGkCGQB7QcUDNJyHlqy33eDvEFNYSD2irFegYmDVCQBYFdZCyq7kkl6b15GCAc4jBINcBEsqFZjBHTVtUrIEJHQI9LJxRbKQWXR/Irm4VYBlsxpVVIooTE/mSpd/Kj1YRiNAAA=)
  152. format("woff2"),
  153. url(data:font/woff;base64,d09GRgABAAAAAAUYAAsAAAAAB6QAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAARAAAAGA81krnY21hcAAAAYgAAABYAAABhm1w0ZdnbHlmAAAB4AAAAU4AAAF8bAZJImhlYWQAAAMwAAAALwAAADYdWjgEaGhlYQAAA2AAAAAcAAAAJAeCA4RobXR4AAADfAAAAAwAAAAMDAAAAGxvY2EAAAOIAAAACAAAAAgAUgC+bWF4cAAAA5AAAAAeAAAAIAEQAFduYW1lAAADsAAAAUAAAAJnEKM8sHBvc3QAAATwAAAAJwAAADhGZw3ieJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGFhYJzAwMrAwNTJdIaBgaEfQjO+ZjBi5ACKMrAyM2AFAWmuKQwHnqW+EGdu+N/AEMN8h6EBKMyIoogJAHmXDTp4nO2QsQ2AMAwE7xNIgeizAgUDUdGxOsoWwXZgC146v/1OGgMzkI3dmEAnwnVYqsgzS+RTvCnmIt1Xq73D5ybZrpgn/6fCrzXq9k7JrzXwvtUBegDLDw8+eJwljl9LwmAUxs9536amJOyPjhENnJjIwnTba2yDUV0YNYdXswK7sW6s2y4LK3D0CbwKupe+Q5/Cj9PsnR4Oz+E85znwAwqwXtERNWEfGsAAkDltNMp4kElFVHS0a1aATOR2wwnQ0vmphkquXjMOudvj52qFrNzJ88St+4bh13G5memn4fd9Yw34pknpSNI0CZeSRiD2Jh7vmEfTFReeRpNLvH2P01jUNBHN7AN4ZYy/dEFPwYVLuAIQOk3mNNvY5Fy9Da2qVNUy5nN5lQNnuF07ICe2ZetEtbtbr9nFgOqEx0xsE0YXiHsfD/4ZCZOvJCTn3v17mSAWZVUuYiFOhuJuYZjEBSwqVbmEf9+kN366c4XjayZLLO6oSISdx5+j1ms/nEfRPLx4aZnLaS5PS3KJ92AWCUI0G2w34rIbB63RdOwJgntrA/wDxvhEqwAAeJxjYGRgYADie0xMAvH8Nl8ZuFkYQOCubBULgv6/n4WB2QHI5WBgAokCANdeB6IAeJxjYGRgYG7438DAwMIAAkCSkQEVMAMAPVUCEAQAAAAEAAAABAAAAAAAAAAAUgC+eJxjYGRgYGBm8AZiEGACYi4gZGD4D+YzAAAQMwFoAAB4nIWRPW7CQBCFn8GQBJQoSqQ0aVYpKBLJ/JRIqVCgp6AHs+ZHttdaL0jUOU2OkBPkCOloc4pIedhDA0W82tlv3r6ZHckA7rCHh/K75y7ZwyWzkiu4wKNwlfqTsE9+Fq6hiZ5wnfqrcAMveBNusmPGDp5/xayFd2EPt/gQruAGn8JV6l/CPvlbuIYH/AjXqf8KNzDxroWbaHnhwOqp03M126lVaNLIpO54jvViE0/tqTzRNl+ZVHWDzlEa6VTbY5t8u+g5F6nImkQNeavj2KjMmrUOXbB0Luu325HoQWgSDGChMYVjnENhhh3jCiEMUkRFdGf5mO4FNohZaf91T+i2yKkfcoUuAnTOXCO60sJ5Ok2OLV/rUXV0K27LmoQ0lFrNSWKy4g883K2phNQDLIuqDH20uaITf1DMkPwB2JNvV3icY2BigAAuBuyAmZGJkZmRhYE1Jz8525CtMj8vPaOUgQEAKT4EmwA=)
  154. format("woff"),
  155. url(data:font/ttf;base64,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)
  156. format("truetype");
  157. }
  158. </style>