登陆页面自用

最新推荐文章于 2024-05-15 02:31:46 发布

平平无奇小码手

最新推荐文章于 2024-05-15 02:31:46 发布

阅读量87

点赞数

分类专栏： XXXX系统（自用）文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_51173747/article/details/129821382

版权

XXXX系统（自用）专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XXXX系统</title>
    <link rel="shortcut icon" href="../favicon.ico">
    <link rel="stylesheet" href="../plugins/element-ui/index.css">
    <link rel="stylesheet" href="../styles/common.css">
    <link rel="stylesheet" href="../styles/login.css">
    <link rel="stylesheet" href="../styles/icon/iconfont.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.3/axios.js"></script>
    <style>
        body{
            min-width: 1336px;
        }
        .logo{
            height: 40px;
            color: #333;
            font-size: 30px;
            text-align: center;
            margin-bottom: 45px;
        }
    </style>
</head>
<body>
    <div class="login" id="login">
        <div class="login-box">
            <img src="../images/login/login.png" alt="">
            <div class="login-form">
                <el-dialog
                        title="身份验证"
                        :visible.sync="userDialogVisible"
                        width="30%"
                        top="200px"
                        :before-close="closeHandle"
                        :close-on-click-modal="false"
                        :close-on-press-escape="false"
                >
                    <div class="form">
                        <el-form ref="userForm" :model="userForm" style="height: 150px">
                            <el-form-item label="请选择你的身份：">
                                <el-radio-group v-model="userForm.charactor">
                                    <el-radio label="super">我是管理员</el-radio>
                                    <el-radio label="common">我是员工</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="box">
                        <el-button
                                type="primary"
                                @click="userHandle(userForm.charactor)"
                        >
                            确定
                        </el-button>
                    </div>
                </el-dialog>
                <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
                    <div class="logo">XXXX系统</div>
                    <el-form-item prop="username">
                        <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号" maxlength="20" prefix-icon="iconfont icon-user" />
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="loginForm.password" type="password" placeholder="密码" prefix-icon="iconfont icon-lock" maxlength="20" @keyup.enter.native="handleLogin" />
                    </el-form-item>
                    <el-form-item style="width:100%;">
                        <el-button :loading="loading" class="login-btn" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
                            <span v-if="!loading">登录</span>
                            <span v-else>登陆中...</span>
                        </el-button>
                    </el-form-item>
                    <span class="register" @click="handleRegister">没有账号？点我注册</span>
                </el-form>
            </div>
        </div>
    </div>
    
    <script src="../plugins/vue/vue.js"></script>
    <script src="../plugins/element-ui/index.js"></script>
    <script src="../plugins/axios/axios.min.js"></script>
    <script src="../js/request.js"></script>
    <script src="../js/validate.js"></script>
    <script src="../api/login.js"></script>
</body>
    <script>
        new Vue({
            el:'#login',
            data(){
                return{
                    loginForm:{
                        username:'admin',
                        password:'123456'
                    },
                    userForm:{
                        charactor:'',
                    },
                    userDialogVisible:true,
                    loading:false
                }
            },
            computed:{
                loginRules(){
                    const validateUsername = (rule, value, callback) => {
                        if (value.length < 1 ) {
                          callback(new Error('请输入用户名'))
                        } else {
                          callback()
                        }
                    }
                    const validatePassword = (rule, value, callback) => {
                        if (value.length < 6) {
                          callback(new Error('密码必须在6位以上'))
                        } else {
                          callback()
                        }
                    } 
                    return {
                        'username': [{ 'validator': validateUsername, 'trigger': 'blur' }],
                        'password': [{ 'validator': validatePassword, 'trigger': 'blur' }]
                    }
                }
            },
            created(){},
            methods: {
                async handleLogin() {
                    this.$refs.loginForm.validate(async (valid) => {
                        if (valid) {
                            this.loading = true
                            let res = await loginApi(this.loginForm)
                            if (String(res.code) === '1') {
                                localStorage.setItem('userInfo',JSON.stringify(res.data))
                                window.location.href= '../index.html'
                            } else {
                            this.$message.error(res.msg)
                            this.loading = false
                            }
                        }
                    })
                },
                userHandle(){
                    if(this.userForm.charactor=='super'){
                        this.userDialogVisible=false
                    }else{
                        this.userDialogVisible=false
                        //跳转到员工登录页面
                        window.location.href='./employeeLogin.html'
                    }
                },
                closeHandle(){
                    if(this.userForm.charactor==''){
                        alert('请选择你的身份，确定后即可登录！')
                    }
                },
                handleRegister(){
                    window.location.href='./register.html'
                },
            },
        })
    </script>
</html>