⚡ 登录界面新增域名适配租户配置

src/api/system/tenant.js

@@ -58,3 +58,13 @@ export const setting = (ids, form) => {
     }
   })
 }
+
+export const info = (domain) => {
+  return request({
+    url: '/api/blade-system/tenant/info',
+    method: 'get',
+    params: {
+      domain
+    }
+  })
+}

src/page/login/codelogin.vue

@@ -12,7 +12,7 @@
                 auto-complete="off"
                 :placeholder="$t('login.phone')">
         <i slot="prefix"
-           class="icon-shouji"></i>
+           class="icon-shouji"/>
       </el-input>
     </el-form-item>
     <el-form-item prop="code">
@@ -23,7 +23,7 @@
                 :placeholder="$t('login.code')">
         <i slot="prefix"
            class="icon-yanzhengma"
-           style="margin-top:6px;"></i>
+           style="margin-top:6px;"/>
         <template slot="append">
           <span @click="handleSend"
                 class="msg-text"
@@ -54,7 +54,7 @@ export default {
       }
     };
     const validateCode = (rule, value, callback) => {
-      if (value.length != 4) {
+      if (value.length !== 4) {
         callback(new Error("请输入4位数的验证码"));
       } else {
         callback();
@@ -98,7 +98,7 @@ export default {
       const time = setInterval(() => {
         this.msgTime--;
         this.msgText = this.msgTime + this.config.MSGSCUCCESS;
-        if (this.msgTime == 0) {
+        if (this.msgTime === 0) {
           this.msgTime = this.config.MSGTIME;
           this.msgText = this.config.MSGINIT;
           this.msgKey = false;

src/page/login/index.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="login-container"
+       ref="login"
        @keyup.enter.native="handleLogin">
-    <top-color v-show="false"></top-color>
+    <top-color v-show="false"/>
     <div class="login-weaper animated bounceInDown">
       <div class="login-left">
         <div class="login-time">
@@ -16,11 +17,11 @@
         <div class="login-main">
           <h4 class="login-title">
             {{ $t('login.title') }}{{website.title}}
-            <top-lang></top-lang>
+            <top-lang/>
           </h4>
-          <userLogin v-if="activeName==='user'"></userLogin>
-          <codeLogin v-else-if="activeName==='code'"></codeLogin>
-          <thirdLogin v-else-if="activeName==='third'"></thirdLogin>
+          <userLogin v-if="activeName==='user'"/>
+          <codeLogin v-else-if="activeName==='code'"/>
+          <thirdLogin v-else-if="activeName==='third'"/>
           <div class="login-menu">
             <a href="#"
                @click.stop="activeName='user'">{{ $t('login.userLogin') }}</a>
@@ -36,67 +37,70 @@
   </div>
 </template>
 <script>
-import userLogin from "./userlogin";
-import codeLogin from "./codelogin";
-import thirdLogin from "./thirdlogin";
-import { mapGetters } from "vuex";
-import { dateFormat } from "@/util/date";
-import { validatenull } from "@/util/validate";
-import topLang from "@/page/index/top/top-lang";
-import topColor from "@/page/index/top/top-color";
-export default {
-  name: "login",
-  components: {
-    userLogin,
-    codeLogin,
-    thirdLogin,
-    topLang,
-    topColor
-  },
-  data() {
-    return {
-      time: "",
-      activeName: "user"
-    };
-  },
-  watch: {
-    $route() {
-      const params = this.$route.query;
-      this.socialForm.state = params.state;
-      this.socialForm.code = params.code;
-      if (!validatenull(this.socialForm.state)) {
-        const loading = this.$loading({
-          lock: true,
-          text: `${
-            this.socialForm.state === "WX" ? "微信" : "QQ"
-          }登录中,请稍后。。。`,
-          spinner: "el-icon-loading"
-        });
-        setTimeout(() => {
-          loading.close();
-        }, 2000);
+  import userLogin from "./userlogin";
+  import codeLogin from "./codelogin";
+  import thirdLogin from "./thirdlogin";
+  import {mapGetters} from "vuex";
+  import {dateFormat} from "@/util/date";
+  import {validatenull} from "@/util/validate";
+  import topLang from "@/page/index/top/top-lang";
+  import topColor from "@/page/index/top/top-color";
+  import {info} from "@/api/system/tenant";
+
+  export default {
+    name: "login",
+    components: {
+      userLogin,
+      codeLogin,
+      thirdLogin,
+      topLang,
+      topColor
+    },
+    data() {
+      return {
+        time: "",
+        activeName: "user"
+      };
+    },
+    watch: {
+      $route() {
+        const params = this.$route.query;
+        this.socialForm.state = params.state;
+        this.socialForm.code = params.code;
+        if (!validatenull(this.socialForm.state)) {
+          const loading = this.$loading({
+            lock: true,
+            text: `${
+              this.socialForm.state === "WX" ? "微信" : "QQ"
+            }登录中,请稍后。。。`,
+            spinner: "el-icon-loading"
+          });
+          setTimeout(() => {
+            loading.close();
+          }, 2000);
+        }
       }
-    }
-  },
-  created() {
-    this.getTime();
-    setInterval(() => {
+    },
+    created() {
       this.getTime();
-    }, 1000);
-  },
-  mounted() {},
-  computed: {
-    ...mapGetters(["website"])
-  },
-  props: [],
-  methods: {
-    getTime() {
-      this.time = dateFormat(new Date());
+      setInterval(() => {
+        this.getTime();
+      }, 1000);
+    },
+    mounted() {
+    },
+    computed: {
+      ...mapGetters(["website"])
+    },
+    props: [],
+    methods: {
+      getTime() {
+        this.time = dateFormat(new Date());
+      }
     }
-  }
-};
+  };
 </script>
 
 <style lang="scss">
-@import "@/styles/login.scss";
+  @import "@/styles/login.scss";
 </style>

src/page/login/thirdlogin.vue

@@ -5,7 +5,7 @@
       <span class="container"
             :style="{backgroundColor:'#6ba2d6'}">
         <i icon-class="wechat"
-           class="iconfont icon-weixin"></i>
+           class="iconfont icon-weixin"/>
       </span>
       <p class="title">{{$t('login.wechat')}}</p>
     </div>
@@ -14,7 +14,7 @@
       <span class="container"
             :style="{backgroundColor:'#8dc349'}">
         <i icon-class="qq"
-           class="iconfont icon-qq"></i>
+           class="iconfont icon-qq"/>
       </span>
       <p class="title">{{$t('login.qq')}}</p>
     </div>

src/page/login/userlogin.vue

@@ -11,8 +11,7 @@
                 v-model="loginForm.tenantId"
                 auto-complete="off"
                 :placeholder="$t('login.tenantId')">
-        <i slot="prefix"
-           class="icon-quanxian"></i>
+        <i slot="prefix" class="icon-quanxian"/>
       </el-input>
     </el-form-item>
     <el-form-item prop="username">
@@ -21,8 +20,7 @@
                 v-model="loginForm.username"
                 auto-complete="off"
                 :placeholder="$t('login.username')">
-        <i slot="prefix"
-           class="icon-yonghu"></i>
+        <i slot="prefix" class="icon-yonghu"/>
       </el-input>
     </el-form-item>
     <el-form-item prop="password">
@@ -32,11 +30,8 @@
                 v-model="loginForm.password"
                 auto-complete="off"
                 :placeholder="$t('login.password')">
-        <i class="el-icon-view el-input__icon"
-           slot="suffix"
-           @click="showPassword"></i>
-        <i slot="prefix"
-           class="icon-mima"></i>
+        <i class="el-icon-view el-input__icon" slot="suffix" @click="showPassword"/>
+        <i slot="prefix" class="icon-mima"/>
       </el-input>
     </el-form-item>
     <el-form-item>
@@ -51,6 +46,7 @@
 <script>
 import { mapGetters } from "vuex";
 import website from '@/config/website';
+import {info} from "@/api/system/tenant";
 
 export default {
   name: "userlogin",
@@ -78,7 +74,9 @@ export default {
       passwordType: "password"
     };
   },
-  created() {},
+  created() {
+    this.getTenant();
+  },
   mounted() {},
   computed: {
     ...mapGetters(["tagWel"])
@@ -86,7 +84,7 @@ export default {
   props: [],
   methods: {
     showPassword() {
-      this.passwordType == ""
+      this.passwordType === ""
         ? (this.passwordType = "password")
         : (this.passwordType = "");
     },
@@ -106,6 +104,17 @@ export default {
           });
         }
       });
+    },
+    getTenant() {
+      let domain = window.location.href.replace("/#/login", "");
+      info(domain).then(res => {
+        const data = res.data;
+        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/styles/login.scss

@@ -5,13 +5,15 @@
   width: 100%;
   height: 100%;
   margin: 0 auto;
-  background: url(/img/bg/cloud.jpg) 0 bottom repeat-x #049ec4;
-  animation: animate-cloud 20s linear infinite;
+  background-image: url("/img/bg/bg.jpg");
+  background-size: 100% 100%;
 }
+
 .login-weaper {
   margin: 0 auto;
   width: 1000px;
   box-shadow: -4px 5px 10px rgba(0, 0, 0, 0.4);
+
   .el-input-group__append {
     border: none;
   }
@@ -24,6 +26,7 @@
   align-items: center;
   display: flex;
 }
+
 .login-left {
   border-top-left-radius: 5px;
   border-bottom-left-radius: 5px;
@@ -35,9 +38,11 @@
   width: 50%;
   position: relative;
 }
+
 .login-left .img {
   width: 140px;
 }
+
 .login-time {
   position: absolute;
   left: 25px;
@@ -49,6 +54,7 @@
   font-size: 18px;
   overflow: hidden;
 }
+
 .login-left .title {
   margin-top: 60px;
   text-align: center;
@@ -68,17 +74,21 @@
   float: left;
   box-sizing: border-box;
 }
+
 .login-main {
   margin: 0 auto;
   width: 65%;
   box-sizing: border-box;
 }
+
 .login-main > h3 {
   margin-bottom: 20px;
 }
+
 .login-main > p {
   color: #76838f;
 }
+
 .login-title {
   color: #333;
   margin-bottom: 40px;
@@ -87,16 +97,19 @@
   text-align: center;
   letter-spacing: 4px;
 }
+
 .login-menu {
   margin-top: 40px;
   width: 100%;
   text-align: center;
+
   a {
     color: #999;
     font-size: 12px;
     margin: 0px 8px;
   }
 }
+
 .login-submit {
   width: 100%;
   height: 45px;
@@ -111,17 +124,22 @@
   font-family: "neo";
   transition: 0.25s;
 }
+
 .login-form {
   margin: 10px 0;
+
   i {
     color: #333;
   }
+
   .el-form-item__content {
     width: 100%;
   }
+
   .el-form-item {
     margin-bottom: 12px;
   }
+
   .el-input {
     input {
       padding-bottom: 10px;
@@ -132,6 +150,7 @@
       color: #333;
       border-bottom: 1px solid rgb(235, 237, 242);
     }
+
     .el-input__prefix {
       i {
         padding: 0 5px;
@@ -140,12 +159,14 @@
     }
   }
 }
+
 .login-code {
   display: flex;
   align-items: center;
   justify-content: space-around;
   margin: 0 0 0 10px;
 }
+
 .login-code-img {
   margin-top: 2px;
   width: 100px;