front/pages/login/register/register.vue

<template>
  <view class="register_box">
	<!-- 返回图标 -->
	<navigator url="/pages/login/account_login/account_login">
		<image class="return_image" src="../../../static/login/register/pictures/return_icon.png"></image>
	</navigator>
	<!-- 欢迎文字 -->
	<view class="welcom_words">Hi,欢迎加入</view>
	<!-- 软件名称 -->
	<view class="soft_name">Fit Journey</view>
	<!-- 注册表单 -->
	<form class="register_form">
		<!-- 手机号输入 -->
		<view class="phone_number_box register_form_item">
			<input type="text" class="phone_number" placeholder="请输入你的电话号码"/>
		</view>
		<!-- 验证码输入 -->
		<view class="captcha_box register_form_item">
			<input type="text" class="captcha" placeholder="请输入你的验证码"/>
			<button class="captcha_button" @click="sendCaptchaEvent"
				:style="{color:captchaButtonColor, backgroundColor:captchaButtonBackgroundColor}">
				{{captchaButtonText}}
			</button>
		</view>
		<!-- 密码输入 -->
		<view class="passage_box register_form_item">
			<input type="text" class="passage" :password="isOpened_1" placeholder="请输入你的密码"/>
			<image @click="openEyesEvent_1" class="eyes" :src="eyesStateIcon_1"></image>
		</view>
		<!-- 确认密码输入 -->
		<view class="passage_box register_form_item">
			<input type="text" class="passage" :password="isOpened_2" placeholder="请再次确认密码"/>
			<image @click="openEyesEvent_2" class="eyes" :src="eyesStateIcon_2"></image>
		</view>
		<!-- 注册按钮 -->
		<view class="register_button_box register_form_item">
			<button class="register_button" @click="registerEvent">注册</button>
		</view>
	</form>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
	
const isSendCaptcha = ref(false);	//是否发送了验证码的标志
var codeTime = ref(0);	//验证码的倒计时
const captchaButtonBackgroundColor = computed(() => isSendCaptcha.value ? "#ABCBFF" : "#ffffff"); //验证码按钮的背景颜色
const captchaButtonColor = computed(() => isSendCaptcha.value ? "#ffffff" : "#000364");//验证码按钮的字体颜色
const captchaButtonText = computed(() => isSendCaptcha.value ? (codeTime.value+"s后重新发送"):"发送验证码");

const isOpened_1 = ref(true);	//输入框是否密码显示的标志
const eyesStateIcon_1 = ref("../../../static/login/register/pictures/closedeyes.png");
const isOpened_2 = ref(true);	//输入框是否密码显示的标志
const eyesStateIcon_2 = ref("../../../static/login/register/pictures/closedeyes.png");

//发送验证码事件
function sendCaptchaEvent(){
	console.log("send captcha");
	if (codeTime.value>0){	//说明在倒计时
		uni.showToast({	//弹出提示框
			title: '不能重复获取',
			icon:"none"
		});
	} else{	//说明没有发送，也没倒计时
		codeTime.value = 60;
		isSendCaptcha.value = true;
		var timer = setInterval(()=>{
			codeTime.value--;
			if(codeTime.value<1){
				clearInterval(timer);
				isSendCaptcha.value = false;
				codeTime.value = 0;
			}
		},1000)
	};
}

// 判断密码是否要明文显示
function openEyesEvent_1(){
	if (isOpened_1.value)
	{
		isOpened_1.value = false;
		eyesStateIcon_1.value = "../../../static/login/register/pictures/openedeyes.png";
	}
	else
	{
		isOpened_1.value =true;
		eyesStateIcon_1.value = "../../../static/login/register/pictures/closedeyes.png";
	 }
}
// 判断确认的密码是否要明文显示
function openEyesEvent_2(){
	if (isOpened_2.value)
	{
		isOpened_2.value = false;
		eyesStateIcon_2.value = "../../../static/login/register/pictures/openedeyes.png";
	}
	else
	{
		isOpened_2.value =true;
		eyesStateIcon_2.value = "../../../static/login/register/pictures/closedeyes.png";
	 }
}

//注册按钮点击事件
function registerEvent(){
	//注册成功后跳转到选择性别页面
	uni.navigateTo({
		url: '/pages/login/account_login/account_login',
		animationType: 'pop-in',	//动画，但好像没作用
		animationDuration: 200
	});
}

</script>

<style lang="scss">
	.register_box{
		background-image: url("../../../static/login/register/pictures/background.png");
		background-size: cover;
		background-position: center;
		height: 100vh;
		width: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
		object-fit: contain;
		// 返回图标
		.return_image{
			position: absolute;
			left: 16.5%;
			right: 80.1%;
			top: 8.62%;
			bottom: 89.09%;
			width: 0.8rem;
			height: auto;
			object-fit: contain;
		}
		//欢迎文字
		.welcom_words{
			position: absolute;
			left: 12.4%;
			top: 30.8%;
			font-family: 'PingFang SC';
			font-size: 1.4rem;
			color: #000364;
		}
		//软件名称
		.soft_name{
			position: absolute;
			left: 12.4%;
			top: 34.5%;
			font-family: 'PingFang SC';
			font-size: 1rem;
			color: #000364;
		}
		//注册表单
		.register_form{
			position: absolute;
			width: 74.5%;
			height: 33.6%;
			top: 40%;
				//每个表单项
				.register_form_item{
					height: 15.6%;
					margin-bottom: 5%;
				}
				//手机号盒子
				.phone_number_box{
					padding-left: 3%;
					background-color: #D5E9FF;
					border-radius: 12px;
					.phone_number{
						height: 100%;
						padding-left: 11%;
						background-image: url("../../../static/login/register/pictures/phone_icon.png");
						background-repeat: no-repeat;
						background-size: 0.8rem;
						background-position: 3% 50%;
						font-size: 0.8rem;
					}
				}
				// 验证码盒子
				.captcha_box{
					display: flex;
					align-items: center;
					padding-left: 3%;
					background-color: #D5E9FF;
					border-radius: 12px;
					position: relative;
					// 输入框
					.captcha{
						height: 100%;
						padding-left: 11%;
						background-image: url("../../../static/login/register/pictures/captcha_icon.png");
						background-repeat: no-repeat;
						background-size: 0.8rem;
						background-position: 4.5% 50%;
						font-size: 0.8rem;
					}
					// 按钮
					.captcha_button{
						width: 5.5rem;
						height: 1.9rem;
						border-radius: 15px;
						font-size: 0.8rem;
						color: #000364;
						position: absolute;
						right: 5%;
					}
				}
				//密码输入盒子；确认密码盒子
				.passage_box{
					display: flex;
					align-items: center;
					padding-left: 3%;
					background-color: #D5E9FF;
					border-radius: 12px;
					position: relative;
					.passage{
						height: 100%;
						padding-left: 11%;
						background-image: url("../../../static/login/register/pictures/lock_icon.png");
						background-repeat: no-repeat;
						background-size: 0.8rem;
						background-position: 4.7% 50%;
						font-size: 0.8rem;
					}
					.eyes{
						width: 1rem;
						height: 1rem;
						position: absolute;
						right: 9%;
					}
				}
				//注册按钮
				.register_button{
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: 8%;
					height: 100%;
					border-radius: 12px;
					background-color: #4A69F7;
					color: #FFFCFC;
					text-align: center;
					font-size: 1.2rem;
				}
			// }
		}
	}

</style>