diagnosis.admin/src/views/Home.vue

<template>
  <div class="home">
    <div class="top"></div>
    <div class="flex-center flex-column login-body">
      <h2>{{title}}</h2>
      <div class="login-form">
        <!-- <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>

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

<script>
import { mapActions } from 'vuex';
import { login, getCode, getCodeimg, loginAndUserinfo} from '@/api/user.js';
import { setTimeout } from "timers";
export default {
  name: "Home",
  components: {},
  data() {
    return {
      title: window.SIX_config.title,
      name: "",
      pas: "",
      code: "",

      checked: false,
      src: process.env.VUE_APP_BASE_API + "/captchaImage"
    };
  },
  created() {
    // 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
      };

      try {
        await this.setInfo({});
        const { token, userInfo, defaultHomePage } = await loginAndUserinfo(params);
        await this.setInfo(userInfo);
        await this.$router.push({ path: defaultHomePage });
        this.$message.success("登录成功");
      } catch (e) {
        this.changeImg();
      }
      loading.close();
    },

    // 修改验证码
    changeImg() {
      // let time = new Date().getTime()
      // this.src = this.src + '?time=' + time
      this.getCodeimg();
    },
    ...mapActions({
      setInfo: "user/setUserinfoAndPermissions"
    }),
  }
};
</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: #5386F6;
      background: #5386f6;
      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>