loginAsus.vue

<template>
  <div id="userLayout" class="user-layout-wrapper">
    <div class="container">
      <div class="login-container">
        <div v-if="$Project !== 'mall'">
          <lange-select />
        </div>
        <el-form
          ref="loginForm"
          :model="loginForm"
          :rules="rules"
          class="login-form"
          auto-complete="on"
        >
          <!-- 可添加 国际化选项 -->
          <div class="logo-wrapper">
            <a class="logo-title" href="javascript:;">
              {{ platformTitle }}
            </a>
          </div>
          <el-form-item prop="loginName">
            <el-input
              ref="loginName"
              v-model="loginForm.loginName"
              class="form-inp"
              autocomplete="on"
              type="text"
              name="loginName"
              tabindex="1"
            >
              <i slot="suffix" class="custom-icon loginUser-icon" />
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              ref="password"
              v-model="loginForm.password"
              class="form-inp"
              autocomplete="on"
              type="password"
              name="password"
              @keyup.enter.native="submitForm('loginForm')"
            >
              <i slot="suffix" class="custom-icon pass-icon" />
            </el-input>
          </el-form-item>
          <el-form-item class="submit-wrapper">
            <el-button
              type="primary"
              class="submit-btn"
              @click.native.prevent="submitForm('loginForm')"
            >{{ falg ? $t('login.loginLoading') : $t('login.btn') }}</el-button>
            <el-checkbox
              v-model="rememberPass"
              class="remember-checkbox-wrapper"
            >{{ $t('login.rememberPw') }}</el-checkbox>
          </el-form-item>
          <div class="login-footer">
            <p>{{ footerText }}</p>
            <p>京ICP备12023019号-3</p>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import LangeSelect from "../public/LangeSelect"

export default {
  components: {
    LangeSelect
  },
  data() {
    return {
      loginForm: {
        loginName: "", //
        password: "" //
      },
      rememberPass: true,
      myRules: {
        loginName: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          }
        ]
      },
      asusAtoken: ""
    };
  },
  computed: {
    platformTitle() {
      return this.$t('login.platformName')
    },
    footerText() {
      return window._vionConfig.companyName || ''
    }
  },
  created() {
    let _this = this;
    document.addEventListener("keydown", function(e) {
      let _key = window.event.keyCode;
      if (_key === 13) {
        _this.submitForm("loginForm");
      }
    });
  },
  mounted() {
    // $('.login-wrapper').css({
    //     height: window.innerHeight + 'px'
    // });
    this.checkCookie();
    if (window.location.href.indexOf("?t=") === -1) {
    } else {
      this.asusAtoken = decodeURI(window.location.href.split("=")[1]);
      this.$api.management
        .userAsus(
          {},
          {
            headers: {
              Authorization: this.asusAtoken
            }
          }
        )
        .then(res => {
          this.$cookie.set("atoken", this.asusAtoken);
          this.$cookie.set("userId", res.data.data.user.id);
          this.$cookie.set("user_type", res.data.data.userType);
          this.setSessionLocal("loginName", res.data.data.user.loginName);
          this.setSessionLocal("loginVal", true);
          if (this.rememberPass) {
            this.$cookie.set("username", res.data.data.user.loginName);
            // this.$cookie.set('pwd', this.loginForm.password);
            // this.setSessionLocal('username', this.loginForm.loginName);
            // this.setSessionLocal('pwd', this.loginForm.password)
          } else {
            this.$cookie.remove("username");
            this.$cookie.remove("pwd");
            // window.sessionStorage.removeItem('username');
            // window.sessionStorage.removeItem('pwd');
          }
          if (res.data.data.user.accountId) {
            this.$cookie.set("accountId", res.data.data.user.accountId);
            this.getAccName(res.data.data.user.accountId);
          } else {
            // this.$cookie.set('accountId', res.data.data.user.accountId);
            this.getAccName(-1);
            // this.$cookie.set('accountId', -1);
            // this.$cookie.set('accountName', '');
          }
        });
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$api.base
            .login(this.loginForm)
            .then(res => {
              this.$cookie.set("userId", res.data.data.user.id);
              this.$cookie.set("atoken", res.data.data.atoken);
              this.$cookie.set("rtoken", res.data.data.rtoken);
              this.$cookie.set("user_unid", res.data.data.user_unid);
              this.$cookie.set("user_type", res.data.data.userType);
              // this.$cookie.set('accountId', res.data.data.user.accountId);
              this.setSessionLocal("loginName", res.data.data.user.loginName);
              this.setSessionLocal("loginVal", true);
              if (this.rememberPass) {
                this.$cookie.set("username", this.loginForm.loginName);
                this.$cookie.set("pwd", this.loginForm.password);
                // this.setSessionLocal('username', this.loginForm.loginName);
                // this.setSessionLocal('pwd', this.loginForm.password)
              } else {
                this.$cookie.remove("username");
                this.$cookie.remove("pwd");
                // window.sessionStorage.removeItem('username');
                // window.sessionStorage.removeItem('pwd');
              }
              // global.isLogin = true;
              if (res.data.data.user.accountId) {
                this.$cookie.set("accountId", res.data.data.user.accountId);
                this.getAccName(res.data.data.user.accountId);
              } else {
                // this.$cookie.set('accountId', res.data.data.user.accountId);
                this.getAccName(-1);
                // this.$cookie.set('accountId', -1);
                // this.$cookie.set('accountName', '');
                // this.$router.push('/home');
              }
            })
            .catch(err => {
              // global.isLogin = false;
              // console.log('login err:', err)
              this.$message({
                type: "error",
                message: this.$t("message.loginFailed")
              });
            });
        } else {
          return false;
        }
      });
    },
    getAccName(accId) {
      accId = accId == -1 ? null : accId;
      // if(accId) {
      this.$api.base
        .account({
          id: accId
          // _t: Date.parse(new Date()) / 1000
        })
        .then(res => {
          if (res.data.data.length < 1) {
            // setTimeout(() => {
            this.$message({
              type: "wraning",
              message: this.$t("message.noBloc")
            });
            // }, 2000);
          } else {
            // 缓存首页 map 配置
            const homeMapConf = res.data.data.reduce((prevVal, curVal) => {
              prevVal[curVal.id] = {
                mapDisplay: curVal.mapDisplay,
                mapLatitude: curVal.mapLatitude,
                mapLongitude: curVal.mapLongitude,
                mapZoom: curVal.mapZoom
              };
              return prevVal;
            }, {});

            window.sessionStorage.setItem(
              "mapConf",
              JSON.stringify(homeMapConf)
            );
            let accountName = res.data.data[0].name;
            this.$cookie.set("accountId", res.data.data[0].id);
            this.$cookie.set("accountName", accountName);
            this.sessionCity();
            this.setSessionLocal("path", "/account");
            this.$router.push("/home");
          }
        });
    },
    checkCookie() {
      let user = this.$cookie.get("username");
      let pwd = this.$cookie.get("pwd");
      if (user !== "" && pwd !== "") {
        this.loginForm.loginName = user;
        this.loginForm.password = pwd;
      } else {
        this.loginForm.loginName = "";
        this.loginForm.password = "";
      }
    }
  }
};
</script>

<style scoped>
#userLayout.user-layout-wrapper {
  height: 100%;
}
#userLayout.user-layout-wrapper .container {
  width: 100%;
  min-height: 100%;
  background: url(~@/assets/img/login_bg.png) no-repeat 50%;
  background-size: 100% 100%;
  position: relative;
}

.form-inp {
  height: 42px;
  line-height: 42px;
  font-size: 20px;
}

.custom-icon {
  font-family: element-icons !important;
  speak: none;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: middle;
  display: inline-block;
  width: 0.2rem;
  height: 0.2rem;
  color: rgba(136, 136, 136, 1);
  width: 19px !important;
  height: 19px !important;
}

.loginUser-icon {
  background: url(~@/assets/img/login/login_user.png) no-repeat;
  background-size: 100% 100%;
}

.pass-icon {
  background: url(~@/assets/img/login/login_pw.png) no-repeat;
  background-size: 100% 100%;
}

.login-container {
  min-height: 100%;
  width: 100%;
  overflow: hidden;
}
.login-form {
  position: absolute;
  left: 24%;
  top: 26%;
  width: 18%;
}
.logo-wrapper {
  height: 37px;
  text-align: center;
  margin-bottom: 22%;
}
.logo-title {
  font-size: 24px;
  color: rgba(0, 0, 0, 0.9);
}
.logo-wrapper .logo {
  height: 100%;
  width: auto;
}
.submit-wrapper {
  text-align: center;
}
.submit-btn {
  width: 100%;
  margin-top: 15%;
  border-radius: 21px;
  background-color: rgba(0, 105, 255, 1);
  border-color: rgba(0, 105, 255, 1);
}

.remember-checkbox-wrapper {
  line-height: 63px;
}

.login-footer {
  font-size: 10px;
  color: rgba(187, 187, 187, 1);
  text-align: center;
  padding-top: 0%;
}

@media only screen and (max-width: 1280px) {
  #userLayout.user-layout-wrapper {
    min-height: 860px;
    overflow: hidden;
  }
  #userLayout.user-layout-wrapper .container {
    min-width: 1200px;
  }
  .login-container .el-form-item.submit-wrapper {
    margin-bottom: 0;
  }
  .submit-btn {
    margin-top: 9%;
  }
}
@media only screen and (max-height: 1280px) {
  #userLayout.user-layout-wrapper {
    min-height: 860px;
    overflow: hidden;
  }
  #userLayout.user-layout-wrapper .container {
    min-width: 1200px;
  }
  .login-container .el-form-item.submit-wrapper {
    margin-bottom: 0;
  }
  .submit-btn {
    margin-top: 11%;
  }
}
</style>

<style>
.login-container .el-form-item {
  margin-bottom: 18px;
}
</style>