ngds/frontendEle/src/views/login/index.vue

<template>
  <div class="login-wrapper">
    <div class="login-writh">
      <div class="login-padding">
        <div class="login-left">
          <img src="../../static/img/simple-img.jpg" alt="">
        </div>
        <div class="login-box">
          <div class="white-box">
            <h3 class="white-box-title">Welcome</h3><!--欢迎回来-->
            <el-form ref="form" :model="loginForm" label-width="80px">
              <el-form-item label-width="0px" class="border-bottom username">
                <el-input v-model="loginForm.userName" placeholder="UserName" @change="refreshLoginVerifyStatus"><!--账户-->
                  <template slot="prepend"><!--<i class="el-icon-user"></i>--><i></i></template>
                </el-input>
              </el-form-item>
              <el-form-item label-width="0px" class="border-bottom key-name">
                <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="Password"><!--密码-->
                  <template slot="prepend"><!--<i class="el-icon-lock"></i>--><i></i></template>
                </el-input>
              </el-form-item>
              <el-form-item label-width="0px" class="border-bottom key-name" v-show="isLoginVerify">
                <el-input type="verifyCode" v-model="loginForm.verifyCode" auto-complete="off" @keyup.enter.native="onSubmit" placeholder="Captcha"><!--验证码-->
                  <template slot="prepend"><i></i></template>
                </el-input>
                <el-image :src="captchaUrl" @click="changeCaptcha">
                </el-image>
              </el-form-item>
              <el-form-item label-width="0px" style="border-radius: 0">
                <el-button class="submit-button" type="primary" @click="onSubmit" :loading="submitButtonStat">Login</el-button><!--登录-->
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import network from '@/utils/network'
import tool from '@/utils/tool'
import userInfo from '@/utils/userInfo'
import store from '@/utils/vuexStore'
import baseInfo from '@/utils/baseInfo'
import {REQUEST_URL} from '@/utils/config'
import axiosObj from "@/utils/axiosPlugin";

export default {
  name: 'login',
  data () {
    return {
      errorMsg: {
        title: '',
        type: ''
      },
      loginForm: {
        userName: '',
        password: '',
        verifyCode: '',
      },
      submitButtonStat: false,
      pageId: '',
      captchaUrl: '',
      isLoginVerify: false,
      baseInfo: baseInfo,
    }
  },
  beforeCreate () {
    let path = 'site/page-data'
    axiosObj.get(path, this.passwordInfo).then(response => {
      this.pageId = response.pageId
      this.captchaUrl = REQUEST_URL + 'site/captcha?page_id=' + this.pageId + '&v=' + Math.random()
    }).catch(error => {
      error = tool.errorHandle(error)
      this.$message.error(error.message)
      console.log(error)
    })
  },
  mounted () {
    network.getSiteInfo()
    // 检测用户是否已经登录，如果已经登录则直接跳转到控制台页
    // if(userInfo.hasLogin()){
    //     this.$router.push('dashboard/index');
    // }
  },
  methods: {
    onSubmit () {
      this.submitButtonStat = true
      let promise = null
      // 查看是否存在当前时间差，如果不存在，则向服务器请求时间差
      let userName = this.loginForm.userName
      let password = this.loginForm.password
      let pageId = this.pageId
      if (baseInfo.daysDiff() === null) {
        promise = network.getDaysDiff().then(response => {
          if (this.isLoginVerify) {
            let verifyCode = this.loginForm.verifyCode
            let data = {
              userName,
              password,
              verifyCode,
            }
            return network.loginGetAccessToken(userName, password, `oauth/login?page_id=${pageId}`, data)
          }else {
            return network.loginGetAccessToken(userName, password)
          }
        })
      } else {
        if (this.isLoginVerify) {
          let verifyCode = this.loginForm.verifyCode
          let data = {
            userName,
            password,
            verifyCode,
          }
          promise = network.loginGetAccessToken(userName, password, `oauth/login?page_id=${pageId}`, data)
        } else {
          promise = network.loginGetAccessToken(userName, password)
        }
      }
      promise.then(response => {
        return network.getUserInfo()
      }).then(response => {
        return network.getBaseInfo()
      }).then(response => {
        return network.getData('message/unread-num')
      }).then(response => {
        if (response > 0) {
          store.state.baseInfo.messageUnreadNum = response
        }
        if (!this.baseInfo.whetherBA()) {
          this.$router.push('dashboard/index')
        } else {
          this.$router.push('dashboard/ba-index')
        }
      }).catch(error => {
        console.log(error);
        this.refreshLoginVerifyStatus();
        if (this.isLoginVerify) {
          this.changeCaptcha()
        }
        if (error.message === 'ERROR_IS_MODIFY_PASSWORD') {
          // this.submitButtonStat = false
          // console.log(this.loginForm.userName);
          this.$router.push(`/modify-password/${this.loginForm.userName}`)
        } else {
          error = tool.errorHandle(error)
          this.$message.error(error.message)
          // this.submitButtonStat = false
        }
        // error = tool.errorHandle(error)
        // this.$message.error(error.message)
        // this.submitButtonStat = false
      })

    },
    changeCaptcha () {
      this.captchaUrl = REQUEST_URL + 'site/captcha?page_id=' + this.pageId + '&v=' + Math.random();
    },
    refreshLoginVerifyStatus () {
      let path = 'oauth/is-login-verify'
      axiosObj.post(path, {userName:this.loginForm.userName}).then(response => {
        this.isLoginVerify = response === 1;
        this.submitButtonStat = false
      }).catch(error => {
        error = tool.errorHandle(error)
        this.$message.error(error.message)
        console.log(error)
        this.submitButtonStat = false
      })
    },
  }
}

</script>

<style>
  @import '../../static/plugins/css/font-awesome.min.css';

  .login-wrapper {
    background: url(../../static/img/login-register.jpg) center center no-repeat;
    width: 100%;
    height: 100%;
    position: fixed;background-size: 100% 100% ;
  }
  .username .el-input-group__prepend{ background: url(../../static/img/user.png) center center no-repeat;background-size:contain }
  .key-name .el-input-group__prepend{ background: url(../../static/img/key.png) center center no-repeat;background-size:contain}
  .login-wrapper .login-box {
    width: 40%;
    margin: 0% auto 0;float: right;
  }

  .login-wrapper .white-box {
    background: #fff;
    padding: 25px;
    margin-bottom: 15px;
    border-radius: 0;box-shadow: 0 0 10px #f2f1f4;
  }

  .white-box .white-box-title {
    margin: 0 0 12px;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    color: #522989;
  }

  .login-wrapper .el-input-group__prepend {
    background-color: #fff !important;
    border-radius: 0 !important;
    padding: 0 15px 0 10px ;width: 5%;display: block;;float: left;padding: 0px!important;height:35px;
  }

  .login-wrapper .el-input-group--prepend i{font-size: 16px;}

  .login-wrapper .el-input__inner {
    border-radius: 20px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }

  .login-wrapper .submit-button {
    width: 80%;margin: 0 auto;display: block;
    border-radius: 20px !important;margin-top: 15px;
    background-color: #0c195d !important;
    border-color: #0c195d !important;
  }
  .el-input-group--prepend .el-input__inner, .el-input-group__append{border: none;background: none;border-radius: 0;width:94%;float: right;display: block; }
  .border-bottom {border-bottom:2px #0c195d solid;}
  .el-input-group__append, .el-input-group__prepend{border: none;}
  input:-webkit-autofill {
    transition: background-color 5000s ease-in-out 0s;
  }
  input:-webkit-autofill:focus {
    transition: background-color 5000s ease-in-out 0s;
  }
  .login-padding:after{content: '';display: table;clear: both;}
  .login-left{width: 40%;float: left; }
  .login-left img{width: 100%;height: auto;}
  .login-padding{background: url(../../static/img/shu.png) center center no-repeat;background-size:contain}
  @media (min-width: 34em) {
    .login-padding{width:600px;margin: 20% auto;}
  }
  @media (min-width: 48em) {
    .login-padding{width: 700px;margin: 20% auto;}
  }
  @media (min-width: 62em) {
    .login-padding{width: 1000px;margin: 13% auto;/*padding: 5% 0;*/}
  }
  @media (min-width:1550px) {
    .login-padding{width: 1000px;margin: 11% auto;/*padding: 5% 0;*/}
  }

  @media only screen and (max-width:766px) {
    .login-left{width: 40%;float: left;display: none; }
    .login-wrapper .login-box{width: 70%;float: none;margin: 25% auto 0;}
    .login-wrapper .el-input-group__prepend{ }
    .login-padding{background: none;}
    .login-wrapper .white-box{box-shadow: none;}
    .login-wrapper .el-input-group__prepend{width: 8%;}
    .el-input-group--prepend .el-input__inner, .el-input-group__append{width: 90%;}
  }
</style>