截止‘运力管理’模块

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>