zhengbingbing
/
XinXiangXLX_UI


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275
							<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
		<title>登录</title>
		<meta name="keywords">
		<meta name="description">
		<meta name="renderer" content="webkit" />
		<link rel="shortcut icon" href="img/32.ico" />
		<link href="./css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet" type="text/css">
		<link href="./css/animate.min.css" rel="stylesheet" type="text/css" />
		<link href="./css/login.min.css" rel="stylesheet">
	</head>
	<style>
		.login_panel_footer .footer_text:before{width:50px;}
		.login_panel_footer .footer_text:after{width:50px;}
		.signin_bgl {
		    position: absolute;
		    top: 30%;
		    margin-left: 80px;
		    left: 20%;
		    margin-top: -220px;
		    width: 660px;
		    height: 706px;
		    background-size: 100% 100%;
		}
	</style>
	<body>
		<div class="header">
			<img class="logo" src="img/logo.png" alt="logo">
		</div>
		<div class="signin">
			<div class="signin_bgl animated fadeIn"></div>
			<div class="signin_bg animated fadeIn">
				<ul class="login_tab clearfix" id="login_tab">
					<li class="active">管理员登录</li>
					<li>坐席登录</li>
				</ul>
				<div class="signin_panel" id="signin">
					<div class="signin_user">
						<i class="signin_icons"></i>
						<input class="form-control" type="text" placeholder="请输入账号" id="user" autofocus autocomplete="off">
					</div>
					<div class="signin_extensionnumber" id="signin_extensionnumber" style="display: none;">
						<i class="signin_icons"></i>
						<input class="form-control" type="text" placeholder="请输入分机号" id="extensionNumber" autofocus autocomplete="off">
					</div>
					<div class="signin_password">
						<i class="signin_icons"></i>
						<input class="form-control" type="text" onfocus="this.type='password'" placeholder="请输入密码" id="password" autocomplete="new-password">
					</div>
					<div class="alert alert-danger" id="login_tips" role="alert">
						<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
						<span class="sr-only">Error:</span>
						<span id="login_msg"></span>
					</div>
					<button class="btns" type="button" disabled="disabled">登录</button>
					<div class="login_panel_footer">
						<span class="footer_text">心连心化学工业集团</span>
					</div>
				</div>
			</div>
		</div>
		
		<div class="footer text-center">
			<p></p>
		</div>
		<script src="Script/Common/huayi.config.js"></script>
		<script language="javascript" type="text/javascript" src="./js/jquery.min.js?v=2.1.4"></script>
		<script language="javascript" type="text/javascript" src="./js/jquery.cookie.js"></script>
		<script language="javascript" type="text/javascript" src="./js/layer/layer.js"></script>
		<script src="./Script/Common/regexs.js"></script>
		<script>
			$(function() {
				$('#login_tab').find('li').on('click', tabChane);
				
				$('#signin').find("input[class='form-control']").focus(function() {
					$(this).parent().addClass('active').siblings().removeClass('active')
				});
				$('#signin').find("input[class='form-control']").blur(function() {
					$(this).parent().removeClass('active').siblings().removeClass('active')
				});

				/*输入框绑定验证*/
				$('#signin').find("input[class='form-control']").on('focus input propertychange', valideInput);
				$('#user').trigger('propertychange');
				$('#user').trigger('focus');
				$('#user').trigger('input');
			});

			//enter 登录
			function enterHanlde(event) {
				if(event.keyCode == "13") {
					if(!$('.layui-layer-btn').length){
						$('.btns:not(:disabled)').trigger("click");
					}else{
						$('.layui-layer-btn a').trigger('click');
					}
				}
			}

			/*点击提交*/
			function login() {
				if($('#login_tab').find('li.active').text() !== '坐席登录'){
					$('#extensionNumber').val('');
				}
				$.ajax({
					type: "post",
					url: huayi.config.callcenter_url + "/Login/login",
					dataType: 'json',
					async: true,
					beforeSend: function() { //触发ajax请求开始时执行
						$('.btns').attr("disabled", true);
						$('.btns').text('登录中...');
						$(document).off('click', '.btns', login);
						$(document).off('keypress', enterHanlde);
						loadIndex = layer.load();
					},
					data: {
						username: $("#user").val(),
						extensionphone: $('#extensionNumber').val(),
						password: $("#password").val()
					},
					success: function(data) {
						layer.close(loadIndex);
						/*验证请求*/
						if(data.state == "success") {
							$.cookie("token", data.data.token, {
								expires: 7
							});
							$.cookie("extno", $('#extensionNumber').val(), {
								expires: 7
							});
							window.location.href = "index.html";
						} else {
							$("#password").val('');
							$("#password").parent().removeClass('has-success has-feedback');
							$("#password").parent().removeClass('has-error has-feedback');
							$("#password").parent().find('.glyphicon').remove();
							$('.btns').text('登录');
							$(document).off('keypress', enterHanlde);
							layer.alert(data.message, {
								icon: 2,
								closeBtn: 0,
								btn: ['确定'], //按钮
							}, function(index) {
								parent.$('.btns').attr("disabled", true);
								parent.$(document).off('click', '.btns', login);
								parent.$(document).off('keypress', enterHanlde);
								parent.layer.close(index);
								parent.$('#user').trigger('focus');
							});
						}
					},

					error: function(textStatus) {
						layer.close(loadIndex);
						layer.confirm('网络繁忙，请稍后再试...', {
							closeBtn: 0,
							btn: ['确定'] //按钮
						});
						$('.btns').text('登录');
						$('.btns').attr("disabled", false);
						$(document).off('click', '.btns', login);
						$(document).on('click', '.btns', login);
						$(document).off('keypress', enterHanlde);
						$(document).on('keypress', enterHanlde);
					},
					complete: function(XMLHttpRequest, textStatus) {
						layer.close(loadIndex);
						if(textStatus == 'timeout') {
							var xmlhttp = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHttp");
							xmlhttp.abort();
							layer.confirm('网络超时，请稍后再试...', {
								closeBtn: 0,
								btn: ['确定'] //按钮
							});　　　　
						}
						$('.btns').text('登录');
						$('.btns').attr("disabled", false);
						$(document).off('click', '.btns', login);
						$(document).on('click', '.btns', login);
						$(document).off('keypress', enterHanlde);
						$(document).on('keypress', enterHanlde);
					},
				});
			}

			//验证
			function valideInput() {
				var _that = $(this);
				var ele = $(this).attr('id');
				var isSeat = null;
				if($('#login_tab').find('li.active').text() === '坐席登录'){
					isSeat = true;
				}else{
					isSeat = false;
				}
				if(ele === 'user') {
					valideMethods(_that, regexs.userReg, '4-20个字符只能是字母、下划线、数字');
				} else if(ele === 'extensionNumber' && isSeat) {
					valideMethods(_that, regexs.num, '只能输入数字');
				} else if(ele === 'password') {
					valideMethods(_that, regexs.passwordReg, '6-32个字符只能是字母、下划线、数字');
				}
				
				if(regexs.userReg.test($.trim($('#user').val())) && regexs.passwordReg.test($.trim($("#password").val()))) {
					if(isSeat){
						if(!$.trim($('#extensionNumber').val())){
							$('#login_tips').show();
							$('#login_msg').text('您还没有输入分机号！');
							$('.btns').attr("disabled", true);
							$(document).off('click', '.btns', login);
							$(document).off('keypress', enterHanlde);
						}else{
							if(regexs.nums.test($.trim($('#extensionNumber').val()))) {
								$('.btns').attr("disabled", false);
								$(document).off('click', '.btns', login);
								$(document).on('click', '.btns', login);
								$(document).off('keypress', enterHanlde);
								$(document).on('keypress', enterHanlde);
							} else {
								$('.btns').attr("disabled", true);
								$(document).off('click', '.btns', login);
								$(document).off('keypress', enterHanlde);
							}
						}
					}else{
						$('.btns').attr("disabled", false);
						$(document).off('click', '.btns', login);
						$(document).on('click', '.btns', login);
						$(document).off('keypress', enterHanlde);
						$(document).on('keypress', enterHanlde);
					}
				}
			}
			/**
			 * 验证方法
			 * _this :传递的this
			 * regRlues: 验证的规则
			 * msg: 提示信息
			 * */
			function valideMethods(_this, regRlues, msg) {
				$('#login_tips').hide();
				$('#login_msg').text('');
				if(!regRlues.test($.trim(_this.val()))) {
					_this.parent().removeClass('has-success has-feedback').addClass('has-error has-feedback');
					_this.parent().find('.glyphicon').remove();
					$('<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>').appendTo(_this.parent());
					$('#login_tips').show();
					$('#login_msg').text(msg);
				} else {
					_this.parent().removeClass('has-error has-feedback').addClass('has-success has-feedback');
					_this.parent().find('.glyphicon').remove();
					$('<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>').appendTo(_this.parent());
				}
			}
			
			//tab 切换
			function tabChane(){
				$('#login_tips').hide();
				$(this).addClass('active').siblings().removeClass('active');
				if($(this).index() === 1){
					$('#signin_extensionnumber').show();
				}else{
					$('#signin_extensionnumber').hide();
				}
				$('#user').trigger('focus');
			}
		</script>
	</body>

</html>