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 v-model="phone_number" 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 v-model="code" 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 v-model="passagenum" 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 v-model="passagesamenum" 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"
		:isOpened="isOpenPopUp"
		:title="title"
		:content="content"
	></my_pop_up>
  </view>
</template>

<script setup>
/*-----------------------------------------------------------外部导入-------------------------------------------*/
import { ref, computed } from 'vue';


/*-----------------------------------------------------------变量----------------------------------------------*/
/*导入的全局变量*/
const app = getApp();

/*手机号框相关变量*/
const phone_number = ref("");	//手机号
const isPhoneError = ref(false);//手机号是否错误
const code=ref("");
/*验证码框相关变量*/
const isCaptchaError = 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 passagenum = ref();	//密码
const passagesamenum = ref();	//第二次输入的密码
const isPassageSameError = ref(false);//密码是否相同
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");

/*注册的相关变量*/
const isRegisterSuccess = ref(false);	//是否注册成功的标志

/*弹窗相关变量*/
const title = computed(()=>isRegisterSuccess.value? '成功':'错误');	//弹窗标题
const content = computed(()=>isRegisterSuccess.value? '注册成功':'注册失败'); //弹窗内容
const isOpenPopUp = ref(false);//是否显示弹窗

/*正则表达式相关变量*/
const pMatch = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/

/*-----------------------------------------------------------函数----------------------------------------------*/

/*-----验证码相关函数-----*/

function checkPhone(){
	var flag=true
	//验证手机号
	if (phone_number.value===undefined){
		flag = false
		uni.showToast({	//弹出提示框
			title: '手机号不能为空',
			icon:"error",
		});
	}else if (!pMatch.test(phone_number.value)){
		flag = false
		// isPhoneError.value = true
		uni.showToast({	//弹出提示框
			title: '手机号错误',
			icon:"error",
		});
	} else {
		isPhoneError.value = false
	}
	return flag
}


function sendCaptchaEvent(){
  // 校验手机号是否是中国手机号
  const isChinaPhone = /^1[3-9]\d{9}$/.test(phone_number.value);
  if (!isChinaPhone) {
    uni.showToast({
      title: '请输入有效的中国大陆手机号',
      icon: "none"
    });
    return; // 如果手机号无效，停止执行
  }
  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)
  }
  //这里向后端执行请求
  const app = getApp();
  // 向后端发送请求
  uni.request({
    url: app.globalData.fit_journey_login_address + '/phone_code_register/getPhoneCode',
    method: 'POST',
    header: {
      'content-type': 'application/x-www-form-urlencoded',
    },
    data: {
      phone:String(phone_number.value)
    },
    success: (res) => {
      uni.showToast({
        title: '发送验证码成功，请注意查收~',
        icon: "none"
      });

    },
    error: (res) => {
      console.log("请求失败！请求数据是", res);
    }
  });
}

/*-----密码码相关函数-----*/

function openEyesEvent_1(){
	//TODO: 判断第一个密码是否要明文显示
	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(){
	//TODO: 判断第二个密码是否要明文显示
	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 checkSubmit(){
	var flag = true
	//验证手机号
	if (phone_number.value===undefined){
		flag = false
		uni.showToast({	//弹出提示框
			title: '手机号不能为空',
			icon:"error",
		});
	}else if (!pMatch.test(phone_number.value)){
		flag = false
		// isPhoneError.value = true
		uni.showToast({	//弹出提示框
			title: '手机号错误',
			icon:"error",
		});
	} else {
		isPhoneError.value = false
	}
	//验证密码是否为空
	if (passagenum.value===undefined){
		flag = false
		uni.showToast({	//弹出提示框
			title: '密码不能为空',
			icon:"error",
		});
	}else if (passagesamenum.value===undefined){
		//验证第二次密码是否为空
		flag = false
		uni.showToast({	//弹出提示框
			title: '请再输入密码',
			icon:"error",
		});
	}else if(passagenum.value.length < 6 || passagenum.value.length > 10) {
    flag = false;
    uni.showToast({
      title: '密码长度必须为6到10位',
      icon: "error",
    });
  } else if (passagenum.value!==passagesamenum.value){
		//验证两次密码是否相等
		flag = false
		// isPassageSameError.value = true
		uni.showToast({	//弹出提示框
			title: '两次密码不相等',
			icon:"error",
		});
	} else{
		isPassageSameError.value = false
	}
	//验证验证码
	if (code.value===undefined){
		flag = false
		// isCaptchaError.value = true
		uni.showToast({	//弹出提示框
			title: '验证码为空',
			icon:"error",
		});
	} else{
		isCaptchaError.value = false
	}
	return flag
}





function registerEvent(){
  console.log(code.value);
  console.log(phone_number.value);
  console.log(passagenum.value);
	if (checkSubmit()){
		//手机号注册网络请求
    console.log("服务器地址是："+app.globalData.fit_journey_login_address);
		uni.request({
      url:app.globalData.fit_journey_login_address+'/phone_code_register/registerByPhone',
      header: {
        'content-type': 'application/x-www-form-urlencoded',
      },
			method:'POST',
			data:{
				code:code.value,
				phone:phone_number.value,
        password:passagenum.value
			},
			success:(res)=>{
        if(res.data.code === 200) {
          isRegisterSuccess.value = true
          isOpenPopUp.value = true
        }else if(res.data.code===400) {
          uni.showToast({
            title: '手机号已经被注册了~',
            icon: "error",
          });
        }else if(res.data.code===401) {
          uni.showToast({
            title: '验证码错误~',
            icon: "error",
          });
        }else if(res.data.code===500) {
          uni.showToast({
            title: '验证码过期~',
            icon: "error",
          });
          }
      },
      fail:(err)=>{
        isRegisterSuccess.value = false
        isOpenPopUp.value = true	//显示弹窗
      }
    })
  }
}

/*-----弹窗相关函数-----*/

function onOpenUpClick(){
	uni.navigateTo({
		url: '/pages/login/account_login/account_login',
		animationType: 'pop-in',
		animationDuration: 200
	});
}
function onClosePopUPClick(){
	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>