cfd-adi-web/src/views/login/index.vue

/*login*/
<template>
  <div class="login">
    <div class="container">
      <div class="content">
        <div class="text">
          <div class="back">
            <p>&nbsp;犀工网</p>
            <p>引领创新</p>
          </div>
          <div class="face">
            <p>&nbsp;犀工网</p>
            <p>引领创新</p>
          </div>
        </div>

        <el-form
          ref="loginForm"
          class="login-form"
          :model="loginForm"
          :rules="loginRules"
          auto-complete="on"
          label-position="left"
        >
          <h3 class="title active">账户登录</h3>
          <el-form-item prop="username">
            <el-input
              ref="username"
              v-model="loginForm.username"
              type="text"
              size="small"
              name="username"
              placeholder="邮箱/用户名"
              auto-complete="on"
            />
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              ref="password"
              v-model="loginForm.password"
              :type="passwordType"
              size="small"
              name="password"
              placeholder="请输入密码"
              auto-complete="on"
              @keyup.enter.native="Login"
            >
              <svg-icon
                slot="suffix"
                :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
                @click="showPwd"
              />
            </el-input>
          </el-form-item>
          <el-button
            type="danger"
            size="small"
            class="login-btn"
            :loading="loading"
            @click.native.prevent="Login"
            >登录</el-button
          >
          <div class="link">
             <router-link class="link-item" to="/forget">忘记密码</router-link>
            <router-link class="link-item" to="/register">免费注册</router-link>
            <!-- <span class="link-item" @click="toPage('forget')">忘记密码</span>
            <span class="link-item" @click="toPage('register')">免费注册</span> -->
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { request, enPassword, dePassword } from '@/utils/request'
import { setToken } from '@/utils/token'
import { validPwd } from '@/utils/validate'

export default {
  name: 'Login',
  data() {
    const validatePwd = (rule, value, callback) => {
      if (value) {
        if (!validPwd(value)) {
          callback(new Error('6~18位，只能包含字母、数字和下划线'))
        } else {
          callback()
        }
      } else {
        callback(new Error('请输入密码'))
      }
    }
    return {
      loginForm: {
        username: '', // zhaochangjun
        password: '', // 密码(zhao1234)
      },
      loginRules: {
        username: [
          { required: true, message: '请输入邮箱/用户名', trigger: 'blur' },
        ],
        password: [{ required: true, trigger: 'blur', validator: validatePwd }],
      },
      loading: false,
      passwordType: 'password',
      redirect: undefined,
    }
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true,
    },
  },
  created() {
    let messageBoxArr = document.getElementsByClassName(
      'el-message-box__wrapper'
    ) //获取页面所有已经存在的messageBox
    if (messageBoxArr.length > 0) {
      this.$msgbox.close() //关闭messageBox弹框
    }
  },
  methods: {
    showPwd() {
      this.passwordType = this.passwordType === 'password' ? 'text' : 'password'
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    Login() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true
          const params = {
            transCode: 'A00002',
            userName: this.loginForm.username,
            authCode: '',
            password: enPassword(this.loginForm.password),
            type: '',
          }
          request(params)
            .then((res) => {
              console.log(res.userId);
              this.$store.dispatch('user/changeState', {
                key: 'token',
                value: res.clientToken,
              })
              this.$store.dispatch('user/changeState', {
                key: 'name',
                value: res.nickName,
              })
              this.$store.dispatch('user/changeState', {
                key: 'userId',
                value: res.userId,
              })
              this.$store.dispatch('user/changeState', {
                key: 'userType',
                value: res.userType,
              })
              this.$store.dispatch('user/changeState', {
                key: 'realStatus',
                value: res.authenticationState,
              })
              this.$store.dispatch('user/changeState', {
                key: 'cfdUrl',
                value: res.cfdUrl,
              })
               this.$store.dispatch('user/changeState', {
                key: 'userRole',
                value: res.userRole,
              })
              this.$store.dispatch('user/changeState', {
                key: 'backgroundFileid',
                value: res.backgroundFileid,
              })
              this.$store.dispatch('user/changeState', {
                key: 'loginStatus',
                value: true,
              })
              this.$message.success('登录成功!')
              this.loading = false
              setToken(res.clientToken)
              setTimeout(() => {
                this.$router.replace({
                  path: this.$route.query.redirect || '/indexLayout',
                })
              }, 1000)
            })
            .catch((err) => {
              this.loading = false
            })
        } else {
          return false
        }
      })
    },
    toPage(type) {
      this.$router.push({
        path: '/' + type,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
@import '@/styles/mixin.scss';
.login {
  padding: 50px 0;
  // @include w_h(100%, calc(100% - 80px));
  @include w_h(100%, 800px);
  .container {
    @include w_h(100%, 100%);
    background: #6bb3f1;
    // background: $color_b url('../../assets/img/login.png') no-repeat center;
    // background-size: cover;
    .content {
      padding: 0 120px;
      @include flex();
      @include w_h(100%, 100%);
      .text {
        @include w_h(440px, 280px);
        @include position();
        font-size: 100px;
        font-weight: 700;
        line-height: 105px;
        white-space: nowrap;
        .back {
          @include w_h(440px, 280px);
          @include position(absolute, 30px, 0, 0, 0, 1);
          color: rgba(255, 255, 255, 1);
          text-shadow: 2px 5px 6px rgba(4, 92, 160, 0.75);
        }
        .face {
          @include w_h(440px, 280px);
          @include position(absolute, 30px, 0, 0, 0, 2);
          color: rgba(255, 255, 255, 0.12);
          background: linear-gradient(
            0deg,
            rgba(177, 226, 247, 1) 0%,
            rgba(247, 251, 255, 1) 100%
          );
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
      .login-form {
        padding: 35px 15px;
        @include w_h(30%);
        max-width: 360px;
        min-width: 300px;
        background: $color_f;
        .title {
          margin-bottom: 30px;
          font-size: 20px;
          text-align: center;
          color: $color_3;
        }
        .login-btn {
          margin: 10px auto 30px;
          @include w_h();
        }
        .link {
          @include flex(center);
          font-size: 12px;
          color: $color_9;
          .link-item {
            margin: 0 10px;
            &:hover {
              cursor: pointer;
              color: $color_on;
            }
          }
        }
      }
    }
  }
}

</style>
<style lang="scss">
@import '@/styles/variables.scss';
@supports (-webkit-mask: none) and (not (cater-color: $color_9)) {
  .login-form .el-input input {
    font-size: 12px;
    color: $color_9;
  }
}
.login-form {
  .el-input {
    &__inner:focus {
      border-color: $color_9;
    }
  }
}
</style>