uniapp好看的登录页面

uniapp好看的登录页面

本登录方式有两种
1.账号和密码登录
2.账号和验证码登录

1.登录页面的代码

<template><view class="login"><view class="login-title">体育场馆预约</view><view class="login-content"><view class="login-username"><i class="el-icon-user"></i><input type="text" placeholder="请输入账号" v-model="phone"></view><view class="login-password"><i class="el-icon-key"></i><input type="safe-password" name="" id="" placeholder="请输入密码" v-model="password"></view></view><view class="button"><button @click="onsubmit">登录</button></view><view class="login-botton"><view class="login-password" @click="findPassword">找回密码</view><span>|</span><view class="login-zhuce" @click="Registration">注册账号</view></view><!-- 其他的登录方式 --><view class="login-other"><view class="login-top">
                其他的登录方式
            </view><view class="login-icon"><image src="../../static/index/QQ.png" mode="widthFix"></image><image src="../../static/index/weixin.png" mode="widthFix"></image></view></view></view></template><script>import{ mapMutations }from'vuex';exportdefault{data(){return{phone:'',password:'',rules:{phone:[{required:true,message:'请输入手机号',rule:'/^1[23456789]\d{9}$/'}],password:[{required:true,message:'请输入密码',trigger:'blur'}]}};},methods:{// ...mapMutations(['user_Login']),//登录onsubmit(){if(this.phone==''||this.password==''){
                uni.showToast({title:"内容不能为空哦！",icon:"none"})}else{let data={phone:this.phone,password:this.password
                }
                uni.request({url:'/api/login/loginUser',method:'POST',data: data,success:res=>{
                        console.log(res.data.data.data);if(res.data.code ==200){this.$store.commit("userLogin",res.data.data.data );
                            localStorage.setItem('status',true)//页面跳转this.$router.push('/pages/index/index');
            
                            uni.showToast({title: res.data.data.msg,icon:'none'});}else{
                            uni.showToast({title: res.data.data.msg,icon:'none'});}}});}},Registration(){
            console.log('hah ');
            uni.navigateTo({url:'../../pages/login/registration'});},findPassword(){
            console.log('hah ');this.$router.push('/pages/login/findPassword');},loginOther(){
            uni.share({provider:"weixin",scene:"WXSceneSession",type:1,summary:"我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",success:function(res){
                    console.log("success:"+JSON.stringify(res));},fail:function(err){
                    console.log("fail:"+JSON.stringify(err));}});}}};</script><style lang="less">.login {// background-image: linear-gradient(120deg, #05ee28, #6a3dad);
     background-color: #fff;width:100%;
    background-position: center;
    background-size: cover;// background-color: #464646;margin:0px;
    background-size:100%100%;
    background-attachment:fixed;height: 1535rpx;opacity:0.8;.login-title {
        padding-top: 150rpx;display: flex;
        justify-content: flex-start;
        margin-left: 50rpx;
        font-weight:700;
        font-size: 40rpx;color: #11cd6e;
        letter-spacing: 5rpx;
        margin-bottom: 50rpx;}.login-content{.login-username{display: flex;
            align-items: center;margin:0 50rpx;
            border-bottom: 1rpx solid gainsboro;
            input{padding: 10rpx;height: 60rpx;width:80%;}
            i {color: #11c53e;
                padding-right: 20rpx;
                font-size: 50rpx;}}.login-password{display: flex;
            align-items: center;margin:0 50rpx;
            border-bottom: 1rpx solid gainsboro;
            margin-top: 50rpx;
            input{padding: 10rpx;height: 60rpx;width:80%;}
            i {color: #11c53e;
                padding-right: 20rpx;
                font-size: 50rpx;}}}.button{
        margin-top: 120rpx;
        
        button{
            background-color:#11c53e;width:90%;height: 85rpx;
            text-align: center;
            line-height: 85rpx;color: #fff;}}.login-botton{display: flex;
        justify-content: center;
        margin-top: 100rpx;.login-password{padding:0 15rpx;color: #11c53e;}.login-zhuce{padding:0 15rpx;color: #11c53e;}}.login-other{position: absolute;bottom: 100rpx;left:37%;display: flex;
        flex-direction: column;
        justify-content: center;.login-top{
            text-align:center;}.login-icon{display: flex;
            justify-content: space-between;
            margin-top: 50rpx;
            image{width: 80rpx;}}}}</style>

2.注册页面

<template><view class="registration"><view class="registration-content"><view class="login-username"><i class="el-icon-mobile"></i><input type="text" name="" id="" placeholder="请输入手机号" v-model="phone"/></view><view class="login-code"><i class="el-icon-cpu"></i><input type="text" placeholder="请输入验证码" v-model="userCode"/><button type="warning":disabled="disabled" @click="sendCode">{{ codeMsg }}</button></view></view><view class="login-button"><button @click="login">下一步</button></view><view class="registration-botton"><view class="registration-password" @click="goBack">密码登陆</view></view></view></template><script>exportdefault{data(){return{phone:'',userCode:'',disabled:false,codeNum:10,codeMsg:'获取验证码',code:'',rules:{phone:{rule:'/^1[23456789]\d{9}$/',meg:'手机的格式不对'}}};},methods:{sendCode(){if(this.phone ==''){
                uni.showToast({title:'手机号不能为空',icon:'none'});}elseif(this.phone !=''){var reg =/^1[3456789]\d{9}$/;if(!reg.test(this.phone)){
                    uni.showToast({title:'输入有效的手机号',icon:'none'});}else{//禁用按钮this.disabled =true;//发送请求
                    uni.request({url:'/api/login/code',method:'POST',data:{phone:this.phone
                        },success:res=>{
                            console.log('11', res.data.data);if(res.data.data.success){this.code = res.data.data.data;}}});//倒计时let timer =setInterval(()=>{--this.codeNum;this.codeMsg =`重新发送 ${this.codeNum}`;},1000);//判断定时器停止setTimeout(()=>{clearInterval(timer);(this.disabled =false),(this.codeMsg ='获取验证码'),(this.codeNum =10);},10000);}}},//登录login(){if(this.code ==''||this.phone ==''){
                uni.showToast({title:'手机号不能为空',icon:'none'});}elseif(this.userCode ==this.code){//验证码正确
                uni.request({url:'/api/login/addUser',method:'POST',data:{phone:this.phone
                    },success:res=>{//code 200 注册成功if(res.data.code ==200){
                            uni.showToast({title: res.data.data.msg,icon:'none'});//给vuex添加数据this.$store.commit('userLogin', res.data.data.data);//路由跳转this.$router.push('/pages/index/index');}else{
                            uni.showToast({title: res.data.data.msg,icon:'none'});}}});}},//密码登录goBack(){this.$router.push('/pages/login/login');},validate(key){let bool =true;if(!this.rules[key].rule.test(this[key])){
                uni.showToast({title:this.rules[key].meg,icon:'none'});
                bool =false;returnfalse;}return bool;}}};</script><style lang="less">.registration {width:100%;
    background-position: center;
    background-size: cover;
    background-color: #fff;margin: 0px;
    background-size:100%100%;
    background-attachment: fixed;opacity:0.8;// margin-top: 100rpx;.registration-content{display: flex;
        flex-direction: column;margin:0 50rpx;
        input{padding: 10rpx;width:60%;height: 70rpx;}
        i {color: #11c53e;
            padding-right: 20rpx;
            font-size: 50rpx;}.login-username{display: flex;
            align-items: center;
            border-bottom: 1rpx solid gainsboro;
            margin-top: 30rpx;}.login-code{display: flex;
            align-items: center;
            border-bottom: 1rpx solid gainsboro;
            margin-top: 30rpx;
            button{width:250rpx;height: 85rpx;
                font-size: 30rpx;
                line-height: 85rpx;
                background-color: #11c53e;color: #fff;}}}.login-button{
        margin-top: 150rpx;width:90%;
        margin-left:5%;
        button{
            background-color: #11c53e;color: #fff;}}}.registration-botton {display: flex;
    margin-top: 50rpx;
    justify-content: space-between;.registration-password {
        padding-left: 40rpx;color: #fff;}.registration-zhuce {
        padding-right: 40rpx;color: #fff;}}</style>