forked from fzu102201435/front
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
470 lines
13 KiB
470 lines
13 KiB
<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="phonenum" 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="captchanum" 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 phonenum = ref(); //手机号
|
|
const isPhoneError = ref(false);//手机号是否错误
|
|
|
|
/*验证码框相关变量*/
|
|
const captchanum = 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 (phonenum.value==undefined){
|
|
flag = false
|
|
uni.showToast({ //弹出提示框
|
|
title: '手机号不能为空',
|
|
icon:"error",
|
|
});
|
|
}else if (!pMatch.test(phonenum.value)){
|
|
flag = false
|
|
// isPhoneError.value = true
|
|
uni.showToast({ //弹出提示框
|
|
title: '手机号错误',
|
|
icon:"error",
|
|
});
|
|
} else {
|
|
isPhoneError.value = false
|
|
}
|
|
return flag
|
|
}
|
|
|
|
function sendCaptchaEvent(){
|
|
//TODO:发送验证码事件
|
|
console.log("点击发送验证码按钮");
|
|
//检查是否手机号正确
|
|
if (checkPhone()){
|
|
//倒计时，并防止重复点击
|
|
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)
|
|
};
|
|
//发送验证码的网络请求
|
|
uni.request({
|
|
// url:app.globalData.fit_journey_login_address+'/phone_code_register/getPhoneCode',
|
|
url:'http://47.122.61.54:8084/phone_code_register/getPhoneCode',
|
|
method:'POST',
|
|
header:{
|
|
'Content-Type':'application/x-www-form-urlencoded',
|
|
},
|
|
data:{
|
|
phone:phonenum.value
|
|
},
|
|
success:(res)=>{
|
|
console.log('发送验证码请求成功：'+res.data)
|
|
},
|
|
fail:(err)=>{
|
|
console.log('发送验证码请求失败')
|
|
console.log(err)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
/*-----密码码相关函数-----*/
|
|
|
|
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(){
|
|
//TODO:检查提交是否正确
|
|
var flag = true
|
|
|
|
//验证手机号
|
|
if (phonenum.value==undefined){
|
|
flag = false
|
|
uni.showToast({ //弹出提示框
|
|
title: '手机号不能为空',
|
|
icon:"error",
|
|
});
|
|
}else if (!pMatch.test(phonenum.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!=passagesamenum.value){
|
|
//验证两次密码是否相等
|
|
flag = false
|
|
// isPassageSameError.value = true
|
|
uni.showToast({ //弹出提示框
|
|
title: '两次密码不相等',
|
|
icon:"error",
|
|
});
|
|
} else{
|
|
isPassageSameError.value = false
|
|
}
|
|
|
|
//验证验证码
|
|
if (captchanum.value==undefined){
|
|
flag = false
|
|
// isCaptchaError.value = true
|
|
uni.showToast({ //弹出提示框
|
|
title: '验证码为空',
|
|
icon:"error",
|
|
});
|
|
} else{
|
|
isCaptchaError.value = false
|
|
}
|
|
|
|
return flag
|
|
}
|
|
function registerEvent(){
|
|
//TODO:注册按钮点击事件
|
|
//检查提交格式是否正确
|
|
if (checkSubmit()){
|
|
//手机号注册网络请求
|
|
uni.request({
|
|
// url:app.globalData.fit_journey_login_address+'/phone_code_register/registerByPhone',
|
|
url:'http://47.122.61.54:8084/phone_code_register/registerByPhone',
|
|
method:'POST',
|
|
data:{
|
|
code:captchanum.value,
|
|
phone:phonenum.value
|
|
},
|
|
success:(res)=>{
|
|
console.log('注册成功：'+res.data)
|
|
isRegisterSuccess.value = true
|
|
isOpenPopUp.value = true //显示弹窗
|
|
},
|
|
fail:(err)=>{
|
|
console.log('注册失败'+err)
|
|
isRegisterSuccess.value = false
|
|
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>
|