登录修改

src/api/login.js

@@ -3,7 +3,11 @@
 */
 import request from '../utils/request'
 
-export function login({ Account, Password, AutoLoginId }) {
+export function login({
+  Account,
+  Password,
+  AutoLoginId
+}) {
   AutoLoginId = AutoLoginId ? AutoLoginId : 0
   // headers: {
   //     'Content-Type': 'application/json;charset=UTF-8'
@@ -45,7 +49,10 @@ export function logout() {
   })
 }
 
-export function loginByWeChat({ AutoLoginWorkId, AutoLoginOpenId }) {
+export function loginByWeChat({
+  AutoLoginWorkId,
+  AutoLoginOpenId
+}) {
   return request({
     url: '/login/login',
     method: "post",
@@ -68,3 +75,11 @@ export function setUserCodeCallBack(data) {
     data
   })
 }
+
+export function setUserAutoLogin(data) {
+  return request({
+    url: '/QYWeChat/SetUserAutoLogin',
+    method: 'post',
+    data
+  })
+}

src/pages/user/login.vue

@@ -2,25 +2,12 @@
   <div class="login">
     <div class="login-box">
       <div class="left-card">
-        <q-carousel
-          v-model="slide"
-          :autoplay="10000"
-          swipeable
-          animated
-          control-color="white"
-          :padding="false"
-          infinite
-          height="100%"
-          class="bg-primary text-white shadow-1"
-        >
+        <q-carousel v-model="slide" :autoplay="10000" swipeable animated control-color="white" :padding="false" infinite
+          height="100%" class="bg-primary text-white shadow-1">
           <q-carousel-slide name="first" class="q-pa-none">
             <div class="item-card">
               <div class="head-icon">
-                <q-img
-                  ratio="1"
-                  :img-style="{ borderRadius: '50%' }"
-                  src="../../assets/images/login/zhang.png"
-                />
+                <q-img ratio="1" :img-style="{ borderRadius: '50%' }" src="../../assets/images/login/zhang.png" />
               </div>
               <div class="publisher">张载</div>
               <div class="job">思想家、教育家</div>
@@ -32,11 +19,7 @@
           <q-carousel-slide name="tow" class="q-pa-none">
             <div class="item-card">
               <div class="head-icon">
-                <q-img
-                  ratio="1"
-                  :img-style="{ borderRadius: '50%' }"
-                  src="../../assets/images/login/kong.jpg"
-                />
+                <q-img ratio="1" :img-style="{ borderRadius: '50%' }" src="../../assets/images/login/kong.jpg" />
               </div>
               <div class="publisher">孔子</div>
               <div class="job">儒家学派创始人，编纂《春秋》，创办私学</div>
@@ -57,13 +40,8 @@
                 <div class="pwd_box">
                   <div class="mu-text-field has-label">
                     <div class="mu-text-field-content">
-                      <q-input
-                        v-model="account"
-                        ref="account"
-                        class="text-h6"
-                        label="账号"
-                        :rules="[val => !!val || '请输入账号信息']"
-                      />
+                      <q-input v-model="account" ref="account" class="text-h6" label="账号"
+                        :rules="[val => !!val || '请输入账号信息']" />
                     </div>
                   </div>
                 </div>
@@ -72,28 +50,14 @@
                 <div class="pwd_box">
                   <div class="mu-text-field has-label">
                     <div class="mu-text-field-content">
-                      <q-input
-                        v-model="pwd"
-                        ref="pwd"
-                        class="text-h6"
-                        @keyup.enter.native="gologin"
-                        label="密码"
-                        type="password"
-                        :rules="[val => !!val || '请输入密码凭证']"
-                      />
+                      <q-input v-model="pwd" ref="pwd" class="text-h6" @keyup.enter.native="gologin" label="密码"
+                        type="password" :rules="[val => !!val || '请输入密码凭证']" />
                     </div>
                   </div>
                 </div>
               </div>
               <div class="field_wrap" style="margin-top:10px;">
-                <q-btn
-                  :loading="isLogining"
-                  size="lg"
-                  label="立即登录"
-                  @click="gologin"
-                  class="full-width"
-                  color="primary"
-                >
+                <q-btn :loading="isLogining" size="lg" label="立即登录" @click="gologin" class="full-width" color="primary">
                   <template v-slot:loading>
                     <q-spinner-facebook />
                   </template>
@@ -110,17 +74,9 @@
             </div>
           </div>
         </div>
-        <div
-          class="field_wrap"
-          style="margin-top:20px !important"
-          id="wechat"
-          v-if="!isAdminUser && !autoLoginLoading"
-        ></div>
-        <div
-          class="field_wrap q-py-lg column justify-center"
-          style="height:300px"
-          v-if="autoLoginLoading"
-        >
+        <div class="field_wrap" style="margin-top:20px !important" id="wechat" v-if="!isAdminUser && !autoLoginLoading">
+        </div>
+        <div class="field_wrap q-py-lg column justify-center" style="height:300px" v-if="autoLoginLoading">
           <div class="text-center">
             <q-spinner-ios color="primary" size="4em" class="q-mb-md" />
           </div>
@@ -140,8 +96,11 @@
 </template>
 
 <script>
-import { setUserCodeCallBack } from "../../api/login";
-export default {
+  import {
+    setUserCodeCallBack,
+    setUserAutoLogin
+  } from "../../api/login";
+  export default {
     meta: {
       title: "登录 - 麦子教育系统"
     },
@@ -160,10 +119,10 @@ export default {
       };
     },
     created() {
-    if (!this.$route.query.code) {
-      let autoLogin = localStorage.autoLogin
-        ? JSON.parse(localStorage.autoLogin)
-        : null;
+      if (!this.$route.query.code && !this.$route.query.wxworkAutoLogin) {
+        let autoLogin = localStorage.autoLogin ?
+          JSON.parse(localStorage.autoLogin) :
+          null;
         this.account = autoLogin ? autoLogin.acc : "";
         this.pwd = autoLogin ? autoLogin.pwd : "";
         this.isAutoLogin = autoLogin ? true : false;
@@ -173,8 +132,12 @@ export default {
         ) {
           this.isAdminUser = true;
         } else {
+          this.isAdminUser = false;
           this.getWeChat();
         }
+      } else if (this.$route.query.wxworkAutoLogin &&
+        this.$route.query.wxworkAutoLogin == "1") {
+        this.autoLogin();
       } else {
         this.autoLoginLoading = true;
         this.callBackUserInfo(this.$route.query.code);
@@ -182,7 +145,7 @@ export default {
     },
     watch: {
       $route: {
-      handler: function(route) {
+        handler: function (route) {
           this.redirect = route.query && route.query.redirect;
           if (route.query.code && route.query.appid) {
             // this.callBackUserInfo(route.query.code);
@@ -192,11 +155,36 @@ export default {
       }
     },
     mounted() {
-    if (tccc && tccc.Agent) {
-      tccc.Agent.offline();
-    }
+      // if (tccc && tccc.Agent) {
+      //   tccc.Agent.offline();
+      // }
     },
     methods: {
+      autoLogin() {
+        setUserAutoLogin({
+          mark: "LinYangERP"
+        }).then(r => {
+          if (r.Data != "") {
+            alert(r.data);
+            location.href = r.Data;
+          } else {
+            this.showErrorMsg(
+              "未获取到授权回调信息，这可能是没有配置应用信息导致，请联系管理员"
+            );
+          }
+        });
+      },
+      goToAutoLogin() {
+        if (document.URL.indexOf("?loginId=") != -1) {
+          let url = `http://${
+          window.location.host
+        }/#/autologin?${document.URL.substring(
+          document.URL.indexOf("?") + 1,
+          document.URL.length
+        )}`;
+          document.location.href = url;
+        }
+      },
       callBackUserInfo(code) {
         setUserCodeCallBack({
             appcode: "LinYangERP",
@@ -236,7 +224,7 @@ export default {
           "https://wwcdn.weixin.qq.com/node/wework/wwopen/js/wwLogin-1.2.5.js";
         const wxElement = document.body.appendChild(s);
         // 调用企业微信二维码方法
-      wxElement.onload = function() {
+        wxElement.onload = function () {
           var wwLogin = new WwLogin({
             id: "wechat",
             appid: "ww8418f1889fdded76",
@@ -273,18 +261,18 @@ export default {
             .catch(() => {
               this.isLogining = false;
             });
-      } else {
-      }
+        } else {}
         setTimeout(() => {
           this.isLogining = false;
         }, 2000);
       }
     }
-};
+  };
+
 </script>
 
 <style scoped>
-.login {
+  .login {
     background: url("~assets/images/login/bg.jpg") no-repeat 100% 100%;
     width: 100%;
     height: 100vh;
@@ -292,9 +280,9 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
-}
+  }
 
-.logo-box {
+  .logo-box {
     position: absolute;
     top: 30px;
     left: 30px;
@@ -302,9 +290,9 @@ export default {
     font-size: 48px;
     font-family: perfectFont;
     color: #fff;
-}
+  }
 
-.login .login-box {
+  .login .login-box {
     width: 1000px;
     height: 560px;
     box-shadow: 0 6px 20px 5px rgba(40, 120, 255, 0.1),
@@ -313,123 +301,120 @@ export default {
     background: #fff;
     display: flex;
     overflow: hidden;
-}
+  }
 
-.login .login-box .left-card {
+  .login .login-box .left-card {
     width: 440px;
     height: 100%;
-}
+  }
 
-.login .login-box .left-card .item-card {
-  background: url("~assets/images/login/yinhao.png") right bottom/221px
-      no-repeat,
+  .login .login-box .left-card .item-card {
+    background: url("~assets/images/login/yinhao.png") right bottom/221px no-repeat,
       linear-gradient(180deg, #43e97b, #1aad19);
     width: 100%;
     height: 100%;
     padding-top: 96px;
     color: white;
     box-sizing: border-box;
-}
-.impowerBox .title {
+  }
+
+  .impowerBox .title {
     display: none;
-}
-.login .login-box .left-card .item-card .head-icon {
+  }
+
+  .login .login-box .left-card .item-card .head-icon {
     width: 104px;
     height: 104px;
     margin: 0 auto;
     border-radius: 100%;
     background: rgba(40, 120, 255, 0.5);
     padding: 5px;
-}
+  }
 
-.login .login-box .left-card .item-card .head-icon img {
+  .login .login-box .left-card .item-card .head-icon img {
     width: 100%;
     height: 100%;
     border-radius: 100%;
-}
+  }
 
-.login .login-box .left-card .item-card .publisher,
-.login .login-box .left-card .item-card .job {
+  .login .login-box .left-card .item-card .publisher,
+  .login .login-box .left-card .item-card .job {
     margin-top: 20px;
     font-size: 24px;
     font-family: perfectFont;
     text-align: center;
-}
+  }
 
-.login .login-box .left-card .item-card .publisher {
+  .login .login-box .left-card .item-card .publisher {
     font-weight: bold;
-}
+  }
 
-.login .login-box .left-card .item-card .job {
+  .login .login-box .left-card .item-card .job {
     font-size: 16px;
     margin-top: 10px;
-}
+  }
 
-.login .login-box .left-card .item-card .content {
+  .login .login-box .left-card .item-card .content {
     font-size: 13px;
     font-family: perfectFont;
     margin-top: 20px;
     margin: 20px;
     line-height: 24px;
     text-indent: 28px;
-}
+  }
 
-.login .login-box .right-card {
+  .login .login-box .right-card {
     flex: 1;
     padding-top: 50px;
     font-family: perfectFont;
-}
+  }
 
-.login .login-box .right-card .company {
+  .login .login-box .right-card .company {
     font-size: 20px;
     text-align: center;
     font-weight: bold;
-}
+  }
 
-.login .login-box .right-card .t {
+  .login .login-box .right-card .t {
     margin-top: 20px;
     font-size: 34px;
     text-align: center;
     font-weight: bold;
     margin-bottom: 30px;
-}
+  }
 
-.field_wrap {
+  .field_wrap {
     width: 330px;
     margin: 0 auto;
     font-family: perfectFont;
-}
+  }
 
-.field_wrap .pwd_box {
+  .field_wrap .pwd_box {
     position: relative;
-}
+  }
 
-.field_wrap .pwd_box .mu-text-field {
+  .field_wrap .pwd_box .mu-text-field {
     width: 100%;
     color: rgba(0, 0, 0, 0.54);
-}
+  }
 
-.field_wrap .pwd_box .mu-text-field.has-label {
+  .field_wrap .pwd_box .mu-text-field.has-label {
     min-height: 72px;
-}
+  }
 
-.field_wrap .pwd_box .mu-text-field .mu-text-field-content {
+  .field_wrap .pwd_box .mu-text-field .mu-text-field-content {
     display: block;
     height: 100%;
     padding-bottom: 12px;
     padding-top: 4px;
-}
+  }
 
-.field_wrap .pwd_box .mu-text-field.has-label .mu-text-field-content {
+  .field_wrap .pwd_box .mu-text-field.has-label .mu-text-field-content {
     padding-top: 28px;
     padding-bottom: 12px;
-}
+  }
 
-.field_wrap
-  .pwd_box
-  .mu-text-field.has-label
-  .mu-text-field-content
-  .mu-text-field-label {
+  .field_wrap .pwd_box .mu-text-field.has-label .mu-text-field-content .mu-text-field-label {
     line-height: 20px;
     transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
     z-index: 1;
@@ -442,23 +427,14 @@ export default {
     font-size: 16px;
     font-family: perfectFont;
     font-weight: bold;
-}
-
-.field_wrap
-  .pwd_box
-  .mu-text-field.has-label
-  .mu-text-field-content
-  .mu-text-field.has-label
-  .mu-text-field-label {
+  }
+
+  .field_wrap .pwd_box .mu-text-field.has-label .mu-text-field-content .mu-text-field.has-label .mu-text-field-label {
     top: 8px;
     position: absolute;
-}
+  }
 
-.field_wrap
-  .pwd_box
-  .mu-text-field.has-label
-  .mu-text-field-content
-  .mu-text-field-input {
+  .field_wrap .pwd_box .mu-text-field.has-label .mu-text-field-content .mu-text-field-input {
     appearance: none;
     outline: none;
     border: none;
@@ -473,14 +449,14 @@ export default {
     color: rgba(0, 0, 0, 0.87);
     font-family: inherit;
     position: relative;
-}
+  }
 
-.field_wrap .el-button,
-.field_wrap .el-checkbox__inner {
+  .field_wrap .el-button,
+  .field_wrap .el-checkbox__inner {
     border-radius: 0;
-}
+  }
 
-.mu-text-field-line {
+  .mu-text-field-line {
     background-color: rgba(0, 0, 0, 0.4);
     margin: 0;
     height: 1px;
@@ -490,9 +466,9 @@ export default {
     position: absolute;
     box-sizing: content-box;
     overflow: visible;
-}
+  }
 
-.mu-text-field-focus-line {
+  .mu-text-field-focus-line {
     margin: 0;
     height: 2px;
     border: none;
@@ -506,40 +482,41 @@ export default {
     transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1);
     transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1),
       -webkit-transform 0.45s cubic-bezier(0.23, 1, 0.32, 1);
-}
+  }
 
-.mu-text-field-focus-line.focus {
+  .mu-text-field-focus-line.focus {
     transform: scaleX(1);
-}
+  }
 
-.el-button--primary,
-.el-checkbox__input.is-checked .el-checkbox__inner,
-.el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  .el-button--primary,
+  .el-checkbox__input.is-checked .el-checkbox__inner,
+  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
     background-color: #0d2481 !important;
     border-color: #0d2481 !important;
-}
+  }
 
-.login .login-box .right-card .forget {
+  .login .login-box .right-card .forget {
     margin-top: 12px;
     display: flex;
-}
+  }
 
-.login .login-box .right-card .forget .item-forget {
+  .login .login-box .right-card .forget .item-forget {
     flex: 1;
     font-size: 14px;
     font-family: perfectFont;
-}
+  }
 
-.login .login-box .right-card .forget .item-forget:last-child {
+  .login .login-box .right-card .forget .item-forget:last-child {
     text-align: right;
-}
+  }
 
-.login .login-box .right-card .forget .item-forget a {
+  .login .login-box .right-card .forget .item-forget a {
     color: #000;
     text-decoration: none;
-}
+  }
 
-.login .login-box .right-card .forget .item-forget a:hover {
+  .login .login-box .right-card .forget .item-forget a:hover {
     color: #0d2481;
-}
+  }
+
 </style>