Home Explore Help
Register Sign In
zdm
/
sr-publicServicePlatform
Watch 1
Star 0
Fork 0
Files
Browse Source

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

raolu 7 years ago
parent
5e0b67a7d4
commit
6a8bbd9461
4 changed files with 294 additions and 0 deletions
Split View Show Diff Stats
  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
View File


+ 91 - 0
page/login/login.css
View File 

@ -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
View File 

@ -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
View File 

@ -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);
 
        }
 
    });
 
}