uniapp-shikongwang/pages/login/accountLogin.vue

<template>
	<view>
		<view class="lf-flex-column lf-row-center logo">
			<image ></image>
		</view>
		<view class="lf-row-between inpu-box">
			<u-icon name="phone" size="50"></u-icon>
			<input maxlength="11" v-model="phoneNum" placeholder="请输入手机号" />
		</view>
		<view class="lf-row-between verif-code" v-if="isCodeLogin">
			<view class="lf-row-between code-input">
				<u-icon name="lock" size="50" color="#999999"></u-icon>
				<input maxlength="5" v-model="codeNum" placeholder="验证码" />
			</view>
			<button class="code-btn" :style="{'background-color': isGetCode ? '#FE9903' : '#999999'}" @click="getCode">
				{{ isGetCode ? '获取验证码' : codeTimeNum +'s后重新获取' }}
			</button>
		</view>
		<view class="lf-row-between inpu-box lf-m-t-30" v-else>
			<u-icon name="lock" size="50"></u-icon>
			<input maxlength="11" v-model="password" :password="true" placeholder="请输入密码" />
		</view>
		<view @click="switchLoginType" class="login-type">{{ isCodeLogin ? '使用密码登录' : '使用验证码登录' }}</view>
		<button class="login-btn" @click="login">登录</button>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				phoneNum: '',
				codeNum: '',
				password: '',
				isGetCode: true,
				isCodeLogin: true,
				codeTimeNum: 10,
				codeTime: null
			}
		},
		onLoad(){
			
		},
		onUnload(){
			if(this.codeTime){
				clearInterval(this.codeTime);
				this.codeTime = null;
			}
		},
		methods: {
			// 切换账号和验证码登录
			switchLoginType(){
				this.codeNum = '';
				this.password = '';
				this.isCodeLogin = !this.isCodeLogin;
			},
			// 获取验证码
			getCode(){
				if(this.isGetCode){
					console.log("此处请求")
				}
				if(this.codeTimeNum == 10){
					this.isGetCode = false;
					if(this.codeTime){
						clearInterval(this.codeTime);
						this.codeTime = null;
						this.codeTimeNum = 10;
					}
					this.codeTime = setInterval(() => {
						this.codeTimeNum = this.codeTimeNum - 1;
						if(this.codeTimeNum < 0){
							clearInterval(this.codeTime);
							this.codeTime = null;
							this.codeTimeNum = 10;
							this.isGetCode = true;
						}
					}, 1000);
				}
			},
			// 登录
			login(){
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2];
				
				// prevPage.$vm.isLogin = true; // 上一个页面登录成功
				// this.$toBack(); // 登录成功
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.logo{
		width: 100%;
		height: 220rpx;
		image{
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
			background-color: #EEEEEE;
		}
	}
	.inpu-box{
		width: 686rpx;
		height: 88rpx;
		border: 2rpx solid #FE9903;
		border-radius: 10rpx;
		color: #FE9903;
		box-sizing: border-box;
		padding: 0 20rpx;
		margin: 0 auto;
		margin-top: 50rpx;
		input{
			width: 570rpx;
			height: 66rpx;
			font-size: 32rpx;
			display: flex;
			align-items: center;
			padding: 0 20rpx;
		}
	}
	.verif-code{
		width: 686rpx;
		height: 88rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		.code-input{
			width: 438rpx;
			height: 88rpx;
			border: 2rpx solid #999999;
			border-radius: 10rpx;
			box-sizing: border-box;
			padding: 0 20rpx;
			input{
				width: 344rpx;
				height: 66rpx;
				padding: 0 20rpx;
				font-size: 32rpx;
			}
		}
		.code-btn{
			margin: 0;
			width: 228rpx;
			height: 88rpx;
			border-radius: 10rpx;
			color: #FFFFFF;
			font-size: 28rpx;
			line-height: 88rpx;
		}
	}
	.login-type{
		color: #FE9903;
		text-align: center;
		margin-top: 40rpx;
	}
	.login-btn{
		width: 686rpx;
		height: 88rpx;
		background-color: #FE9903;
		color: #FFFFFF;
		line-height: 88rpx;
		border-radius: 42rpx;
		margin-top: 100rpx;
	}
</style>