From 78a09f4ad8b8396c555c8e8504771b90a2c0bcfe Mon Sep 17 00:00:00 2001
From: wangjinlei <751475802@qq.com>
Date: Thu, 24 Jun 2021 16:04:58 +0800
Subject: [PATCH] 1

---
 src/components/page/orcidLink.vue | 445 +++++++++++++++++-------------
 1 file changed, 246 insertions(+), 199 deletions(-)

diff --git a/src/components/page/orcidLink.vue b/src/components/page/orcidLink.vue
index c73544d..ddc9a5d 100644
--- a/src/components/page/orcidLink.vue
+++ b/src/components/page/orcidLink.vue
@@ -1,220 +1,267 @@
 <template>
-	<div class="login-wrap" v-loading="loading">
-		<template>
-			<p class="ms_notes">Thank you for your login with your ORCID ID, please login or register TMR Publshing Group
-				account to connect with your ORCID ID. </p>
-			<!--  <p class="ms_noter">
+    <div class="login-wrap" v-loading="loading">
+        <template>
+            <p class="ms_notes">
+                Thank you for your login with your ORCID ID, please 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="Binding" 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="handleLogin" 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="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="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="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>
+            <el-tabs v-model="activeName" class="ms_tab_n">
+                <el-tab-pane label="Binding" 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="handleLogin"
+                                        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="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="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="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>
 
 <script>
-	export default {
-		data: function() {
-			return {
-				account: localStorage.getItem('ms_username'),
-				loading: false,
-				has_user: true,
-				query: {
-					account: localStorage.getItem('ms_username'),
-					code: this.$route.query.code
-				},
-				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: '请输入姓名',
-						trigger: 'blur'
-					}],
-					phone: [{
-						required: true,
-						message: '请输入手机号',
-						trigger: 'blur'
-					}],
-					email: [{
-						required: true,
-						message: '请输入邮箱',
-						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);
-				    });
-			}
-		}
-	};
+export default {
+    data: function () {
+        return {
+            account: localStorage.getItem('ms_username'),
+            loading: false,
+            has_user: true,
+            query: {
+                account: localStorage.getItem('ms_username'),
+                code: this.$route.query.code
+            },
+            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/getUserForOrcid', this.query)
+                .then((res) => {
+                    alert('okokok!!!!');
+                })
+                .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;
-	}
+.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_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_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_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_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 {
+    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__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__item {
+    font-size: 22px;
+    padding: 0 40px;
+    color: #fff;
+}
 
-	.ms_tab_n .el-tabs__active-bar {
-		left: -22px;
-		width: 120px !important;
-	}
+.ms_tab_n .el-tabs__active-bar {
+    left: -22px;
+    width: 120px !important;
+}
 </style>