Oliver
/
PC-prescription
원본 프로젝트 : raolu/PC-prescription


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402
							<!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="登录">
		<!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->
		<link rel="shortcut icon" href="favicon.ico">
		<link href="css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
		<link href="css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
		<link href="css/animate.min.css" rel="stylesheet">
		<link href="css/style.min862f.css?v=4.1.0" rel="stylesheet">
		<link href="css/plugins/toastr/toastr.min.css" rel="stylesheet">
		<style>
			body {
				background: url(img/BG.jpg);
			}
			#main {
				width: 1200px;
				margin: 0 auto;
			}
			.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;
			}
			#loginForm {
				margin-top: 120px;
			}
			
			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;
			}
			
			@media only screen and (max-width: 1200px) {
				
				#main,.left-img,#loginForm {
					width: 100%;
				}
				
				#loginForm {
					margin-top: 0px;
				}
			
				.left-img > img{
					display: block;
					width: 400px;
					margin: 0 auto;
				}
	
				.tabs-container {
					width: 400px;
					margin: -40px auto 0;
				}
			}
		</style>
		<div id="main">
			<div class="row">
				<div class="col-sm-8 left-img">
					<img src="img/icon_chahua.png" />
				</div>
				<div id="loginForm" class="col-sm-4">
					<div class="tabs-container">
	                    <ul class="nav nav-tabs">
	                        <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true">手机号登录</a>
	                        </li>
	                        <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">验证码登录</a>
	                        </li>
	                    </ul>
	                    <div class="tab-content">
	                        <div id="tab-1" class="tab-pane active">
	                            <div class="panel-body">
	                                <form id="form1" class="m-t" role="form" onsubmit="return false;">
						                <div class="form-group">
						                    <input id="mobile1" mobile type="text" name="mobile1" class="form-control" placeholder="请输入手机号码" required="">
						                </div>
						                <div class="form-group">
						                    <input id="password" type="password" name="password" class="form-control" placeholder="初始密码为手机号码后六位" required="">
						                    <i class="fa fa-eye-slash psw-eye" aria-hidden="true"></i>
						                </div>
						                <button type="submit" class="btn btn-success block full-width m-b">登 录</button>
						
						                <p class="text-muted text-center"> <a href="login.html#"><small>忘记密码了？</small></a> | <a href="register.html">注册一个新账号</a>
						                </p>
						
						            </form>
	                            </div>
	                        </div>
	                        <div id="tab-2" class="tab-pane">
	                            <div class="panel-body">
	                            	<form id="form2" class="m-t" role="form" onsubmit="return false;">
						                <div class="form-group">
						                    <input id="mobile2" name="mobile2" mobile  type="text" class="form-control" placeholder="请输入手机号码" required="">
						                </div>
						                <div class="form-group">
						                    <input id="captcha" name="captcha" type="text" class="form-control" placeholder="请输入短信验证码" required="">
						                	<a id="getCaptcha" href="javascript:void(0);">获取验证码</a>
						                </div>
						                <button type="submit" class="btn btn-success block full-width m-b">登 录</button>
						            </form>    
	                            </div>
	                        </div>
	                    </div>
	                </div>
				</div>
			</div>
		</div>
	</head>
	<body >
		<script src="js/jquery.min.js?v=2.1.4"></script>
		<script src="js/bootstrap.min.js?v=3.3.6"></script>
		<script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
		<script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
		<script src="js/plugins/layer/layer.min.js"></script>
		<script src="js/hplus.min.js?v=4.1.0"></script>
		<script type="text/javascript" src="js/contabs.min.js"></script>
		<script src="js/plugins/pace/pace.min.js"></script>
		<script src="js/plugins/validate/jquery.validate.min.js"></script>
    	<script src="js/plugins/validate/messages_zh.min.js"></script>
    	<script src="js/plugins/toastr/toastr.min.js"></script>
		<script src="js/security.js"></script>
    	<script src="js/api-service.js"></script>
    	<script src="js/login-api.js"></script>
		<script>
			//获取链接上的参数
			function GetRequest() {
				var url = location.search; //获取url中"?"符后的字串
				var theRequest = new Object();
				if (url.indexOf("?") != -1) {
					var str = url.substr(1);
					strs = str.split("&");
					for (var i = 0; i < strs.length; i++) {
						theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
					}
				}
				return theRequest;
			}
		</script>
		<script>
			
			$(function() {
				var Requests = GetRequest();
				var redirect_url = Requests.redirect_url;
				var userAgent = Requests.userAgent;
				var agentName = "wlyyAgent";
           
				toastr.options = {
					"closeButton": true,
					"positionClass": "toast-top-center"
				}
				
				var $eyeIcon = $('.psw-eye'),
					$mobile1 = $('#mobile1'),
					$password = $('#password'),
					$mobile2 = $('#mobile2'),
					$captcha = $('#captcha'),
					$mobile = $('input[mobile]'),
					$tabs = $('.nav-tabs'),
					$getCaptcha = $('#getCaptcha'),
					$submit = $('button[type="submit"]');
				
				var timer = null;
				
				if(userAgent) {
					userAgent = decodeURIComponent(userAgent)
					localStorage.setItem(agentName, userAgent)
					return ;
				}
				
				function login(data) {
					
					loginApis.login(data)
					.then(function(res) {
						$submit.removeAttr('disabled')
						if(res.status == 200) {
							var data = res.data;
							localStorage.setItem(agentName,JSON.stringify({
								id: data.id,
								uid: data.uid,
								token: data.token,
								imei: localStorage.getItem('WLYY_IMEI'),
								platform: 4
							}))
						   if(redirect_url) {
								window.location.href = decodeURIComponent(redirect_url)
						   }
							
						} else {
							toastr.error(res.msg || "登录失败！")
						}
					})
					.catch(function(e) {
						$submit.removeAttr('disabled')
						console && console.error(e)
					})
				}
				
				function setTimer() {
					$getCaptcha.addClass('disabled');
					var seconds = 59;
					timer = setInterval(function() {
						if(seconds == 0) {
							clearInterval(timer);
							timer = null;
							seconds = 59;
							$getCaptcha.text("获取验证码");
							$getCaptcha.removeClass('disabled');
							return ;
						}
						$getCaptcha.text((seconds--)+"s后重新获取");
					}, 1000)
				}
				
				$eyeIcon.click(function() {
					$el = $(this);
					if($el.hasClass('fa-eye')) {
						$el.removeClass('fa-eye').addClass('fa-eye-slash');
						$password.attr('type','password')
					} else {
						$el.removeClass('fa-eye-slash').addClass('fa-eye');
						$password.attr('type','text')
					}
				})
				
				$getCaptcha.click(function() {
					if($getCaptcha.hasClass('disabled')) {
						return ;
					}
					if(validator2.element($mobile2)) {
						setTimer();
						loginApis.getCaptcha({
							mobile: $mobile2.val(),
							type: 5,
							captchaToken: 5
						}).then(function(res) {
							if(res.status == 200) {
								toastr.success("短信发送成功！")
							} else {
								toastr.error(res.msg || "短信发送失败！")
							}
						}).catch(function(e) {
							console && console.error(e)
						})
					}
					
				})

				$submit.click(function() {
					var index = $('.nav-tabs>li.active').index();
					var mobile = '',
						password = '',
						captcha = '';
					
					if(index == 0) { // 点击手机登陆选项卡
						if($("#form1").valid()) {
							$(this).attr('disabled','disabled')
							mobile = $mobile1.val();
							password = $password.val();
							loginApis.publicKey().then(function(res) {
								if (res.status == 200) {
									var mod = res.data.modulus;
									var exp = res.data.exponent;
									key = RSAUtils.getKeyPair(exp, "", mod);
									if (key) {
										encryedPwd = RSAUtils.encryStr(key, password);
										login({
											mobile: mobile,
											password: encryedPwd
										})
									}else {
									   toastr.error(res.msg || "登录失败！")
									   $submit.removeAttr('disabled')
									}
								}
							})
						}
						
					} else { // 点击验证码登录选项卡
						if($("#form2").valid()) {
							$(this).attr('disabled','disabled')
							mobile = $mobile2.val();
							captcha = $captcha.val();
							login({
								mobile: mobile,
								captcha: captcha
							})
						}
						
					}
				})
				
				var validator1 = $("#form1").validate({
					onsubmit: false,
					onfocusout: function(ele) {
						validator1.element(ele)
					},
				　　　rules: {
				　　　　　　mobile1: {
							required: true,
							mobile: true,
						},
					　　　password: "required",
					}
				});
				
				var validator2 = $("#form2").validate({
					onsubmit: false,
					onfocusout: function(ele) {
						validator2.element(ele)
					},
				　　　rules: {
				　　　　　　mobile2: {
							required: true,
							mobile: true,
						},
					　　　captcha: "required",
					}
				});
				
				
				$tabs.on('click','li',function() {
					var idx = $(this).index(),
						mob = '';
						
					if(idx == 1) { // 点击验证码登录选项卡
						mob = $mobile1.val();
						if(mob) {
							$mobile.val(mob);
							validator2.element($mobile2)
						}
					} else { // 点击手机登陆选项卡
						mob = $mobile2.val();
						if(mob) {
							$mobile.val(mob);
							validator1.element($mobile1)
						}
					}
				})
				
				//$("#form1").valid();
				jQuery.validator.addMethod("mobile", function(value, element, param) {
					var reg=/^[1][3,4,5,7,8][0-9]{9}$/;  
				  return reg.test(value);  
				}, "手机号码有误");
			})

		</script>
	</body>
</html>