~jiangyouyao/beauty-erp.git

			@@ -17,20 +17,21 @@
			.row > div:nth-child(1) {
			background: url(../../images/login-title.jpg) no-repeat;
			background-size: 100% 100%;
			height: 380px;
			height: 450px;
			}

			.row > div:nth-child(2) {
			background: #fff;
			height: 380px;
			height: 450px;
			}

			.download-bar {
			margin-top: 15px;
			color: #fff;
			color: #4968bd;
			}

			.download-bar a {
			color: #fff;
			color: #4968bd;
			margin: 0 5px;
			}

			@@ -40,6 +41,8 @@
			}
			</style>
			<script>


			var isoldIE = false;
			if (navigator.userAgent.indexOf("MSIE") > 0) {
			if (navigator.userAgent.indexOf("MSIE 6.0") > 0
			@@ -59,6 +62,20 @@

			<link th:href="@{/css/styleOne/login.min.css}" rel="stylesheet">
			<style type="text/css">
			.form-control {
			background-color: #FFF;
			background-image: none;
			border: 1px solid #d7d8d9;
			color: #373d41;
			display: block;
			padding: 20px 12px;
			width: 100%;
			font-size: 14px
			-webkit-box-shadow: none !important;
			box-shadow: none !important;
			border-radius: 0px !important;
			}

			.layui-layer-content {
			color: #000;
			}
			@@ -84,7 +101,7 @@

			.signinpanel .dataForm > div > img {
			position: absolute;
			top: 9px;
			top: 13px;
			left: 5px;
			}

			@@ -101,78 +118,148 @@
			height: 200px;
			}
			}

			.qrloginBox {
			float: right;
			}

			.qrloginSpan {
			background: #edf4ff;
			border: 1px solid #155bd4;
			position: relative;
			padding: 4px 8px;
			border-radius: 2px;
			font-size: 14px;
			color: #155bd4;
			cursor: pointer;
			}

			.qrImg {
			width: 50px;
			cursor: pointer;
			}

			#qrCodeIcon {
			margin: 20px auto;
			text-align: center;
			overflow: hidden;
			width: 220px;
			height: 220px;
			border: 1px solid #dcd0d0;
			}

			#qrCodeIcon img {
			margin: 10px;
			}
			#scanResult{
			text-align: center;
			color: #333333;
			}
			#scanResult{
			text-align: center;
			}
			#scanResult img{
			width: 50px;
			margin: 50px auto;
			}
			#wxQrcode{
			text-align: center;
			color: #333333;
			width: 220px;
			height: 220px;
			overflow: hidden;
			position: relative;
			margin: 20px auto;
			}
			.wxQrcodeInfo{
			position: absolute;
			top: 0px;
			background: rgb(255 255 255 / 94%);
			width: 220px;
			height: 220px;
			display: flex;
			z-index: 999999;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			}
			.wxQrcodeImg{
			position: absolute;
			width: 200px;
			top: 10px;
			z-index: 11;
			left: 10px;
			}
			</style>
			</head>

			<body class="signin" onkeypress="dologin(event)">

			<div class="signinpanel">
			<div class="row" style="box-shadow: 1px 5px 10px #f1e2e2;">
			<div class="row" style="box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);">
			<div class="col-sm-6"></div>
			<div class="col-sm-6">
			<form method="post" class="dataForm">
			<h3 class="no-margins text-center title" style="color: #E60012;font-size: 18px;">登录</h3>
			<div>
			<input autocomplete="off" id="account" type="text" placeholder="请输入用户名"
			class="form-control uname"/>
			<img alt="" src="../../images/user.png">
			</div>
			<br>
			<div>
			<input autocomplete="off" id="password"
			type="password" class="form-control pword m-b" nullmsg="密码不能为空"
			placeholder="请输入密码"/>
			<img alt="" src="../../images/locked.png">
			</div>
			<br> <br>
			<div class="col-sm-6 " style="padding: 0px;">
			<div id="accountWarp">
			<div onclick="changeLoginType()" class="qrloginBox"><span class="qrloginSpan">扫码登录</span><img
			class="qrImg"
			src="../../images/qrcode.png"></div>
			<form method="post" class="dataForm">
			<h3 class="no-margins text-center title" style="color: #666666;font-size: 24px;font-weight: bold">
			欢迎登录</h3>
			<div>
			<input autocomplete="off" id="account" type="text" placeholder="请输入用户名"
			class="form-control uname"/>
			<img alt="" src="../../images/user.png">
			</div>
			<br>
			<div>
			<input autocomplete="off" id="password"
			type="password" class="form-control pword m-b" nullmsg="密码不能为空"
			placeholder="请输入密码"/>
			<img alt="" src="../../images/locked.png">
			</div>
			<br> <br>

			<button type="button" onclick="login()" style="background-color: #E60012;border: none;"
			class="btn btn-success btn-block">登录
			</button>
			<button type="button" onclick="login()"
			style="background-color: #4f6cff;border: none;font-size: 18px;"
			class="btn btn-success btn-block">登录
			</button>

			</form>
			</div>
			<!-- <div class="col-sm-7">
			<div class="signin-info">
			<div class="logopanel m-b">
			<h1>[ Matrix-Java 简化你的开发 ]</h1>
			</form>
			</div>
			<div id="qrCodeWarp">
			<div onclick="changeLoginType()" class="qrloginBox"><span class="qrloginSpan">账号登录</span><img
			class="qrImg"
			src="../../images/pc.png"></div>
			<div style="border-radius: 3px;
			padding: 30px;">
			<h3 class="no-margins text-center title" style="color: #666666;font-size: 24px;font-weight: bold">
			扫码登录</h3>
			<div id="qrCodeIcon">

			</div>
			<div id="wxQrcode">

			<img class="wxQrcodeImg" src=" ../../images/qrcodeBack.png">
			<div class="wxQrcodeInfo">
			<p>二维码已失效</p>
			<button onclick="flushQrcode()" class="btn btn-primary">刷新二维码</button>
			</div>


			</div>
			<div id="scanResult" style="display: none">

			<img src="../../images/dui.png">
			<p>扫描成功！</p>
			<p>请在手机上根据提示确认登录</p>
			</div>
			</div>
			<div class="m-b"></div>
			<h4>
			欢迎使用 <strong>Matrix-Java v4.0框架</strong>
			</h4>
			<ul class="m-b">
			<li><i class="fa fa-arrow-circle-o-right m-r-xs"></i>
			代码，界面一键生成</li>
			<li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> 集团化权限控制</li>
			<li><i class="fa fa-arrow-circle-o-right m-r-xs"></i>
			集成微信、支付宝接口</li>
			<li><i class="fa fa-arrow-circle-o-right m-r-xs"></i>
			满足App接口开发</li>
			<li><i class="fa fa-arrow-circle-o-right m-r-xs"></i>
			N多基础功能：短信、邮件、文章、广告、留言...</li>
			<li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> 安全</li>
			<li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> 易用</li>
			<li><i class="fa fa-arrow-circle-o-right m-r-xs"></i>
			架构【SpingMvc+Mybatis+Mysql】</li>
			</ul>
			</div>
			</div>
			<div class="col-sm-5">
			<form method="post" class="dataForm">
			<h2 class="no-margins text-center">登录</h2>
			<input autocomplete="off" id="account" type="text" placeholder="账户"
			class="form-control uname" /> <br> <input autocomplete="off" id="password"
			type="password" class="form-control pword m-b" nullmsg="密码不能为空"
			placeholder="密码" /> <a href=""> </a> <br> <br>

			<button type="button" onclick="login()"
			class="btn btn-success btn-block">登录</button>

			</form>
			</div> -->
			</div>
			<div class="signup-footer" style="color: #fff;">
			<div class="signup-footer" style="color: #4968bd;">
			<div class="" style="font-size: 16px;">HIVE管理系统V2.2.0</div>
			<div class="">

			@@ -192,9 +279,47 @@
			</body>
			<script type="text/javascript" th:src="@{/js/systools/MJsBase.js}"></script>
			<script type="text/javascript" th:src="@{/js/plugin/jsencrypt.min.js}"></script>
			<script type="text/javascript" th:src="@{/js/plugin/qrcode.js}"></script>
			<script th:inline="javascript">
			var crypt = new JSEncrypt();
			let loginType = 1;
			$("#qrCodeWarp").hide();
			$("#wxQrcode").hide();
			function changeLoginType() {
			if (loginType == 1) {
			$("#accountWarp").hide();
			$("#qrCodeWarp").show();
			loginType = 2;
			} else {

			$("#accountWarp").show();
			$("#qrCodeWarp").hide();
			loginType = 1;
			}
			}

			//soket用户标识
			let webClientId = "webClientId_" + MTools.randomStr();
			let loginQrCodeKey="";


			markQrcode();
			function markQrcode(){

			var qrcode = new QRCode(document.getElementById("qrCodeIcon"), {
			width: 200,
			height: 200
			});
			loginQrCodeKey="loginQrCodeKey_" + MTools.randomStr();
			let qrInfo={webClientId:webClientId,loginQrCodeKey:loginQrCodeKey}
			console.log(qrInfo);
			qrcode.makeCode(JSON.stringify(qrInfo));
			$('#qrCodeIcon canvas').show();

			}


			openSocket();
			/<![CDATA[/

			var publicKey =/[[${session.publicKey}]]/
			@@ -203,7 +328,25 @@

			crypt.setKey(publicKey);


			function flushQrcode(){

			$("#scanResult").hide();
			$("#wxQrcode").hide();
			webClientId = "XCMY_SCAN_QRCODE" + MTools.randomStr();

			$("#qrCodeIcon").html("");
			$("#qrCodeIcon").show();
			markQrcode();




			}


			function login() {

			if ($("#account").val() == "") {
			layer.tips('请输入账号！', '#account');
			return false;
			@@ -216,12 +359,16 @@
			$.AjaxProxy({
			p: {
			suAccount: encAcc,
			suPassword: encPwd
			suPassword: encPwd,
			loginType: 1
			}
			}).invoke("/common/dologin", function (loj) {
			MTools.redirect("/" + loj.getValue("page"));
			});
			}




			function dologin(e) {
			if (e.keyCode == 13) {
			@@ -231,5 +378,87 @@
			return false;
			}
			}



			var socket;
			function openSocket() {
			if(typeof(WebSocket) == "undefined") {
			console.log("您的浏览器不支持WebSocket");
			}else{
			console.log("您的浏览器支持WebSocket");
			//实现化WebSocket对象，指定要连接的服务器地址与端口建立连接
			let wsPath= getRootPath();
			var socketUrl= wsPath.replace("http","ws")+ "/webSocketServer?userId="+webClientId;
			console.log(socketUrl);
			if(socket!=null){
			socket.close();
			socket=null;
			}
			socket = new WebSocket(socketUrl);
			//打开事件
			socket.onopen = function() {
			console.log("websocket已打开");
			sendMessage();
			};
			//获得消息事件
			socket.onmessage = function(msg) {
			console.log(msg);
			var serverMsg = JSON.parse(msg.data);

			if(serverMsg.msgType==1){

			$("#scanResult").show();
			$("#qrCodeIcon").hide();

			}else if(serverMsg.msgType==2){

			if(serverMsg.loginOperation==1){
			$.AjaxProxy({
			p: {
			loginQrCodeKey: loginQrCodeKey,
			loginType: 2
			}
			}).invoke("/common/dologin", function (loj) {
			MTools.redirect("/" + loj.getValue("page"));
			});
			}else if(serverMsg.loginOperation==2){
			layer.msg("取消登录", {
			icon : 2
			});
			$("#scanResult").hide();
			$("#wxQrcode").show();
			}
			}
			};
			//关闭事件
			socket.onclose = function() {
			console.log("websocket已关闭");
			};
			//发生了错误事件
			socket.onerror = function() {
			console.log("websocket发生了错误");
			}
			}
			}

			function sendMessage() {
			if(typeof(WebSocket) == "undefined") {
			console.log("您的浏览器不支持WebSocket");
			}else {
			var msg = '{ }';
			socket.send(msg);
			}
			}
			function colseSocket() {
			if(typeof(WebSocket) == "undefined") {
			console.log("您的浏览器不支持WebSocket");
			}else {
			socket.close();
			}
			}



			</script>
			</html>