截止‘运力管理’模块

src/mac/login.scss

@@ -132,3 +132,36 @@
 .item .iconfont:hover {
     background-color: rgba(255, 255, 255, 0.5);
 }
+
+.iam-button {
+    min-width: 280px;
+    height: 45px;
+    color: #fff;
+    font-size: 16px;
+    border: none;
+    border-radius: 22px;
+    cursor: pointer;
+    background-color: #2c77f1;
+    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
+}
+
+.iam-button:hover {
+    background-color: #4b8df5;
+}
+
+.account-button {
+    min-width: 280px;
+    height: 45px;
+    margin-top: 16px;
+    color: #fff;
+    font-size: 16px;
+    border: 1px solid rgba(255, 255, 255, 0.6);
+    border-radius: 22px;
+    cursor: pointer;
+    background-color: rgba(255, 255, 255, 0.2);
+    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
+}
+
+.account-button:hover {
+    background-color: rgba(255, 255, 255, 0.35);
+}

src/mac/login.vue

@@ -2,12 +2,10 @@
   <div class="mac_bg"></div>
   <div class="login animate__animated" :class="{ animate__bounceOut: pass }">
     <div class="head">
-      <img
-        src="https://bladex.cn/images/logo-small.png"
-        alt=""
-      />
+      <img src="https://bladex.cn/images/logo-small.png" alt="" />
     </div>
     <div class="message">Login Please</div>
+    <!-- 原登录方式先注释保留备用
     <div class="form">
       <div class="item" :class="isUserNameError ? 'error' : ''">
         <input class="account" placeholder="account here..." v-model="form.username" type="email" />
@@ -22,27 +20,67 @@
         <i class="iconfont icon-send" @click="handleLogin"></i>
       </div>
     </div>
+    -->
+    <div class="form" v-if="activeName === 'user'">
+      <div class="item" :class="isUserNameError ? 'error' : ''">
+        <input class="account" placeholder="account here..." v-model="form.username" type="email" />
+      </div>
+      <div class="item" :class="isUserPasswordError ? 'error' : ''">
+        <input
+          class="password"
+          placeholder="password here..."
+          v-model="form.password"
+          type="password"
+        />
+        <i class="iconfont icon-send" @click="handleLogin"></i>
+      </div>
+    </div>
+    <div class="form" v-else>
+      <button class="iam-button" @click="handleIamLogin">IAM统一身份认证</button>
+      <button class="account-button" @click="activeName = 'user'">账号密码登录</button>
+    </div>
   </div>
 </template>
 <script>
 import { mapGetters } from 'vuex';
+import website from '@/config/website';
 
 export default {
   data() {
     return {
+      website,
+      activeName: 'iam',
       pass: false,
       isUserNameError: false,
       isUserPasswordError: false,
       form: {
+        tenantId: '000000',
+        deptId: '',
+        roleId: '',
         username: '',
         password: '',
+        type: 'account',
       },
     };
   },
   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()}`;
+    },
   },
   methods: {
+    handleIamLogin() {
+      window.location.href = this.iamAuthorizeUrl;
+    },
     handleLogin() {
       if (this.form.username === '') {
         this.isUserNameError = true;
@@ -57,7 +95,7 @@ export default {
         }, 1000);
         return;
       }
-      this.$store.dispatch('LoginByUsername', this.loginForm).then(() => {
+      this.$store.dispatch('LoginByUsername', this.form).then(() => {
         this.pass = true;
         setTimeout(() => {
           this.$router.push(this.tagWel);