<template>
<view class="page">
<image src="../../static/logo.png" mode="" class="logo"></image>
<view class="account-login-way">
<view class="list" @click="tab_index=0">
<text class="text" :class="{active:tab_index==0}">账号密码登录</text>
<view class="border" :class="{active:tab_index==0}"></view>
</view>
<view class="list" @click="tab_index=1">
<text class="text" :class="{active:tab_index==1}">手机验证码登录</text>
<view class="border" :class="{active:tab_index==1}"></view>
</view>
</view>
<view class="input-group">
<text class="icon"></text>
<input class="input" type="number" v-model="user_phone" placeholder="请输入手机号"/>
</view>
<view class="input-group" v-if="tab_index==0">
<text class="icon"></text>
<input class="input" v-if="tab_index==0" type="password" v-model="user_pwd" placeholder="请输入密码"/>
</view>
<view class="input-group" v-if="tab_index==1">
<text class="icon"></text>
<input class="input" type="text" v-if="tab_index==1" v-model="check_code" placeholder="请输入验证码"/>
<view class="btn-send">
<text class="btn-text">发送验证码</text>
</view>
</view>
<view class="link-box">
<text class="left" @click="goForgetPassword">忘记密码?</text>
<text class="right" @click="goRegister">新用户注册</text>
</view>
<view class="btn" @click="login">
<text class="btn-text">登录</text>
</view>
<view class="agreements">
<view class="select-icon" @click="is_agree=!is_agree">
<text class="icon" v-if="!is_agree"></text>
<text class="icon-active" v-if="is_agree"></text>
</view>
<text class="text">同意</text>
<text class="agreement-name" @click="goPrivacyPolicy">《隐私政策》</text>
<text class="text">以及</text>
<text class="agreement-name" @click="goServiceAgreement">《施工日志App服务协议》</text>
</view>
</view>
</template>
<script>
let that;
export default {
data() {
return {
tab_index:0,
is_agree:false,
user_phone:'',
user_pwd:'',
check_code:''
}
},
onLoad() {
that = this;
},
methods: {
/登录/
login(){
console.log(this.user_phone);
console.log(this.user_pwd);
if (!this.is_agree){
uni.ajax.toast('请勾选下方登录相关服务选项');
return;
}
if (!uni.checkRules.checkPhone(this.user_phone)){
uni.ajax.toast('手机号格式不正确');
return;
}
if (this.user_pwd.length<6){
uni.ajax.toast('密码最少6位');
return;
}
uni.ajax.post({
url:'/login_register/login',
loading:true,
data:{
password:that.user_phone,
username:that.user_pwd
},
success:res=>{
console.log(res);
}
});
},
/*跳转至忘记密码*/
goForgetPassword(){
uni.navigateTo({
url:'../forget-password/forget-password'
})
},
/*跳转至注册*/
goRegister(){
uni.navigateTo({
url:'../register/register'
})
},
/*跳转至隐私政策*/
goPrivacyPolicy(){
uni.navigateTo({
url:'../rich-text-page/rich-text-page?page=privacyPolicy'
})
},
/*跳转至服务协议*/
goServiceAgreement(){
uni.navigateTo({
url:'../rich-text-page/rich-text-page?page=serviceAgreement'
})
}
}
}
</script>
<style lang="scss" scoped>
.page{
width: 750rpx;
@include flex('column');
.logo{
width: 120rpx;
height: 120rpx;
border-radius: 15rpx;
margin-top: 150rpx;
margin-bottom: 100rpx;
}
.account-login-way{
width: 600rpx;
height: 100rpx;
@include flex('between');
.list{
width: 280rpx;
height: 100rpx;
@include flex('column-center');
.text{
color: $color-3;
font-size: 26rpx;
&.active{
color: $color-blue;
}
}
.border{
background-color: #F8F8F8;
width: 60rpx;
height: 6rpx;
border-radius: 3rpx;
margin-top: 15rpx;
&.active{
background-color: $color-blue;
}
}
}
}
.input-group{
width: 600rpx;
height: 100rpx;
@include flex('start');
border-bottom:{
width: 1rpx;
style:solid;
color: #e0e0e0;
}
.icon{
@extend %icon-font;
color: $color-9;
font-size: 36rpx;
}
.input{
height: 100rpx;
flex: 1;
margin-left: 10rpx;
font-size: 26rpx;
}
.btn-send{
width: 180rpx;
height: 70rpx;
background-color: $color-blue;
@include flex('center');
border-radius: 8rpx;
@include touch-darken($color-blue);
.btn-text{
color: white;
font-size: 30rpx;
}
}
}
.link-box{
width: 600rpx;
height: 100rpx;
@include flex('between');
margin-top: 20rpx;
.left{
height: 100rpx;
line-height: 100rpx;
color: $color-blue;
font-size: 26rpx;
}
.right{
@extend .left;
}
}
.btn{
@include btn;
margin-top: 10rpx;
}
.agreements{
width: 700rpx;
@include flex('start');
margin-top: 20rpx;
.select-icon{
width: 80rpx;
height: 80rpx;
@include flex('end');
.icon{
@extend %icon-font;
font-size: 30rpx;
margin-right: 10rpx;
color: $color-3;
}
.icon-active{
@extend %icon-font;
font-size: 30rpx;
margin-right: 10rpx;
color: $color-blue;
}
}
.text{
font-size: 26rpx;
height: 80rpx;
line-height: 80rpx;
color: $color-3;
}
.agreement-name{
font-size: 26rpx;
height: 80rpx;
line-height: 80rpx;
color: $color-blue;
}
}
}
</style>
2***@qq.com
有用,同样的问题,终于解决了
2022-04-21 16:50