提交待完成的企业微信扫码登陆

fhKeeper/formulahousekeeper/timesheet/src/views/Login.vue

@@ -15,6 +15,14 @@
                 <el-form-item class="login-button" style="width:100%;">
                     <el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit" :loading="logining">{{ $t('login') }}</el-button>
                 </el-form-item>
+                <div class="additional" v-if="false">
+                    <el-divider content-position="center">或</el-divider>
+                </div>
+                <div class="externalLanding" v-if="false">
+                    <div class="externalLanding_img" @click="wxworkCli()">
+                        <img src="../assets/image/qiyeweix.png" alt="">
+                    </div>
+                </div>
                 <div class="toRegister">
                     <el-link type="primary" class="btn" style="float:left;" :underline="false">{{ $t('lian-xi-ke-fu') }}
                         <div class="service">
@@ -42,12 +50,18 @@
                         target="_blank">工时管家使用说明_普通员工.docx</a></p> -->
             
         </el-dialog>
+        <el-dialog title="企业微信扫码登陆" :visible.sync="wxworkFlg" width="500px">
+            <div>
+                <div id="wxcode"></div>
+            </div>
+        </el-dialog>
     </div>
 </template>
 
 <script>
     import * as dd from 'dingtalk-jsapi';
     import "../permissions.js"
+    import WxLogin from "../assets/js/wwLogin.js"
     export default {
         inject:['reloads'],
         data() {
@@ -63,9 +77,17 @@
                 rules: {
                     username: [{ required: true, message: this.$t('peaseenterthe'), trigger: 'blur' },],
                     password: [{ required: true, message: this.$t('peaseenterthe'), trigger: 'blur' },]
-                }
+                },
+                wxworkFlg: false
             };
         },
+        watch: {
+            $route(to) {
+				if (to.query.code) {
+					this.getStaffInfo(to.query.code)
+				}
+			}
+        },
         created() {
             // this.langChange()
             if (localStorage.userInfo != null) {
@@ -82,6 +104,7 @@
             }
         },
         mounted() {
+            // this.wxworkCli()
             var ua = navigator.userAgent.toLowerCase();
             if (ua.indexOf("wxwork") > 0) {
                 this.isCorpWX = true;
@@ -176,6 +199,24 @@
             }
         },
         methods: {
+            wxworkCli() {
+                // this.wxworkFlg = true
+                // this.$nextTick(()=>{
+                //     var obj = new WxLogin({
+                //         id: 'wxcode', // 登录页面显示二维码的容器id
+                //         appid: 'wwf11426cf618e1703', // 企业微信的CorpID，在企业微信管理端查看
+                //         redirect_uri: encodeURIComponent('http://localhost:10086/#/login'), // 重定向的地址，需要进行encode
+                //         usertype: 'member'
+                //     })
+                // })
+                var appId = "wwf11426cf618e1703";//企业微信第三方的SUIT ID
+                var url = "http://worktime.ttkuaiban.com/api/wxcorp/corpWeiXinScanningCodeLogin";//授权回调页面
+                var weixinUrl=`https://open.work.weixin.qq.com/wwopen/sso/3rd_qrConnect?appid=${appId}&redirect_uri=${url}&state=99276&usertype=member`;
+                window.location.href = weixinUrl;
+            },
+            getStaffInfo() {
+                console.log('执行了没')
+            },
             setlangChange() {
                 localStorage.setItem("lang", 'en')
             },
@@ -429,6 +470,33 @@
 </script>
 
 <style lang="scss" scoped>
+    .additional {
+        width: 100%;
+        text-align: center;
+        padding: 20px 0;
+        color: #505458;
+    }
+    .externalLanding {
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        .externalLanding_img {
+            width: 30px;
+            height: 30px;
+            border: 1px solid #409EFF;
+            border-radius: 50%;
+            position: relative;
+            overflow: hidden;
+            cursor: pointer;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            img {
+                width: 80%;
+                height: 80%;
+            }
+        }
+    }
     .login {
         height: 100%;
         .login-par {
@@ -449,7 +517,7 @@
                 -moz-border-radius: 5px;
                 background-clip: padding-box;
                 width: 315px;
-                height: 380px;
+                // height: 380px;
                 padding: 25px 35px 25px 35px;
                 background: #fff;
                 border: 1px solid #eaeaea;