NurseStationApp/pages/login/login.vue

<template>
	<view class="app">
		<view class="title">
			账号登录
		</view>
		<view class="loginphone">
			<input class="phone" type="text" placeholder="手机号码" maxlength="11" v-model="userdata.phone" />
		</view>
		<view class="logincode loginphone" style="top: 40%;" v-if='switchs'>
			<u-input class='code phone' placeholder="密码" maxlength="10" v-model="userdata.password" type="password"
				border="true" password-icon="true" />
		</view>
		<view class="logincode loginphone" style="top: 40%;" v-else>
			<input class="code phone" type="text" placeholder="验证码" maxlength="6" />
			<view class="obtaincode get-code" :style="{'color':getCodeBtnColor}" @click.stop="getCode()">
				{{getCodeText}}
			</view>
		</view>
		<view class="loginbtn">
			登录
		</view>
		<view class="switch" @tap='switchs=!switchs'>
			{{switchs?'切换手机验证码登录':'切换密码登录'}}
		</view>
		<view class="switch" @tap='goregister' style="left:55%" v-if="switchs">
			没有账号,请先注册
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				userdata: {
					phone: '13645678913',
					password: '123456'
				},
				getCodeText: '获取验证码', //获取验证码的文字
				getCodeBtnColor: "#4C7BC9", //获取验证码的color
				getCodeisWaiting: false, //判断是否在倒计时中
				switchs: false, //切换验证码 密码登录
			};
		},
		//获取到传值
		onLoad(options) {
			this.switchs = options.switchs
		},
		methods: {
			//跳转注册页
			goregister() {
				uni.navigateTo({
					url: '/pages/register/register'
				})
			},
			//点击获取验证码
			getCode() {
				uni.hideKeyboard() //隐藏已经显示的软键盘，如果软键盘没有显示则不做任何操作。
				if (this.getCodeisWaiting) { //是否在倒计时中
					return;
				}
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))) { //校验手机号码是否有误
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
					return false;
				}
				this.getCodeText = "发送中..." //发送验证码
				this.getCodeisWaiting = true;
				this.getCodeBtnColor = "rgba(138,139,133,1)" //追加样式，修改颜色
				//示例用定时器模拟请求效果
				//setTimeout(()用于在指定的毫秒数后调用函数或计算表达式
				setTimeout(() => {
					uni.showToast({
						title: '验证码已发送',
						icon: "none"
					}); //弹出提示框
					// this.code = '1234'; //发送验证码，进行填入	示例默认1234，生产中请删除这一句。
					this.setTimer(); //调用定时器方法
				}, 1000)
			},
			//获取验证码的倒计时 setTimer： 需要每隔一段时间执行一件事的的时候就需要使用SetTimer函数
			setTimer() {
				let holdTime = 60; //定义变量并赋值
				this.getCodeText = "重新获取(60)"
				//setInterval（）是一个实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。
				//setInterval方法会不停地调用函数，直到 clearInterval被调用或窗口被关闭。
				this.Timer = setInterval(() => {
					if (holdTime <= 0) {
						this.getCodeisWaiting = false;
						this.getCodeBtnColor = "#4C7BC9";
						this.getCodeText = "获取验证码"
						clearInterval(this.Timer); //清除该函数
						return; //返回前面
					}
					this.getCodeText = "重新获取(" + holdTime + ")"
					holdTime--;
				}, 1000)
			},
			doReg() {
				// uni.hideKeyboard() //隐藏已经显示的软键盘，如果软键盘没有显示则不做任何操作。
				// //模板示例部分验证规则
				// if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))) { //校验手机号码
				// 	uni.showToast({
				// 		title: '请填写正确手机号码',
				// 		icon: "none"
				// 	});
				// 	return false;
				// }
				// //示例验证码，实际使用中应为请求服务器比对验证码是否正确。
				// if (this.code != 1234) {
				// 	uni.showToast({
				// 		title: '验证码不正确',
				// 		icon: "none"
				// 	});
				// 	return false;
				// }
				// uni.showLoading({
				// 	title: '提交中...'
				// })
				// //模板示例把用户注册信息储存在本地，实际使用中请替换为上传服务器。
				// setTimeout(() => {
				// 	uni.getStorage({
				// 		key: 'UserList',
				// 		success: (res) => {
				// 			//增加记录，密码md5
				// 			res.data.push({
				// 				username: this.phoneNumber,
				// 				passwd: md5(this.passwd)
				// 			})
				// 			uni.setStorage({
				// 				key: 'UserList',
				// 				data: res.data,
				// 				success: function() {
				// 					uni.hideLoading()
				// 					uni.showToast({
				// 						title: '注册成功',
				// 						icon: "success"
				// 					});
				// 					setTimeout(function() {
				// 						uni.navigateBack();
				// 					}, 1000)
				// 				}
				// 			});
				// 		},
				// 		fail: (e) => {
				// 			uni.hideLoading()
				// 			console.log('error');
				// 			//新建UserList
				// 			uni.setStorage({
				// 				key: 'UserList',
				// 				data: [{
				// 					username: this.phoneNumber,
				// 					passwd: md5(this.passwd)
				// 				}],
				// 				success: function() {
				// 					uni.hideLoading()
				// 					uni.showToast({
				// 						title: '注册成功',
				// 						icon: "success"
				// 					});
				// 					setTimeout(function() {
				// 						uni.navigateBack();
				// 					}, 1000)
				// 				},
				// 				fail: function(e) {
				// 					console.log('set error:' + JSON.stringify(e));
				// 				}
				// 			});
				// 		}
				// 	});
				// }, 1000)
			},
			toLogin() {
				// uni.hideKeyboard() //隐藏已经显示的软键盘，如果软键盘没有显示则不做任何操作。
				// uni.redirectTo({
				// 	url: 'login'
				// }); //跳转到登录页
				// uni.navigateBack(); //关闭当前页面，返回上一页面
			}


		},
	}
</script>

<style lang="scss">
	.app {
		background-color: #F4F5F7;
		position: relative;
		height: 100vh;
		width: 100%;
		font-family: DengXian;
		color: #C3C1C1;
		font-weight: 400;

		.switch {
			text-align: center;
			height: 100rpx;
			color: #46ABD7;
			position: absolute;
			top: 67%;
			left: 10%;
		}

		.loginbtn {
			width: 80%;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
			background: #4C7BC9;
			border-radius: 51rpx;
			font-size: 41rpx;
			color: #FFFFFF;
			position: absolute;
			top: 57%;
			left: 10%;
		}

		.loginphone {
			background-color: #fff;
			width: 80%;
			height: 162rpx;
			position: absolute;
			left: 10%;
			top: 23%;

			input {
				font-size: 45rpx;
				color: #000000;
			}

			::v-deep .uni-input-placeholder {
				padding-left: 40rpx;
				font-size: 41rpx;
				font-weight: 400;
				color: #C3C1C1;
			}

			.phone {
				padding-left: 40rpx;
				height: 100%;
				box-shadow: 0px 9px 31px 9px rgba(0, 0, 0, 0.03);
			}
		}

		.logincode {
			position: absolute;
			left: 10%;

			.obtaincode {
				text-align: center;
				font-size: 37rpx;
				color: #4C7BC9;
				line-height: 162rpx;
				position: absolute;
				left: 65%;
				top: 0%;
			}

			::v-deep .u-input__input {
				padding-left: 20rpx;
				color: #000000;
				font-size: 42rpx;
				font-weight: 400;
				height: 100%;
			}

		}

		.title {
			height: 50rpx;
			font-size: 52rpx;
			font-weight: bold;
			color: #000000;
			line-height: 44rpx;
			position: absolute;
			top: 13%;
			left: 13%;
		}
	}
</style>