单点登录载入

src/api/login.js

@@ -15,6 +15,15 @@ export function login(username, password, code, uuid) {
   })
 }
 
+// 登录方法(ERP)
+export function loginERP(data) {
+  return request({
+    url: '/loginByCenterId',
+    method: 'get',
+    params: data
+  })
+}
+
 // 注册方法
 export function register(data) {
   return request({

src/store/modules/user.js

@@ -1,4 +1,4 @@
-import { login, logout, getInfo } from '@/api/login'
+import { login, loginERP, logout, getInfo } from '@/api/login'
 import { getToken, setToken, removeToken } from '@/utils/auth'
 
 const user = {
@@ -46,6 +46,19 @@ const user = {
             })
         },
 
+        // 登录PER
+        LoginERP({ commit }, userInfo) {
+            return new Promise((resolve, reject) => {
+                loginERP({centerId:userInfo.id}).then(res => {
+                    setToken(res.data)
+                    commit('SET_TOKEN', res.data)
+                    resolve()
+                }).catch(error => {
+                    reject(error)
+                })
+            })
+        },
+
         // 获取用户信息
         GetInfo({ commit, state }) {
             return new Promise((resolve, reject) => {

src/views/login.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="login" >
-    <div class="bg"><img :src="bg" alt="" style="width:100%;height:100%"></div>
-    <div class="logo">
+    <div class="bg" v-if="erp"><img :src="bg" alt="" style="width:100%;height:100%"></div>
+    <div class="logo" v-if="erp">
       <img :src="logo" alt="">
       <span class="logo_txt">东信充值管理系统</span>
     </div>
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
+    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" v-if="erp">
       <h3 class="title">用户登录 <span>LOGIN</span></h3>
       <el-form-item prop="username" >
         <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
@@ -58,9 +58,15 @@
       </el-form-item>
     </el-form>
     <!--  底部  -->
-    <div class="el-login-footer">
+    <div class="el-login-footer" v-if="erp">
       <!-- <span>Copyright © 2018-2021 yongtian.vip All Rights Reserved.</span> -->
     </div>
+    <div id="loader-wrapper" v-if="ERPloading">
+        <div id="loader"></div>
+        <div class="loader-section section-left"></div>
+        <div class="loader-section section-right"></div>
+        <div class="load_title">正在加载系统资源，请耐心等待</div>
+    </div>
   </div>
 </template>
 
@@ -75,6 +81,8 @@ export default {
   name: "Login",
   data() {
     return {
+      erp:false,
+      ERPloading:true,
       passwordtxt:"password",
       bg:bgImg,
       logo:logoImg,
@@ -115,10 +123,21 @@ export default {
     }
   },
   created() {
-    this.getCode();
-    this.getCookie();
+    this.getUrl()
   },
   methods: {
+    getUrl(){
+      let url = this.$route.query
+      if(url.id && url.name){
+        let data = {id:url.id,name:url.name}
+        this.handleLoginERP(data)
+      }else{
+        this.erp = true
+        this.ERPloading = false
+        this.getCode();
+        this.getCookie();
+      }
+    },
     eyeTab(){
       if(this.passwordtxt == "password"){
         this.passwordtxt = "text"
@@ -169,6 +188,16 @@ export default {
           });
         }
       });
+    },
+    handleLoginERP(data) {//erp登录
+      Cookies.set("username20220313", data.name);
+      this.$store.dispatch("LoginERP", data).then((res) => {
+        console.log(res)
+        this.$router.push({ path: "/index"}).catch(()=>{});
+      }).catch((err) => {
+        console.log(err)
+        location.href = '/deviceManager/#/';
+      });
     }
   }
 };
@@ -278,4 +307,178 @@ export default {
   height:36px !important;
   line-height: 36px !important;
 }
+
+body,html{
+  width:100%;
+  height:100%;
+  background: #7171C6;
+}
+        
+        #loader-wrapper {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 999999;
+        }
+        
+        #loader {
+            display: block;
+            position: relative;
+            left: 50%;
+            top: 50%;
+            width: 150px;
+            height: 150px;
+            margin: -75px 0 0 -75px;
+            border-radius: 50%;
+            border: 3px solid transparent;
+            border-top-color: #FFF;
+            -webkit-animation: spin 2s linear infinite;
+            -ms-animation: spin 2s linear infinite;
+            -moz-animation: spin 2s linear infinite;
+            -o-animation: spin 2s linear infinite;
+            animation: spin 2s linear infinite;
+            z-index: 1001;
+        }
+        
+        #loader:before {
+            content: "";
+            position: absolute;
+            top: 5px;
+            left: 5px;
+            right: 5px;
+            bottom: 5px;
+            border-radius: 50%;
+            border: 3px solid transparent;
+            border-top-color: #FFF;
+            -webkit-animation: spin 3s linear infinite;
+            -moz-animation: spin 3s linear infinite;
+            -o-animation: spin 3s linear infinite;
+            -ms-animation: spin 3s linear infinite;
+            animation: spin 3s linear infinite;
+        }
+        
+        #loader:after {
+            content: "";
+            position: absolute;
+            top: 15px;
+            left: 15px;
+            right: 15px;
+            bottom: 15px;
+            border-radius: 50%;
+            border: 3px solid transparent;
+            border-top-color: #FFF;
+            -moz-animation: spin 1.5s linear infinite;
+            -o-animation: spin 1.5s linear infinite;
+            -ms-animation: spin 1.5s linear infinite;
+            -webkit-animation: spin 1.5s linear infinite;
+            animation: spin 1.5s linear infinite;
+        }
+        
+        @-webkit-keyframes spin {
+            0% {
+                -webkit-transform: rotate(0deg);
+                -ms-transform: rotate(0deg);
+                transform: rotate(0deg);
+            }
+            100% {
+                -webkit-transform: rotate(360deg);
+                -ms-transform: rotate(360deg);
+                transform: rotate(360deg);
+            }
+        }
+        
+        @keyframes spin {
+            0% {
+                -webkit-transform: rotate(0deg);
+                -ms-transform: rotate(0deg);
+                transform: rotate(0deg);
+            }
+            100% {
+                -webkit-transform: rotate(360deg);
+                -ms-transform: rotate(360deg);
+                transform: rotate(360deg);
+            }
+        }
+        
+        #loader-wrapper .loader-section {
+            position: fixed;
+            top: 0;
+            width: 51%;
+            height: 100%;
+            background: #7171C6;
+            z-index: 1000;
+            -webkit-transform: translateX(0);
+            -ms-transform: translateX(0);
+            transform: translateX(0);
+        }
+        
+        #loader-wrapper .loader-section.section-left {
+            left: 0;
+        }
+        
+        #loader-wrapper .loader-section.section-right {
+            right: 0;
+        }
+        
+        .loaded #loader-wrapper .loader-section.section-left {
+            -webkit-transform: translateX(-100%);
+            -ms-transform: translateX(-100%);
+            transform: translateX(-100%);
+            -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+            transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+        }
+        
+        .loaded #loader-wrapper .loader-section.section-right {
+            -webkit-transform: translateX(100%);
+            -ms-transform: translateX(100%);
+            transform: translateX(100%);
+            -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+            transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+        }
+        
+        .loaded #loader {
+            opacity: 0;
+            -webkit-transition: all 0.3s ease-out;
+            transition: all 0.3s ease-out;
+        }
+        
+        .loaded #loader-wrapper {
+            visibility: hidden;
+            -webkit-transform: translateY(-100%);
+            -ms-transform: translateY(-100%);
+            transform: translateY(-100%);
+            -webkit-transition: all 0.3s 1s ease-out;
+            transition: all 0.3s 1s ease-out;
+        }
+        
+        .no-js #loader-wrapper {
+            display: none;
+        }
+        
+        .no-js h1 {
+            color: #222222;
+        }
+        
+        #loader-wrapper .load_title {
+            font-family: 'Open Sans';
+            color: #FFF;
+            font-size: 19px;
+            width: 100%;
+            text-align: center;
+            z-index: 9999999999999;
+            position: absolute;
+            top: 60%;
+            opacity: 1;
+            line-height: 30px;
+        }
+        
+        #loader-wrapper .load_title span {
+            font-weight: normal;
+            font-style: italic;
+            font-size: 13px;
+            color: #FFF;
+            opacity: 0.5;
+        }
 </style>