lsappBms/lss_vue/src/views/Login.vue

<template>
    <div class="login_par">
        <div class="login_head">
            <div class="login_logo">
                <img src="../assets/image/login_logo.png" style="width:80px;height:80px;"/>
            </div>
            <mt-navbar v-model="selected">
                <mt-tab-item id="login"><div class="login_tab">登录</div></mt-tab-item>
                <!-- <mt-tab-item id="registered"><div class="login_tab"></div></mt-tab-item> -->
            </mt-navbar>
        </div>
        <mt-tab-container v-model="selected" class="login_box">
            <mt-tab-container-item id="login">
                <div>
                    <!-- <mt-field placeholder="请输入手机号" :state="login.account" type="number" v-model="ruleForm.account"></mt-field>
                         <mt-field placeholder="请输入密码" :state="login.password" type="password" v-model="ruleForm.password"></mt-field> -->
                    <div class="out_input">
                        <img class="phone" src="../assets/image/user.png">
                        <input class="input" placeholder="请输入账号" v-model="ruleForm.loginName" />
                    </div>
                    <div class="out_input">
                        <img src="../assets/image/password.png">
                        <input class="input" placeholder="请输入密码" type="password" v-model="ruleForm.password" />
                    </div>
                    <mt-button size="large" type="primary" @click="handleLogin">登录</mt-button>
                </div>
            </mt-tab-container-item>
            <mt-tab-container-item id="registered">
                <div>
                    <!-- <mt-field placeholder="请输入姓名" v-model="ruleForm.regName"></mt-field>
                    <mt-field placeholder="请输入手机号" type="number" v-model="ruleForm.regPhone"></mt-field>
                    <mt-field placeholder="请输入验证码" type="number" v-model="ruleForm.regAccount">
                        <span class="getCode" @click="getCode">获取验证码</span>
                    </mt-field>
                    <mt-field placeholder="请输入密码" type="password" v-model="ruleForm.regPassWord"></mt-field>
                    <mt-field placeholder="请确认密码" type="password" v-model="ruleForm.regPassWord1"></mt-field> -->
                    <div class="out_input">
                        <img src="../assets/image/user.png">
                        <input class="input" placeholder="请输入姓名" v-model="ruleForm.regName" />
                    </div>
                    <div class="out_input">
                        <img class="phone" src="../assets/image/phone.png">
                        <input class="input" placeholder="请输入手机号" type="number" v-model="ruleForm.regPhone" />    
                    </div>
                    <div class="out_input">
                        <img class="phone" src="../assets/image/vcode.png">
                        <input class="input" placeholder="请输入验证码" oninput="if(value.length>6)value=value.slice(0,6)" type="number" v-model="ruleForm.regAccount" />
                        <span class="text" @click="getCode()">{{code == "获取验证码"?'获取验证码':code+'s'}}</span>
                    </div>
                    <div class="out_input">
                        <img src="../assets/image/password.png">
                        <input class="input" placeholder="请输入密码" type="password" v-model="ruleForm.regPassWord" />
                    </div>
                    <div class="out_input">
                        <img src="../assets/image/password.png">
                        <input class="input" placeholder="请确认密码" type="password" v-model="ruleForm.regPassWord1" />
                    </div>
                    <mt-button size="large" type="primary" @click="handleRegistered">注册</mt-button>
                </div>
            </mt-tab-container-item>
        </mt-tab-container>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                selected: 'login',
                logining: false,
                code: "获取验证码",
                // 登录信息
                ruleForm: {
                    loginName: '',
                    password: '',
                    regName: '',
                    regPhone: '',
                    regAccount: '',
                    regPassWord: '',
                    regPassWord1: '',
                },
                login: {
                    loginName: "",
                    password: "",
                },
                canClick: true,
            };
        },
        methods: {
            handleLogin() {
                if(this.canClick) {
                    this.canClick = false;
                    if(this.ruleForm.loginName == "") {
                        this.$toast({
                            message: '请输入账号',
                            duration: 2000
                        });
                        return false;
                    } else if(this.ruleForm.password == "") {
                        this.$toast({
                            message: '请输入密码',
                            duration: 2000
                        });
                        return false;
                    } else {
                        this.$indicator.open();
                        this.http.post(this.port.manage.login, {
                            "loginName": this.ruleForm.loginName,
                            "password": this.ruleForm.password,
                        } , res => {
                            this.canClick = true;
                            this.$indicator.close();
                            if (res.code == "ok") {
                                sessionStorage.setItem('user', JSON.stringify(res.data));
                                var str = '';
                                for(var i in res.data.functions) {
                                    str += res.data.functions[i].code + ",";
                                }
                                sessionStorage.setItem('power',str)
                                this.$router.push({ path: '/assets' });
                            } else {
                                this.$toast({
                                    message: res.msg,
                                    duration: 2000
                                });
                            }
                        }, error => {
                            this.canClick = true;
                            this.$indicator.close();
                            this.$toast({
                                message: error,
                                duration: 2000
                            });
                        })
                    }
                }
            },
            getCode() {
                if(this.ruleForm.regPhone == "") {
                    this.$toast({
                        message: '请输入手机号',
                        duration: 2000
                    });
                    return false;
                } else if(!(/^1[23456789]\d{9}$/.test(this.ruleForm.regPhone))){ 
                    this.$toast({
                        message: '手机号码有误，请重填',
                        duration: 2000
                    });
                    return false; 
                } 
                if(this.code == "获取验证码") {
                    var auth_timer = setInterval(()=>{
                        if(this.code == "获取验证码") {
                            this.code = 60;
                        } 
                        this.code--;
                        if(this.code <= 0){
                            this.code = "获取验证码"
                            clearInterval(auth_timer)
                        }
                    },1000)
                }
            },
            handleRegistered() {
                if(this.ruleForm.regName == "") {
                    this.$toast({
                        message: '请输入姓名',
                        duration: 2000
                    });
                    return false;
                } else if(this.ruleForm.regPhone == "") {
                    this.$toast({
                        message: '请输入手机号',
                        duration: 2000
                    });
                    return false;
                } else if(this.ruleForm.regAccount == "") {
                    this.$toast({
                        message: '请输入验证码',
                        duration: 2000
                    });
                    return false;
                } else if(this.ruleForm.regPassWord == "") {
                    this.$toast({
                        message: '请输入密码',
                        duration: 2000
                    });
                    return false;
                } else if(this.ruleForm.regPassWord1 == "") {
                    this.$toast({
                        message: '请确认密码',
                        duration: 2000
                    });
                    return false;
                } else if(this.ruleForm.regPassWord != this.ruleForm.regPassWord1) {
                    this.$toast({
                        message: '请输入相同密码',
                        duration: 2000
                    });
                    return false;
                } else {
                    this.$indicator.open();
                    this.http.post(this.port.manage.regist, {
                        "name": this.ruleForm.regName,
                        "code": this.ruleForm.regAccount,
                        "phone": this.ruleForm.regPhone,
                        "password": this.ruleForm.regPassWord,
                    } , res => {
                        this.$indicator.close();
                        this.ruleForm = {
                            loginName: '',
                            password: '',
                            regName: '',
                            regPhone: '',
                            regAccount: '',
                            regPassWord: '',
                            regPassWord1: '',
                        }
                        if (res.code == "ok") {
                            this.$toast({
                                message: "提交注册成功，等待管理员审核账号",
                                duration: 2000
                            });
                        } else {
                            this.$toast({
                                message: res.msg,
                                duration: 2000
                            });
                        }
                    }, error => {
                        this.$indicator.close();
                        this.ruleForm = {
                            loginName: '',
                            password: '',
                            regName: '',
                            regPhone: '',
                            regAccount: '',
                            regPassWord: '',
                            regPassWord1: '',
                        }
                        this.$toast({
                            message: error,
                            duration: 2000
                        });
                    })
                }
            }
        },
    }
</script>

<style lang="scss" scoped>
    .login_par {
        position: relative;
    }

    .login_logo {
        text-align: center;
        margin: 0 0 20px 0;
    }

    .login_head {
        padding: 0.48rem 0;
    }

    .login_head , .mint-navbar {
        background: #2680EB;
    }

    .login_tab {
        height: 0.20rem;
        line-height: 0.20rem;
        font-size: 0.15rem!important;
        color: #fff;
    }

    .login_box {
        width: 80%;
        margin: 0 auto;
        padding: 0.45rem 0;
        position: relative;
        top: -0.45rem;
        background: #fff;
        border-radius: 20px 20px 0 0;
    }

    .login_box .mint-cell {
        margin: 0 0.18rem 0.1rem;
        border-bottom: 1px solid #D7D7D7;
    }

    .mint-button--large {
        width: 90%;
        margin:0.4rem auto 0;
    }

    .out_input {
        position: relative;
    }

    .out_input img {
        width: 0.14rem;
        height: 0.15rem;
        position: absolute;
        left: 0.2rem;
        top: 0.09rem;
    }

    .out_input img.phone {
        width: 0.12rem;
    }

    .input {
        background: none;
        outline: none;
        border: none;
        border-radius: 0;
        border-bottom: 1px solid #D7D7D7;
        display: block;
        width: 80%;
        margin: 0 auto 0.24rem;
        height: 0.35rem;
        line-height: 0.35rem;
        font-size: 0.14rem;
        padding: 0 0 0 0.2rem;
	}

    .text {
        color: #2680EB;
        position: absolute;
        right: 0.2rem;
        top: 0.06rem;
    }
</style>
<style>
    /* 插件样式修改 */
    .login_par .mint-navbar .mint-tab-item.is-selected .login_tab {
        font-size: 0.19rem!important;
    }
    
    .login_par .mint-navbar .mint-tab-item.is-selected {
        border-bottom: none!important;
        font-size: 0.22rem!important;
        font-weight: 800;
    }

    .login_box .mint-cell-value {
        border: 0!important;
    }

    .login_par .mint-cell-wrapper {
        background-image: none!important;
    }

    .login_par .mint-button--primary {
        background-color: #2680EB!important;
    }
</style>