From 7849d7799c9ede8447a4d57c26e032e08c1eff74 Mon Sep 17 00:00:00 2001
From: xiaoyong931011 <15274802129@163.com>
Date: Thu, 08 Apr 2021 20:14:50 +0800
Subject: [PATCH] Merge branch 'score_shop' of http://120.27.238.55:7000/r/beauty-erp into score_shop
---
zq-erp/src/main/resources/templates/views/common/login.html | 298 +++++++++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 276 insertions(+), 22 deletions(-)
diff --git a/zq-erp/src/main/resources/templates/views/common/login.html b/zq-erp/src/main/resources/templates/views/common/login.html
index f8bf84f..1d532e2 100644
--- a/zq-erp/src/main/resources/templates/views/common/login.html
+++ b/zq-erp/src/main/resources/templates/views/common/login.html
@@ -24,6 +24,7 @@
background: #fff;
height: 450px;
}
+
.download-bar {
margin-top: 15px;
color: #4968bd;
@@ -40,6 +41,8 @@
}
</style>
<script>
+
+
var isoldIE = false;
if (navigator.userAgent.indexOf("MSIE") > 0) {
if (navigator.userAgent.indexOf("MSIE 6.0") > 0
@@ -67,7 +70,8 @@
display: block;
padding: 20px 12px;
width: 100%;
- font-size: 14px -webkit-box-shadow: none !important;
+ font-size: 14px
+ -webkit-box-shadow: none !important;
box-shadow: none !important;
border-radius: 0px !important;
}
@@ -114,6 +118,78 @@
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>
@@ -122,28 +198,64 @@
<div class="signinpanel">
<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: #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>
+ <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: #4f6cff;border: none;font-size: 18px;"
- 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>
+ </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>
</div>
</div>
@@ -167,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}]]*/
@@ -178,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;
@@ -191,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) {
@@ -206,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>
\ No newline at end of file
--
Gitblit v1.9.1