<template>
|
<div class="login-form-content">
|
<p>账号密码登录</p>
|
<el-form ref="accountForm" :model="form" :rules="rules" style="width: 100%;">
|
<el-form-item prop="username">
|
<el-input
|
v-model="form.username"
|
placeholder="请输入账号"
|
style="width: 100%" size="large"
|
/>
|
</el-form-item>
|
<el-form-item prop="password">
|
<el-input
|
v-model="form.password"
|
placeholder="请输入密码"
|
style="width: 100%" size="large"
|
type="password"
|
show-password
|
/>
|
</el-form-item>
|
</el-form>
|
<el-button type="primary" style="width: 100%" size="large" @click="login()">登 录</el-button>
|
<el-row align="middle">
|
<el-text class="text-primary cursor-p" @click="resetDialog()">忘记密码</el-text>
|
<el-divider style="height: 20px;margin:0 14px" direction="vertical"></el-divider>
|
<el-text class="text-primary cursor-p" @click="changeLoginType('mobile')">手机号验证码登录</el-text>
|
<el-divider style="height: 20px;margin:0 14px" direction="vertical"></el-divider>
|
<el-text @click="changeLoginType('qrCode')" class="text-primary cursor-p">微信扫码登录</el-text>
|
</el-row>
|
</div>
|
</template>
|
|
<script>
|
import { tokenUtils } from '@/utils/axios.js';
|
export default {
|
data() {
|
return {
|
form: {
|
username: this.$route.query.target=='tenant' ? '13030003000' : 'admin',
|
password: this.$route.query.target=='tenant' ? '123456' : 'admin123',
|
},
|
rules: {
|
username: [ this.$rules.required('账号不能为空') ],
|
password: [ this.$rules.required('密码不能为空') ]
|
}
|
}
|
},
|
methods: {
|
changeLoginType(type) {
|
this.$emit('changeLoginType', type)
|
},
|
resetDialog() {
|
|
},
|
async login() {
|
const validate = await this.$refs.accountForm.validate()
|
if (validate) {
|
const data = {
|
...this.form
|
}
|
this.$axios.post('/system/auth/login', data).then(res => {
|
if (res.data.code == 0 && res.data.data) {
|
const resData = res.data.data
|
tokenUtils.setTokens(resData.accessToken, resData.refreshToken)
|
this.$message.success('登录成功')
|
this.$router.push('/console')
|
} else {
|
this.$message.error(res.data.msg || '登录失败')
|
}
|
})
|
}
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.login-form-content {
|
width: 100%;
|
height: 350px;
|
padding: 20px;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-around;
|
align-items: center;
|
}
|
.login-form-content p{
|
font-size: 22px;
|
font-weight: bold;
|
color: black;
|
letter-spacing: 10px;
|
}
|
</style>
|
