Login.vue 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
  1. <template>
  2. <div class='login-container'>
  3. <el-form
  4. class='card-box login-form'
  5. autocomplete='on'
  6. :model='loginForm'
  7. :rules='loginRules'
  8. ref='loginForm'
  9. label-position='left'
  10. >
  11. <h3 class='title'>系统登录</h3>
  12. <el-form-item prop='username'>
  13. <span class='svg-container svg-container_login'>
  14. <i class='el-icon-fa-user-o'></i>
  15. </span>
  16. <el-input name='username' type='text' v-model='loginForm.username' autocomplete='on' placeholder='邮箱'/>
  17. </el-form-item>
  18. <el-form-item prop='password'>
  19. <span class='svg-container'>
  20. <i class='el-icon-fa-key'></i>
  21. </span>
  22. <el-input
  23. name='password'
  24. type='password'
  25. v-model='loginForm.password'
  26. placeholder='密码'
  27. @keyup.enter.native.prevent='handleLogin'
  28. />
  29. </el-form-item>
  30. <el-button
  31. type='primary'
  32. style='width:100%;margin-bottom:30px;'
  33. :loading='loading'
  34. @click.native.prevent='handleLogin'
  35. >登录</el-button>
  36. </el-form>
  37. </div>
  38. </template>
  39. <script>
  40. function isvalidUsername(val) {
  41. return true
  42. }
  43. import frameworkApi from '@/api/framework'
  44. import { mapActions, mapGetters } from 'vuex'
  45. export default {
  46. components: {},
  47. name: 'login',
  48. data() {
  49. const validateUsername = (rule, value, callback) => {
  50. if (!isvalidUsername(value)) {
  51. callback(new Error('请输入正确的用户名'))
  52. } else {
  53. callback()
  54. }
  55. }
  56. const validatePassword = (rule, value, callback) => {
  57. if (value.length < 6) {
  58. callback(new Error('密码不能小于6位'))
  59. } else {
  60. callback()
  61. }
  62. }
  63. return {
  64. loginForm: {
  65. username: 'admin',
  66. password: '123456'
  67. },
  68. loginRules: {
  69. username: [
  70. {
  71. required: true,
  72. trigger: 'blur',
  73. validator: validateUsername
  74. }
  75. ],
  76. password: [
  77. {
  78. required: true,
  79. trigger: 'blur',
  80. validator: validatePassword
  81. }
  82. ]
  83. },
  84. loading: false
  85. }
  86. },
  87. computed: {
  88. //...mapGetters(['beforeUrl'])
  89. },
  90. methods: {
  91. async handleLogin() {
  92. let vm = this
  93. vm.$refs.loginForm.validate(valid => {
  94. if (valid) {
  95. let username = this.loginForm.username
  96. let password = this.loginForm.password
  97. frameworkApi.login(username, password).then(resp => {
  98. console.log('login result => ', resp)
  99. if (resp.result == 'success') {
  100. this.$store.dispatch('layout/loadUserInfo').then(resp => {
  101. console.log('store dispatch result ', resp)
  102. if (resp.result == 'success') {
  103. vm.$router.push('/demo/table', () => {})
  104. } else {
  105. }
  106. })
  107. } else {
  108. }
  109. })
  110. } else {
  111. console.log('error submit!!')
  112. return false
  113. }
  114. })
  115. }
  116. }
  117. }
  118. </script>
  119. <style rel="stylesheet/scss" lang="scss">
  120. $bg: #2d3a4b;
  121. $dark_gray: #889aa4;
  122. $light_gray: #eee;
  123. .login-container {
  124. height: 100vh;
  125. background-color: $bg;
  126. input:-webkit-autofill {
  127. -webkit-box-shadow: 0 0 0px 1000px #293444 inset !important;
  128. -webkit-text-fill-color: #fff !important;
  129. }
  130. input {
  131. background: transparent;
  132. border: 0px;
  133. -webkit-appearance: none;
  134. border-radius: 0px;
  135. padding: 12px 5px 12px 15px;
  136. color: $light_gray;
  137. height: 47px;
  138. }
  139. .el-input {
  140. display: inline-block;
  141. height: 47px;
  142. width: 85%;
  143. }
  144. .tips {
  145. font-size: 14px;
  146. color: #fff;
  147. margin-bottom: 10px;
  148. }
  149. .svg-container {
  150. padding: 6px 5px 6px 15px;
  151. color: $dark_gray;
  152. vertical-align: middle;
  153. width: 30px;
  154. display: inline-block;
  155. &_login {
  156. font-size: 20px;
  157. }
  158. }
  159. .title {
  160. font-size: 26px;
  161. font-weight: 400;
  162. color: $light_gray;
  163. margin: 0px auto 40px auto;
  164. text-align: center;
  165. font-weight: bold;
  166. }
  167. .login-form {
  168. position: absolute;
  169. left: 0;
  170. right: 0;
  171. width: 400px;
  172. padding: 35px 35px 15px 35px;
  173. margin: 120px auto;
  174. }
  175. .el-form-item {
  176. border: 1px solid rgba(255, 255, 255, 0.1);
  177. background: rgba(0, 0, 0, 0.1);
  178. border-radius: 5px;
  179. color: #454545;
  180. }
  181. }
  182. </style>