21-前台短信注册修改

前台短信注册修改

Login.vue

<template>
	<div class="login">
		<div class="box">
			<i class="el-icon-close" @click="close_login"></i>
			<div class="content">
				<div class="nav">
                    <span :class="{active: login_method === 'is_pwd'}"
						  @click="change_login_method('is_pwd')">密码登录</span>
					<span :class="{active: login_method === 'is_sms'}"
						  @click="change_login_method('is_sms')">短信登录</span>
				</div>
				<el-form v-if="login_method === 'is_pwd'">
					<el-input
						placeholder="用户名/手机号/邮箱"
						prefix-icon="el-icon-user"
						v-model="username"
						clearable>
					</el-input>
					<el-input
						placeholder="密码"
						prefix-icon="el-icon-key"
						v-model="password"
						clearable
						show-password>
					</el-input>
					<el-button type="primary" @click="login_password">登录</el-button>
				</el-form>
				<el-form v-if="login_method === 'is_sms'">
					<el-input
						placeholder="手机号"
						prefix-icon="el-icon-phone-outline"
						v-model="mobile"
						clearable
						@blur="check_mobile">
					</el-input>
					<el-input
						placeholder="验证码"
						prefix-icon="el-icon-chat-line-round"
						v-model="sms"
						clearable>
						<template slot="append">
							<span class="sms" @click="send_sms">{{ sms_interval }}</span>
						</template>
					</el-input>
					<el-button type="primary" @click="code_login">登录</el-button>
				</el-form>
				<div class="foot">
					<span @click="go_register">立即注册</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: "Login",
	data() {
		return {
			username: '',
			password: '',
			mobile: '', // 用户输入的手机号
			sms: '', // 验证码
			login_method: 'is_pwd',
			sms_interval: '获取验证码',
			is_send: false,
		}
	},
	methods: {
		close_login() {
			this.$emit('close')
		},
		go_register() {
			this.$emit('go')
		},
		// 判断用户是使用密码登录还是验证码登录
		change_login_method(method) {
			this.login_method = method;
		},
		// 电话号码框失去焦点事件
		check_mobile() {
			if (!this.mobile) return;
			// 校验手机号格式是否正确
			if (!this.mobile.match(/^1[3-9][0-9]{9}$/)) { // 手机号格式错误的判断
				this.$message({
					message: '手机号有误',
					type: 'warning',
					duration: 1000,
					onClose: () => {
						this.mobile = '';
					}
				});
				return false;
			} else { // 手机号格式正确的判断
				// 发送ajax请求校验手机号码是否在后台存在
				this.$axios.get(this.$settings.base_url + '/user/check_telephone/', {params: {telephone: this.mobile}}).then(response => {
					/*
					* 返回数据格式:
					* 		"code": 1,
					* 		"msg":"Successful"
					* */
					if (response.data.code) { // 手机号存在后台
						// 能够发送验证码
						this.is_send = true;
					} else { // 手机号不存在后台
						// 弹出提示信息,告知手机号不存在后台
						this.$message({
							message: '手机号有误',
							type: 'warning',
							duration: 1000,
							onClose: () => {
								this.mobile = '';
							}
						});
					}
				}).catch(error => {
				})
			}

		},
		// 发送验证码事件
		send_sms() {
			if (!this.is_send) return;
			this.is_send = false;
			let sms_interval_time = 60;
			this.sms_interval = "发送中...";

			// 执行ajax请求,发送验证码
			this.$axios.get(this.$settings.base_url + '/user/send/', {params: {telephone: this.mobile}}).then(response => {
				/* 返回的数据格式
			    *       "code": 1,
				* 		"msg": "Successful",
				*		"result": "验证发送成功"
				* */
				if (response.data.code) {
					// 给条发送成功的提示
					this.$message({
						message: '验证码发送成功!',
						type: 'success',
						duration: 1000,
					});
					// 定时器,验证码发送成功后
					let timer = setInterval(() => {
						if (sms_interval_time <= 1) {
							clearInterval(timer);
							this.sms_interval = "获取验证码";
							this.is_send = true; // 重新回复点击发送功能的条件
						} else {
							sms_interval_time -= 1;
							this.sms_interval = `${sms_interval_time}秒后再发`;
						}
					}, 1000);
				}
			}).catch(error => {
				// 给条发送失败的提示
				this.$message({
					message: '验证码发送失败',
					type: 'warning',
					duration: 1000,
				});
				this.sms_interval = "获取验证码";
			});


		},
		login_password() {
			// 多方式密码登录
			if (this.username && this.password) {
				this.$axios.post(this.$settings.base_url + '/user/login/', {
					username: this.username,
					password: this.password,
				}).then(response => {
					console.log(response.data);
					// 登录成功后,需要将token保存到cookies中
					this.$cookies.set('token', response.data.token, '7d');
					this.$cookies.set('username', response.data.username, '7d');
					this.$emit('close') // 关闭登录弹框,此处也可以直接调用close_login方法
					// 给父组件(Head)传递一个事件,让他从cookies中取出username和token
					this.$emit('loginsuccess');
				}).catch(error => {

				})
			} else {
				this.$message({
					message: '用户名和密码未输入哦!',
					type: 'warning'
				});
			}
		},
		// 点击验证码登录按钮事件
		code_login() {
			if (this.mobile && this.sms) {
				this.$axios.post(this.$settings.base_url + '/user/code_login/', {
					telephone: this.mobile,
					code: this.sms,
				}).then(response => {
					console.log(response.data);
					// 登录成功后,需要将token保存到cookies中
					this.$cookies.set('token', response.data.token, '7d');
					this.$cookies.set('username', response.data.username, '7d');
					this.$emit('close') // 关闭登录弹框,此处也可以直接调用close_login方法
					// 给父组件(Head)传递一个事件,让他从cookies中取出username和token
					this.$emit('loginsuccess');
				}).catch(error => {

				})
			} else {
				this.$message({
					message: '手机号码或验证码异常!',
					type: 'warning'
				});
			}
		}
	}
}
</script>

<style scoped>
.login {
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	background-color: rgba(0, 0, 0, 0.3);
}

.box {
	width: 400px;
	height: 420px;
	background-color: white;
	border-radius: 10px;
	position: relative;
	top: calc(50vh - 210px);
	left: calc(50vw - 200px);
}

.el-icon-close {
	position: absolute;
	font-weight: bold;
	font-size: 20px;
	top: 10px;
	right: 10px;
	cursor: pointer;
}

.el-icon-close:hover {
	color: darkred;
}

.content {
	position: absolute;
	top: 40px;
	width: 280px;
	left: 60px;
}

.nav {
	font-size: 20px;
	height: 38px;
	border-bottom: 2px solid darkgrey;
}

.nav > span {
	margin: 0 20px 0 35px;
	color: darkgrey;
	user-select: none;
	cursor: pointer;
	padding-bottom: 10px;
	border-bottom: 2px solid darkgrey;
}

.nav > span.active {
	color: black;
	border-bottom: 3px solid black;
	padding-bottom: 9px;
}

.el-input, .el-button {
	margin-top: 40px;
}

.el-button {
	width: 100%;
	font-size: 18px;
}

.foot > span {
	float: right;
	margin-top: 20px;
	color: orange;
	cursor: pointer;
}

.sms {
	color: orange;
	cursor: pointer;
	display: inline-block;
	width: 70px;
	text-align: center;
	user-select: none;
}
</style>

Register.vue

<template>
	<div class="register">
		<div class="box">
			<i class="el-icon-close" @click="close_register"></i>
			<div class="content">
				<div class="nav">
					<span class="active">新用户注册</span>
				</div>
				<el-form>
					<el-input
						placeholder="手机号"
						prefix-icon="el-icon-phone-outline"
						v-model="mobile"
						clearable
						@blur="check_mobile">
					</el-input>
					<el-input
						placeholder="密码"
						prefix-icon="el-icon-key"
						v-model="password"
						clearable
						show-password>
					</el-input>
					<el-input
						placeholder="验证码"
						prefix-icon="el-icon-chat-line-round"
						v-model="sms"
						clearable>
						<template slot="append">
							<span class="sms" @click="send_sms">{{ sms_interval }}</span>
						</template>
					</el-input>
					<el-button type="primary" @click="register_now">注册</el-button>
				</el-form>
				<div class="foot">
					<span @click="go_login">立即登录</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: "Register",
	data() {
		return {
			mobile: '',
			password: '',
			sms: '',
			sms_interval: '获取验证码',
			is_send: false,
		}
	},
	methods: {
		close_register() {
			this.$emit('close', false)
		},
		go_login() {
			this.$emit('go')
		},
		check_mobile() {
			if (!this.mobile) return;
			if (!this.mobile.match(/^1[3-9][0-9]{9}$/)) { // 校验手机号码格式是否正确
				this.$message({
					message: '手机号有误',
					type: 'warning',
					duration: 1000,
					onClose: () => {
						this.mobile = '';
					}
				});
				return false;
			} else {
				// 手机号码格式正确
				this.$axios.get(this.$settings.base_url + '/user/check_telephone/', {params: {telephone: this.mobile}}).then(response => {
					/*
					* 返回数据格式:
					* 		"code": 1,
					* 		"msg":"Successful"
					* */
					if (response.data.code === 0) { // 手机号不存在后台
						// 能够发送验证码
						this.is_send = true;
						this.$message({
							message: '欢迎注册我们平台!',
							type: 'success',
							duration: 1000,
						});
					} else { // 手机号存在后台
						// 弹出提示信息,告知手机号已存在后台
						this.$message({
							message: '当前手机号码已存在,即将跳转到登录界面!',
							type: 'warning',
							duration: 1000,
							onClose: () => {
								this.go_login();
							}
						});
					}
				}).catch(error => {

				})
			}
		},
		send_sms() {
			if (!this.is_send) return;
			this.is_send = false;
			let sms_interval_time = 60;
			this.sms_interval = "发送中...";

			// 执行ajax请求,发送验证码
			this.$axios.get(this.$settings.base_url + '/user/send/', {params: {telephone: this.mobile}}).then(response => {
				/* 返回的数据格式
			    *       "code": 1,
				* 		"msg": "Successful",
				*		"result": "验证发送成功"
				* */
				if (response.data.code) {
					// 给条发送成功的提示
					this.$message({
						message: '验证码发送成功!',
						type: 'success',
						duration: 1000,
					});
					// 定时器,验证码发送成功后
					let timer = setInterval(() => {
						if (sms_interval_time <= 1) {
							clearInterval(timer);
							this.sms_interval = "获取验证码";
							this.is_send = true; // 重新回复点击发送功能的条件
						} else {
							sms_interval_time -= 1;
							this.sms_interval = `${sms_interval_time}秒后再发`;
						}
					}, 1000);
				}
			}).catch(error => {
				// 给条发送失败的提示
				this.$message({
					message: '验证码发送失败',
					type: 'warning',
					duration: 1000,
				});
				this.sms_interval = "获取验证码";
			});
		},
		// 立即注册账户
		register_now() {
			if (this.mobile && this.password && this.sms) {
				this.$axios.post(this.$settings.base_url + "/user/register/", {
					telephone: this.mobile,
					code: this.sms,
					password: this.password
				}).then(response => {
					/* 返回正确的数据格式
					* 	"code": 1,
					*   "msg": "Successful",
					*   "username": "luffy_15879680698"
					* */
					if (response.data.code) {
						// 给条发送成功的提示
						this.$message({
							message: '跳转到登录界面!',
							type: 'success',
							duration: 1000,
							onClose:()=>{
								this.go_login();
							}
						});
					} else {
						// 给条发送失败的提示
						this.$message({
							message: '出现未知错误!',
							type: 'success',
							duration: 1000,
							onClose:()=>{
								this.mobile = "";
								this.sms = "";
								this.password = "";
							}
						});
					}
				}).catch(error => {

				})
			} else {
				// 给条发送成功的提示
				this.$message({
					message: '三个字段信息必填!!',
					type: 'success',
					duration: 1000,
					onClose:()=>{
						this.mobile = "";
						this.sms = "";
						this.password = "";
					}
				});
			}

		}
	}
}
</script>

<style scoped>
.register {
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	background-color: rgba(0, 0, 0, 0.3);
}

.box {
	width: 400px;
	height: 480px;
	background-color: white;
	border-radius: 10px;
	position: relative;
	top: calc(50vh - 240px);
	left: calc(50vw - 200px);
}

.el-icon-close {
	position: absolute;
	font-weight: bold;
	font-size: 20px;
	top: 10px;
	right: 10px;
	cursor: pointer;
}

.el-icon-close:hover {
	color: darkred;
}

.content {
	position: absolute;
	top: 40px;
	width: 280px;
	left: 60px;
}

.nav {
	font-size: 20px;
	height: 38px;
	border-bottom: 2px solid darkgrey;
}

.nav > span {
	margin-left: 90px;
	color: darkgrey;
	user-select: none;
	cursor: pointer;
	padding-bottom: 10px;
	border-bottom: 2px solid darkgrey;
}

.nav > span.active {
	color: black;
	border-bottom: 3px solid black;
	padding-bottom: 9px;
}

.el-input, .el-button {
	margin-top: 40px;
}

.el-button {
	width: 100%;
	font-size: 18px;
}

.foot > span {
	float: right;
	margin-top: 20px;
	color: orange;
	cursor: pointer;
}

.sms {
	color: orange;
	cursor: pointer;
	display: inline-block;
	width: 70px;
	text-align: center;
	user-select: none;
}
</style>

Head.vue

<template>
	<div class="header">
		<div class="slogan">
			<p>老男孩IT教育 | 帮助有志向的年轻人通过努力学习获得体面的工作和生活</p>
		</div>
		<div class="nav">
			<ul class="left-part">
				<li class="logo">
					<router-link to="/">
						<img src="../assets/img/head-logo.svg" alt="">
					</router-link>
				</li>
				<li class="ele">
					<span @click="goPage('/free-course')" :class="{active: url_path === '/free-course'}">免费课</span>
				</li>
				<li class="ele">
					<span @click="goPage('/actual-course')" :class="{active: url_path === '/actual-course'}">实战课</span>
				</li>
				<li class="ele">
					<span @click="goPage('/light-course')" :class="{active: url_path === '/light-course'}">轻课</span>
				</li>
			</ul>

			<div class="right-part">
				<div v-if="!username">
					<span @click="put_login">登录</span>
					<span class="line">|</span>
					<span @click="put_register">注册</span>
				</div>
				<div v-else>
					<span>{{username}}</span>
					<span class="line">|</span>
					<span @click="logout">退出</span>
				</div>
			</div>
			<Login v-if="is_login" @close="close_login" @go="put_register" @loginsuccess="login_success"/>
			<Register v-if="is_register" @close="close_register" @go="put_login"/>
		</div>

	</div>

</template>

<script>
import Login from './Login'
import Register from './Register'

export default {
	name: "Header",
	data() {
		return {
			url_path: sessionStorage.url_path || '/',
			is_login: false,
			is_register: false,
			username:'',
			token:''
		}
	},
	methods: {
		goPage(url_path) {
			// 已经是当前路由就没有必要重新跳转
			if (this.url_path !== url_path) {
				this.$router.push(url_path);
			}
			sessionStorage.url_path = url_path;
		},
		put_login() {
			this.is_login = true;
			this.is_register = false;
		},
		put_register() {
			this.is_login = false;
			this.is_register = true;
		},
		close_login() {
			this.is_login = false;
		},
		close_register() {
			this.is_register = false;
		},
		login_success(){
			// 用户登录成功后,需要立马展示当前用户信息
			// 就是将username和token的值给加上
			this.username = this.$cookies.get('username');
			this.token = this.$cookies.get('token');
		},
		logout(){
			// 退出账号
			// 1.先将cookie中的username和token中的值置空
			this.$cookies.remove('username');
			this.$cookies.remove('token');
			// 2.再将data中的username和token的值置空
			this.username = "";
			this.token = "";
		}
	},
	created() {
		sessionStorage.url_path = this.$route.path;
		this.url_path = this.$route.path;
		// 在页面创建时,取cookies中获取token和username,用于判断用户是否登录,然后做出后续逻辑
		this.username = this.$cookies.get('username'); // 有值就取出来,没有值就是空
		this.token = this.$cookies.get('token'); // 有值就取出来,没有值就是空

	},

	components: {
		Login, Register,
	}
}
</script>

<style scoped>
.header {
	background-color: white;
	box-shadow: 0 0 5px 0 #aaa;
}

.header:after {
	content: "";
	display: block;
	clear: both;
}

.slogan {
	background-color: #eee;
	height: 40px;
}

.slogan p {
	width: 1200px;
	margin: 0 auto;
	color: #aaa;
	font-size: 13px;
	line-height: 40px;
}

.nav {
	background-color: white;
	user-select: none;
	width: 1200px;
	margin: 0 auto;

}

.nav ul {
	padding: 15px 0;
	float: left;
}

.nav ul:after {
	clear: both;
	content: '';
	display: block;
}

.nav ul li {
	float: left;
}

.logo {
	margin-right: 20px;
}

.ele {
	margin: 0 20px;
}

.ele span {
	display: block;
	font: 15px/36px '微软雅黑';
	border-bottom: 2px solid transparent;
	cursor: pointer;
}

.ele span:hover {
	border-bottom-color: orange;
}

.ele span.active {
	color: orange;
	border-bottom-color: orange;
}

.right-part {
	float: right;
}

.right-part .line {
	margin: 0 10px;
}

.right-part span {
	line-height: 68px;
	cursor: pointer;
}
</style>

posted @ 2021-02-22 16:35  今天捡到一百块钱  阅读(93)  评论(0编辑  收藏  举报