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

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

@@ -136,11 +136,10 @@
         }
 
         #nameAndPwdLogin{
-            color: #338cff;
+            color: #666;
-            font-size: larger;
             cursor: pointer;
             position: absolute;
-            top: 0%;
+            bottom: 10%;
             left: 40%;
         }
     </style>
@@ -188,24 +187,25 @@
 
         </div>
     </div>
-    <div id="login_panle">
+    <div id="login_panle" style="display:none;" >
-        <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,11 +215,8 @@
                 dotColor: '#7ec7fd',
                 lineColor: '#7ec7fd'
             });
-            createLoginPanel()
         });
 
-
-
         // 进行登录操作
         form.on('submit(login)', function (data) {
             data = data.field;
@@ -280,33 +277,24 @@
         $("#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'
-                }
-            });
-        }
-
-
 // 卸载
 
     });

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

@@ -136,11 +136,10 @@
         }
 
         #nameAndPwdLogin{
-            color: #338cff;
+            color: #666;
-            font-size: larger;
             cursor: pointer;
             position: absolute;
-            top: 0%;
+            bottom: 10%;
             left: 40%;
         }
     </style>
@@ -188,24 +187,25 @@
 
         </div>
     </div>
-    <div id="login_panle">
+    <div id="login_panle" style="display:none;" >
-        <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,11 +215,8 @@
                 dotColor: '#7ec7fd',
                 lineColor: '#7ec7fd'
             });
-            createLoginPanel()
         });
 
-
-
         // 进行登录操作
         form.on('submit(login)', function (data) {
             data = data.field;
@@ -280,33 +277,24 @@
         $("#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'
-                }
-            });
-        }
-
-
 // 卸载
 
     });