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:
wangjinlei
2021-06-24 16:04:58 +08:00
parent c4ef66b250
commit 78a09f4ad8
1 changed files with 246 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

445
src/components/page/orcidLink.vue
View File

@@ -1,220 +1,267 @@
<template> <template>
<div class="login-wrap" v-loading="loading"> <div class="login-wrap" v-loading="loading">
<template> <template>
<p class="ms_notes">Thank you for your login with your ORCID ID, please login or register TMR Publshing Group <p class="ms_notes">
account to connect with your ORCID ID. </p> Thank you for your login with your ORCID ID, please login or register TMR Publshing Group account to connect with your ORCID
<!-- <p class="ms_noter"> ID.
</p>
<!-- <p class="ms_noter">
如果你拥有账户但没有绑定相应的ORCID，请点击绑定操作，<br/> 如果你拥有账户但没有绑定相应的ORCID，请点击绑定操作，<br/>
如果你没有账户，请点击注册进行相应操作 如果你没有账户，请点击注册进行相应操作
</p> --> </p> -->
<el-tabs v-model="activeName" class="ms_tab_n"> <el-tabs v-model="activeName" class="ms_tab_n">
<el-tab-pane label="Binding" name="first"> <el-tab-pane label="Binding" name="first">
<div class="ms_link"> <div class="ms_link">
<div class="ms-title">User Login</div> <div class="ms-title">User Login</div>
<el-form class="ms-content" :rules="registerRules" ref="loginForm" :model="loginForm" label-width="0"> <el-form class="ms-content" :rules="registerRules" ref="loginForm" :model="loginForm" label-width="0">
<!-- 用户名 --> <!-- 用户名 -->
<el-form-item prop="username"> <el-form-item prop="username">
<el-input size="small" v-model="loginForm.username" auto-complete="off" placeholder="username"> <el-input size="small" v-model="loginForm.username" auto-complete="off" placeholder="username">
<i slot="prefix" class="el-icon-user"></i> <i slot="prefix" class="el-icon-user"></i>
</el-input> </el-input>
</el-form-item> </el-form-item>
<!-- 密码 --> <!-- 密码 -->
<el-form-item prop="password"> <el-form-item prop="password">
<el-input size="small" v-model="loginForm.password" auto-complete="off" placeholder="password" show-password> <el-input
<i slot="prefix" class="el-icon-lock"></i> size="small"
</el-input> v-model="loginForm.password"
</el-form-item> auto-complete="off"
<!-- 按钮 --> placeholder="password"
<el-row justify="center"> show-password
<el-form-item> >
<el-button type="primary" @click.native.prevent="handleLogin" class="register-submit" style="width: 100%;">bind</el-button> <i slot="prefix" class="el-icon-lock"></i>
</el-form-item> </el-input>
</el-row> </el-form-item>
</el-form> <!-- 按钮 -->
<el-row justify="center">
<el-form-item>
</div> <el-button
</el-tab-pane> type="primary"
<el-tab-pane label="Register" name="second"> @click.native.prevent="handleLogin"
<div class="ms_login"> class="register-submit"
<div class="ms-title">User Register</div> style="width: 100%"
<el-form class="ms-content" :rules="registerRules" ref="registerForm" :model="registerForm" label-width="0"> >bind</el-button
<!-- 用户名 --> >
<el-form-item prop="username"> </el-form-item>
<el-input size="small" v-model="registerForm.username" auto-complete="off" placeholder="username"> </el-row>
<i slot="prefix" class="el-icon-user"></i> </el-form>
</el-input> </div>
</el-form-item> </el-tab-pane>
<!-- 密码 --> <el-tab-pane label="Register" name="second">
<el-form-item prop="password"> <div class="ms_login">
<el-input size="small" v-model="registerForm.password" auto-complete="off" placeholder="password" show-password> <div class="ms-title">User Register</div>
<i slot="prefix" class="el-icon-lock"></i> <el-form class="ms-content" :rules="registerRules" ref="registerForm" :model="registerForm" label-width="0">
</el-input> <!-- 用户名 -->
</el-form-item> <el-form-item prop="username">
<!-- 确认密码 --> <el-input size="small" v-model="registerForm.username" auto-complete="off" placeholder="username">
<el-form-item prop="passwordd"> <i slot="prefix" class="el-icon-user"></i>
<el-input size="small" v-model="registerForm.passwordd" auto-complete="off" placeholder="password" show-password> </el-input>
<i slot="prefix" class="el-icon-lock"></i> </el-form-item>
</el-input> <!-- 密码 -->
</el-form-item> <el-form-item prop="password">
<!-- 姓名 --> <el-input
<el-form-item prop="name"> size="small"
<el-input size="small" v-model="registerForm.name" auto-complete="off" placeholder="realname"> v-model="registerForm.password"
<i slot="prefix" class="el-icon-edit-outline"></i> auto-complete="off"
</el-input> placeholder="password"
</el-form-item> show-password
<!-- 手机 --> >
<el-form-item prop="phone"> <i slot="prefix" class="el-icon-lock"></i>
<el-input size="small" v-model="registerForm.phone" auto-complete="off" placeholder="phone"> </el-input>
<i slot="prefix" class="el-icon-mobile-phone" /> </el-form-item>
</el-input> <!-- 确认密码 -->
</el-form-item> <el-form-item prop="passwordd">
<!-- 邮件 --> <el-input
<el-form-item prop="email"> size="small"
<el-input size="small" v-model="registerForm.email" auto-complete="off" placeholder="email"> v-model="registerForm.passwordd"
<i slot="prefix" class="el-icon-message"></i> auto-complete="off"
</el-input> placeholder="password"
</el-form-item> show-password
<!-- 按钮 --> >
<el-row justify="center"> <i slot="prefix" class="el-icon-lock"></i>
<el-form-item> </el-input>
<el-button type="primary" @click.native.prevent="handleRegister" class="register-submit" style="width: 100%;">bind</el-button> </el-form-item>
</el-form-item> <!-- 姓名 -->
</el-row> <el-form-item prop="name">
</el-form> <el-input size="small" v-model="registerForm.name" auto-complete="off" placeholder="realname">
</div> <i slot="prefix" class="el-icon-edit-outline"></i>
</el-tab-pane> </el-input>
</el-tabs> </el-form-item>
</template> <!-- 手机 -->
</div> <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: false, loading: false,
has_user: true, 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
}, },
loginForm: {}, loginForm: {},
registerForm: {}, registerForm: {},
activeName: 'first', activeName: 'first',
registerRules: { registerRules: {
username: [{ username: [
required: true, {
message: 'Please enter your username.', required: true,
trigger: 'blur' message: 'Please enter your username.',
}], trigger: 'blur'
password: [{ }
required: true, ],
message: 'Please enter your password.', password: [
trigger: 'blur' {
}], required: true,
passwordd: [{ message: 'Please enter your password.',
required: true, trigger: 'blur'
message: 'Please enter your password.', }
trigger: 'blur' ],
}], passwordd: [
name: [{ {
required: true, required: true,
message: '请输入姓名', message: 'Please enter your password.',
trigger: 'blur' trigger: 'blur'
}], }
phone: [{ ],
required: true, name: [
message: '请输入手机号', {
trigger: 'blur' required: true,
}], message: 'Please enter your real name.',
email: [{ trigger: 'blur'
required: true, }
message: '请输入邮箱', ],
trigger: 'blur' phone: [
}] {
} required: true,
}; message: 'Please enter the correct mobile phone number.',
}, trigger: 'blur'
created: function() { }
this.initLinkOrcid(); ],
}, email: [
methods: { {
initLinkOrcid() { required: true,
this.$api message: 'Please enter your email address.',
.post('api/User/getUserForOrcid', this.query) trigger: 'blur'
.then((res) => { },
alert('okokok!!!!'); {
}) type: 'email',
.catch((err) => { message: 'Email address format error（example@gmail.com）.',
console.log(err); trigger: 'blur'
}); }
} ]
} }
}; };
},
created: function () {
this.initLinkOrcid();
},
methods: {
initLinkOrcid() {
this.$api
.post('api/User/getUserForOrcid', this.query)
.then((res) => {
alert('okokok!!!!');
})
.catch((err) => {
console.log(err);
});
}
}
};
</script> </script>
<style> <style>
.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%;
padding-top: 80px; padding-top: 80px;
} }
.ms_login, .ms_login,
.ms_link{ .ms_link {
width: 400px; width: 400px;
margin: 0 auto; margin: 0 auto;
} }
.ms_login .ms-title, .ms_login .ms-title,
.ms_link .ms-title { .ms_link .ms-title {
text-align: center; text-align: center;
font-size: 18px; font-size: 18px;
margin: 20px 0; margin: 20px 0;
color: #fff; color: #fff;
} }
.ms_notes { .ms_notes {
width: 400px; width: 400px;
margin: 0 auto 60px auto; margin: 0 auto 60px auto;
padding: 20px 50px; padding: 20px 50px;
line-height: 24px; line-height: 24px;
background: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.5);
color: #fe7300; color: #fe7300;
border-radius: 5px; border-radius: 5px;
} }
/* .ms_link {} /* .ms_link {}
.ms_link .ms-title {} */ .ms_link .ms-title {} */
.ms_tab_n { .ms_tab_n {
width: 500px; width: 500px;
margin: 0 auto; margin: 0 auto;
border-radius: 5px; border-radius: 5px;
padding-bottom: 30px; padding-bottom: 30px;
background: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.3);
} }
.ms_tab_n .el-tabs__nav { .ms_tab_n .el-tabs__nav {
margin-left: 130px; margin-left: 130px;
height: 60px; height: 60px;
padding-top: 25px; padding-top: 25px;
} }
.ms_tab_n .el-tabs__item { .ms_tab_n .el-tabs__item {
font-size: 22px; font-size: 22px;
padding: 0 40px; padding: 0 40px;
color: #fff; color: #fff;
} }
.ms_tab_n .el-tabs__active-bar { .ms_tab_n .el-tabs__active-bar {
left: -22px; left: -22px;
width: 120px !important; width: 120px !important;
} }
</style> </style>