添加企业微信扫码登录功能

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

@@ -136,10 +136,11 @@
         }
 
         #nameAndPwdLogin {
-            color: #666;
+            color: #338cff;
+            font-size: larger;
             cursor: pointer;
             position: absolute;
-            bottom: 10%;
+            top: 0%;
             left: 40%;
         }
     </style>
@@ -187,25 +188,24 @@
 
         </div>
     </div>
-    <div id="login_panle" style="display:none;" >
+    <div id="login_panle">
+        <span id="nameAndPwdLogin">账号登录</span>
         <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;
 
+        let wwLogin = null;
+
         // 登录过期的时候，跳出ifram框架
         if (top.location != self.location) top.location = self.location;
 
@@ -215,8 +215,11 @@
                 dotColor: '#7ec7fd',
                 lineColor: '#7ec7fd'
             });
+            createLoginPanel()
         });
 
+
+
         // 进行登录操作
         form.on('submit(login)', function (data) {
             data = data.field;
@@ -277,24 +280,33 @@
         $("#scanQrCodeLogin").click(function () {
 
             $("#login_panle").show();
-            let url = "https://jy.hxgk.group/QyWxLogin";
+            // 初始化
-
+            createLoginPanel()
-            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();
+            // 卸载
+            wwLogin.unmount()
         })
 
 
+        createLoginPanel = function () {
+            wwLogin = ww.createWWLoginPanel({
+                el: '#login_mainPanle',
+                params: {
+                    login_type: 'CorpApp',
+                    appid: 'ww02f310301953277a',
+                    agentid: '1000037',
+                    redirect_uri: 'https://jy.hxgk.group/QyWxLogin',
+                    state: 'loginState',
+                    redirect_type: 'Callback',
+                    panel_size:'small'
+                }
+            });
+        }
+
+
 // 卸载
 
     });

src/test/java/com/dreamchaser/depository_manage/TestForOther.java

@@ -10,6 +10,7 @@ import com.alibaba.excel.write.metadata.fill.FillWrapper;
 import com.alibaba.fastjson.JSONArray;
 import com.alibaba.fastjson.JSONObject;
 import com.alibaba.fastjson.JSONPObject;
+import com.dreamchaser.depository_manage.config.QyWxConfig;
 import com.dreamchaser.depository_manage.entity.*;
 import com.dreamchaser.depository_manage.mapper.DepositoryMapper;
 import com.dreamchaser.depository_manage.mapper.DepositoryRecordMapper;
@@ -34,6 +35,8 @@ import org.springframework.web.jsf.FacesContextUtils;
 
 import java.io.File;
 import java.io.IOException;
+import java.io.UnsupportedEncodingException;
+import java.net.URLEncoder;
 import java.util.*;
 import java.util.concurrent.*;
 
@@ -58,10 +61,10 @@ public class TestForOther {
     @Test
     public void run() {
         ApprovalInfo_Details approvalInfo = new ApprovalInfo_Details();
-        ApprovalInfo_Details_Approver approver = new ApprovalInfo_Details_Approver();
+//        ApprovalInfo_Details_Approver approver = new ApprovalInfo_Details_Approver();
-        approver.setUserId("PangFuZhen");
+//        approver.setUserId("PangFuZhen");
-        approvalInfo.setApprover(approver);
+//        approvalInfo.setApprover(approver);
-        depositoryRecordService.reviewByQyWxApprovalOut("1",approvalInfo,"8ffd487e6b203bffa21142d383b70f47","2","202303240030", false,2);
+//        depositoryRecordService.reviewByQyWxApprovalOut("1",approvalInfo,"8ffd487e6b203bffa21142d383b70f47","2","202303240030", false,2);
 //        depositoryRecordService.reviewByQyWxApprovalIn("[1]",approvalInfo,"460f46eaefb46bb0c171029f62e2cea6","2","202303220009");
 //        UserByPort userByPort = LinkInterfaceUtil.FindUserById(78, null);
 //        List<String> s = excelService.writeExcelForPrint(2, 4,userByPort);

target/classes/templates/pages/user/login.html

@@ -15,20 +15,134 @@
     <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: #338cff;
+            font-size: larger;
+            cursor: pointer;
+            position: absolute;
+            top: 0%;
+            left: 40%;
+        }
     </style>
 </head>
 <body>
@@ -42,39 +156,55 @@
                 </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">
+        <span id="nameAndPwdLogin">账号登录</span>
+        <div id="login_mainPanle">
+
         </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>
-
     layui.use(['layer', 'form'], function () {
         var form = layui.form,
             layer = layui.layer;
 
+        let wwLogin = null;
 
         // 登录过期的时候，跳出ifram框架
         if (top.location != self.location) top.location = self.location;
@@ -85,6 +215,7 @@
                 dotColor: '#7ec7fd',
                 lineColor: '#7ec7fd'
             });
+            createLoginPanel()
         });
 
 
@@ -145,6 +276,39 @@
             });
             return false;
         });
+
+        $("#scanQrCodeLogin").click(function () {
+
+            $("#login_panle").show();
+            // 初始化
+            createLoginPanel()
+        });
+
+        $("#nameAndPwdLogin").click(function () {
+            $("#login_panle").hide();
+            // 卸载
+            wwLogin.unmount()
+        })
+
+
+        createLoginPanel = function () {
+            wwLogin = ww.createWWLoginPanel({
+                el: '#login_mainPanle',
+                params: {
+                    login_type: 'CorpApp',
+                    appid: 'ww02f310301953277a',
+                    agentid: '1000037',
+                    redirect_uri: 'https://jy.hxgk.group/QyWxLogin',
+                    state: 'loginState',
+                    redirect_type: 'Callback',
+                    panel_size:'small'
+                }
+            });
+        }
+
+
+// 卸载
+
     });
 
     function changerPic() {
@@ -159,6 +323,8 @@
             }
         });
     }
+
+
 </script>
 </body>
 </html>