login.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  1. <template>
  2. <div>
  3. <el-row>
  4. <el-col class="TT-main" :span="10" :offset="7">
  5. <h3 class="title">
  6. <span>登录</span>
  7. </h3>
  8. <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
  9. status-icon>
  10. <el-form-item prop="userPhone">
  11. <el-input type="tel" v-model="dataForm.userPhone" placeholder="帐号"></el-input>
  12. </el-form-item>
  13. <el-form-item prop="userPassword">
  14. <el-input v-model="dataForm.userPassword" type="password" placeholder="密码"></el-input>
  15. </el-form-item>
  16. <el-form-item prop="captcha">
  17. <el-row :gutter="20">
  18. <el-col :span="17">
  19. <el-input v-model="dataForm.captcha" placeholder="图形验证码">
  20. </el-input>
  21. </el-col>
  22. <el-col :span="7" class="captcha">
  23. <img :src="captchaPath" @click="getCaptcha()" alt="">
  24. </el-col>
  25. </el-row>
  26. </el-form-item>
  27. <el-form-item>
  28. <el-button class="login-btn-submit" type="primary" @click="dataFormSubmit()">登录</el-button>
  29. <p class="login" @click="gotoRegister">暂无账号?立即注册</p>
  30. </el-form-item>
  31. </el-form>
  32. </el-col>
  33. </el-row>
  34. </div>
  35. </template>
  36. <script>
  37. import { getUUID } from '@/utils'
  38. export default {
  39. data () {
  40. return {
  41. dataForm: {
  42. userPhone: '18768452697',
  43. userPassword: '123456',
  44. uuid: '',
  45. captcha: '123456'
  46. },
  47. dataRule: {
  48. userPhone: [
  49. { required: true, message: '帐号不能为空', trigger: 'blur' }
  50. ],
  51. userPassword: [
  52. { required: true, message: '密码不能为空', trigger: 'blur' }
  53. ],
  54. captcha: [
  55. { required: true, message: '验证码不能为空', trigger: 'blur' }
  56. ]
  57. },
  58. captchaPath: '',
  59. isDisabled: false
  60. }
  61. },
  62. created () {
  63. this.getCaptcha()
  64. },
  65. methods: {
  66. // 提交表单
  67. dataFormSubmit () {
  68. const { userPhone, userPassword, uuid, captcha } = this.dataForm
  69. const postData = {
  70. 'userPhone': userPhone,
  71. 'userPassword': userPassword,
  72. 'uuid': uuid,
  73. 'captcha': captcha
  74. }
  75. this.$refs['dataForm'].validate((valid) => {
  76. if (valid) {
  77. if (this.isDisabled) {
  78. return
  79. }
  80. this.isDisabled = true
  81. this.$http({
  82. url: this.$http.adornUrl('/user/login11'),
  83. method: 'post',
  84. data: this.$http.adornData(postData)
  85. }).then(({ data }) => {
  86. this.isDisabled = false
  87. if (data.status) {
  88. const { token } = data.data
  89. this.$cookie.set('token', token)
  90. this.$router.replace({ name: 'home' })
  91. return
  92. }
  93. this.$message.error(data.msg)
  94. }).catch(() => {
  95. this.isDisabled = false
  96. })
  97. }
  98. })
  99. },
  100. // 获取验证码
  101. getCaptcha () {
  102. this.dataForm.uuid = getUUID()
  103. this.captchaPath = this.$http.adornUrl(`/api/captcha?uuid=${this.dataForm.uuid}`)
  104. },
  105. gotoRegister () {
  106. this.$router.push({
  107. name: 'register'
  108. })
  109. }
  110. }
  111. }
  112. </script>
  113. <style lang="scss" scoped>
  114. .TT-main {
  115. padding: 30px 0 50px;
  116. overflow: hidden;
  117. }
  118. .title {
  119. position: relative;
  120. left: 0;
  121. top: 0;
  122. width: 100%;
  123. height: 179px;
  124. margin: 0 auto 22px;
  125. border-top-left-radius: 10px;
  126. border-top-right-radius: 10px;
  127. color: #fff;
  128. background: url(~@/assets/img/login_bg.jpg) center center/100% 100% no-repeat;
  129. overflow: hidden;
  130. &::before {
  131. content: "";
  132. display: block;
  133. position: absolute;
  134. width: 100%;
  135. height: 100%;
  136. top: 0;
  137. left: 0;
  138. background-color: rgba(54, 84, 99, 0.7);
  139. }
  140. span {
  141. position: relative;
  142. left: 0;
  143. top: 0;
  144. z-index: 1;
  145. display: block;
  146. width: 100%;
  147. line-height: 179px;
  148. font-size: 30px;
  149. font-weight: 400;
  150. text-align: center;
  151. }
  152. }
  153. .el-form {
  154. width: 100%;
  155. margin: 0 auto;
  156. }
  157. .captcha {
  158. display: flex;
  159. justify-content: flex-end;
  160. align-items: center;
  161. overflow: hidden;
  162. > img {
  163. height: 36px;
  164. cursor: pointer;
  165. }
  166. }
  167. .login-btn-submit {
  168. width: 100%;
  169. }
  170. .login {
  171. margin-top: 10px;
  172. font-size: 14px;
  173. line-height: 22px;
  174. color: #1ab2ff;
  175. cursor: pointer;
  176. text-align: left;
  177. text-indent: 8px;
  178. width: 160px;
  179. }
  180. </style>