JingTieXueTang.Web/src/views/login/login.vue

<template>
  <div class="login-box">
    <a-spin :spinning="loading">
      <div class="login-body">
        <div class="login-title-row">
          <img class="login-title-logo" :src="logoImg" />
          <span class="login-title-txt">{{ loginTitle }}</span>
        </div>
        <div class="login-description-row">
          <div class="login-description-none"></div>
          <div class="login-description-txt">后端管理平台</div>
        </div>
        <a-form
          :form="loginForm"
          @submit="handleLoginFun"
          style="width: 350px;"
        >
          <a-form-item>
            <a-input
              placeholder="账户"
              :maxLength="10"
              v-decorator="[
                'loginUserName',
                {
                  rules: [{ required: true, message: '请输入您的账户！' }],
                },
              ]"
            >
              <icon-font
                slot="addonBefore"
                class="iconFont"
                type="ali-icon-yonghu"
              />
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-input-password
              placeholder="密码"
              :maxLength="10"
              v-decorator="[
                'loginPassword',
                {
                  rules: [{ required: true, message: '请输入您的密码！' }],
                },
              ]"
            >
              <icon-font
                slot="addonBefore"
                class="iconFont"
                type="ali-icon-mima"
              />
            </a-input-password>
          </a-form-item>
          <a-form-item>
            <a-button
              type="primary"
              html-type="submit"
              style="width: 100%;margin-top: 40px;"
              >登录</a-button
            >
          </a-form-item>
        </a-form>
        <div class="login-enterprise">
          <span>copyright © 浮游科技有限公司出品</span>
        </div>
      </div>
    </a-spin>
  </div>
</template>

<script>
import { PROGRAM_Title, AUTH_TOKEN_FRONT } from '@/common/Constant';
export default {
  name: 'login',
  props: {},
  components: {},
  data() {
    return {
      loading: false, // 是否显示加载动画
      logoImg: require('@/assets/image/logo.png'), // logo图
      loginTitle: PROGRAM_Title, // 系统标题
      loginForm: this.$form.createForm(this, { name: 'login' }),
    };
  },
  created() {
    // this.setUserInfo({ name: '111', token: 'WFFFF' });
    this.initDataFun(); // 初始化数据
  },
  mounted() {},
  beforeDestroy() {},
  watch: {},
  computed: {},
  methods: {
    // 初始化数据
    initDataFun() {},
    // 操作：登录
    handleLoginFun(e) {
      e.preventDefault();
      this.loginForm.validateFields((err, values) => {
        if (!err) {
          this.loading = true;
          let params = {
            userName: values.loginUserName,
            password: values.loginPassword,
            token: AUTH_TOKEN_FRONT,
          };
          this.$_http
            .get(this.$_API.INTERFACE_GET_USER_LOGIN, {
              auth: {
                username: params.userName,
                password: params.password,
              },
            })
            .then((res) => {
              console.log(res);
              this.loading = false;
              if (res.data) {
                this.getEngineeringWorkList(res.data); // 获取工种，并存到vuex
              } else {
                this.loginForm.setFields({
                  password: {
                    value: values.loginUserName,
                    errors: [new Error('账号密码不正确')],
                  },
                  passwordSecond: {
                    value: values.loginPassword,
                    errors: [new Error('账号密码不正确')],
                  },
                });
              }
            })
            .catch(() => {
              this.loading = false;
            });
        }
      });
    },
    // 获取工种，并存到vuex
    getEngineeringWorkList(userInfo) {
      this.loading = true;
      this.$_http
        .get(this.$_API.INTERFACE_GET_ENGINEERINGWORK_LIST)
        .then((res) => {
          this.$store.commit('common/SET_ENGINEERING_WORK_LIST', res.data);
          sessionStorage.setItem(
            'ENGINEERING_WORK_LIST',
            JSON.stringify(res.data)
          );
          this.getExamQuestionTypeConditionParentList(userInfo); // 获取试题类型-父类信息，并存到vuex
        })
        .catch(() => {
          this.loading = false;
          this.setUserInfo(userInfo); // 设置用户信息，跳转到首页
        });
    },
    // 获取试题类型-父类信息，并存到vuex
    getExamQuestionTypeConditionParentList(userInfo) {
      this.$_http
        .get(this.$_API.INTERFACE_GET_EXAMS_QUESTION_TYPE_CONDITION_PARENT)
        .then((res) => {
          this.$store.commit(
            'common/SET_EXAM_QUESTION_TYPE_CONDITION_PARENT',
            res.data
          );
          sessionStorage.setItem(
            'EXAM_QUESTION_TYPE_CONDITION_PARENT',
            JSON.stringify(res.data)
          );
          this.setUserInfo(userInfo); // 设置用户信息，跳转到首页
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 设置用户信息，跳转到首页
    setUserInfo(userInfo) {
      this.$store.commit('user/SET_LOGIN', userInfo); // // 存用户信息
      this.$store.commit('user/SET_MENU', []); // 赋值菜单
      this.loading = false;
      this.$router.push({ name: 'home' });
    },
  },
};
</script>

<style lang="less">
.login-box {
  .ant-input,
  .ant-btn {
    height: 40px;
  }
}
</style>

<style lang="less" scoped>
@import '~@/styles/common/variable.less';
.login-box {
  .login-body {
    width: 100vw;
    height: 100vh;
    background-image: url('../../assets/image/login/background.png');
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    .login-title-row {
      margin-top: 10%;
      padding-right: 50px;
      display: flex;
      align-items: center;
      .login-title-logo {
        width: 45px;
        height: 45px;
      }
      .login-title-txt {
        margin-left: 30px;
        font-size: 33px;
        font-weight: bold;
        color: @mainColorBlack;
      }
    }
    .login-description-row {
      margin-top: 10px;
      margin-bottom: 5%;
      padding-right: 50px;
      display: flex;
      color: @mainColorBlack45;
      .login-description-none {
        width: 45px;
      }
      .login-description-txt {
        margin-left: 45px;
        width: 132px;
        font-size: 14px;
        text-align: center;
      }
    }
    .login-enterprise {
      position: absolute;
      bottom: 5%;
      span {
        font-size: 12px;
        color: @mainColorBlack45;
        white-space: nowrap;
        flex-wrap: nowrap;
      }
    }
  }
}
</style>