menber-center/pages/login/login.vue

<template>
	<view class="app-login-page">
		<u-toast ref="uToast" />
		<view class="app-login">
			<view class="app-icon mb-30">
				<image src="/static/images/login-icon.png" mode="aspectFit" style="height: 40px;"></image>
			</view>
			<view class="app-title mb-30">
				欢迎使用会员中心系统小程序
			</view>
			<view class="mb-30 login-form">
				<view class="loginType">
					<text :class="[loginType=='phone'? 'loginType-text-active': 'loginType-text']"
						@click="loginType = 'phone'">手机登录</text>
					<text :class="[loginType=='username'? 'loginType-text-active': 'loginType-text']"
						@click="loginType = 'username'">账号登录</text>
				</view>
				<view class="phone-form" v-if="loginType=='phone'">、
					<view class="form-item">
						<u-input height="80" placeholder="请输入手机号" border-color="#b1b1b1" v-model="phoneForm.shoujihao"
							:border="true" class="form-item-input" type="number"/>
					</view>
					<view class="form-item">
						<u-input height="80" placeholder="请输入验证码" border-color="#b1b1b1" v-model="phoneForm.yanzhengma"
							:border="true" class="form-item-input" />
						<text class="form-item-text" v-if="!isCounting" @click="requestVerificationCode">
							发送验证码</text>
						<text class="form-item-text" v-else>
							{{ `发送验证码(${countdown})` }}</text>
					</view>
					<view class="form-button" @click="phoneLoginHandle">
						立即登录
					</view>
				</view>
				<view class="phone-form" v-if="loginType=='username'">、
					<view class="form-item">
						<u-input height="80" placeholder="请输入账号" border-color="#b1b1b1" v-model="phoneForm.shoujihao"
							:border="true" class="form-item-input" />
					</view>
					<view class="form-item">
						<u-input height="80" placeholder="请输入密码" border-color="#b1b1b1" v-model="phoneForm.yanzhengma"
							:border="true" class="form-item-input" />
					</view>
					<view class="form-button" @click="usenameLoginHandle">
						立即登录
					</view>
				</view>
				<view class="risgiter-forget">
					<view @click="toPage('/pages/forget/forget')">忘记密码？</view>
					<view @click="toPage('/pages/register/register')">无账号？<text class="text-red">立即注册</text></view>
				</view>
			</view>
			<view class="app-user-book  mb-30">
				<u-checkbox-group style="display: flex;justify-content: center;">
					<u-checkbox v-model="userBook" name="yes" shape="circle">我已阅读&#x300A;用户手册&#x300B;及隐私政策</u-checkbox>
				</u-checkbox-group>
			</view>
			<u-divider bg-color="transparent" margin-bottom="30" color="#010101" border-color="#010101"
				half-width="200">使用第三方账号登录</u-divider>
			<view class="app-icon mb-30">
				<image src="/static/images/weixin.png" mode="aspectFit" style="height: 40px;"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				countdown: 60, // 倒计时初始值
				isCounting: false, // 是否正在倒计时
				timer: null, // 定义定时器
				loginType: "phone",
				phoneForm: {
					shoujihao: "",
					yanzhengma: ""
				},
				usernameForm: {
					zhanghao: 'zhangsan',
					mima: "12345678"
				},
				userBook: false,
			}
		},
		methods: {
			// 手机登录
			phoneLoginHandle() {
				const regex = /^1[3-9]\d{9}$/;
				if (!regex.test(this.phoneForm.shoujihao)) {
					this.showToast("请输入正确的手机号")
					return;
				}
				if (!this.phoneForm.yanzhengma) {
					this.showToast("请输入验证码")
					return;
				}
				console.log(this.phoneForm)
				// this.showToast("密码错误")
			},
			// 账号登录
			usenameLoginHandle(){
				if(!this.usernameForm.zhanghao){
					this.showToast("请输入账号")
					return;
				}
				if(!this.usernameForm.mima){
					this.showToast("请输入密码")
					return;
				}
				console.log(this.usernameForm)
			},
			toPage(url){
				console.log(url)
				uni.navigateTo({
					url:url
				})
			},
			// 提示
			showToast(msg, type) {
				this.$refs.uToast.show({
					title: msg,
					type: type ? type : "error",
					position: "top"
				})
			},
			// 点击获取验证码
			requestVerificationCode() {
				if (!this.isCounting) {
					console.log(2)
					// 发起请求验证码的操作
					console.log("请求验证码...");
					// 开始倒计时
					this.isCounting = true;
					this.startCountdown();
				}
			},
			// 开始倒计时
			startCountdown() {
				// 每秒减少倒计时
				this.timer = setInterval(() => {
					this.countdown--;
					if (this.countdown <= 0) {
						clearInterval(this.timer);
						this.countdown = 60; // 重置倒计时
						this.isCounting = false; // 停止倒计时
					}
				}, 1000);
			},
		},
		// 在组件销毁时清理定时器
		beforeDestroy() {
			// 在组件销毁时清理定时器
			if (this.timer) {
				clearInterval(this.timer);
			}
		},
	}
</script>

<style lang="scss" scoped>
	.app-login-page {
		background-color: #f7f7f7;
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.app-login {
		width: 90%;
	}

	.app-icon {
		text-align: center;
	}

	.app-title {
		text-align: center;
		font-size: 44rpx;
		letter-spacing: 2px;
		font-weight: 700;
	}

	.mb-30 {
		margin-bottom: 30rpx;
	}

	.text-red {
		color: #df0505;
	}

	.login-form {
		background-color: #ffffff;
		width: 100%;
		padding: 50rpx 40rpx;
		border-radius: 15rpx;
		box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
		border: 1px solid #036df6;
	}

	.loginType {
		color: #000000;
		margin-bottom: 15rpx;

		.loginType-text {
			font-size: 30rpx;
			margin-right: 30rpx;
		}

		.loginType-text-active {
			font-size: 40rpx;
			margin-right: 30rpx;
		}
	}

	.form-item {
		display: flex;
		align-items: center;
		margin-bottom: 60rpx;

		.form-item-input {
			width: 100%;
			background-color: #f7f7f7 !important;
		}

		.form-item-text {
			width: 240rpx;
			flex: 0 0 auto;
			text-align: center;
			color: #000000;
			// margin: 0 20px;
		}
	}

	.form-button {
		background: linear-gradient(90deg, #006af5, #21b0fc);
		border-radius: 20rpx;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		margin-bottom: 50rpx;
	}

	.risgiter-forget {
		font-size: 30rpx;
		display: flex;
		justify-content: space-between;
	}
</style>