feat:添加企业微信登录 相关配置 代码

src/assets/js/api/user.js

@@ -7,6 +7,14 @@ export function login(username, password) {
   })
 }
 
+export function getOauth(source,uiType) {
+  return xhr.get('/oauth/render', {source,uiType})
+}
+
+
+export function getUserInfo() {
+  return xhr.get('/sys/sys-user/withRoleAndGroup/getUserInfo')
+}
 
 export function getUsersByPage(page, size, keyword, roleId, groupId) {
   return xhr.get('/sys/sys-user/withRoleAndGroup/page', {

src/assets/js/auth/wwLogin-1.0.0.js

+// eslint-disable-next-line no-unused-vars
+!function(a,b,c){function d(c){var d=b.createElement("iframe"),e="https://open.work.weixin.qq.com/wwopen/sso/qrConnect?appid="+c.appid+"&agentid="+c.agentid+"&redirect_uri="+c.redirect_uri+"&state="+c.state+"&login_type=jssdk";e+=c.style?"&style="+c.style:"",e+=c.href?"&href="+c.href:"",d.src=e,d.frameBorder="0",d.allowTransparency="true",d.scrolling="no",d.width="300px",d.height="400px";var f=b.getElementById(c.id);f.innerHTML="",f.appendChild(d),d.onload=function(){d.contentWindow.postMessage&&a.addEventListener&&(a.addEventListener("message",function(b){
+    b.data&&b.origin.indexOf("work.weixin.qq.com")>-1&&(a.location.href=b.data)}),d.contentWindow.postMessage("ask_usePostMessage","*"))}}a.WwLogin=d}(window,document);
\ No newline at end of file

src/components/Layout/index.vue

@@ -30,13 +30,14 @@
             class="hamburger-container"
           />
           <breadcrumb />
-          <div style="width: 100%">
+          <div style="width: 100%;position: absolute;right: 163px;">
             <async-search class="main-search"></async-search>
           </div>
           <el-dropdown class="avatar-container" trigger="click">
             <div class="avatar-wrapper">
               <img v-if="avatar" :src="avatar" class="user-avatar" />
               <svg-icon v-else icon-class="avatar"></svg-icon>
+              <span v-if="userName !== '' && userName !== undefined" style="margin-left: 5px;margin-right: 5px;">{{userName}}</span>
               <i class="el-icon-caret-bottom" />
             </div>
             <el-dropdown-menu slot="dropdown" class="user-dropdown">
@@ -60,6 +61,9 @@
 </template>
 
 <script>
+  import {
+    getUserInfo,
+  } from "@assets/js/api/user";
 import menuStyle from "@assets/css/variable.styl";
 import Hamburger from "@comp/Hamburger";
 import Breadcrumb from "@comp/Breadcrumb";
@@ -71,7 +75,8 @@ export default {
     Hamburger,
     Breadcrumb,
     SidebarItem,
-    asyncSearch
+    asyncSearch,
+    getUserInfo
   },
   props: {},
   data() {
@@ -80,11 +85,26 @@ export default {
       menuStyle,
       systemName: "天友-户型查询",
       avatar: null,
+      userName:'',
     };
   },
-  created() {},
+  created() {
+    this.searchByUserInfo();
+  },
   mounted() {},
   methods: {
+    searchByUserInfo() {
+      getUserInfo().then((res) => {
+        console.log(res);
+
+        if(res.code === '200'){
+          this.avatar = res.data.headImg;
+          this.userName = res.data.realName
+        }
+
+      }).catch(() => {
+              });
+    },
     toggleSideBar() {
       this.isCollapse = !this.isCollapse;
     },
@@ -103,6 +123,10 @@ export default {
 };
 </script>
 <style lang="stylus">
+/deep/.el-dropdown{
+  position: absolute;
+  right: 9px;
+}
 .app-wrapper {
   height 100%
   .el-container {
@@ -180,6 +204,8 @@ export default {
     height: 50px;
     display: inline-block;
     margin: 0 15px
+    position: absolute;
+    right: 35px;
     .avatar-wrapper {
       cursor: pointer;
       margin-top: 5px;

src/store/modules/user.js

@@ -51,6 +51,20 @@ const user = {
       })
     },
 
+    // 企业微信登录
+    OAuthLogin({ commit }, param) {
+      return new Promise((resolve, reject) => {
+        if(param.errorMsg && param.errorMsg !== ''){
+          reject(param.errorMsg)
+        }else if (param.authorities && param.authentication){
+          setToken(param.authentication)
+          commit('SET_TOKEN', param.authentication)
+          commit('SET_AUTH', param.authorities)
+          resolve()
+        }
+      })
+    },
+
     // 获取用户信息
     // GetInfo({ commit, state }) {
     //   return new Promise((resolve, reject) => {

src/views/Login.vue

 <template>
   <section class="login">
+    <div class="login-div">
+      <h3 class="title">天友设计院-户型查询系统</h3>
+      <el-tabs v-model="activeName" @tab-click="handleClick">
+        <el-tab-pane label="企业登录" name="first">
+          <iframe :src="wxQrCodeUrl" id="iframeTop" style="border: none;">
+
+          </iframe>
+          <!--            <div id="wxQrCode">-->
+
+          <!--            </div>-->
+        </el-tab-pane>
+
+        <el-tab-pane label="用户登录" name="second">
           <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
-      <div align="center" style="margin-bottom: 40px">
-        <img :src="require('@assets/img/logo.png')" width="150" alt="">
-      </div>
-      <h4 class="title">户型查询系统</h4>
             <el-form-item prop="username">
         <span class="svg-container">
           <svg-icon icon-class="user" />
@@ -32,12 +41,24 @@
               </el-button>
             </el-form-item>
           </el-form>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
   </section>
 </template>
 <script>
+  import {
+    getOauth
+  } from "@assets/js/api/user";
+  import {
+    wwLogin
+  } from "@assets/js/auth/wwLogin-1.0.0.js";
 export default {
   name: "login",
-  components: {},
+  components: {
+    wwLogin,
+    getOauth
+  },
   props: {},
   data() {
     const validateUsername = (rule, value, callback) => {
@@ -65,12 +86,54 @@ export default {
       },
       loading: false,
       pwdType: 'password',
-      redirect: undefined
+      redirect: undefined,
+      activeName:'first',
+      wxQrCodeUrl:'',
+      errorMsg: this.$route.query.errorMsg,
+      authorities: this.$route.query.authorities,
+      authentication: this.$route.query.authentication,
+      oAuthHref : "data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDE3MHB4O30NCi5pbXBvd2VyQm94IC50aXRsZSB7ZGlzcGxheTogbm9uZTt9DQouaW1wb3dlckJveCAuaW5mbyB7d2lkdGg6IDIwMHB4O30NCi5zdGF0dXNfaWNvbiB7ZGlzcGxheTogbm9uZX0NCi5pbXBvd2VyQm94IC5zdGF0dXMge3RleHQtYWxpZ246IGNlbnRlcjt9DQoud3JwX2NvZGV7bWFyZ2luLXRvcDowcHggIWltcG9ydGFudH0NCi5pbmZve3dpZHRoOiAyODBweCAhaW1wb3J0YW50fQ==",
     };
   },
-  created() {},
-  mounted() {},
+  created() {
+    if(this.errorMsg && this.errorMsg !== ''){
+      this.$notify.error(this.errorMsg);
+    }
+    this.oAuthQcFunc();
+  },
+  mounted() {
+    this.oAuthLoginFunc();
+  },
   methods: {
+    oAuthLoginFunc() {
+      const param = {
+        authorities : this.authorities,
+        authentication: this.authentication,
+        errorMsg: this.errorMsg
+      }
+      this.$store.dispatch('OAuthLogin', param).then(() => {
+        if (!this.authorities || !this.authentication) {
+          console.log(this.redirect)
+          this.$router.push("/login");
+        } else {
+          this.$router.push("/");
+        }
+      }).catch(() => {
+      })
+    },
+    handleClick(tab, event) {
+      console.log(tab, event);
+    },
+    oAuthQcFunc(){
+      getOauth("wechat_enterprise","tenio").then(
+              (res) => {
+                console.log(res)
+                this.wxQrCodeUrl = res+"&href="+this.oAuthHref;
+              }
+      ).catch(err => {
+        console.log(err)
+      })
+    },
     showPwd() {
       if (this.pwdType === 'password') {
         this.pwdType = ''
@@ -125,7 +188,7 @@ export default {
       -webkit-appearance: none;
       border-radius: 0px;
       padding: 12px 5px 12px 15px;
-      color: light_gray;
+      color: #7e8187;
       height: 47px;
       &:-webkit-autofill {
         -webkit-box-shadow: 0 0 0px 1000px bg inset !important;
@@ -143,14 +206,28 @@ export default {
 </style>
 
 <style lang="stylus" scoped>
-
+  /deep/.el-tabs__content{
+    width: 100%;
+    height: 65%;
+  }
+  /deep/#pane-first{
+    width:100%;
+    height 100%;
+  }
+  /deep/.lightBorder{
+    width: 200px !important;
+  }
 .login {
   position: fixed;
   height: 100%;
   width: 100%;
   background: linear-gradient(270deg, #286690, #102244);
-  /*animation bgChange 5s infinite alternate*/
-  .login-form {
+  .login-div{
+    width: 50%;
+    height: 50%;
+    border: 1px solid #F0F3F6;
+    border-radius: 20px;
+    background-color rgba(240,243,246,1)
     position: absolute;
     left: 0;
     right: 0;
@@ -159,16 +236,45 @@ export default {
     padding: 35px 35px 15px 35px;
     margin: 120px auto;
   }
+  .el-tabs{
+    width: 100%;
+    height: 100%;
+  }
+  iframe{
+    width: 100%;
+    height: 100%;
+  }
+  .login-form {
+    /* position: absolute;
+    left: 0;
+    right: 0;*/
+    width: 520px;
+    max-width: 100%;
+    /*padding: 35px 35px 15px 35px;*/
+    margin: 38px auto;
+  }
+  /*animation bgChange 5s infinite alternate*/
+  /* .login-form {
+    position: absolute;
+    left: 0;
+    right: 0;
+    width: 520px;
+    max-width: 100%;
+    padding: 35px 35px 15px 35px;
+    margin: 120px auto;
+  } */
   .svg-container {
     padding: 6px 5px 6px 15px;
-    color: dark_gray;
+    color: #7e8187;
     vertical-align: middle;
     width: 30px;
     display: inline-block;
+    border-right: 1px solid;
   }
   .title {
-    font-size: 22px;
-    color: light_gray;
+    font-size: 26px;
+    font-weight: 400;
+    color: #7E8187;
     margin: 0px auto 40px auto;
     text-align: center;
     font-weight: bold;
@@ -178,7 +284,7 @@ export default {
     right: 10px;
     top: 7px;
     font-size: 16px;
-    color: dark_gray;
+    color: #7e8187;
     cursor: pointer;
     user-select: none;
   }