hotelHomestayWx/pages/login/index.vue

<template>
	<view class="page">
		<view class="bg">
			<view class="title">您好！欢迎使用<br>游嵊泗商家服务平台</view>
		</view>
		<view class="box">
			<view class="login">
				<view class="tabs">
					<view :class="tidx==0?'active':''" @tap="changeTab(0)">账号登录</view>
					<view :class="tidx==1?'active':''" @tap="changeTab(1)">验证码登录</view>
				</view>
				<view class="card" v-if="tidx==0">
					<view class="t_item">
						<text>账号</text>
						<input type="text" placeholder="请输入您的账号" placeholder-style="{color:#999999}" v-model="account" @blur="setAccount" @confirm="setAccount">
					</view>
					<view class="t_item">
						<text>密码</text>
						<input type="password" placeholder="请输入您的密码" placeholder-style="{color:#999999}" v-model="password" @blur="setPassword" @confirm="setPassword">
					</view>
				</view>
				<view class="card" v-if="tidx==1">
					<view class="t_item">
						<text>手机号</text>
						<input type="tel" placeholder="请输入您的手机号" placeholder-style="{color:#999999}" v-model="phone" @blur="setPhone" @confirm="setPhone">
					</view>
					<view class="t_item">
						<text>验证码</text>
						<view class="ti_code">
							<input type="number" placeholder="请输入验证码" placeholder-style="{color:#999999}" v-model="code" @blur="setCode" @confirm="setCode">
							<view class="tic_text">
								<text @tap="sendCode" :class="text=='获取验证码'?'active':''">{{text}}</text>
								<span v-if="text!='获取验证码'">{{time}}S</span>
							</view>
						</view>
					</view>
				</view>
				<view class="forget" @tap="toForgot">忘记密码?</view>
			</view>
			<view class="to_login" @tap="toLogin">登录</view>
			<view class="agreement">
				登录即代表已阅读并同意<span>《用户协议》</span>
			</view>
		</view>
	</view>
</template>

<script>
	var timer;
	export default {
		data() {
			return {
				tidx:0,
				text:'获取验证码',
				time:59,
				account:'',
				password:'',
				phone:'',
				code:''
			}
		},
		methods: {
			changeTab(idx){
				this.tidx = idx;
			},
			setAccount(e){
				this.account = e.target.value;
			},
			setPassword(e){
				this.password = e.target.value;
			},
			setPhone(e){
				this.phone = e.target.value;
			},
			setCode(e){
				this.code = e.target.value;
			},
			sendCode(){
				if(this.text!='获取验证码') return;
				this.text = '重新发送';
				timer = setInterval(()=>{
					this.time--;
					if(this.time==0){
						this.text = '获取验证码';
						this.time = 59;
						clearInterval(timer);
					}
				},1000)
			},
			toForgot(){
				uni.navigateTo({
					url:'/pages/login/forgot'
				})
			},
			toLogin(){
				if(this.tidx==0){
					if(!this.account) return this.$showToast('请输入您的账号');
					if(!this.password) return this.$showToast('请输入您的密码');
				}
				if(this.tidx==1){
					if(!/^1([3589]\d|4[5-9]|6[1-2,4-7]|7[0-8])\d{8}$/.test(this.phone)) return this.$showToast('请输入正确的手机号');
					if(!this.code) return this.$showToast('请输入验证码');
				}
				
				uni.reLaunch({
					url:'/pages/home/index'
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page{
		.bg{
			width: 100%;
			height: 574rpx;
			background: url(https://i.ringzle.com/file/20240106/d96376ae556b4f298abee861105b71b4.png) no-repeat;
			background-size: 100% 100%;
			padding: 237rpx 0 0 40rpx;
			box-sizing: border-box;
			position: relative;
			z-index: 1;
			.title{
				font-size: 40rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				color: #FFFFFF;
				line-height: 72rpx;
			}
		}
		
		.box{
			width: 100%;
			background: #FFFFFF;
			border-radius: 60rpx 60rpx 0rpx 0rpx;
			padding: 85rpx 30rpx 96rpx;
			box-sizing: border-box;
			margin-top: -149rpx;
			position: relative;
			z-index: 2;
			.login{
				width: 100%;
				padding: 0 30rpx;
				box-sizing: border-box;
				.tabs{
					display: flex;
					align-items: center;
					&>view{
						padding-bottom: 16rpx;
						font-size: 40rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 800;
						color: #999999;
						position: relative;
						&.active{
							color: #333333;
							&::after{
								content: '';
								width: 80rpx;
								height: 6rpx;
								background: #1372FF;
								border-radius: 4rpx 4rpx 4rpx 4rpx;
								position: absolute;
								left: 50%;
								margin-left: -40rpx;
								bottom: 0;
							}
						}
						&:last-child{
							margin-left: 60rpx;
						}
					}
				}
				.card{
					padding-top: 20rpx;
					.t_item{
						margin-top: 40rpx;
						display: flex;
						flex-direction: column;
						padding-bottom: 20rpx;
						border-bottom: 1rpx solid #D1D1D1;
						text{
							font-size: 32rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 800;
							color: #333333;
						}
						input{
							border: none;
							font-size: 28rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							color: #333333;
							margin-top: 30rpx;
						}
						.ti_code{
							display: flex;
							align-items: center;
							justify-content: space-between;
							input{
								width: calc(100% - 200rpx);
							}
							.tic_text{
								display: flex;
								align-items: center;
								margin-top: 30rpx;
								text{
									font-size: 28rpx;
									font-family: PingFang SC, PingFang SC;
									font-weight: 400;
									color: #999999;
									&.active{
										color: #1372FF;
									}
								}
								span{
									font-size: 28rpx;
									font-family: PingFang SC, PingFang SC;
									font-weight: 400;
									color: #1372FF;
									margin-left: 10rpx;
								}
							}
						}
					}
				}
			}
			
			.forget{
				width: 100%;
				box-sizing: border-box;
				text-align: right;
				margin-top: 30rpx;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #1372FF;
			}
			
			.to_login{
				width: 100%;
				height: 96rpx;
				background: #1372FF;
				border-radius: 48rpx 48rpx 48rpx 48rpx;
				line-height: 96rpx;
				text-align: center;
				margin-top: 80rpx;
				font-size: 34rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				letter-spacing: 2rpx;
			}
			
			.agreement{
				width: 100%;
				text-align: center;
				margin-top: 303rpx;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #999999;
				span{
					color: #1372FF;
				}
			}
		}
	}
</style>