123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191 |
- <template>
- <div>
- <el-row>
- <el-col class="TT-main" :span="10" :offset="7">
- <h3 class="title">
- <span>登录</span>
- </h3>
- <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
- status-icon>
- <el-form-item prop="userPhone">
- <el-input type="tel" v-model="dataForm.userPhone" placeholder="帐号"></el-input>
- </el-form-item>
- <el-form-item prop="userPassword">
- <el-input v-model="dataForm.userPassword" type="password" placeholder="密码"></el-input>
- </el-form-item>
- <el-form-item prop="captcha">
- <el-row :gutter="20">
- <el-col :span="17">
- <el-input v-model="dataForm.captcha" placeholder="图形验证码">
- </el-input>
- </el-col>
- <el-col :span="7" class="captcha">
- <img :src="captchaPath" @click="getCaptcha()" alt="">
- </el-col>
- </el-row>
- </el-form-item>
- <el-form-item>
- <el-button class="login-btn-submit" type="primary" @click="dataFormSubmit()">登录</el-button>
- <p class="login" @click="gotoRegister">暂无账号?立即注册</p>
- </el-form-item>
- </el-form>
- </el-col>
- </el-row>
- </div>
- </template>
- <script>
- import { getUUID } from '@/utils'
- export default {
- data () {
- return {
- dataForm: {
- userPhone: '18768452697',
- userPassword: '123456',
- uuid: '',
- captcha: '123456'
- },
- dataRule: {
- userPhone: [
- { required: true, message: '帐号不能为空', trigger: 'blur' }
- ],
- userPassword: [
- { required: true, message: '密码不能为空', trigger: 'blur' }
- ],
- captcha: [
- { required: true, message: '验证码不能为空', trigger: 'blur' }
- ]
- },
- captchaPath: '',
- isDisabled: false
- }
- },
- created () {
- this.getCaptcha()
- },
- methods: {
- // 提交表单
- dataFormSubmit () {
- const { userPhone, userPassword, uuid, captcha } = this.dataForm
- const postData = {
- 'userPhone': userPhone,
- 'userPassword': userPassword,
- 'uuid': uuid,
- 'captcha': captcha
- }
- this.$refs['dataForm'].validate((valid) => {
- if (valid) {
- if (this.isDisabled) {
- return
- }
- this.isDisabled = true
- this.$http({
- url: this.$http.adornUrl('/user/login11'),
- method: 'post',
- data: this.$http.adornData(postData)
- }).then(({ data }) => {
- this.isDisabled = false
- if (data.status) {
- const { token } = data.data
- this.$cookie.set('token', token)
- this.$router.replace({ name: 'home' })
- return
- }
- this.$message.error(data.msg)
- }).catch(() => {
- this.isDisabled = false
- })
- }
- })
- },
- // 获取验证码
- getCaptcha () {
- this.dataForm.uuid = getUUID()
- this.captchaPath = this.$http.adornUrl(`/api/captcha?uuid=${this.dataForm.uuid}`)
- },
- gotoRegister () {
- this.$router.push({
- name: 'register'
- })
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .TT-main {
- padding: 30px 0 50px;
- overflow: hidden;
- }
- .title {
- position: relative;
- left: 0;
- top: 0;
- width: 100%;
- height: 179px;
- margin: 0 auto 22px;
- border-top-left-radius: 10px;
- border-top-right-radius: 10px;
- color: #fff;
- background: url(~@/assets/img/login_bg.jpg) center center/100% 100% no-repeat;
- overflow: hidden;
- &::before {
- content: "";
- display: block;
- position: absolute;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- background-color: rgba(54, 84, 99, 0.7);
- }
- span {
- position: relative;
- left: 0;
- top: 0;
- z-index: 1;
- display: block;
- width: 100%;
- line-height: 179px;
- font-size: 30px;
- font-weight: 400;
- text-align: center;
- }
- }
- .el-form {
- width: 100%;
- margin: 0 auto;
- }
- .captcha {
- display: flex;
- justify-content: flex-end;
- align-items: center;
- overflow: hidden;
- > img {
- height: 36px;
- cursor: pointer;
- }
- }
- .login-btn-submit {
- width: 100%;
- }
- .login {
- margin-top: 10px;
- font-size: 14px;
- line-height: 22px;
- color: #1ab2ff;
- cursor: pointer;
- text-align: left;
- text-indent: 8px;
- width: 160px;
- }
- </style>
|