添加企业微信扫码功能

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

@@ -15,20 +15,133 @@
     <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>
@@ -42,40 +155,57 @@
                 </div>
                 <div class="layui-form-item">
                     <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>
-                    <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>
-                    <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/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="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 () {
         var form = layui.form,
             layer = layui.layer;
 
-
         // 登录过期的时候，跳出ifram框架
         if (top.location != self.location) top.location = self.location;
 
@@ -87,8 +217,6 @@
             });
         });
 
-
-
         // 进行登录操作
         form.on('submit(login)', function (data) {
             data = data.field;
@@ -145,6 +273,30 @@
             });
             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() {
@@ -159,6 +311,8 @@
             }
         });
     }
+
+
 </script>
 </body>
 </html>