添加企业微信扫码功能

src/main/resources/templates/pages/user/login.html

@@ -9,26 +9,139 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="format-detection" content="telephone=no">
     <link rel="stylesheet" href="/static/lib/layui-v2.6.3/css/layui.css" media="all">
-    <link rel="stylesheet"  href="/static/css/public.css">
+    <link rel="stylesheet" href="/static/css/public.css">
     <!--[if lt IE 9]>
     <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
     <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
     <![endif]-->
     <style>
-        html, body {width: 100%;height: 100%;overflow: hidden}
+        html, body {
-        body {background: #1E9FFF;}
+            width: 100%;
-        body:after {content:'';background-repeat:no-repeat;background-size:cover;-webkit-filter:blur(3px);-moz-filter:blur(3px);-o-filter:blur(3px);-ms-filter:blur(3px);filter:blur(3px);position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1;}
+            height: 100%;
-        .layui-container {width: 100%;height: 100%;overflow: hidden}
+            overflow: hidden
-        .admin-login-background {width:360px;height:300px;position:absolute;left:50%;top:40%;margin-left:-180px;margin-top:-100px;}
+        }
-        .logo-title {text-align:center;letter-spacing:2px;padding:14px 0;}
+
-        .logo-title h1 {color:#1E9FFF;font-size:25px;font-weight:bold;}
+        body {
-        .login-form {background-color:#fff;border:1px solid #fff;border-radius:3px;padding:14px 20px;box-shadow:0 0 8px #eeeeee;}
+            background: #1E9FFF;
-        .login-form .layui-form-item {position:relative;}
+        }
-        .login-form .layui-form-item label {position:absolute;left:1px;top:1px;width:38px;line-height:36px;text-align:center;color:#d2d2d2;}
+
-        .login-form .layui-form-item input {padding-left:36px;}
+        body:after {
-        .captcha {width:60%;display:inline-block;}
+            content: '';
-        .captcha-img {display:inline-block;width:34%;float:right;}
+            background-repeat: no-repeat;
-        .captcha-img img {height:34px;border:1px solid #e6e6e6;height:36px;width:100%;}
+            background-size: cover;
+            -webkit-filter: blur(3px);
+            -moz-filter: blur(3px);
+            -o-filter: blur(3px);
+            -ms-filter: blur(3px);
+            filter: blur(3px);
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            z-index: -1;
+        }
+
+        .layui-container {
+            width: 100%;
+            height: 100%;
+            overflow: hidden
+        }
+
+        .admin-login-background {
+            width: 360px;
+            height: 300px;
+            position: absolute;
+            left: 50%;
+            top: 40%;
+            margin-left: -180px;
+            margin-top: -100px;
+        }
+
+        .logo-title {
+            text-align: center;
+            letter-spacing: 2px;
+            padding: 14px 0;
+        }
+
+        .logo-title h1 {
+            color: #1E9FFF;
+            font-size: 25px;
+            font-weight: bold;
+        }
+
+        .login-form {
+            background-color: #fff;
+            border: 1px solid #fff;
+            border-radius: 3px;
+            padding: 14px 20px;
+            box-shadow: 0 0 8px #eeeeee;
+        }
+
+        .login-form .layui-form-item {
+            position: relative;
+        }
+
+        .login-form .layui-form-item label {
+            position: absolute;
+            left: 1px;
+            top: 1px;
+            width: 38px;
+            line-height: 36px;
+            text-align: center;
+            color: #d2d2d2;
+        }
+
+        .login-form .layui-form-item input {
+            padding-left: 36px;
+        }
+
+        .captcha {
+            width: 60%;
+            display: inline-block;
+        }
+
+        .captcha-img {
+            display: inline-block;
+            width: 34%;
+            float: right;
+        }
+
+        .captcha-img img {
+            height: 34px;
+            border: 1px solid #e6e6e6;
+            height: 36px;
+            width: 100%;
+        }
+
+        #scanQrCodeLogin{
+            float: right;
+            display: block;
+            padding: 9px 0!important;
+            line-height: 20px;
+            margin-right: 10px;
+            color: #666;
+            cursor: pointer;
+        }
+
+        #login_panle{
+            background-color: #fff;
+            padding: 40px 40px 40px 40px;
+            border-radius: 10px;
+            position: absolute;
+            left: 50%;
+            top: 40%;
+            margin-left: -180px;
+            margin-top: -100px;
+        }
+
+        #nameAndPwdLogin{
+            color: #666;
+            cursor: pointer;
+            position: absolute;
+            bottom: 10%;
+            left: 40%;
+        }
     </style>
 </head>
 <body>
@@ -41,54 +154,69 @@
                     <h1>仓库管理系统登录</h1>
                 </div>
                 <div class="layui-form-item">
-                    <label class="layui-icon layui-icon-username" ></label>
+                    <label class="layui-icon layui-icon-username"></label>
-                    <input type="text" name="username" lay-verify="required|account" placeholder="请输入工号或用户名" autocomplete="off" class="layui-input" >
+                    <input type="text" name="username" lay-verify="required|account" placeholder="请输入工号或用户名"
+                           autocomplete="off" class="layui-input">
                 </div>
                 <div class="layui-form-item">
-                    <label class="layui-icon layui-icon-password" ></label>
+                    <label class="layui-icon layui-icon-password"></label>
-                    <input type="password" name="password" lay-verify="required|password" placeholder="请输入密码" autocomplete="off" class="layui-input">
+                    <input type="password" name="password" lay-verify="required|password" placeholder="请输入密码"
+                           autocomplete="off" class="layui-input">
                 </div>
                 <div class="layui-form-item">
-                    <label class="layui-icon layui-icon-vercode" ></label>
+                    <label class="layui-icon layui-icon-vercode"></label>
-                    <input type="text" name="captcha" id="captcha" lay-verify="required|captcha" placeholder="图形验证码" autocomplete="off" class="layui-input verification captcha">
+                    <input type="text" name="captcha" id="captcha" lay-verify="required|captcha" placeholder="图形验证码"
+                           autocomplete="off" class="layui-input verification captcha">
                     <div class="captcha-img">
-                        <input type="text" id="captchaId" name="captchaId" style="display: none" th:value="${captchaid}">
+                        <input type="text" id="captchaId" name="captchaId" style="display: none"
+                               th:value="${captchaid}">
                         <img id="captchaPic" th:src="${picPath}" onclick="changerPic()">
                     </div>
                 </div>
                 <div class="layui-form-item">
                     <input type="checkbox" name="rememberMe" value="true" lay-skin="primary" title="记住密码">
+                    <span id="scanQrCodeLogin">扫码登录</span>
                 </div>
+
                 <div class="layui-form-item">
-                    <button class="layui-btn layui-btn layui-btn-normal layui-btn-fluid" lay-submit="" lay-filter="login">登 入</button>
+                    <button class="layui-btn layui-btn layui-btn-normal layui-btn-fluid" lay-submit=""
+                            lay-filter="login">登 入
+                    </button>
                 </div>
             </form>
+
+        </div>
+    </div>
+    <div id="login_panle" style="display:none;" >
+        <div id="login_mainPanle">
+
+        </div>
+        <div class="layui-form-item">
+            <span id="nameAndPwdLogin">账号密码登录</span>
         </div>
     </div>
 </div>
-<script  src="static/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
+<script src="static/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
-<script  src="static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
+<script src="static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
-<script  src="static/lib/jq-module/jquery.particleground.min.js" charset="utf-8"></script>
+<script src="static/lib/jq-module/jquery.particleground.min.js" charset="utf-8"></script>
+<script src="https://wwcdn.weixin.qq.com/node/open/js/wecom-jssdk-1.3.1.js"></script>
+<script src="http://wwcdn.weixin.qq.com/node/wework/wwopen/js/wwLogin-1.2.4.js"></script>
 <script>
-
+    layui.use(['layer', 'form'], function () {
-    layui.use(['layer','form'], function () {
         var form = layui.form,
             layer = layui.layer;
 
-
         // 登录过期的时候，跳出ifram框架
         if (top.location != self.location) top.location = self.location;
 
         // 粒子线条背景
-        $(document).ready(function(){
+        $(document).ready(function () {
             $('.layui-container').particleground({
-                dotColor:'#7ec7fd',
+                dotColor: '#7ec7fd',
-                lineColor:'#7ec7fd'
+                lineColor: '#7ec7fd'
             });
         });
 
-
-
         // 进行登录操作
         form.on('submit(login)', function (data) {
             data = data.field;
@@ -105,35 +233,35 @@
                 return false;
             }
             $.ajax({
-                url:"/login",
+                url: "/login",
-                type:'post',
+                type: 'post',
-                dataType:'json',
+                dataType: 'json',
                 contentType: "application/json;charset=utf-8",
-                data:JSON.stringify(data),
+                data: JSON.stringify(data),
-                beforeSend:function () {
+                beforeSend: function () {
-                    this.layerIndex = layer.load(0, { shade: [0.5, '#393D49'] });
+                    this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']});
                 },
-                success:function(data){
+                success: function (data) {
                     layer.close(this.layerIndex);
-                    if(data.status !== 200){
+                    if (data.status !== 200) {
                         layer.msg(data.statusInfo.message);//失败的表情
                         $.ajax({
-                           url:"/getCaptchaid",
+                            url: "/getCaptchaid",
-                           type:"get",
+                            type: "get",
-                            dataType:'json',
+                            dataType: 'json',
                             contentType: "application/json;charset=utf-8",
-                            success:function (data) {
+                            success: function (data) {
                                 $("#captcha").val("");
-                                $("#captchaPic").attr("src",data.picPath);
+                                $("#captchaPic").attr("src", data.picPath);
                                 $("#captchaId").val(data.captchaid);
                             }
                         });
                         return;
-                    }else{
+                    } else {
                         layer.msg("登录成功", {
                             icon: 6,//成功的表情
                             time: 1000 //1秒关闭（如果不配置，默认是3秒）
-                        }, function(){
+                        }, function () {
                             window.location = '/index';
                         });
 
@@ -145,20 +273,46 @@
             });
             return false;
         });
+
+        $("#scanQrCodeLogin").click(function() {
+
+            $("#login_panle").show();
+            let url = "https://jy.hxgk.group/QyWxLogin";
+
+            var wwLogin =  new WwLogin({
+                "id": "login_mainPanle", // 登录页面显示二维码的容器id
+                "appid": "ww02f310301953277a",  // 企业微信的CorpID，在企业微信管理端查看
+                "agentid": "1000037", // 授权方的网页应用id，在具体的网页应用中查看
+                "redirect_uri": encodeURIComponent(url), // 重定向的地址，需要进行encode
+                "state": "loginState",
+                "href": "",  //自定义样式链接，只支持https协议的资源地址
+                "lang": "zh",
+            });
+        });
+
+        $("#nameAndPwdLogin").click(function () {
+            $("#login_panle").hide();
+        })
+
+
+// 卸载
+
     });
 
     function changerPic() {
         $.ajax({
-            url:"/getCaptchaid",
+            url: "/getCaptchaid",
-            type:"get",
+            type: "get",
-            dataType:'json',
+            dataType: 'json',
             contentType: "application/json;charset=utf-8",
-            success:function (data) {
+            success: function (data) {
-                $("#captchaPic").attr("src",data.picPath);
+                $("#captchaPic").attr("src", data.picPath);
                 $("#captchaId").val(data.captchaid);
             }
         });
     }
+
+
 </script>
 </body>
 </html>