learning-system-portal/src/views/Login.vue

<!--
<template>
  <div class="login" :style="`background: url(${webBaseUrl}/temp/background.jpg) no-repeat`">
    <el-form :model="form" ref="form" :rules="rules">
      <p>登陆</p>
      <el-form-item prop="loginName">
        <el-input v-model="form.loginName" placeholder="用户名"><i slot="prefix" class="el-icon-user-solid"></i></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="form.password" placeholder="账户密码" show-password><i slot="prefix" class="el-icon-lock"></i></el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-row :span="24">
          <el-col :span="10">
            <el-input size="small"
                v-model="form.code" placeholder="验证码"
                auto-complete="off" maxlength="5" @keydown.enter.native="loginSubmit">
          </el-input>
          </el-col>
          <el-col :span="14">
              <img :src="form.image" @click="refreshCode" class="code"/>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item>
        <section>
          <el-checkbox v-model="rememberMe">记住密码</el-checkbox>
          &lt;!&ndash; <span>忘记密码</span> &ndash;&gt;
        </section>
      </el-form-item>
      <el-form-item><el-button type="primary" @click="loginSubmit">点击登录</el-button></el-form-item>
    </el-form>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex';
  import loginApi from "@/api/login";
  export default {
    computed: {
      ...mapGetters(['portalLoginRememberMe','portalBackUrl'])
    },
    data(){
      return {
          form:{
            loginName:'',//10181457
            password:'',//666666
            //验证码的值
            code: "",
            //验证码的索引
            key: "",
            image:''
          },
          rules: {
            loginName: [
                { required: true, message: '请输入用户名', trigger: 'blur' }
              ],
            password: [
                { required: true, message: '请输入密码', trigger: 'blur' }
              ],
            code: [
                { required: true, message: '请输入验证码', trigger: 'blur' }
              ],
          },
          rememberMe:false,
          loading:false,
          redirect: undefined
      }
    },
    mounted() {

      //console.log(process.env,'process.env');
      this.refreshCode();
      if(this.portalLoginRememberMe && this.portalLoginRememberMe.rememberMe){
        this.rememberMe = true;
        this.form.loginName = this.portalLoginRememberMe.loginName;
        this.form.password = this.portalLoginRememberMe.password;
      }
    },
    watch: {
      $route: {
        handler: function(route) {
          this.redirect = route.query && route.query.redirect;
        },
        immediate: true
      }
    },
    methods:{
      refreshCode(){
        loginApi.captcha()
        .then(res => {
          const data = res.result;
          this.form.key = data.key;
          this.form.image = data.image;
        });
      },
      loginSubmit(){
        let $this=this;
        this.$refs.form.validate((valid) => {
          if (valid) {
              this.$store.dispatch("Login", this.form).then(rs => {
                if(rs.status == 200){
                  //记住密码
                  localStorage.setItem(this.$xpage.constants.newLoginKey,1);
                  if(this.rememberMe){
                    let rememberMeOjb = {rememberMe:true,loginName:this.form.loginName,password:this.form.password};
                    this.$store.dispatch("portal/SetLoginRememberMe", rememberMeOjb)
                  }else{
                    let rememberMeOjb = {rememberMe:false,loginName:'',password:''};
                    this.$store.dispatch("portal/SetLoginRememberMe", rememberMeOjb)
                  }
                  //console.log(this.redirect,'this.redirect');
                  this.$router.push({ path: this.redirect || "/index" }).catch(()=>{
                      $this.loading = false;
                  });
                }else{
                  // 刷新验证码
                  this.refreshCode();
                  this.form.code = "";
                  this.loading = false;
                  this.$message({type: 'error', message: rs.message});
                }
              }).catch((err) => {
                // 刷新验证码
                this.refreshCode();
                this.form.code = "";
                this.loading = false;
                this.$message({type: 'error', message: err.message});
              });
          }
        });
      }
    }
  }
</script>

<style scoped lang="scss">
.login {
  height: 100%;
  width: 100%;
  background-size: 100% 100%;
  .el-form {
    position: absolute;
    width: 240px;
    left: 16%;
    top: 50%;
    transform: translate(0, -50%);
    p {
      text-align: center;
      font-size: 50px;
      color: #347cef;
      margin: 0;
      margin-bottom: 43px;
    }
    ::v-deep .el-form-item {
      .el-input {
        .el-input__inner {
          border-radius: 999px;
          border:1px solid #686868;
        }
        .el-input__prefix {
          margin-left: 4px;
        }
      }
      .el-button {
        width: 100%;
        border-radius: 999px;
        letter-spacing: 10px;
      }
    }
    section {
      padding: 0 5px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      margin-bottom: 22px;
      ::v-deep .el-checkbox {
        .el-checkbox__label {
          font-size: 12px;
        }
      }
      span {
        cursor: pointer;
      }
    }
    .code{
      width: 135px;
      // padding: 0 10px;
      height: 40px;
      // border: 1px solid #686868;
      margin-left: 5px;
      border-radius: 20px;
    }
  }
}
</style>
-->