329 lines
7.5 KiB
Vue
329 lines
7.5 KiB
Vue
<template>
|
|
<div class="right-login-body">
|
|
<div class="top-header-cont">
|
|
<div class="head-pic">
|
|
<img src="../../assets/img/login-head-pic.jpg" alt="头像框">
|
|
</div>
|
|
</div>
|
|
<div class="form-cont">
|
|
<el-form :model="formData" :rules="formDataRules"
|
|
ref="formData" label-width="7rem"
|
|
class="user-loginForm">
|
|
<el-form-item label="账号" prop="phone">
|
|
<el-input v-model="formData.phone"
|
|
placeholder="请输入账号"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="密码" prop="password">
|
|
<el-input type='password'
|
|
v-model="formData.password"
|
|
placeholder="请输入密码"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<div class="right-cont-btn">
|
|
<el-button type="primary"
|
|
v-on:click="submitForm()">登录
|
|
</el-button>
|
|
<el-button v-on:click="resetForm()">重置</el-button>
|
|
</div>
|
|
<div class="footer">
|
|
<router-link class="link footer-left" to="/register">注册</router-link>
|
|
<router-link class="link footer-right" to="/forgot">忘记密码?</router-link>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from 'axios'
|
|
import qs from 'qs'
|
|
|
|
export default {
|
|
data () {
|
|
return {
|
|
formData: {
|
|
phone: '',
|
|
password: ''
|
|
},
|
|
formDataRules: {
|
|
phone: [
|
|
{required: true, message: '请输入账号', trigger: 'blur'},
|
|
// eslint-disable-next-line standard/object-curly-even-spacing
|
|
{pattern: /^1[3-8][0-9]{9}$/, message: '手机号格式不正确', trigger: 'blur'}
|
|
],
|
|
password: [
|
|
{required: true, message: '请输入密码', trigger: 'blur'}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
mounted () {
|
|
},
|
|
methods: {
|
|
userLogin (data) {
|
|
const baseUrl = 'http://localhost:8083/api/'
|
|
// const baseUrl = 'https://api.tomey.live/api/'
|
|
axios({
|
|
method: 'post',
|
|
url: baseUrl + 'login',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
|
|
},
|
|
data: qs.stringify(data, {arrayFormat: 'brackets'})
|
|
}).then(res => {
|
|
console.log(res)
|
|
var data = res.data
|
|
if (data.success) {
|
|
if (data.data.identity == 3 | data.data.identity == 2) {
|
|
sessionStorage.setItem('token', data.data.token)
|
|
sessionStorage.setItem('username', data.data.uaername)
|
|
sessionStorage.setItem('email', data.data.email)
|
|
sessionStorage.setItem('identity', data.data.identity)
|
|
sessionStorage.setItem('phone', data.data.phone)
|
|
sessionStorage.setItem('createTime', data.data.createTime)
|
|
this.$notify({
|
|
title: '登录成功',
|
|
duration: 2000,
|
|
type: 'success'
|
|
})
|
|
if (data.data.identity == 3) {
|
|
this.$router.push({path: '/home'})
|
|
} else if (data.data.identity == 2) {
|
|
this.$router.push({path: '/woker'})
|
|
}
|
|
} else {
|
|
this.$notify({
|
|
title: '登录失败',
|
|
duration: 2000,
|
|
message: '管理员请前往admin登录',
|
|
type: 'error'
|
|
})
|
|
this.$router.push({path: '/admin'})
|
|
}
|
|
} else {
|
|
this.$notify({
|
|
title: '登录失败',
|
|
message: data.msg,
|
|
duration: 2000,
|
|
type: 'error'
|
|
})
|
|
}
|
|
})
|
|
|
|
},
|
|
submitForm (formName) {
|
|
this.$refs.formData.validate((valid) => {
|
|
if (valid) {
|
|
const userForm = {
|
|
phone: this.formData.phone,
|
|
password: this.formData.password
|
|
}
|
|
this.userLogin(userForm)
|
|
} else {
|
|
// console.log('error submit!!');
|
|
return false
|
|
}
|
|
})
|
|
},
|
|
resetForm () {
|
|
this.$refs.formData.resetFields()
|
|
}
|
|
},
|
|
destroyed () {
|
|
window.onkeydown = null
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang='scss'>
|
|
.right-login-body {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.top-header-cont {
|
|
padding-top: 3rem;
|
|
|
|
.head-pic {
|
|
overflow: hidden;
|
|
width: 4.5rem;
|
|
height: 4.5rem;
|
|
border-radius: 50%;
|
|
margin: 0 auto;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.form-cont {
|
|
width: 90%;
|
|
margin-top: 3rem;
|
|
|
|
.el-form-item {
|
|
margin-bottom: 1rem;
|
|
|
|
&.grade {
|
|
margin-bottom: 0.3rem;
|
|
}
|
|
}
|
|
|
|
.code {
|
|
.el-input__inner {
|
|
outline: none;
|
|
border: none;
|
|
letter-spacing: 2.4rem;
|
|
text-indent: 0.3rem;
|
|
}
|
|
|
|
.ul-code {
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.square {
|
|
width: 14%;
|
|
border: 1px solid #ccc;
|
|
}
|
|
}
|
|
}
|
|
|
|
.rightCode {
|
|
position: relative;
|
|
overflow: hidden;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
text-align: right;
|
|
width: 100%;
|
|
margin-top: 0.2rem;
|
|
margin-bottom: 0.2rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.rightCode-cont {
|
|
position: relative;
|
|
height: 2rem;
|
|
width: 6.5rem;
|
|
|
|
.Code-bg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.randomCode {
|
|
position: absolute;
|
|
display: block;
|
|
height: 100%;
|
|
line-height: 1.5rem;
|
|
right: 0;
|
|
top: 50%;
|
|
font-size: 1.1rem;
|
|
letter-spacing: 0.1rem;
|
|
color: #555;
|
|
transform: translate(-20%, -45%) rotate(random()*15deg);
|
|
transform-origin: center;
|
|
}
|
|
|
|
.toggle.el-icon-view {
|
|
position: absolute;
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
line-height: 1.5rem;
|
|
top: 50%;
|
|
transform: translate(0, -50%);
|
|
right: 0.2rem;
|
|
}
|
|
|
|
.toggle.color {
|
|
color: #ccc;
|
|
}
|
|
|
|
// 登录按钮
|
|
.el-button--primary {
|
|
margin-right: 0.5rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 1500px) {
|
|
.right-login-body .form-cont .code .el-input__inner {
|
|
letter-spacing: 2.35rem;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 1400px) {
|
|
.right-login-body .form-cont .code .el-input__inner {
|
|
letter-spacing: 2.25rem;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 1200px) {
|
|
.right-login-body .form-cont .code .el-input__inner {
|
|
letter-spacing: 1.90rem;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 1100px) {
|
|
.right-login-body .form-cont .code .el-input__inner {
|
|
letter-spacing: 1.70rem;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 990px) {
|
|
.right-login-body .form-cont .code .el-input__inner {
|
|
letter-spacing: 2.20rem;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 900px) {
|
|
.right-login-body .form-cont .code .el-input__inner {
|
|
letter-spacing: 1.70rem;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 768px) {
|
|
.right-login-body .form-cont .code .el-input__inner {
|
|
letter-spacing: 5.50rem;
|
|
font-size: 2rem;
|
|
}
|
|
.right-login-body .form-cont .rightCode {
|
|
margin-top: 1rem;
|
|
margin-bottom: 1rem;
|
|
|
|
.rightCode-cont {
|
|
height: 3rem;
|
|
width: 9rem;
|
|
|
|
.randomCode {
|
|
line-height: 3rem;
|
|
font-size: 3rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 700px) {
|
|
.right-login-body .form-cont .code .el-input__inner {
|
|
letter-spacing: 5.00rem;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 650px) {
|
|
.right-login-body .form-cont .code .el-input__inner {
|
|
letter-spacing: 4.50rem;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 600px) {
|
|
.right-login-body .form-cont .code .el-input__inner {
|
|
letter-spacing: 3.50rem;
|
|
}
|
|
}
|
|
</style>
|