<template>
|
<div class="loginBox">
|
<div class="loginForm">
|
<div class="loginLogo">
|
<img src="@/assets/img/logo.png" />
|
</div>
|
<!-- <p>垂直生态赋能平台</p> -->
|
<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
|
<el-form-item prop="name">
|
<el-input v-model="ruleForm.name" placeholder="请输入用户名">
|
<i slot="prefix" class="iconfont icon-icon-"></i>
|
</el-input>
|
</el-form-item>
|
<el-form-item prop="pwd">
|
<el-input type="password" v-model="ruleForm.pwd" placeholder="请输入密码">
|
<i slot="prefix" class="iconfont icon-xiugaimima"></i>
|
</el-input>
|
</el-form-item>
|
<div class="forgetPwd">
|
<span @click="show=true">忘记密码？</span>
|
</div>
|
<el-button type="primary" @click="submitForm()" :loading="loginFlag">
|
{{loginFlag?`登录中...`:`登录`}}</el-button>
|
</el-form>
|
</div>
|
<change-password-by-phone :show.sync="show"></change-password-by-phone>
|
</div>
|
</template>
|
<style lang="scss">
|
.loginBox {
|
width: 100%;
|
height: calc(100vh);
|
overflow: hidden;
|
background-color: #f2f2f2;
|
display: -webkit-box;
|
display: -ms-flexbox;
|
display: -webkit-flex;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
background-image: url("../../assets/img/bg3.jpg");
|
background-size: cover;
|
background-position: center;
|
.forgetPwd {
|
margin-bottom: 22px;
|
text-align: right;
|
color: #df3341;
|
span {
|
cursor: pointer;
|
}
|
}
|
.loginForm {
|
width: 350px;
|
// height: 450px;
|
background: #ffffff;
|
border-radius: 10px;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.5);
|
.loginLogo {
|
text-align: center;
|
margin: 20px 0 10px;
|
img {
|
width: 310px;
|
// height:90px;
|
}
|
}
|
p {
|
text-align: center;
|
color: #d70012;
|
font-size: 25px;
|
font-weight: bold;
|
}
|
.el-form {
|
margin: 0 20px 20px;
|
input {
|
padding-left: 45px !important;
|
}
|
.el-button,
|
.el-input__inner {
|
height: 50px;
|
}
|
input:focus {
|
border: 2px solid #d70012;
|
}
|
.iconfont {
|
font-size: 20px;
|
line-height: 50px;
|
margin-left: 10px;
|
}
|
}
|
.el-button {
|
width: 100%;
|
background-color: #d70012;
|
font-size: 20px;
|
}
|
}
|
}
|
</style>
|
<script>
|
import Cookie from 'js-cookie'
|
import { oatuthToken, userinfo } from '@api/oauth/index'
|
import changePasswordByPhone from '@/views/layout/components/changePasswordByPhone.vue'
|
import { mapMutations, mapActions } from 'vuex'
|
const sm2 = require('sm-crypto').sm2
|
export default {
|
components: {
|
changePasswordByPhone
|
},
|
data() {
|
return {
|
ruleForm: {},
|
rules: {
|
name: [
|
{ required: true, message: '请输入用户名', trigger: 'change' }
|
],
|
pwd: [
|
{ required: true, message: '请输入密码', trigger: 'change' }
|
]
|
},
|
loginFlag: false,
|
show: false,
|
}
|
},
|
created() {
|
Cookie.remove('admin.tabs')
|
this.enterSubmit()
|
},
|
methods: {
|
...mapMutations(['setToken']),
|
...mapActions(['clearLoginInfo']),
|
// 点击enter登录
|
enterSubmit() {
|
const _this = this
|
document.onkeydown = function (e) {
|
if (e.keyCode === 13) {
|
_this.submitForm()
|
}
|
}
|
},
|
// 获取菜单权限
|
async getUserTree() {
|
await this.$store.dispatch('getUserTree').catch(err => {
|
console.log(err)
|
})
|
},
|
/**
|
* 登录
|
*/
|
submitForm() {
|
this.$refs.ruleForm.validate(async (valid) => {
|
if (valid) {
|
this.loginFlag = true
|
this.clearLoginInfo() // 清空登录信息
|
const param = {
|
username: this.ruleForm.name,
|
grant_type: 'password',
|
scope: 'all',
|
password: '04' + sm2.doEncrypt(this.ruleForm.pwd, process.env.VUE_APP_PUBLICKEY, 1)
|
}
|
try {
|
window.localStorage.removeItem('mall-operate-access_token')
|
let headers = { 'Content-Type': 'application/x-www-form-urlencoded' };
|
oatuthToken(Object.assign(param), { headers: headers }).then((r) => {
|
this.handleAuth(r);
|
}).catch((err) => {
|
if (err.data.code === '50006') {
|
oatuthToken(Object.assign(param), { headers: headers, systemAuth: 'gyl' }).then((res) => {
|
this.handleAuth(res);
|
}).catch((err1) => {
|
if (err1.data.code === '50003') {
|
this.$confirm('密码有效时间已过期，请重置密码！', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
}).then(() => {
|
this.show = true;
|
}).catch(() => { })
|
} else {
|
this.$message.warning(err1.data.message);
|
}
|
this.loginFlag = false
|
})
|
} else {
|
if (err.data.code === '50003') {
|
this.$confirm('密码有效时间已过期，请重置密码！', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
}).then(() => {
|
this.show = true;
|
}).catch(() => { })
|
} else {
|
this.$message.warning(err.data.message);
|
}
|
this.loginFlag = false
|
}
|
})
|
} catch (error) {
|
this.loginFlag = false
|
}
|
} else {
|
console.log('error submit!!')
|
return false
|
}
|
})
|
},
|
handleAuth(r) {
|
if (r && r.access_token) {
|
this.setToken({
|
token: r.access_token,
|
type: r.token_type
|
})
|
let user = {
|
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WhxKECPNujWoWEFNdnJE.png',
|
name: 'Bridge',
|
};
|
Cookie.set("authInfo", JSON.stringify(r), { expires: 0.5 })
|
userinfo(r).then((userRes) => {
|
if (userRes.code === '200') {
|
user.name = userRes.data.userName || '';
|
this.$store.dispatch('getInfo', { ...user, ...userRes.data }) // 获取用户信息
|
this.$router.push('/platform');
|
Cookie.set("isMenuAuth", false, { expires: 0.5 })
|
this.getUserTree() // 获取菜单
|
} else {
|
this.$message.warning(err.data.message);
|
this.loginFlag = false
|
}
|
}).catch((err) => {
|
this.$message.warning(err.data.message);
|
this.loginFlag = false
|
})
|
}
|
this.loginFlag = false
|
}
|
}
|
}
|
</script>
|
