pxx/src/views/Login.vue

<template>
	<div class="login-wrapper">
		<div class="login-box">
			<!-- 头像容器 -->

			<!-- 表单容器 -->
			<div class="login-form-box">
				<div class="flex nav">
					<div v-for="(item,index) in navList" :class="{'action': index == currentIndex}" class="nav-item hand" @click="currentIndex = index">{{item.tit}}</div>
				</div>
				<el-form label-width="0px" ref="loginFormRef" class="login-form" :model="loginForm" v-if="currentIndex == 0">
					<!--用户名-->
					<el-form-item prop="account">
						<el-input placeholder="请输入用户名" prefix-icon="el-icon-s-custom"
							v-model="loginForm.username"></el-input>
					</el-form-item>
					<!--密码-->
					<el-form-item prop="password">
						<el-input placeholder="请输入密码" prefix-icon='el-icon-s-goods' v-model="loginForm.password"
							type="password"></el-input>
					</el-form-item>
					<!--按钮-->
					<el-form-item class="btns">
						<span class="go-new hand" @click="currentIndex = 1">没有账号？立即注册</span>
						<el-button type="primary" @click="login">登录</el-button>
						<!-- <el-button type="info" @click="resetLoginForm">重置</el-button> -->
					</el-form-item>
				</el-form>
				<el-form label-width="0px" ref="loginFormReg" class="login-form" :model="loginForm" v-if="currentIndex == 1">
					<!--用户名-->
					<el-form-item prop="account">
						<el-input placeholder="请输入用户名" prefix-icon="el-icon-s-custom"
							v-model="loginForm.username" type="text"></el-input>
					</el-form-item>
					<el-form-item prop="email">
						<el-input placeholder="请输入邮箱" prefix-icon="el-icon-message"
							v-model="loginForm.email" type="email"></el-input>
					</el-form-item>
					<!-- 邀请码 -->
					<el-form-item prop="email">
						<el-input placeholder="请输入邀请码" prefix-icon="el-icon-user"
							v-model="loginForm.code" type="text"></el-input>
					</el-form-item>
					<!--密码-->
					<el-form-item prop="password">
						<el-input placeholder="请输入密码" prefix-icon='el-icon-s-goods' v-model="loginForm.password"
							type="password"></el-input>
					</el-form-item>
					<el-form-item prop="repassword">
						<el-input placeholder="请重新输入密码" prefix-icon='el-icon-s-goods' v-model="loginForm.repassword"
							type="password"></el-input>
					</el-form-item>
					<!--按钮-->
					<el-form-item class="btns">
						<el-button type="primary" @click="reg">注册</el-button>
						<!-- <el-button type="info" @click="resetLoginForm">重置</el-button> -->
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import { validateEmail} from '@/assets/js/tools.js'
	import {
		login,
		reg
	} from '@/request/agent.js'
	export default {
		name: "Login",
		data() {
			return {
				currentIndex: 0,
				navList: [{
					tit: '登录',
					state: 0,
				}],
				loginForm: {
					email: '',
					code: '',
					username: '',
					repassword: '',
					password: ''
				}
			}
		},
		methods: {
			...mapMutations(['setUserInfo']),
			resetLoginForm() {
				this.$refs.loginFormRef.resetFields()
			},
			reg() {
				let that = this
				if (that.loginForm.username == '') {
					return that.$msg.error('请输入用户名')
				}
				if(that.loginForm.email == '') {
					return that.$msg.error('请输入邮箱')
				}
				if(!validateEmail(that.loginForm.email)) {
					return that.$msg.error('请输入正确的邮箱')
				}
				if (that.loginForm.code == '') {
					return that.$msg.error('请输入邀请码')
				}
				if (that.loginForm.password == '') {
					return that.$msg.error('请输入密码')
				}
				if (that.loginForm.repassword == '') {
					return that.$msg.error('请再次输入密码')
				}
				if(that.loginForm.password != that.loginForm.repassword) {
					return  that.$msg.error('两次密码不一致')
				}
				reg(that.loginForm).then(res => {
					that.$msg.success('注册成功')
					that.currentIndex = 0
					that.setUserInfo(res.data.userinfo)
					window.sessionStorage.setItem('token', res.data.userinfo.token)
					window.sessionStorage.setItem('user', res.data.userinfo)
					that.$router.push("/home")
				}).catch(err => {
					console.log();
				})
			},
			login() {
				let that = this
				if (that.loginForm.account == '') {
					return that.$msg.error('请输入用户名')
				}
				if (that.loginForm.password == '') {
					return that.$msg.error('请输入密码')
				}
				login({
					account: that.loginForm.username,
					password: that.loginForm.password
				}).then(res => {
					that.$msg.success('登录成功')
					console.log(res);
					that.setUserInfo(res.data.userinfo)
					window.sessionStorage.setItem('token', res.data.userinfo.token)
					
					that.$router.push("/home")
				})
				// splist({
				// 	page: 1
				// })
				// console.log(login);

				// this.$router.push("/home")

			}
		}
	};
</script>

<style lang='scss' scoped>
/* 	body {
	} */
	.login-wrapper {
		/* background-color: ; */
		position: absolute;
		width: 100%;
		height: 100%;
		background-image: url(../assets/img/basebg.png) ;
		background-size:100% 100%;
	}

	.login-box {
		width: 450px;
		border-radius: 3px;
		display: flex;
		flex-direction: column;
		position: absolute;
		left: 50%;
		top: 0;
		bottom: 0;
		margin: auto;
		align-items: center;
		justify-content: center;
	}

	.avatar-box {
		width: 130px;
		height: 130px;
		border: 1px solid #eee;
		border-radius: 50%;
		/* position: absolute; */
		box-shadow: 0 0 10px #ddd;
		align-self: center;
		transform: translate(0, -50%);
		background-color: #fff;
	}

	.avatar-box img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.login-form-box {
		width: 450px;
		/* height: 200px; */
		justify-self: end;
		transform: translate(0, -10%);
		background-color: #fff;
		border-radius: 20px;
		.login-form {
			padding: 20px ;
		}
	}

	.btns {
		display: flex;
		justify-content: flex-end;
	}
	.nav {
		justify-content: center;
		font-size: 16px;
		color: #444;
		
		border-radius: 20px 20px 0 0;
		overflow: hidden;
		
	}
	.nav-item {
		width: 100%;
		position: relative;
		text-align: center;
		line-height: 50px;
		/* width: 64px;
		height: ; */
	}
	.action {
		font-weight: bold;
		color: black;
		color: #056de8;
		/* color: #fff; */
		&::after {
			content: '';
			position: absolute;
			width: 100%;
			height: 3px;
			
			bottom: 0px;
			left: 0;
			right: 0;
			margin: auto;
		}
	}
	.go-new {
		padding-right: 20px;
		color:  #056de8;
	}
</style>