zm/tougao_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
xulu
2021-06-24 15:37:29 +08:00
parent f117ced81e
commit c9fd965e75
1 changed files with 160 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

302
src/components/page/Login.vue
View File

@@ -1,149 +1,167 @@
<template> <template>
<div class="login-wrap"> <div class="login-wrap">
<div class="ms-login"> <div class="ms-login">
<div class="ms-title">{{ $t('system.title') }}</div> <div class="ms-title">{{ $t('system.title') }}</div>
<el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content"> <el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
<el-form-item prop="username"> <el-form-item prop="username">
<el-input v-model="param.username" auto-complete="off" placeholder="username"> <el-input v-model="param.username" auto-complete="off" placeholder="username">
<i slot="prefix" class="el-icon-lx-people" /> <i slot="prefix" class="el-icon-lx-people" />
<!-- <el-button slot="prepend" icon="el-icon-lx-people"></el-button> --> <!-- <el-button slot="prepend" icon="el-icon-lx-people"></el-button> -->
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="password"> <el-form-item prop="password">
<el-input type="password" auto-complete="off" placeholder="password" v-model="param.password"> <el-input type="password" auto-complete="off" placeholder="password" v-model="param.password">
<i slot="prefix" class="el-icon-lx-lock" /> <i slot="prefix" class="el-icon-lx-lock" />
<!-- <el-button slot="prepend" icon="el-icon-lx-lock"></el-button> --> <!-- <el-button slot="prepend" icon="el-icon-lx-lock"></el-button> -->
</el-input> </el-input>
</el-form-item> </el-form-item>
<div class="login-btn"> <div class="login-btn">
<el-button type="primary" @click="submitForm()">{{ $t('system.login') }}</el-button> <el-button type="primary" @click="submitForm()">{{ $t('system.login') }}</el-button>
</div> </div>
<el-row style="text-align: center"> <el-row style="text-align: left">
<el-col :span="12" <el-col :span="24">
><el-link :underline="false" type="primary" @click="doRetrieve()">{{ $t('system.repassword') }}</el-link></el-col <el-link :underline="false" type="primary" @click="doRetrieve()">{{ $t('system.repassword') }}</el-link>
> </el-col>
<el-col :span="12" <el-col :span="24">
><el-link :underline="false" type="primary" @click="doRegister()">{{ $t('system.register') }}</el-link></el-col <el-link :underline="false" type="primary" @click="doRegister()">{{ $t('system.register') }}</el-link>
> </el-col>
</el-row> <el-col :span="24" style="margin-top: 5px;">
<el-row style="text-align: center"> <el-link :underline="false" type="primary" @click="doRetrieve()">
<el-col :span="20" <img class="orcid" src="../../assets/img/orcid.png" style="float: left;margin: -1px 5px 0 0;"/>Login with your
><el-link :underline="false" type="primary" @click="doRetrieve()" </el-link>
><img class="orcid" src="../../assets/img/orcid.png" />login with your </el-link </el-col>
></el-col> </el-row>
</el-row> </el-form>
</el-form> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
export default { export default {
data: function () { data: function() {
return { return {
aa: localStorage.getItem('ms_journal'), aa: localStorage.getItem('ms_journal'),
param: { param: {
username: '', username: '',
password: '' password: ''
}, },
rules: { rules: {
username: [{ required: true, message: 'enter one user name', trigger: 'blur' }], username: [{
password: [{ required: true, message: 'Please input a password', trigger: 'blur' }] required: true,
} message: 'enter one user name',
}; trigger: 'blur'
}, }],
methods: { password: [{
submitForm() { required: true,
//登录操作 message: 'Please input a password',
this.$refs.login.validate((valid) => { trigger: 'blur'
if (valid) { }]
this.$api }
.post('api/user/checkLogin', this.param) };
.then((res) => { },
console.log(res); methods: {
if (res.code == 1) { submitForm() {
this.$message.error('Login failed, user name or password error!'); //登录操作
return false; this.$refs.login.validate((valid) => {
} else { if (valid) {
this.$message.success('login success'); this.$api
localStorage.setItem('ms_username', res.userinfo.account); .post('api/user/checkLogin', this.param)
if (this.param.username == 'superadmin' || this.param.username == 'wuxiongzhi2') { .then((res) => {
localStorage.setItem('ms_userrole', 'admin'); console.log(res);
} else if (res.userinfo.type == 1 && res.userinfo.is_reviewer) { if (res.code == 1) {
localStorage.setItem('ms_userrole', 'reviewer'); this.$message.error('Login failed, user name or password error!');
} else { return false;
localStorage.setItem('ms_userrole', res.userinfo.type); } else {
} this.$message.success('login success');
this.$router.push('/'); localStorage.setItem('ms_username', res.userinfo.account);
} if (this.param.username == 'superadmin' || this.param.username == 'wuxiongzhi2') {
}) localStorage.setItem('ms_userrole', 'admin');
.catch((err) => { } else if (res.userinfo.type == 1 && res.userinfo.is_reviewer) {
console.log(err); localStorage.setItem('ms_userrole', 'reviewer');
}); } else {
} else { localStorage.setItem('ms_userrole', res.userinfo.type);
this.$message.error('Please enter the correct account and password'); }
console.log('error submit!!'); this.$router.push('/');
return false; }
} })
}); .catch((err) => {
}, console.log(err);
doRegister() { });
//注册页面 } else {
this.$router.push({ path: '/register' }); this.$message.error('Please enter the correct account and password');
}, console.log('error submit!!');
doRetrieve() { return false;
//找回密码 }
this.$router.push({ path: '/retrieve' }); });
} },
} doRegister() {
}; //注册页面
this.$router.push({
path: '/register'
});
},
doRetrieve() {
//找回密码
this.$router.push({
path: '/retrieve'
});
}
}
};
</script> </script>
<style scoped> <style scoped>
.login-wrap { .login-wrap {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-image: url(../../assets/img/login-bg.jpg); background-image: url(../../assets/img/login-bg.jpg);
background-size: 100%; background-size: 100%;
} }
.ms-title {
width: 100%; .ms-title {
line-height: 50px; width: 100%;
text-align: center; line-height: 50px;
font-size: 20px; text-align: center;
color: #fff; font-size: 20px;
border-bottom: 1px solid #ddd; color: #fff;
} border-bottom: 1px solid #ddd;
.ms-login { }
position: absolute;
left: 50%; .ms-login {
top: 50%; position: absolute;
width: 350px; left: 50%;
margin: -190px 0 0 -175px; top: 50%;
border-radius: 5px; width: 350px;
background: rgba(255, 255, 255, 0.3); margin: -190px 0 0 -175px;
overflow: hidden; border-radius: 5px;
} background: rgba(255, 255, 255, 0.3);
.ms-content { overflow: hidden;
padding: 30px 30px; }
}
.login-btn { .ms-content {
text-align: center; padding: 30px 30px;
} }
.login-btn button {
width: 100%; .login-btn {
height: 36px; text-align: center;
margin-bottom: 10px; }
}
.login-tips { .login-btn button {
font-size: 12px; width: 100%;
line-height: 30px; height: 36px;
color: #fff; margin-bottom: 10px;
} }
.orcid {
display: block; .login-tips {
width: 20px; font-size: 12px;
height: 20px; line-height: 30px;
} color: #fff;
</style> }
.orcid {
display: block;
width: 20px;
height: 20px;
}
</style>