截止‘运力管理’模块

src/page/index/logo.vue

@@ -7,7 +7,7 @@
     </transition>
     <transition-group name="fade">
       <template v-if="getScreen(!isCollapse)">
-        <span class="logo-title" key="1">{{ website.indexTitle }} </span>
+        <span class="logo-title" key="1">{{ website.indexTitle }}</span>
       </template>
     </transition-group>
   </div>
@@ -30,7 +30,7 @@ export default {
 </script>
 <style scoped>
 .logo-title {
-  font-size: 20px;
+  font-size: 16px;
   background-image: linear-gradient(120deg, #54b6d0 16%, #3f8bdb, #2c77f1);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;

src/page/login/callback.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="callback-container">
+    <div class="loading-174"></div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import website from '@/config/website';
+
+export default {
+  name: 'iamCallback',
+  computed: {
+    ...mapGetters(['tagWel']),
+  },
+  created() {
+    this.handleCallback();
+  },
+  methods: {
+    handleCallback() {
+      const { code, state } = this.$route.query;
+      // console.log(this.$route.query);
+      if (!code) {
+        this.$router.replace('/login');
+        return;
+      }
+      this.$store
+        .dispatch('LoginBySso', {
+          tenantId: state || website.tenantId,
+          code,
+          state: state || website.tenantId,
+        })
+        .then(() => this.$store.dispatch('FlowRoutes'))
+        .then(() => {
+          this.$router.replace(this.tagWel);
+        })
+        .catch(() => {
+          this.$router.replace('/login');
+        });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.callback-container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #fff;
+}
+
+.loading-174 {
+  width: 10px;
+  aspect-ratio: 1;
+  background: #0694cd;
+  border-radius: 50%;
+  animation: loading-174 1s infinite linear alternate;
+}
+
+@keyframes loading-174 {
+  0% {
+    box-shadow: 15px 0 #0694cd, -25px 0 #0694cd;
+  }
+  50% {
+    box-shadow: 15px 0 #0694cd, -15px 0 #0694cd;
+  }
+  100% {
+    box-shadow: 25px 0 #0694cd, -15px 0 #0694cd;
+  }
+}
+</style>

src/page/login/codelogin.vue

@@ -170,7 +170,6 @@ export default {
         if (data.success && data.data.tenantId) {
           this.tenantMode = false;
           this.loginForm.tenantId = data.data.tenantId;
-          this.$parent.$refs.login.style.backgroundImage = `url(${data.data.backgroundUrl})`;
         }
       });
     },

src/page/login/index.vue

@@ -4,36 +4,33 @@
       {{ time }}
     </div>
     <div class="login-weaper">
-      <div class="login-left animate__animated animate__fadeInLeft">
-        <img class="img" src="/img/logo.png" alt="" />
-        <p class="title">{{ $t('login.info') }}</p>
-      </div>
       <div class="login-border animate__animated animate__fadeInRight">
         <div class="login-main">
           <p class="login-title">
             {{ $t('login.title') }}{{ website.title }}
             <top-lang></top-lang>
           </p>
+          <!-- 原登录方式先注释保留备用
           <userLogin v-if="activeName === 'user'"></userLogin>
           <codeLogin v-else-if="activeName === 'code'"></codeLogin>
           <thirdLogin v-else-if="activeName === 'third'"></thirdLogin>
           <registerLogin v-else-if="activeName === 'register'"></registerLogin>
           <div class="login-menu">
-            <el-link href="#" @click.stop="activeName = 'user'">{{
-              $t('login.userLogin')
-            }}</el-link>
-            <el-link href="#" @click.stop="activeName = 'code'">{{
-              $t('login.phoneLogin')
-            }}</el-link>
-            <el-link href="#" @click.stop="activeName = 'third'">{{
-              $t('login.thirdLogin')
-            }}</el-link>
-            <el-link
-              :href="
-                website.oauth2.ssoBaseUrl + website.oauth2.ssoAuthUrl + website.oauth2.redirectUri
-              "
-              >{{ $t('login.ssoLogin') }}</el-link
-            >
+            <el-link href="#" @click.stop="activeName = 'user'">{{ $t('login.userLogin') }}</el-link>
+            <el-link href="#" @click.stop="activeName = 'code'">{{ $t('login.phoneLogin') }}</el-link>
+            <el-link href="#" @click.stop="activeName = 'third'">{{ $t('login.thirdLogin') }}</el-link>
+            <el-link :href="iamAuthorizeUrl">{{ $t('login.ssoLogin') }}</el-link>
+          </div>
+          -->
+          <userLogin v-if="activeName === 'user'"></userLogin>
+          <registerLogin v-else-if="activeName === 'register'"></registerLogin>
+          <div v-else class="iam-login">
+            <el-button type="primary" class="login-submit" @click.prevent="handleIamLogin">
+              IAM统一身份认证
+            </el-button>
+            <el-button class="account-submit" @click.prevent="activeName = 'user'">
+              账号密码登录
+            </el-button>
           </div>
         </div>
       </div>
@@ -64,7 +61,7 @@ export default {
     return {
       website: website,
       time: '',
-      activeName: 'user',
+      activeName: 'iam',
       socialForm: {
         tenantId: '000000',
         source: '',
@@ -85,6 +82,17 @@ export default {
   mounted() {},
   computed: {
     ...mapGetters(['tagWel']),
+    iamAuthorizeUrl() {
+      const params = new URLSearchParams({
+        client_id: this.website.oauth2.ssoClientId,
+        response_type: 'code',
+        redirect_uri: this.website.oauth2.redirectUri,
+        state: this.website.tenantId,
+      });
+      return `${this.website.oauth2.ssoBaseUrl}${
+        this.website.oauth2.ssoAuthUrl
+      }?${params.toString()}`;
+    },
   },
   props: [],
   methods: {
@@ -152,9 +160,25 @@ export default {
           });
       }
     },
+    handleIamLogin() {
+      window.location.href = this.iamAuthorizeUrl;
+    },
     loadFlowRoutes() {
       this.$store.dispatch('FlowRoutes').then(() => {});
     },
   },
 };
 </script>
+<style lang="scss" scoped>
+.account-submit {
+  width: 100%;
+  height: 45px;
+  font-size: 18px;
+  letter-spacing: 2px;
+  font-weight: 300;
+  cursor: pointer;
+  margin-top: 18px;
+  margin-left: 0;
+  transition: 0.25s;
+}
+</style>

src/page/login/registerlogin.vue

@@ -205,7 +205,6 @@ export default {
         if (data.success && data.data.tenantId) {
           this.tenantMode = false;
           this.loginForm.tenantId = data.data.tenantId;
-          this.$parent.$refs.login.style.backgroundImage = `url(${data.data.backgroundUrl})`;
         }
       });
     },

src/page/login/userlogin.vue

@@ -83,7 +83,6 @@ import { mapGetters } from 'vuex';
 import { info } from '@/api/system/tenant';
 import { getCaptcha } from '@/api/user';
 import { getTopUrl } from '@/utils/util';
-import { validatenull } from '@/utils/validate';
 import BehaviorCaptcha from '@/components/behavior-captcha/index.vue';
 
 export default {
@@ -201,13 +200,6 @@ export default {
         if (data.success && data.data.tenantId) {
           this.tenantMode = false;
           this.loginForm.tenantId = data.data.tenantId;
-          if (!validatenull(data.data.backgroundUrl)) {
-            const loginEl = this.$parent.$refs.login;
-            loginEl.style.backgroundImage = `url(${data.data.backgroundUrl})`;
-            loginEl.style.backgroundSize = '100% 100%';
-            loginEl.style.backgroundRepeat = 'no-repeat';
-            loginEl.style.backgroundPosition = 'center center';
-          }
         }
       });
     },