teachcloud-print-web/src/modules/login/views/Login.vue

<template>
  <div class="login login-box">
    <div class="login-body" @keyup.enter="submit('loginForm')">
      <div class="login-title">
        <img v-if="schoolLogo" :src="schoolLogo" alt="学校logo" />
        <h1 v-else>分布式印刷</h1>
      </div>
      <div class="login-form">
        <el-form ref="loginForm" :model="loginModel" :rules="loginRules">
          <el-form-item prop="loginName">
            <el-input
              v-model.trim="loginModel.loginName"
              placeholder="请输入账号"
              clearable
            >
              <i class="icon icon-user" slot="prefix"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              v-model.trim="loginModel.password"
              placeholder="请输入密码"
              clearable
            >
              <i class="icon icon-lock" slot="prefix"></i
            ></el-input>
          </el-form-item>
          <el-form-item prop="code" v-if="smsCodeRequired">
            <div class="vlcode">
              <div class="vlcode-right">
                <el-button
                  style="width:100%;"
                  :type="isFetchingCode ? 'default' : 'primary'"
                  @click="fetchSmsCode"
                  :disabled="isFetchingCode"
                  >{{ codeContent }}</el-button
                >
              </div>
              <div class="vlcode-left">
                <el-input
                  v-model.trim="loginModel.code"
                  placeholder="请输入手机验证码"
                  clearable
                ></el-input>
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="schoolCode"></el-form-item>
          <el-form-item>
            <el-button
              style="width:100%;"
              type="primary"
              :disabled="isSubmit"
              @click="submit('loginForm')"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="login-shadow-top"></div>
    <div class="login-shadow-bottom"></div>

    <!-- 修改密码 -->
    <reset-pwd :user-password="loginModel.password" ref="ResetPwd"></reset-pwd>
  </div>
</template>

<script>
import { password, smscode } from "@/plugins/formRules";
import {
  login,
  getSmsCode,
  getSchoolInfo,
  getSysConfig,
  getSysTime
} from "../api";
import { Base64 } from "@/plugins/crypto";
import ResetPwd from "@/modules/base/components/ResetPwd";
import { ORG_CODE } from "@/constants/app";
import { initSyncTime } from "@/plugins/syncServerTime";

const wstorage = {
  set(key, value, expire = null) {
    window.localStorage.setItem(key, JSON.stringify({ value, expire }));
  },
  get(key, defaultVal = null) {
    const lsvalue = JSON.parse(window.localStorage.getItem(key));
    return lsvalue && (!lsvalue.expire || lsvalue.expire > new Date().getTime())
      ? lsvalue.value
      : defaultVal;
  },
  remove(key) {
    window.localStorage.removeItem(key);
  }
};

const codeWaitingTime = 60;
const nameWaitTime = "login";

export default {
  name: "login",
  components: { ResetPwd },
  data() {
    return {
      nameWaitTime,
      smsCodeRequired: false,
      loginModel: {
        schoolCode: ORG_CODE,
        loginName: "",
        code: "",
        password: ""
      },
      loginRules: {
        code: smscode,
        password,
        loginName: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "change"
          }
        ],
        schoolCode: [
          {
            required: true,
            message: "学校编码缺失",
            trigger: "change"
          }
        ]
      },
      roles: [],
      isSubmit: false,
      schoolLogo: "",
      // code
      isFetchingCode: false,
      codeContent: "获取验证码",
      codeWaitingTime,
      time: codeWaitingTime
    };
  },
  mounted() {
    this.$ls.clear();
    this.setWaitingTime();
    this.getSchool();
    this.getSmsCodeRequired();
    this.syncServerTime();
  },
  methods: {
    async syncServerTime() {
      const time = await getSysTime();
      initSyncTime(time);
    },
    async getSmsCodeRequired() {
      const data = await getSysConfig("sys.code.enable");
      this.smsCodeRequired = data.configValue === "true";
    },
    async getSchool() {
      const data = await getSchoolInfo(ORG_CODE);
      this.$ls.set("schoolLogo", data.logo);
      this.$ls.set("schoolName", data.name);
      this.schoolLogo = data.logo;
    },
    async submit(name) {
      const valid = await this.$refs[name].validate().catch(() => {});
      if (!valid) return;

      if (this.isSubmit) return;
      this.isSubmit = true;
      const data = await login({
        loginName: this.loginModel.loginName,
        password: Base64(this.loginModel.password),
        code: this.smsCodeRequired ? this.loginModel.code : null,
        schoolCode: this.loginModel.schoolCode
      }).catch(() => {});
      this.isSubmit = false;
      if (!data) return;

      if (data.orgInfo)
        this.$ls.set("orgId", data.orgInfo.id, this.GLOBAL.authTimeout);
      if (data.schoolInfo)
        this.$ls.set("schoolId", data.schoolInfo.id, this.GLOBAL.authTimeout);
      this.$ls.set("user", data, this.GLOBAL.authTimeout);

      // 强制修改密码
      // if (!data.user.pwdUpdateTime) {
      //   this.$refs.ResetPwd.open();
      //   return;
      // }

      this.$ls.set("token", data.accessToken, this.GLOBAL.authTimeout);
      this.$store.commit("setUser", data);

      if (data.roleList.includes("ADMIN")) {
        this.$router.push({
          name: "SelectSchool"
        });
      } else {
        this.$router.push({
          name: "Home"
        });
      }
    },
    // code valid
    setWaitingTime() {
      let codetime = wstorage.get(this.nameWaitTime);
      if (codetime) {
        let num = Math.floor((codetime.expire - new Date().getTime()) / 1000);
        if (num > 0) {
          this.time = num;
          this.isFetchingCode = true;
          this.changeContent();
        }
      }
    },
    checkField(field) {
      return new Promise((resolve, reject) => {
        this.$refs.loginForm.validateField(field, unvalid => {
          if (unvalid) {
            reject();
          } else {
            resolve();
          }
        });
      });
    },
    async fetchSmsCode() {
      const validAll = [
        this.checkField("loginName"),
        this.checkField("password"),
        this.checkField("schoolCode")
      ];

      let result = true;
      await Promise.all(validAll).catch(() => {
        result = false;
      });

      if (!result) return;

      this.isFetchingCode = true;
      const data = await getSmsCode({
        loginName: this.loginModel.loginName,
        schoolCode: this.loginModel.schoolCode,
        password: Base64(this.loginModel.password)
      }).catch(() => {
        this.isFetchingCode = false;
      });
      if (!data) return;
      this.$message.success(
        `已向手机号【${data}】成功发送短信，请在2分钟内进行验证！`
      );
      this.changeContent();
    },
    changeContent() {
      if (!this.isFetchingCode) return;
      this.codeContent = "倒计时" + this.time + "s";
      const circleTime = time => {
        let t = setInterval(() => {
          if (time > 1) {
            time--;
            let expire = new Date().getTime() + time * 1000;
            wstorage.set(
              this.nameWaitTime,
              {
                time,
                expire
              },
              expire
            );
            this.codeContent = "倒计时" + time + "s";
          } else {
            this.time = this.codeWaitingTime;
            wstorage.remove(this.nameWaitTime);
            this.codeContent = "获取验证码";
            this.isFetchingCode = false;
            clearInterval(t);
          }
        }, 1e3);
      };
      circleTime(this.time);
    }
  }
};
</script>