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">
			<view class="form_input_box">
				<input type="text" class="phone_number" placeholder="请输入你的电话号码"/>
			</view>
			<view class="error_tip" v-if="isPhoneError">*该手机号不存在</view>
		</view>
		<!-- 验证码输入 -->
		<view class="captcha_box register_form_item">
			<view class="form_input_box captcha_input_box">
				<input class="captcha" name="captcha" type="text" placeholder="请输入你的验证码"/>
				<button class="captcha_button" @click="sendCaptchaEvent" 
					:style="{color:captchaButtonColor, backgroundColor:captchaButtonBackgroundColor}">
					{{captchaButtonText}}
				</button>
			</view>
			<view class="error_tip" v-if="isCaptchaError">*验证码错误</view>
		</view>
		<!-- 密码输入 -->
		<view class="passage_box register_form_item">
			<view class="form_input_box passage_input_box">
				<input type="text" class="passage" :password="isOpened_1" placeholder="请输入你的密码"/>
				<image @click="openEyesEvent_1" class="eyes" :src="eyesStateIcon_1"></image>
			</view>
			<!-- <view class="error_tip" v-if="isPassageError">*密码错误</view> -->
		</view>
		<!-- 确认密码输入 -->
		<view class="passage_box register_form_item">
			<view class="form_input_box passage_input_box">
				<input type="text" class="passage" :password="isOpened_2" placeholder="请再次确认密码"/>
				<image @click="openEyesEvent_2" class="eyes" :src="eyesStateIcon_2"></image>
			</view>
			<view class="error_tip" v-if="isPassageSameError">*两次密码不相同</view>
		</view>
		<!-- 注册按钮 -->
		<view class="register_button_box register_form_item">
			<button class="register_button" @click="registerEvent">注册</button>
		</view>
	</form>
	<!-- 成功弹窗 -->
	<my-pop-up 
		class="register_tip"
		@onClick="onOpenUpClick" 
		@onClose="onClosePopUPClick"
		:is-opened="isOpenPopUp"  
		:title="title" 
		:content="content"
	></my-pop-up>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';

const isCaptchaError = ref(false);
const isPhoneError = ref(false);
const isPassageSameError = ref(false);

const title = '成功';	//弹窗标题
const content = '注册成功'; //弹窗内容
const isOpenPopUp = ref(false);//是否显示弹窗
	
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(){
	//
	isOpenPopUp.value = true;	//显示弹窗
}
function onOpenUpClick(){
	//TODO:跳转到登录界面
	uni.navigateTo({
		url: '/pages/login/account_login/account_login',
		animationType: 'pop-in',	//动画，但好像没作用
		animationDuration: 200
	});
}
function onClosePopUPClick(){
	//TODO:关闭弹窗
	isOpenPopUp.value = false;
}

</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: auto;
					margin-bottom: 5%;
					.form_input_box{
						padding-left: 3%;
						padding-right: 3%;
						background-color: #D5E9FF;
						border-radius: 12px;
					}
					.error_tip{
						margin-top: 0.6vh;
						padding-left: 3%;
						font-size: 0.8rem;
						color: #FF1E1E;
					}
				}
				//手机号盒子
				.phone_number_box{
					display: flex;
					flex-direction: column;
						.phone_number{
							height: 5.5vh;
							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%;
							background-color: #D5E9FF;
							font-size: 0.8rem;
						}
				}
				// 验证码盒子
				.captcha_box{
					display: flex;
					flex-direction: column;
					.captcha_input_box{
						display: flex;
						align-items: center;
						padding-left: 3%;
						background-color: #D5E9FF;
						border-radius: 12px;
						position: relative;
						.captcha{
							height: 5.5vh;
							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;
					flex-direction: column;
					.passage_input_box{
						display: flex;
						align-items: center;
						background-color: #D5E9FF;
						border-radius: 12px;
						position: relative;
						.passage{
							height: 5.5vh;
							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: 13%;
						}
					}
				}
				//注册按钮
				.register_button{
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: 8%;
					height: 5.5vh;
					border-radius: 12px;
					background-color: #4A69F7;
					color: #FFFCFC;
					text-align: center;
					font-size: 1.2rem;
				}
		}
	}

</style>