bingappuni-app

login

<template>
    <view class="loginwrap">
        <view class="logincont">
            <view class="logo">
                <image src="../../static/uni.png" mode="widthFix" style="width: 100px; height: 200px;"></image>
            </view>
            <view v-show="!showtelephone" class="yanlogin">
                <p>手机验证码登录</p>
            </view>
            <view v-show="showtelephone" class="yanlogin">
                <p>账号密码登录</p>
            </view>
            <view style="color: #ccc;font-size: 15px; margin-top: 20px 0 0 20px;">
                <p>欢迎使用智慧养老</p>
            </view>
            <view class="login-content">
                <view style="margin: 30px 0 0 5px;">
                    <view v-show="showphone">
                            <p>账号：</p>
                    </view>
                    <view v-show="!showphone">
                            <p>手机号码：</p>
                    </view>
            <view class="input">
                <u-input v-model="username" v-show="inshow" placeholder="请输入账号" ></u-input>
            </view>
            <view class="input">
                <u-input v-model="username" v-show="!inshow" placeholder="+86 | 请输入手机号码" ></u-input>
            </view>
                </view>
        <view style="margin: 20px 0 0 5px;">
            <view v-show="isshow">
                <p>密码：</p>
            </view>
            <view v-show="!isshow">
                        <p>验证码：</p>
                    </view>
        <view class="pwd" v-show="yzmshow">
            <u-input v-model="password"    type="password"  placeholder="请输入密码"></u-input>
        </view>
        <view class="pwd" v-show="!yzmshow">
            <u-input v-model="password" placeholder="请输入验证码"></u-input><u-button class="fs">发送验证码</u-button>
        </view>
            </view>
            <view style="display: flex; margin: 20px 0 0 5px; width: 100%; justify-content: space-between;">
                <view class="group-box">
                    <u-checkbox-group>
                                <u-checkbox v-model="checkboxChecked" ></u-checkbox>
                            </u-checkbox-group>
                            <view style="color: #ccc;">我已阅读并同意</view>
                            <view style="color: red;">《用户隐私政策》</view>
                            <view class="getpwd" @click="forget">
                                忘记密码
                            </view>
                </view>
                
            </view>
            <view class="btn">
                <u-button  type="primary" @click="login">登录</u-button>
            </view>
            <view class="mmdl" @click="yzm" v-show="dlshow">
                免密登录
            </view>
            <view class="mmdl" @click="yzm" v-show="!dlshow">
                账号密码登录
            </view>
            <view class="zc" @click="createnew()">
            注册新用户
            </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                showtelephone:true,
                username:'',
                password:'',
                checkboxChecked:true,
                showphone:true,
                inshow:true,
                isshow:true,
                yzmshow:true,
                dlshow:true,
            }
        },
        methods: {
            yzm(){
                this.showtelephone=!this.showtelephone
                this.showphone=!this.showphone
                this.inshow=!this.inshow
                this.isshow=!this.isshow
                this.yzmshow=!this.yzmshow
                this.dlshow=!this.dlshow
            },
            login(){
                if(this.showtelephone==true){
                    if(this.username.length==0 || this.password.length==0){
                        uni.showToast({
                            title:"请输入账号密码",
                            icon:"none"
                        })
                    }else if(!this.checkboxChecked){
                        uni.showToast({
                            title:"请同意用户隐私政策",
                            icon:"none"
                        })
                    }else{
                        uni.request({
                            url: 'http://127.0.0.1:5502'+'/loginWithoutCode', //仅为示例，并非真实接口地址。
                            data: {
                                username:this.username,
                                password:this.password
                            },
                            header: {
                                'custom-header': 'hello' //自定义请求头信息
                            },
                            dataType:"json",
                            method:"POST",
                            success: (res) => {
                                console.log(res.data.code);
                                if(res.data.code==200){
                                    uni.switchTab({
                                        url:'/pages/index/index'
                                    })
                                }else{
                                    uni.showToast({
                                        title:"用户或密码不正确",
                                        icon:"none"
                                    })
                                }
                            }
                        });
                    }
                }else{
                    if(this.username.length==0 || this.password.length==0){
                        uni.showToast({
                            title:"请输入手机号或验证码",
                            icon:"none"
                        })
                    }else if(!this.checkboxChecked){
                        uni.showToast({
                            title:"请同意用户隐私政策",
                            icon:"none"
                        })
                    }else{
                        uni.request({
                            url: 'http://127.0.0.1:5502'+'/loginWithoutCode', //仅为示例，并非真实接口地址。
                            data: {
                                username:this.username,
                                password:this.password
                            },
                            dataType:"json",
                            method:"POST",
                            success: (res) => {
                                // console.log(res.data.code);
                                if(res.data.code==200){
                                    uni.redirectTo({
                                        url:'/pages/index/index'
                                    })
                                }else{
                                    uni.showToast({
                                        title:"用户或验证码不正确",
                                        icon:"none"
                                    })
                                }
                            }
                        });
                    }
                }
                
                
            },
            createnew(){
                console.log("ads");
                uni.navigateTo({
                    url: '/pages/register/register'
                });
            },
            forget(){
                uni.navigateTo({
                    url:"/pages/login/forgetPWD"
                })
            }

                    }
        
    }
</script>

<style>
.loginwrap{
    /* background-color: red; */
    width: calc(100%-30px);
    margin: 15px auto 0;
}
.logincont{
    width: 100%;
    background-color: #fff;
}
.logo{
    width: 100px;
    margin: 0 auto;
}
.yanlogin{
    font-size: 25px;
    margin: 30px 0 20px;
}
.input{
    background-color: rgb(242, 247, 251);
    border-radius: 5px;
    margin-top: 15px;
    z-index: 1;
    width: 100%;
    left: 0px;
}
.pwd{
    background-color: rgb(242, 247, 251);
    border-radius: 5px;
    margin-top: 15px;
    z-index: 1;
    position: relative;
}
.group-box{
    display: flex;
}
.getpwd{
display: flex;
justify-content: flex-end;
margin-left: auto;
position: absolute;
right: 10px;
color: red;
}
.btn{
    margin-top: 30px;
    border-radius: 5px;
    color: white;
    width: 100%;
    height: 100%;
}
.mmdl{
    margin-top: 15px;
    color: blue;
}
.zc{
    display: flex;
    justify-content: flex-end;
    margin-left: auto;
    margin-top: -24px;
    right: 10px;
    color: blue;
}
.fs{
        position: absolute;
    top: 0;
    right: 0;
}

</style>
 

reg

<template>
    <view class="loginwrap">
        <view class="loginCont">
            <view class="login">
                <image src="../../static/uni.png" mode="widthFix"></image>
            </view>
            <view class="psdBox">
                <view class="psdIcon">
                    <image src="../../static/logo.png" mode="widthFix"></image>
                </view>
                <view class="psdInput">
                    <input class="uni-input"  maxlength="11" v-model="phoneNum"  type="number"  placeholder="请输入手机号" />
                </view>
            </view>
            <view class="psdBox">
                <view class="psdIcon">
                    <image src="../../static/logo.png" mode="widthFix"></image>
                </view>
                <view class="psdInput">
                    <input class="uni-input" maxlength="6" v-model="password" password='true' placeholder="请输入密码"/>
                </view>
            </view>
            <navigator url="/pages/login/login">
                <view class="loginTips">已有账号，立即登录</view>
            </navigator>
        </view>
        <button type="primary" @click="regSubmit()">注册</button>
    </view>
</template>

<script>
    export default{
        data(){
        return{
            phoneNum:"",
            password:"",
        }
    },
    methods:{
        regSubmit(){
            if(this.phoneNum.length==0 || this.password.length==0){
                uni.showToast({
                    title:"手机号或密码为空",
                    icon:'none'
                })
            }else if(this.phoneNum.length!=11){
                uni.showToast({
                    title:"请输入正确手机号",
                    icon:'none'
                })
            }else if(this.password.length!=6){
                uni.showToast({
                    title:'请设置6位数密码',
                    icon:'none'
                })
            }else{
            uni.request({
                url: 'http://127.0.0.1:5502'+'/system/user/register', //仅为示例，并非真实接口地址。
                data: {
                    userName:this.phoneNum,
                    password:this.password,
                },
                header: {
                    'custom-header': 'hello' //自定义请求头信息
                },
                dataType:"json",
                method:"POST",
                success: (res) => {
                    console.log(res.data);
                    if(res.data.code==200){
                        uni.navigateTo({
                            title:'注册成功',
                            url:'/pages/login/login'
                        })
                    }else{
                        uni.showToast({
                            title:res.data.msg,
                            icon:"error"
                        })
                    }
                }
            });
            }
        }
    }
    }
    
    
    
    
</script>

<style>
    .loginwrap{
        width: calc(100%-30px);
        margin: 15px auto 0;
    }
    .logincont{
        width: 100%;
        background-color: #fff;
        margin-bottom: 20px;
        overflow: hidden;
    }
    .logo{
        width: 40%;
        margin: 40px auto;
    }
    .logo image{
        width: 100%;
    }
    .loginTips{
        font-size: 14px;
        line-height: 40px;
        color: #3b4144;
        text-align: center;
    }
    .psdBox{
        width: 100%;
        border-bottom: 1rpx #ddd solid;
        display: flex;
        padding: 8px 0;
        align-items: center;
    }
    .psdIcon{
        flex: 0 0 40px;
        height: 40px;
        margin: 0 15px;
        border: 2px #F2F7FF solid;
        border-radius: 50%;
        text-align: center;
    }
    .psdIcon image{
        width: 46%;
        padding-top: 6px;
    }
    .psdInput{
        flex: auto;
    }
    .uni-input{
        height: 50px;
        font-size: 18px;
    }
    .codeBtn{
        flex: 0 0 90px;
        padding-right: 8px;
    }
    .codeBtn button{
        font-size: 14px;
        padding: 0;;
    }
</style>