This commit is contained in:
wangjinlei
2021-06-24 15:11:53 +08:00
parent b7d1ef35e2
commit bf5ae0fcaa
3 changed files with 242 additions and 108 deletions

View File

@@ -2,7 +2,7 @@ const en = {
system: { system: {
title: 'Submission System', title: 'Submission System',
repassword:'Forgot your password?', repassword:'Reset password ',
register:'Register now', register:'Register now',
login:'Log in', login:'Log in',
forgetpwd:'Find Your Password', forgetpwd:'Find Your Password',

View File

@@ -1,7 +1,7 @@
<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">
@@ -10,24 +10,28 @@
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="password"> <el-form-item prop="password">
<el-input <el-input type="password" auto-complete="off" placeholder="password" v-model="param.password">
type="password" <i slot="prefix" class="el-icon-lx-lock" />
auto-complete="off"
placeholder="password"
v-model="param.password"
>
<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: center">
<el-col :span="12"><el-link :underline="false" type="primary" @click="doRetrieve()">{{$t('system.repassword')}}</el-link></el-col> <el-col :span="12"
<el-col :span="12"><el-link :underline="false" type="primary" @click="doRegister()">{{$t('system.register')}}</el-link></el-col> ><el-link :underline="false" type="primary" @click="doRetrieve()">{{ $t('system.repassword') }}</el-link></el-col
>
<el-col :span="12"
><el-link :underline="false" type="primary" @click="doRegister()">{{ $t('system.register') }}</el-link></el-col
>
</el-row>
<el-row style="text-align: center">
<el-col :span="20"
><el-link :underline="false" type="primary" @click="doRetrieve()"
><img class="orcid" src="../../assets/img/orcid.png" />login with your </el-link
></el-col>
</el-row> </el-row>
</el-form> </el-form>
</div> </div>
</div> </div>
@@ -35,9 +39,9 @@
<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: ''
@@ -51,28 +55,29 @@ export default {
methods: { methods: {
submitForm() { submitForm() {
//登录操作 //登录操作
this.$refs.login.validate(valid => { this.$refs.login.validate((valid) => {
if (valid) { if (valid) {
this.$api this.$api
.post('api/user/checkLogin',this.param) .post('api/user/checkLogin', this.param)
.then(res => {console.log(res); .then((res) => {
if(res.code==1){ console.log(res);
if (res.code == 1) {
this.$message.error('Login failed, user name or password error!'); this.$message.error('Login failed, user name or password error!');
return false; return false;
}else{ } else {
this.$message.success('login success'); this.$message.success('login success');
localStorage.setItem('ms_username', res.userinfo.account); localStorage.setItem('ms_username', res.userinfo.account);
if(this.param.username=='superadmin'||this.param.username=='wuxiongzhi2'){ if (this.param.username == 'superadmin' || this.param.username == 'wuxiongzhi2') {
localStorage.setItem('ms_userrole','admin'); localStorage.setItem('ms_userrole', 'admin');
}else if(res.userinfo.type==1&&res.userinfo.is_reviewer){ } else if (res.userinfo.type == 1 && res.userinfo.is_reviewer) {
localStorage.setItem('ms_userrole','reviewer') localStorage.setItem('ms_userrole', 'reviewer');
}else{ } else {
localStorage.setItem('ms_userrole',res.userinfo.type); localStorage.setItem('ms_userrole', res.userinfo.type);
} }
this.$router.push('/'); this.$router.push('/');
} }
}) })
.catch(err => { .catch((err) => {
console.log(err); console.log(err);
}); });
} else { } else {
@@ -136,4 +141,9 @@ export default {
line-height: 30px; line-height: 30px;
color: #fff; color: #fff;
} }
.orcid {
display: block;
width: 20px;
height: 20px;
}
</style> </style>

View File

@@ -1,86 +1,210 @@
<template> <template>
<div class="login-wrap" v-loading="loading"> <div class="login-wrap" v-loading="loading">
<div class="ms_link" v-if="has_user"></div> <template>
<div class="ms-login" v-else> <p class="ms_notes">Thank you for your login with your ORCID ID, please login or register TMR Publshing Group
<div class="ms-title">User Register</div> account to connect with your ORCID ID. </p>
<el-form class="ms-content" :rules="registerRules" ref="registerForm" :model="registerForm" label-width="0"> <!-- <p class="ms_noter">
<!-- 用户名 --> 如果你拥有账户但没有绑定相应的ORCID请点击绑定操作<br/>
<el-form-item prop="username"> 如果你没有账户请点击注册进行相应操作
<el-input size="small" v-model="registerForm.username" auto-complete="off" placeholder="username"> </p> -->
<i slot="prefix" class="el-icon-user"></i> <el-tabs v-model="activeName" class="ms_tab_n">
</el-input> <el-tab-pane label="Binding" name="first">
</el-form-item> <div class="ms_link">
<!-- 密码 --> <div class="ms-title">User Login</div>
<el-form-item prop="password"> <el-form class="ms-content" :rules="registerRules" ref="registerForm" :model="registerForm" label-width="0">
<el-input size="small" v-model="registerForm.password" auto-complete="off" placeholder="password" show-password> <!-- 用户名 -->
<i slot="prefix" class="el-icon-lock"></i> <el-form-item prop="username">
</el-input> <el-input size="small" v-model="registerForm.username" auto-complete="off" placeholder="username">
</el-form-item> <i slot="prefix" class="el-icon-user"></i>
<!-- 姓名 --> </el-input>
<el-form-item prop="name"> </el-form-item>
<el-input size="small" v-model="registerForm.name" auto-complete="off" placeholder="realname"> <!-- 密码 -->
<i slot="prefix" class="el-icon-edit-outline"></i> <el-form-item prop="password">
</el-input> <el-input size="small" v-model="registerForm.password" auto-complete="off" placeholder="password" show-password>
</el-form-item> <i slot="prefix" class="el-icon-lock"></i>
<!-- 手机 --> </el-input>
<el-form-item prop="phone"> </el-form-item>
<el-input size="small" v-model="registerForm.phone" auto-complete="off" placeholder="phone"> <!-- 按钮 -->
<i slot="prefix" class="el-icon-mobile-phone" /> <el-row justify="center">
</el-input> <el-form-item>
</el-form-item> <el-button type="primary" @click.native.prevent="handleLogin" class="register-submit" style="width: 100%;">bind</el-button>
<!-- 邮件 --> </el-form-item>
<el-form-item prop="email"> </el-row>
<el-input size="small" v-model="registerForm.email" auto-complete="off" placeholder="email"> </el-form>
<i slot="prefix" class="el-icon-message"></i>
</el-input> </div>
</el-form-item> </el-tab-pane>
<!-- 按钮 --> <el-tab-pane label="Register" name="second">
<el-row type="flex" justify="center"> <div class="ms_login">
<el-col :span="6"> <div class="ms-title">User Register</div>
<el-form-item> <el-form class="ms-content" :rules="registerRules" ref="registerForm" :model="registerForm" label-width="0">
<el-button size="small" type="primary" @click.native.prevent="handleRegister" class="register-submit" <!-- 用户名 -->
>bind</el-button <el-form-item prop="username">
> <el-input size="small" v-model="registerForm.username" auto-complete="off" placeholder="username">
</el-form-item> <i slot="prefix" class="el-icon-user"></i>
</el-col> </el-input>
<el-col :span="14"></el-col> </el-form-item>
<el-col :span="4"> </el-col> <!-- 密码 -->
</el-row> <el-form-item prop="password">
</el-form> <el-input size="small" v-model="registerForm.password" auto-complete="off" placeholder="password" show-password>
</div> <i slot="prefix" class="el-icon-lock"></i>
</div> </el-input>
</el-form-item>
<!-- 姓名 -->
<el-form-item prop="name">
<el-input size="small" v-model="registerForm.name" auto-complete="off" placeholder="realname">
<i slot="prefix" class="el-icon-edit-outline"></i>
</el-input>
</el-form-item>
<!-- 手机 -->
<el-form-item prop="phone">
<el-input size="small" v-model="registerForm.phone" auto-complete="off" placeholder="phone">
<i slot="prefix" class="el-icon-mobile-phone" />
</el-input>
</el-form-item>
<!-- 邮件 -->
<el-form-item prop="email">
<el-input size="small" v-model="registerForm.email" auto-complete="off" placeholder="email">
<i slot="prefix" class="el-icon-message"></i>
</el-input>
</el-form-item>
<!-- 按钮 -->
<el-row justify="center">
<el-form-item>
<el-button type="primary" @click.native.prevent="handleRegister" class="register-submit" style="width: 100%;">bind</el-button>
</el-form-item>
</el-row>
</el-form>
</div>
</el-tab-pane>
</el-tabs>
</template>
</div>
</template> </template>
<script> <script>
export default { export default {
data: function () { data: function() {
return { return {
account: localStorage.getItem('ms_username'), account: localStorage.getItem('ms_username'),
loading: true, loading: false,
has_user: false, has_user: true,
query: { query: {
account: localStorage.getItem('ms_username'), account: localStorage.getItem('ms_username'),
code: this.$route.query.code code: this.$route.query.code
} },
}; registerForm: {},
}, activeName: 'first',
created: function () { registerRules: {
this.initLinkOrcid(); username: [{
}, required: true,
methods: { message: '请输入用户名',
//推送记录信息 trigger: 'blur'
initLinkOrcid() { }],
this.$message.success(this.query.account); password: [{
required: true,
message: '请输入密码',
trigger: 'blur'
}],
name: [{
required: true,
message: '请输入姓名',
trigger: 'blur'
}],
phone: [{
required: true,
message: '请输入手机号',
trigger: 'blur'
}],
email: [{
required: true,
message: '请输入邮箱',
trigger: 'blur'
}]
}
};
},
created: function() {
// this.initLinkOrcid();
},
methods: {
//推送记录信息
initLinkOrcid() {
// this.$message.success(this.query.account);
// this.$api // this.$api
// .post('api/User/getUserForOrcid', this.query) // .post('api/User/getUserForOrcid', this.query)
// .then((res) => { // .then((res) => {
// alert('okokok!!!!'); // alert('okokok!!!!');
// }) // })
// .catch((err) => { // .catch((err) => {
// console.log(err); // console.log(err);
// }); // });
} }
} }
}; };
</script> </script>
<style>
.login-wrap {
position: relative;
width: 100%;
height: 100%;
background-image: url(../../assets/img/login-bg.jpg);
background-size: 100%;
padding-top: 80px;
}
.ms_login,
.ms_link{
width: 400px;
margin: 0 auto;
}
.ms_login .ms-title,
.ms_link .ms-title {
text-align: center;
font-size: 18px;
margin: 20px 0;
color: #fff;
}
.ms_notes {
width: 400px;
margin: 0 auto 60px auto;
padding: 20px 50px;
line-height: 24px;
background: rgba(255, 255, 255, 0.5);
color: #fe7300;
border-radius: 5px;
}
/* .ms_link {}
.ms_link .ms-title {} */
.ms_tab_n {
width: 500px;
margin: 0 auto;
border-radius: 5px;
padding-bottom: 30px;
background: rgba(255, 255, 255, 0.3);
}
.ms_tab_n .el-tabs__nav {
margin-left: 130px;
height: 60px;
padding-top: 25px;
}
.ms_tab_n .el-tabs__item {
font-size: 22px;
padding: 0 40px;
color: #fff;
}
.ms_tab_n .el-tabs__active-bar {
left: -22px;
width: 120px !important;
}
</style>