|
|
<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 toCaptchaEvent(){
|
|
|
isPassagePage.value = false;
|
|
|
}
|
|
|
//发送验证码事件
|
|
|
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/information/sex/sex',
|
|
|
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>
|
