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.
165 lines
3.6 KiB
165 lines
3.6 KiB
<template>
|
|
<view>
|
|
<view class="lf-flex-column lf-row-center logo">
|
|
<image ></image>
|
|
</view>
|
|
<view class="lf-row-between inpu-box">
|
|
<u-icon name="phone" size="50"></u-icon>
|
|
<input maxlength="11" v-model="phoneNum" placeholder="请输入手机号" />
|
|
</view>
|
|
<view class="lf-row-between verif-code" v-if="isCodeLogin">
|
|
<view class="lf-row-between code-input">
|
|
<u-icon name="lock" size="50" color="#999999"></u-icon>
|
|
<input maxlength="5" v-model="codeNum" placeholder="验证码" />
|
|
</view>
|
|
<button class="code-btn" :style="{'background-color': isGetCode ? '#FE9903' : '#999999'}" @click="getCode">
|
|
{{ isGetCode ? '获取验证码' : codeTimeNum +'s后重新获取' }}
|
|
</button>
|
|
</view>
|
|
<view class="lf-row-between inpu-box lf-m-t-30" v-else>
|
|
<u-icon name="lock" size="50"></u-icon>
|
|
<input maxlength="11" v-model="password" :password="true" placeholder="请输入密码" />
|
|
</view>
|
|
<view @click="switchLoginType" class="login-type">{{ isCodeLogin ? '使用密码登录' : '使用验证码登录' }}</view>
|
|
<button class="login-btn" @click="login">登录</button>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data(){
|
|
return {
|
|
phoneNum: '',
|
|
codeNum: '',
|
|
password: '',
|
|
isGetCode: true,
|
|
isCodeLogin: true,
|
|
codeTimeNum: 10,
|
|
codeTime: null
|
|
}
|
|
},
|
|
onLoad(){
|
|
|
|
},
|
|
onUnload(){
|
|
if(this.codeTime){
|
|
clearInterval(this.codeTime);
|
|
this.codeTime = null;
|
|
}
|
|
},
|
|
methods: {
|
|
// 切换账号和验证码登录
|
|
switchLoginType(){
|
|
this.codeNum = '';
|
|
this.password = '';
|
|
this.isCodeLogin = !this.isCodeLogin;
|
|
},
|
|
// 获取验证码
|
|
getCode(){
|
|
if(this.isGetCode){
|
|
console.log("此处请求")
|
|
}
|
|
if(this.codeTimeNum == 10){
|
|
this.isGetCode = false;
|
|
if(this.codeTime){
|
|
clearInterval(this.codeTime);
|
|
this.codeTime = null;
|
|
this.codeTimeNum = 10;
|
|
}
|
|
this.codeTime = setInterval(() => {
|
|
this.codeTimeNum = this.codeTimeNum - 1;
|
|
if(this.codeTimeNum < 0){
|
|
clearInterval(this.codeTime);
|
|
this.codeTime = null;
|
|
this.codeTimeNum = 10;
|
|
this.isGetCode = true;
|
|
}
|
|
}, 1000);
|
|
}
|
|
},
|
|
// 登录
|
|
login(){
|
|
let pages = getCurrentPages();
|
|
let prevPage = pages[pages.length - 2];
|
|
|
|
// prevPage.$vm.isLogin = true; // 上一个页面登录成功
|
|
// this.$toBack(); // 登录成功
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped="scoped">
|
|
.logo{
|
|
width: 100%;
|
|
height: 220rpx;
|
|
image{
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
border-radius: 50%;
|
|
background-color: #EEEEEE;
|
|
}
|
|
}
|
|
.inpu-box{
|
|
width: 686rpx;
|
|
height: 88rpx;
|
|
border: 2rpx solid #FE9903;
|
|
border-radius: 10rpx;
|
|
color: #FE9903;
|
|
box-sizing: border-box;
|
|
padding: 0 20rpx;
|
|
margin: 0 auto;
|
|
margin-top: 50rpx;
|
|
input{
|
|
width: 570rpx;
|
|
height: 66rpx;
|
|
font-size: 32rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 20rpx;
|
|
}
|
|
}
|
|
.verif-code{
|
|
width: 686rpx;
|
|
height: 88rpx;
|
|
margin: 0 auto;
|
|
margin-top: 30rpx;
|
|
.code-input{
|
|
width: 438rpx;
|
|
height: 88rpx;
|
|
border: 2rpx solid #999999;
|
|
border-radius: 10rpx;
|
|
box-sizing: border-box;
|
|
padding: 0 20rpx;
|
|
input{
|
|
width: 344rpx;
|
|
height: 66rpx;
|
|
padding: 0 20rpx;
|
|
font-size: 32rpx;
|
|
}
|
|
}
|
|
.code-btn{
|
|
margin: 0;
|
|
width: 228rpx;
|
|
height: 88rpx;
|
|
border-radius: 10rpx;
|
|
color: #FFFFFF;
|
|
font-size: 28rpx;
|
|
line-height: 88rpx;
|
|
}
|
|
}
|
|
.login-type{
|
|
color: #FE9903;
|
|
text-align: center;
|
|
margin-top: 40rpx;
|
|
}
|
|
.login-btn{
|
|
width: 686rpx;
|
|
height: 88rpx;
|
|
background-color: #FE9903;
|
|
color: #FFFFFF;
|
|
line-height: 88rpx;
|
|
border-radius: 42rpx;
|
|
margin-top: 100rpx;
|
|
}
|
|
</style>
|