登录页

src/pages/login/FxMoldLogin.vue

@@ -0,0 +1,253 @@
+<template>
+  <div class="loginbody">
+
+
+    <div class="login-box"> 
+      <div class="input-box">
+        <a-form @submit="onSubmit" :form="form">
+        <a-alert type="error" :closable="true" v-show="error" :message="error" showIcon style="margin-bottom: 24px;" />
+        
+        <a-form-item>
+          <a-input autocomplete="autocomplete" size="large" placeholder="请输入账户名"
+            v-decorator="['name', { rules: [{ required: true, message: '请输入账户名', whitespace: true }] }]">
+                <a-icon slot="prefix" type="user" style="color: white;" />
+          </a-input>
+        </a-form-item>
+        <a-form-item>
+          <a-input  size="large" placeholder="请输入密码" autocomplete="autocomplete" type="password"
+            v-decorator="['password', { rules: [{ required: true, message: '请输入密码', whitespace: true }] }]">
+                <a-icon slot="prefix" type="lock" style="color: white;"  />
+          </a-input>
+        </a-form-item>
+        <a-form-item>
+          <a-button :loading="logging" style="width: 100%;margin-top: 24px" size="large" htmlType="submit"
+            type="primary">登录</a-button>
+        </a-form-item>
+      </a-form>
+      <switch-company v-model="companyShow" :data="companyData" @confirm="companyconfirm"
+        ref="switchCompany"></switch-company>
+
+      </div>
+    </div>
+
+
+
+    <login-actions ref="loginActions"></login-actions>
+  </div>
+</template>
+
+<script>
+import { login, switchCompany, getProject } from '@/services/base/user'
+import { setAuthorization } from '@/utils/request'
+import { mapMutations } from 'vuex'
+import Cookie from 'js-cookie'
+import { USER_MODEL } from '@/services/base/api.js';
+import LoginActions from '@/components/login/loginActions.vue'
+
+
+
+
+export default {
+  name: 'Login',
+  components: { LoginActions },
+  data() {
+    return {
+      logging: false,
+      error: '',
+      form: this.$form.createForm(this),
+      mobileTest: "",
+      user: {
+        mobile: '',
+        password: ''
+      },
+      Project: [],
+      companyShow: false,
+      companyData: [],
+      company: Cookie.get('company'),
+      loginResult: null
+    }
+  },
+  computed: {
+  },
+  beforeMount() {
+
+    getProject().then(result => { // 获取项目信息
+      this.Project = result.data.data
+      const project = result.data.data
+      this.setProject(project) // 将项目信息存入vuex
+    })
+
+    // 设置界面设置 的默认值
+    Cookie.set(process.env.VUE_APP_LAYOUT_KEY, 'side')
+    Cookie.set(process.env.VUE_APP_THEME_MODE_KEY, 'dark')
+    Cookie.set(process.env.VUE_APP_THEME_COLOR_KEY, '#fa541c')
+
+  },
+  created() {
+    if (this.company != []) {
+      // console.log("company:",this.company)
+    }
+    this.$nextTick(() => {
+      setTimeout(() => {
+        if (!this.isMiddleAdmin()) {
+          this.user.mobile = this.mobileTest;
+        }
+        this.form.setFieldsValue({
+          name: this.user.mobile,
+          password: this.user.password
+        });
+
+        this.$refs.loginActions.initRoutes({});
+
+      }, 1000)
+    })  // loadsh的pick方法
+
+
+  },
+  methods: {
+    ...mapMutations('account', ['setUid', 'setUser', 'setPermissions', 'setRoutesConfig', 'setSettings', 'setCompany', 'setProject']),
+
+
+    companyconfirm({ row }) {
+      this.companyShow = false;
+      //没有选择公司，或者选择了第一个公司，直接登录
+      if (!row || row.id == this.companyData[0].id) {
+        this.afterLoginSuccess({
+          token: this.loginResult.data.access_token,
+          access_expire: this.loginResult.data.access_expire,
+          uid: this.loginResult.data.uid,
+          loginResMsg: this.loginResult.msg
+        });
+      }
+      //选择了其他公司
+      else {
+
+        setAuthorization({
+          token: this.loginResult.data.access_token,
+          expireAt: new Date(this.loginResult.data.access_expire * 1000)
+        })
+
+        switchCompany(row.id).then(result => {
+          result = result.data;
+          this.afterLoginSuccess({
+            token: result.data.access_token,
+            access_expire: result.data.access_expire,
+            uid: result.data.uid,
+            loginResMsg: this.loginResult.msg
+          });
+
+        })
+      }
+
+
+    },
+    isMiddleAdmin() {
+      return USER_MODEL == "AdminUser";
+    },
+    onSubmit(e) {
+      e.preventDefault()
+      this.form.validateFields((err) => {
+        if (!err) {
+          this.logging = true
+          const name = this.form.getFieldValue('name')
+          const password = this.form.getFieldValue('password')
+          login(name, password).then(this.afterLogin)
+        }
+      })
+    },
+    afterLogin(res) {
+      console.log(res)
+      this.logging = false
+      const loginRes = res.data
+      if (loginRes.code == 200) {
+        if (!this.isMiddleAdmin()) {
+
+
+
+          this.companyData = loginRes.data.company_switch;
+          this.loginResult = loginRes;
+
+
+          if (!this.companyData || !this.companyData.length) {
+
+            this.afterLoginSuccess({
+              token: this.loginResult.data.access_token,
+              access_expire: this.loginResult.data.access_expire,
+              uid: this.loginResult.data.uid,
+              loginResMsg: this.loginResult.msg
+            });
+          } else {
+
+            this.companyShow = true;
+          }
+
+
+          return;
+        }
+
+        this.afterLoginSuccess({
+          token: loginRes.data.access_token,
+          access_expire: loginRes.data.access_expire,
+          uid: loginRes.data.uid,
+          loginResMsg: loginRes.msg
+        });
+
+
+      } else {
+        console.log("登录失败")
+        this.error = loginRes.message || loginRes.msg
+      }
+    },
+
+    afterLoginSuccess({ token, access_expire, uid, loginResMsg }) {
+
+
+      this.$refs.loginActions.afterLoginSuccess({ token, access_expire, uid, msg: loginResMsg });
+
+    }
+  }
+}
+</script>
+
+<style> 
+* {
+   padding: 0;
+   margin: 0;
+   box-sizing: border-box;
+ }
+
+ .loginbody {
+
+   display: flex;
+   justify-content: center;
+   /*在容器中央对齐弹性项目*/
+   align-items: center;
+   width: 100%;
+   min-height: 100vh;
+   background-image: url(../../assets/img/fx-login-bg.jpg);
+   background-repeat: no-repeat;
+   background-position: center;
+   background-size: cover;
+   overflow: hidden;
+   position: relative;
+
+ }
+
+ .login-box {
+   position: absolute;
+   left: 70%;
+   top: 40%;
+   display: flex;
+   justify-content: center;
+   align-content: space-around;
+   flex-wrap: wrap;
+  width: 300px;
+ }
+
+
+ .login-box .ant-input{
+  background: #1C1F52 !important;
+  color: white !important; 
+  width:300px;
+}
+</style>

src/pages/login/index.js

@@ -1,2 +1,13 @@
 import Login from './Login'
-export default Login
+import FxMoldLogin from './FxMoldLogin'
+
+let loginPage = {};
+if(process.env.VUE_APP_BEID == 5 || process.env.VUE_APP_BEID == 6){ 
+    loginPage =  FxMoldLogin
+}else{
+    loginPage =Login
+}
+
+
+
+export default loginPage