Login.vue 4.4 KB

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