|
|
|
|
@ -19,22 +19,32 @@
|
|
|
|
|
<!-- 表单部分 -->
|
|
|
|
|
<form class="login_form">
|
|
|
|
|
<view class="form_input">
|
|
|
|
|
<!-- 账号输入框 -->
|
|
|
|
|
<view class="account_box login_form_item">
|
|
|
|
|
<input class="account" name="account" type="text" placeholder="请输入你的电话号码"/>
|
|
|
|
|
<view class="form_input_box">
|
|
|
|
|
<input class="account" name="account" type="text" placeholder="请输入你的电话号码"/>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="error_tip" v-if="isPhoneError">*该手机号未注册</view>
|
|
|
|
|
</view>
|
|
|
|
|
<!-- 密码登录 -->
|
|
|
|
|
<!-- 密码输入框 -->
|
|
|
|
|
<view class="passage_box login_form_item" v-if="isPassagePage">
|
|
|
|
|
<input class="passage" name="passage" :password="isOpened" type="text" placeholder="请输入你的密码"/>
|
|
|
|
|
<image @click="openEyesEvent" class="eyes" :src="eyesStateIcon"></image>
|
|
|
|
|
<view class="form_input_box passage_input_box">
|
|
|
|
|
<input class="passage" name="passage" :password="isOpened" type="text" placeholder="请输入你的密码"/>
|
|
|
|
|
<image @click="openEyesEvent" class="eyes" :src="eyesStateIcon"></image>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="error_tip" v-if="isPassageError">*密码错误</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="captcha_box login_form_item" v-else>
|
|
|
|
|
<input class="captcha" name="captcha" type="text" placeholder="请输入你的验证码"/>
|
|
|
|
|
<button class="captcha_button" @click="sendCaptchaEvent"
|
|
|
|
|
:style="{color:captchaButtonColor, backgroundColor:captchaButtonBackgroundColor}">
|
|
|
|
|
{{captchaButtonText}}
|
|
|
|
|
</button>
|
|
|
|
|
<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="forget_passage">忘了密码？</view>
|
|
|
|
|
<view class="forget_passage" @click="forgetPassageClick">忘了密码？</view>
|
|
|
|
|
<view class="button_box login_form_item">
|
|
|
|
|
<button name="submit_button" class="login_button" @click="login">登录</button>
|
|
|
|
|
</view>
|
|
|
|
|
@ -72,6 +82,10 @@ const captchaWordsBottomBorder = computed(() => isPassagePage.value? "none":"0.1
|
|
|
|
|
const isOpened = ref(true); //密码是否明文显示的标志
|
|
|
|
|
const eyesStateIcon = ref("../../../static/login/account_login/login_part/closedeyes.png");
|
|
|
|
|
|
|
|
|
|
const isPhoneError = ref(true);
|
|
|
|
|
const isPassageError = ref(true);
|
|
|
|
|
const isCaptchaError = ref(true);
|
|
|
|
|
|
|
|
|
|
//进入验证码登录页面
|
|
|
|
|
function toCaptchaEvent(){
|
|
|
|
|
isPassagePage.value = false;
|
|
|
|
|
@ -100,7 +114,7 @@ function sendCaptchaEvent(){
|
|
|
|
|
function login(){
|
|
|
|
|
//TODO:登录操作向后端发送验证码的逻辑
|
|
|
|
|
uni.navigateTo({
|
|
|
|
|
url: '/pages/homepages/main/main'//登录成功后跳转的页面
|
|
|
|
|
url: '/pages/information/sex/sex'//登录成功后跳转的页面
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
//进入密码登录页面
|
|
|
|
|
@ -122,6 +136,15 @@ function openEyesEvent()
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function forgetPassageClick(){
|
|
|
|
|
//TODO:进入到忘记密码界面
|
|
|
|
|
uni.navigateTo({
|
|
|
|
|
url:'/pages/login/forget_password/forget_password',
|
|
|
|
|
animationType: 'pop-in',
|
|
|
|
|
animationDuration: 200
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
@ -150,7 +173,6 @@ function openEyesEvent()
|
|
|
|
|
width: 76%;
|
|
|
|
|
height: 30%;
|
|
|
|
|
top: 41%;
|
|
|
|
|
// left: calc(50% - 314px/2 + 3px);
|
|
|
|
|
.login_ways{
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 58%;
|
|
|
|
|
@ -164,7 +186,7 @@ function openEyesEvent()
|
|
|
|
|
font-family: 'PingFang SC';
|
|
|
|
|
font-style: normal;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
font-size: 0.9rem;
|
|
|
|
|
font-size: 1rem;
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #000364;
|
|
|
|
|
}
|
|
|
|
|
@ -175,7 +197,7 @@ function openEyesEvent()
|
|
|
|
|
font-family: 'PingFang SC';
|
|
|
|
|
font-style: normal;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
font-size: 0.9rem;
|
|
|
|
|
font-size: 1rem;
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #000364;
|
|
|
|
|
}
|
|
|
|
|
@ -190,71 +212,96 @@ function openEyesEvent()
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
.login_form_item{
|
|
|
|
|
height: 25%;
|
|
|
|
|
height: auto;
|
|
|
|
|
margin-bottom: 5%;
|
|
|
|
|
}
|
|
|
|
|
.account_box{
|
|
|
|
|
padding-left: 3%;
|
|
|
|
|
background-color: #D5E9FF;
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
.account{
|
|
|
|
|
height: 100%;
|
|
|
|
|
padding-left: 11%;
|
|
|
|
|
background-image: url("../../../static/login/account_login/login_part/phone_icon.png");
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-size: 0.8rem;
|
|
|
|
|
background-position: 3% 50%;
|
|
|
|
|
.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;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.account_box{
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
// .account_input_box{
|
|
|
|
|
// padding-left: 3%;
|
|
|
|
|
// padding-right: 3%;
|
|
|
|
|
// background-color: #D5E9FF;
|
|
|
|
|
// border-radius: 12px;
|
|
|
|
|
.account{
|
|
|
|
|
height: 5.5vh;
|
|
|
|
|
padding-left: 11%;
|
|
|
|
|
background-image: url("../../../static/login/account_login/login_part/phone_icon.png");
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-size: 0.8rem;
|
|
|
|
|
background-position: 3% 50%;
|
|
|
|
|
background-color: #D5E9FF;
|
|
|
|
|
font-size: 0.8rem;
|
|
|
|
|
}
|
|
|
|
|
// }
|
|
|
|
|
}
|
|
|
|
|
.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/account_login/login_part/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%;
|
|
|
|
|
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/account_login/login_part/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%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.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/account_login/login_part/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%;
|
|
|
|
|
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/account_login/login_part/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%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.forget_passage{
|
|
|
|
|
@ -272,7 +319,7 @@ function openEyesEvent()
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
height: 100%;
|
|
|
|
|
height: 5.5vh;
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
background-color: #4A69F7;
|
|
|
|
|
color: #FFFCFC;
|
|
|
|
|
|
