<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>value系统登录</title>
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="/js/poshytip/tip-yellow/tip-yellow.css" type="text/css" />
	<link rel="stylesheet" href="/js/modaldialog/css/jquery.modaldialog.css" type="text/css" />
	<link rel="stylesheet" href="/js/kindeditor/themes/default/default.css" type="text/css" media="screen" />
	<script type="text/javascript" src="/js/jquery.js"></script>
	<script type="text/javascript" src="/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="/js/poshytip/jquery.poshytip.min.js"></script>
	<script type="text/javascript" src="/js/jquery.form.min.js"></script> 
	<script type="text/javascript" src="/js/modaldialog/jquery.modaldialog.js"></script>
	<script type="text/javascript" src="/js/kindeditor/kindeditor-min.js"></script>
	<script type="text/javascript" src="/js/basic.js"></script>
	<script src="https://g.alicdn.com/dingding/dinglogin/0.0.2/ddLogin.js"></script>
	<link rel="shortcut icon" href="http://data.chtcdn.com/bootstrap/img/glyphicons_290_skull.png">
  </head>
<style>
.ding_login{
	width:365px;
	height:400px;
	margin:0 auto;
}
.login_header{
  width: 100%;
  height: 64px;
  font-size: 18px;
  color: #898d90;
  overflow: hidden;
  border-bottom: 1px solid #e8e8e8;
}
.login_type{
  width: 50%;
  line-height: 60px;
  text-align: center;
  border-bottom: 4px solid transparent;
  float: left;
  cursor: pointer;
}
.login_type_active{
  color: #38adff;
  border-bottom: 4px solid #38adff;
  cursor: default;
}
.hide{
  display: none;
}
</style>  
<body>
  
<div class="row-fluid">
  <div class="span3"></div>
  <div class="span6">
		<form action="<?php echo site_url('login/check') ?>" class="form-horizontal"  name="form_login" id="form_login" method="post">
		<legend>
			<p>Welcome</p>
			<div class="login_header">
					<div class="login_type login_type_active">钉钉扫码登录</div>
					<div class="login_type"><a href="https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=dingoalutppbmywhkyorfp&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=http://www.mycht.cn/info.php/apps/dinglogin/login/auth_login">钉钉账号密码登录</a></div>
			 </div>
		</legend>
		<div class="ding_login">
			<div id="login_container"></div>
		</div>
		</form>
		
	<div class="alert alert-error">
	  <h4>IE6 isn't allowed!</h4>
	  Please use Google Chrome, Firefox, Safair, or IE7+.
	</div>
 
  </div>
  <div class="span3"></div>
</div>
</body>
<script>
$(function(){
	var url = encodeURIComponent("https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=dingoalutppbmywhkyorfp&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=http://www.mycht.cn/info.php/apps/dinglogin/login/auth_login");
																																													
	var obj = DDLogin({
     id:"login_container",//这里需要你在自己的页面定义一个HTML标签并设置id，例如<div id="login_container"></div>或<span id="login_container"></span>
     goto: url,
     style: "",
     href: "",
     width : "300px",
     height: "300px"
 });

	var hanndleMessage = function (event) {
		var loginTmpCode = event.data; //拿到loginTmpCode后就可以在这里构造跳转链接进行跳转了
		var origin = event.origin;
		login_url = 'https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=dingoalutppbmywhkyorfp&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=http://www.mycht.cn/info.php/apps/dinglogin/login/auth_login&loginTmpCode='+loginTmpCode;
		window.location.href = login_url;
	};
	if (typeof window.addEventListener != 'undefined') {
		window.addEventListener('message', hanndleMessage, false);
	} else if (typeof window.attachEvent != 'undefined') {
		window.attachEvent('onmessage', hanndleMessage);
	}
	
	$('.login_type').click(function(){
		console.log($(this).html());
		if($(this).html() == '钉钉帐号密码登录'){
			$('.pc_login').removeClass('hide');
			$('#login_container').addClass('hide');
			$('.ding_login').addClass('hide');
			$(this).addClass('login_type_active');
			$(this).prev().removeClass('login_type_active');
		}
		if($(this).html() == '钉钉扫码登录'){
			$('.ding_login').removeClass('hide');
			$('#login_container').removeClass('hide');
			$('.pc_login').addClass('hide');
			$(this).addClass('login_type_active');
			$(this).next().removeClass('login_type_active');
		}
	});
	
});

</script>
</html>
