300 lines
8.6 KiB
Vue
300 lines
8.6 KiB
Vue
<template>
|
||
<div class="login-wrap" v-loading="loading">
|
||
<template>
|
||
<p class="ms_notes">
|
||
Thank you for using ORCID ID to login our website, please continue to login or register TMR Publshing Group account
|
||
to connect with your ORCID ID.
|
||
</p>
|
||
<!-- <p class="ms_noter">
|
||
如果你拥有账户但没有绑定相应的ORCID，请点击绑定操作，<br/>
|
||
如果你没有账户，请点击注册进行相应操作
|
||
</p> -->
|
||
<el-tabs v-model="activeName" class="ms_tab_n">
|
||
<el-tab-pane label="Login" name="first">
|
||
<div class="ms_link">
|
||
<div class="ms-title">User Login</div>
|
||
<el-form class="ms-content" :rules="registerRules" ref="loginForm" :model="loginForm" label-width="0">
|
||
<!-- 用户名 -->
|
||
<el-form-item prop="username">
|
||
<el-input size="small" v-model="loginForm.username" auto-complete="off" placeholder="username">
|
||
<i slot="prefix" class="el-icon-user"></i>
|
||
</el-input>
|
||
</el-form-item>
|
||
<!-- 密码 -->
|
||
<el-form-item prop="password">
|
||
<el-input size="small" v-model="loginForm.password" auto-complete="off" placeholder="password" show-password>
|
||
<i slot="prefix" class="el-icon-lock"></i>
|
||
</el-input>
|
||
</el-form-item>
|
||
<!-- 按钮 -->
|
||
<el-row justify="center">
|
||
<el-form-item>
|
||
<el-button type="primary" @click.native.prevent="orcidBind" class="register-submit" style="width: 100%">bind</el-button>
|
||
</el-form-item>
|
||
</el-row>
|
||
</el-form>
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="Register" name="second">
|
||
<div class="ms_login">
|
||
<div class="ms-title">User Register</div>
|
||
<el-form class="ms-content" :rules="registerRules" ref="registerForm" :model="registerForm" label-width="0">
|
||
<!-- 用户名 -->
|
||
<el-form-item prop="username">
|
||
<el-input size="small" v-model="registerForm.username" auto-complete="off" placeholder="user name">
|
||
<i slot="prefix" class="el-icon-user"></i>
|
||
</el-input>
|
||
</el-form-item>
|
||
<!-- 密码 -->
|
||
<el-form-item prop="password">
|
||
<el-input size="small" v-model="registerForm.password" auto-complete="off" placeholder="password" show-password>
|
||
<i slot="prefix" class="el-icon-lock"></i>
|
||
</el-input>
|
||
</el-form-item>
|
||
<!-- 确认密码 -->
|
||
<el-form-item prop="passwordd">
|
||
<el-input size="small" v-model="registerForm.passwordd" auto-complete="off" placeholder="password"
|
||
show-password>
|
||
<i slot="prefix" class="el-icon-lock"></i>
|
||
</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="orcidRegister" 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>
|
||
|
||
<script>
|
||
export default {
|
||
data: function() {
|
||
return {
|
||
account: localStorage.getItem('U_name'),
|
||
code: this.$route.query.code,
|
||
// loading: true,
|
||
has_user: true,
|
||
loginForm: {},
|
||
registerForm: {},
|
||
activeName: 'first',
|
||
registerRules: {
|
||
username: [{
|
||
required: true,
|
||
message: 'Please enter your username.',
|
||
trigger: 'blur'
|
||
}],
|
||
password: [{
|
||
required: true,
|
||
message: 'Please enter your password.',
|
||
trigger: 'blur'
|
||
}],
|
||
passwordd: [{
|
||
required: true,
|
||
message: 'Please enter your password.',
|
||
trigger: 'blur'
|
||
}],
|
||
name: [{
|
||
required: true,
|
||
message: 'Please enter your real name.',
|
||
trigger: 'blur'
|
||
}],
|
||
phone: [{
|
||
required: true,
|
||
message: 'Please enter the correct mobile phone number.',
|
||
trigger: 'blur'
|
||
}],
|
||
email: [{
|
||
required: true,
|
||
message: 'Please enter your email address.',
|
||
trigger: 'blur'
|
||
},
|
||
{
|
||
type: 'email',
|
||
message: 'Email address format error（example@gmail.com）.',
|
||
trigger: 'blur'
|
||
}
|
||
]
|
||
}
|
||
};
|
||
},
|
||
created: function() {
|
||
this.initLinkOrcid();
|
||
},
|
||
methods: {
|
||
initLinkOrcid() {
|
||
this.$api
|
||
.post('api/User/OrcidLogin', {
|
||
code: this.code
|
||
})
|
||
.then((res) => {
|
||
if (res.data.user == null) {
|
||
this.loginForm.orcid = res.data.orcid;
|
||
this.registerForm.orcid = res.data.orcid;
|
||
this.loading = false;
|
||
} else {
|
||
this.$message.success('Login success');
|
||
|
||
if (res.data.user.account == 'superadmin' || res.data.user.account == 'wuxiongzhi2') {
|
||
localStorage.setItem('U_status', '0'); //超级管理员
|
||
localStorage.setItem('U_role', 'superadmin');
|
||
localStorage.setItem('U_name', res.userinfo.account);
|
||
localStorage.setItem('U_id', res.userinfo.user_id);
|
||
this.$router.push('/');
|
||
} else if (res.data.roles.includes('editor')) {
|
||
localStorage.setItem('U_status', '1'); //编辑
|
||
localStorage.setItem('U_role', res.data.roles);
|
||
localStorage.setItem('U_name', res.data.userinfo.account);
|
||
localStorage.setItem('U_id', res.data.userinfo.user_id);
|
||
this.$router.push('/');
|
||
} else {
|
||
localStorage.setItem('U_status', '2'); //其余的身份
|
||
localStorage.setItem('U_role', res.data.roles);
|
||
localStorage.setItem('U_name', res.data.userinfo.account);
|
||
localStorage.setItem('U_id', res.data.userinfo.user_id);
|
||
localStorage.setItem('U_relname', res.data.userinfo.realname);
|
||
this.$router.push('/');
|
||
// this.roleVisible = true;
|
||
// this.user_cap = res.data.roles;
|
||
}
|
||
|
||
|
||
|
||
this.$router.push('/');
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
console.log(err);
|
||
});
|
||
},
|
||
//绑定操作提交
|
||
orcidBind() {
|
||
this.$api
|
||
.post('api/User/orcidBind', this.loginForm)
|
||
.then((res) => {
|
||
if (res.data.code == 1) {
|
||
this.$message.error(res.data.msg);
|
||
} else {
|
||
this.$message.success('Binding success');
|
||
localStorage.setItem('U_name', res.data.user.account);
|
||
if (res.data.user.type == 1 && res.data.user.is_reviewer) {
|
||
localStorage.setItem('ms_userrole', 'reviewer');
|
||
} else {
|
||
localStorage.setItem('ms_userrole', res.data.user.type);
|
||
}
|
||
this.$router.push('/');
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
console.log(err);
|
||
});
|
||
},
|
||
//注册提交
|
||
orcidRegister() {
|
||
this.$api
|
||
.post('api/User/orcidRegister', this.registerForm)
|
||
.then((res) => {
|
||
this.$message.success('Register success');
|
||
localStorage.setItem('U_name', res.data.user.account);
|
||
if (res.data.user.type == 1 && res.data.user.is_reviewer) {
|
||
localStorage.setItem('ms_userrole', 'reviewer');
|
||
} else {
|
||
localStorage.setItem('ms_userrole', res.data.user.type);
|
||
}
|
||
this.$router.push('/');
|
||
})
|
||
.catch((err) => {
|
||
console.log(err);
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</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: 142px;
|
||
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: -28px;
|
||
width: 120px !important;
|
||
}
|
||
</style>
|