Просмотр исходного кода

其他项目的登录页面,仅供参考

raolu 7 лет назад
Родитель
Сommit
6a8bbd9461
4 измененных файлов с 294 добавлено и 0 удалено
  1. BIN
      images/插画.jpg
  2. 91 0
      page/login/login.css
  3. 80 0
      page/login/login.html
  4. 123 0
      page/login/login.js

BIN
images/插画.jpg


+ 91 - 0
page/login/login.css

@ -0,0 +1,91 @@
body {
	width: 100%;
	height: 100%;
	background: url(../../images/BG.jpg);
	font-size: 14px;
}
#main {
	width: 1200px;
	margin: 0 auto;
	height: 100%;
}
.tabs-container {
	margin-top: 40;
	border: 10px solid rgba(255,255,255,0.2);
}
.tabs-container .nav-tabs {
	border: 0;
}
.nav.nav-tabs {
	background-color: #fff;
}
.nav.nav-tabs li {
	width: 50%;
	text-align: center;
	padding: 0 15px;
}
.nav.nav-tabs li.active a {
	color: #1eaaff;
}
.tabs-container .nav-tabs>li.active>a, 
.tabs-container .nav-tabs>li.active>a:focus, 
.tabs-container .nav-tabs>li.active>a:hover {
	border: 0;
	border-bottom: 3px solid #1eaaff;
}
button[type="submit"] {
	margin-top: 40px;
}
.form-group {
		position: relative;
	}
	
.fa-eye,
.fa-eye-slash {
	position: absolute;
	top: 16px;
	right: 10px;
	margin-top: -8px;
	font-size: 16px;
	cursor: pointer;
}
.getCaptcha {
	position: absolute;
	top: 8px;
	right: 10px;
}
.getCaptcha.disabled{
	cursor: not-allowed;
	filter: alpha(opacity=65);
	-webkit-box-shadow: none;
	box-shadow: none;
	opacity: .65;
}
.left-img img{
	width: 100%;
}
#loginForm{margin-top: 150px;}
@media only screen and (max-width: 1200px) {
	#main,.left-img,#loginForm {
		width: 100%;
	}
	
	#loginForm {
		margin-top: 0px;
	}
	.left-img > img{
		display: block;
		width: 500px;
		margin: 0 auto;
	}
	.tabs-container {
		width: 400px;
		margin: -40px auto 0;
	}
}

+ 80 - 0
page/login/login.html

@ -0,0 +1,80 @@
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta name="keywords" content="登录">
    <meta name="description" content="登录">
    <link rel="shortcut icon" href="../../favicon.ico">
    <link rel="stylesheet" type="text/css" href="../../css/font-awesome.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../plugins/artDialog/6.0.5/api/css/ui-dialog.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/cross.css"/>
    <link rel="stylesheet" type="text/css" href="login.css"/>
</head>
<body>
    <div id="main">
        <div class="row">
            <div class="col-sm-8 left-img">
                <img src="../../images/icon_chahua.png" />
            </div>
            <div id="loginForm" class="col-sm-4">
                <div class="tabs-container">
                    <ul class="nav nav-tabs">
                        <li :class="{'active': type==1}" @click="changeType(1)"><a>手机号登录</a>
                        </li>
                        <li :class="{'active': type==2}" @click="changeType(2)"><a>验证码登录</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane" :class="{'active': type==1}">
                            <div class="panel-body">
                                <form id="form1" class="m-t" role="form" onsubmit="return false;">
                                    <div class="form-group">
                                        <input class="form-control" type="text" maxlength="11" v-model="mobile" placeholder="请输入手机号码">
                                    </div>
                                    <div class="form-group">
                                        <input class="form-control" :type="eyeIsOpen?'text':'password'" v-model="password" placeholder="初始密码为手机号码后六位">
                                        <i class="fa" :class="eyeIsOpen? 'fa-eye': 'fa-eye-slash'"></i>
                                    </div>
                                    <button type="submit" class="btn btn-success block full-width m-b" @click="login">登 录</button>                 
                                </form>
                            </div>
                        </div>
                        <div class="tab-pane" :class="{'active': type==2}">
                            <div class="panel-body">
                                <form id="form2" class="m-t" role="form" onsubmit="return false;">
                                    <div class="form-group">
                                        <input class="form-control" type="text" maxlength="11" v-model="mobile" placeholder="请输入手机号码">
                                    </div>
                                    <div class="form-group">
                                        <input class="form-control" type="text" v-model="captcha" placeholder="请输入短信验证码">
                                        <a class="getCaptcha" :class="{'disabled': countdown}" @click="getCaptcha">{{infoText}}</a>
                                    </div>
                                    <button type="submit" class="btn btn-success block full-width m-b" @click="login">登 录</button>
                                </form>    
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../js/jquery-2.2.4.js"></script>
    <script src="../../js/bootstrap.min.js"></script>
    <script src="../../js/validate/jquery.validate.min.js"></script>
    <script src="../../js/validate/messages_zh.min.js"></script>
    <script src="../../js/security.js"></script>
    <script src="../../js/es6-promise.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../js/underscore.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../js/util.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../api/http-request.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../plugins/artDialog/6.0.5/api/js/dialog-plus.js" type="text/javascript" charset="utf-8"></script>
    <script src="login.js"></script>
</body>
</html>

+ 123 - 0
page/login/login.js

@ -0,0 +1,123 @@
new Vue({
    el: "#main",
    data: {
        type: 1, //记录选择的登录方式,1-手机号登录,2-验证码登录
        mobile: '',
        password: '',
        captcha: '',
        eyeIsOpen: false,
        infoText: '获取验证码',
        countdown: false //是否在倒计时
    },
    methods: {
        changeType: function(val){
            this.type = val;
        },
        getCaptcha: function(){
            //先校验手机号码是否正确
            var isMobile = isMobilePhone(this.mobile);
            if(!isMobile){
                tip('请输入正确的手机号码!');
                return false;
            }
            setTimer(this);
            //发送请求
            sendToGetCaptcha(this);
        },
        login: function(){
            if(this.type == 1){
                var validation = $("#form1").valid();
                if(validation){
                    getPublicKey(this);
                }
            }else{
                var validation = $("#form2").valid();
                if(validation){
                    login({
                        mobile: this.mobile,
                        captcha: this.captcha,
                        platform: 4
                    })
                }
            }
        },
    }
});
//验证码定时
function setTimer(vm) {
    var seconds = 59;
    vm.countdown = true;
    timer = setInterval(function() {
        if(seconds == 0) {
            clearInterval(timer);
            timer = null;
            seconds = 59;
            vm.infoText = "获取验证码";
            vm.countdown = false;
            return ;
        }
        seconds --;
        vm.infoText = seconds+"s后重新获取";
    }, 1000)
}
function sendToGetCaptcha(vm){
    var url = "common/captcha",
        params = {
            mobile: vm.mobile,
            type: 5,
            captchaToken: 5
        };
    httpRequest.post(url, {data: params}).then(function(res){
        if(res.status == 200){
            tip('发送成功','add');
        }else{
            tip('获取验证码失败');
        }
    });
}
function getPublicKey(vm){
    var url = "login/public_key";
    httpRequest.post(url).then(function(res){
        if(res.status){
            var mod = res.data.modulus;
            var exp = res.data.exponent;
            key = RSAUtils.getKeyPair(exp, "", mod);
            if (key) {
                encryedPwd = RSAUtils.encryStr(key, vm.password);
                login({
                    mobile: vm.mobile,
                    password: encryedPwd,
                    platform: 4
                })
            }else {
               tip("获取数据失败")
               $submit.removeAttr('disabled')
            }
        }else{
            tip(res.msg);
        }
    })
}
function login(data) {
    httpRequest.post('login/doctor', {data: data}).then(function(res){
        if(res.status == 200){
            var docInfo = res.data;
            localStorage.setItem(httpRequest.agentName,JSON.stringify({
                id: docInfo.id,
                uid: docInfo.uid,
                token: docInfo.token,
                imei: localStorage.getItem('WLYY_IMEI'),
                platform: 4
            }));
            //将用户的角色信息单独存储在localstorage中
            localStorage.setItem("userRole", JSON.stringify(docInfo.userRole));
            window.location.href = "../home/html/index.html";
        }else{
            tip(res.msg);
        }
    });
}