diagnosis.admin/src/views/Home.vue

<template>
  <div class="home">
    <div class="top"></div>
    <div class="flex-center flex-column login-body">
      <h2>中医智能辅助诊疗系统</h2>
      <div class="login-form" v-if="!useToken">
        <!-- <div class="flex-center">
          <img src="../assets/logo.png" alt="" class="logo" />
        </div>-->
        <div class="input-body flex-vertical-center-l">
          <img src="../assets/log-user.png" />
          <input type="text" placeholder="请输入用户名" v-model="name" @keydown.enter="login" />
        </div>
        <div class="input-body flex-vertical-center-l">
          <img src="../assets/log-pas.png" />
          <input type="password" placeholder="请输入密码" v-model="pas" @keydown.enter="login" />
        </div>
        <div class="flex-vertical-center-l">
          <div class="input-body flex-vertical-center-l">
            <!-- <img src='../assets/log-code.png' /> -->
            <input type="text" placeholder="请输入验证码" v-model="code" @keydown.enter="login" />
          </div>
          <img :src="src" alt class="code" @click="changeImg()" />
        </div>

        <div class="login-btn flex-center" @click="login()">登录</div>
        <div>
          <el-checkbox v-model="checked">记住我</el-checkbox>
        </div>
      </div>
      <div v-else-if="useTokenError" style="max-width: 50vw;background-color: rgba(255,255,255,0.4);">
        <el-result icon="error" title="登录错误" :subTitle="useTokenError"></el-result>
      </div>
    </div>

    <div class="bottom">
      <!-- <span>杭州寻脉科技有限公司</span> -->
      <!-- <a href="https://beian.miit.gov.cn/#/Integrated/index">网站备案号 浙icp备2021018580号-1</a> -->
    </div>
  </div>
</template>

<script>
import {login, getCode, getCodeimg, loginBySSO} from '@/api/user.js';

function getURLSearchParams(value) {
  value ??= `${ location.search }&${ location.hash.split('?')[ 1 ] || '' }`;
  return new URLSearchParams(value);
}

export default {
  name: "Home",
  components: {},
  data() {
    return {
      name: "",
      pas: "",
      code: "",
      useToken: true,
      useTokenError: '',
      checked: false,
      src: process.env.VUE_APP_BASE_API + "captchaImage"
    };
  },
  created() {
    const sso = getURLSearchParams()
    const keys = ['accessToken', 'token'];
    this.useToken = keys.find(key => sso.has(key));
    if (this.useToken) {
      localStorage.setItem("sso-token", keys.find(key => sso.get(key)));
      this.loginBySSO(sso.toString())
      return;
    }
    localStorage.removeItem("sso-token");
    // this.getCodeimg()
    this.changeImg();
    setTimeout(() => {
      sessionStorage.setItem("isAllow", "true");
    }, 1000);
  },

  methods: {
    async getCodeimg() {
      let res = await getCodeimg();
      let time = new Date().getTime();
      this.src = process.env.VUE_APP_BASE_API + "captchaImage?time=" + time;
    },
    async login() {
      localStorage.removeItem("token");
      if (this.name == "") {
        this.$message.warning("请输入用户名");
        return;
      }
      if (this.pas == "") {
        this.$message.warning("请输入密码");
        return;
      }
      if (this.code == "") {
        this.$message.warning("请输入验证码");
        return;
      }
      const loading = this.$loading({
        lock: true,
        text: "正在登录",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });

      let params = {
        password: this.pas,
        username: this.name,
        vercode: this.code
      };

      let res = await login(params).catch(err => {
        loading.close();
        this.changeImg();
      });
      if (res.ResultCode == 0) {
        loading.close();

        this.$message.success("登陆成功");

        localStorage.setItem("token", res.Data.token);

        setTimeout(() => {
          this.$router.push({
            path: "/index/todaypatients"
          });
        }, 1500);
      }
    },
    async loginBySSO(value) {
      this.useTokenError = '';
      let loading;
      const timer = setTimeout(() => {
        loading = this.$loading({
          lock: true,
          text: '正在登录',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)',
        });
      }, 2000);
      try {
        const token = await loginBySSO(value);
        localStorage.setItem('token', token);
        this.$nextTick(() => {
          this.$router.push({path: '/index/todaypatients'});
        });
      } catch (e) {
        this.useTokenError = e.message;
      }
      clearTimeout(timer);
      if (loading) loading.close();
    },

    // 修改验证码
    changeImg() {
      // let time = new Date().getTime()
      // this.src = this.src + '?time=' + time
      this.getCodeimg();
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../style/common.scss";

.home {
  width: 100%;
  height: 100%;
  background: #fff;
  background: url("../assets/log-bg.png") no-repeat;
  background-size: 100% 100%;
  background-position: center;

  .top {
    width: 100%;
    height: 50%;
    // background: url('../assets/login-bg.png') no-repeat;
    background-position: center;
    background-size: 100% 100%;
  }

  .login-body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    // background: red;
    h2 {
      font-size: 58px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #ffffff;
      margin-bottom: 83px;
    }

    .logo {
      width: 92px;
      margin: 0 auto 20px;
    }

    .login-btn {
      height: 56px;
      // background: #9f643a;
      background: #9F643A;
      opacity: 0.91;
      border-radius: 8px;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #ffffff;
      cursor: pointer;
      margin-bottom: 20px;
    }

    .login-form {
      width: 509px;
      // height: 377px;
      box-sizing: border-box;
      padding: 23px 47px 23px;
      // background: rgba($color: #fff, $alpha: 0.35);
      background: #fff;
      box-shadow: 0px 3px 8px 0px rgba(30, 72, 111, 0.35);
      // opacity: 0.35;
      border-radius: 10px;

      .code {
        width: 170px;
        height: 44px;
        border-radius: 8px;
        margin-left: 20px;
        margin-bottom: 20px;
      }

      .input-body {
        box-sizing: border-box;
        flex: 1;
        padding: 14px 27px;
        background: #ffffff;

        border: 1px solid #e5e5e5;
        // box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
        border-radius: 8px;
        margin-bottom: 20px;

        img {
          width: 14px;
        }

        input {
          flex: 1;
          border: 0;
          outline: none;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;

          line-height: 20px;
          margin-left: 20px;
        }
      }
    }
  }
}

.bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 42px;
  text-align: center;

  font-size: 20px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #ffffff;

  a {
    color: #fff;
    text-decoration: none;
    margin-left: 30px;
  }
}
</style>