udiwms-vue-frame/src/views/myLogin.vue

<template>
  <div class="login-container">
    <div class="textTitle">
      <!--      <h3 class="toptitle">平潭协和医院</h3>-->
      <h3 class="toptitle">{{ title }}</h3>
      <h3 class="topSubtitle">医院UDI管理系统</h3>
    </div>
    <el-form
      class="card-box login-form"
      autocomplete="on"
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-position="left"
      @submit.native.prevent
    >
      <el-card class="box-card">
        <div style="text-align: center; margin-top: 10px">
          <img alt="element-logo" src="@/assets/logo/logo.png"/>
        </div>
        <h3 class="title">用户登录</h3>
        <el-form-item prop="username" class="item" style="margin-top: -20px">
          <el-input
            placeholder="账号"
            name="username"
            autocomplete="on"
            v-model="loginForm.username"
          >
            <i slot="prefix" class="el-input__icon">
              <icon-svg icon-class="user"/>
            </i>
          </el-input>
        </el-form-item>
        <el-form-item prop="password" class="item">
          <el-input
            placeholder="密码"
            name="password"
            :type="isShowPwd ? 'text' : 'password'"
            @keyup.enter.native="handleLogin"
            v-model="loginForm.password"
            autocomplete="on"
          >
            <i slot="prefix" class="el-input__icon">
              <icon-svg icon-class="pwd"/>
            </i>
            <i
              slot="suffix"
              class="el-input__icon"
              @click="isShowPwd = !isShowPwd"
            >
              <icon-svg icon-class="eye"/>
            </i>
          </el-input>
        </el-form-item>
        <el-form-item
          prop="verificationCode"
          class="item"
          style="background-color: white"
        >
          <Verify
            ref="checkV"
            :showButton="false"
            :barSize="{ width: '305px', height: '37px' }"
            :vOffset="5"
            @success="verifyAlert('success')"
            @error="verifyAlert('error')"
            :type="3"
          ></Verify>
        </el-form-item>
        <div style="text-align: center; margin-top: 15px">
          <el-button
            type="primary"
            style="width: 60%; margin-bottom: 30px"
            :loading="loading"
            @click.native="handleLogin()"
          >登录
          </el-button>
        </div>
      </el-card>
    </el-form>

    <div
      style="
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 12px;
        color: white;
      "
    >
      开发单位：厦门高立新鹏软件科技有限公司 技术支持：13459286066
    </div>
  </div>
</template>

<script>
import Verify from "vue2-verify";
import axios from "axios";
import Cookies from "js-cookie";
import {decrypt, encrypt} from "@/utils/jsencrypt";
import {getCodeImg, getTitleConfig} from "@/api/login";

export default {
  data() {
    let validatePwd = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        userName: "",
        pwd: "",
        checked: true,
        verificationCode: false,
      },
      loginForm: {
        username: "",
        password: "",
        rememberMe: false,
        verificationCode: false,
        code: "",
        uuid: "",
      },
      rules: {
        userName: [
          {required: true, message: "请输入登录名", trigger: "blur"},
        ],
        pwd: [{validator: validatePwd, trigger: "blur"}],
      },
      isShowPwd: false, // 是否显示密码
      loading: false, // 登录loading
      showDialog: false, // 显示dialog
      redirect: null, // 回调地址
      hospName: "",
      title: "福建省XXX医院"
    };
  },
  methods: {
    verifyAlert(text) {
      if (text === "success") {
        this.loginForm.verificationCode = true;
      }
    },
    // handleLogin() {
    //   if (!this.ruleForm.verificationCode) {
    //     this.$message({
    //       message: '请进行验证',
    //       center: true,
    //       type: 'warning'
    //     });
    //     return;
    //   }
    //   this.$refs["ruleForm"].validate((valid) => {
    //     if (valid) {
    //       this.loading = true;
    //       this.$store
    //         .dispatch("loginName", this.ruleForm)
    //         .then((response) => {
    //           this.loading = false;
    //           if (response.code !== 20000) {
    //             console.log("--code = " + response.code);
    //             this.ruleForm.verificationCode = false;
    //             this.$refs.checkV.refresh();
    //             this.$message.error(response.message);
    //             return;
    //           }
    //           let path = "/";
    //           if (this.redirect) {
    //             path = this.redirect;
    //           }
    //           console.log("path = " + path);
    //           this.$router.push({
    //             path: "../main",
    //           });
    //           // window.location.replace(path);
    //           // this.showDialog = true
    //         })
    //         .catch(() => {
    //           this.ruleForm.verificationCode = false;
    //           this.$refs.checkV.refresh();
    //           this.loading = false;
    //         });
    //     } else {
    //       return false;
    //     }
    //   });
    // },

    getCookie() {
      const username = Cookies.get("username");
      const password = Cookies.get("password");
      // const rememberMe = Cookies.get('rememberMe')
      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password:
          password === undefined ? this.loginForm.password : decrypt(password),
        // rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
      };
    },
    handleLogin() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.loginForm.verificationCode) {
            this.loading = true;
            if (this.loginForm.rememberMe) {
              Cookies.set("username", this.loginForm.username, {expires: 30});
              Cookies.set("password", encrypt(this.loginForm.password), {
                expires: 30,
              });
              // Cookies.set('rememberMe', this.loginForm.rememberMe, {expires: 30});
            } else {
              Cookies.remove("username");
              Cookies.remove("password");
              // Cookies.remove('rememberMe');
            }
            this.$store
              .dispatch("Login", this.loginForm)
              .then((res) => {
                this.$router
                  .push({path: this.redirect || "/"})
                  .catch((res) => {
                  });
              })
              .catch((res) => {
                this.loading = false;
                this.$message.error(res);
                if (this.captchaEnabled) {
                  this.getCode();
                }
              });
          } else {
            this.$message({
              message: "请向右滑动完成验证",
              type: "warning",
            });
          }
        }
      });
    },
    getTitleConfig() {
      getTitleConfig().then(res => {
        this.title = res.data.title;
      });
    },
  },
  components: {
    Verify,
  },
  created() {
    // 将参数拷贝进查询对象
    let query = this.$route.query;
    if (query.redirect) {
      // URL Encode
      this.redirect = decodeURIComponent(query.redirect);
    }
    this.getTitleConfig();
    axios.get("./config.json").then((res) => {
      this.hospName = res.data.hosp_name;
    });

    this.getCookie();
  },
};
</script>

<style type="text/scss" lang="scss">
@import "../assets/styles/mixin";

$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;
.login-container {
  @include relative;
  background-color: white;
  background-image: url("../assets/login.jpg");
  background-size: 100vw 100vh;
  height: 100%;
  overflow: hidden;
  display: flex;

  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active {
    -webkit-transition-delay: 99999s;
    -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
  }

  .item {
    width: 20em;
    margin-left: 5em;

    .el-form-item__content {
      display: flex;
      flex-flow: row;
    }
  }

  input {
    background: transparent;
    border: 0;
    -webkit-appearance: none;
    border-radius: 0;
    padding: 0.46rem 0.0666rem 0.16rem 0.2rem;
    color: $dark_gray;
    height: 100%;
  }

  .el-input {
    display: inline-block;
  }

  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 0.13333rem;
  }

  .svg-container {
    padding: 0.08rem 0.0666rem 0.08rem 0.2rem;
    color: $dark_gray;
    vertical-align: middle;
    display: inline-block;

    &_login {
      font-size: 20px;
    }
  }

  .title {
    font-size: 26px;
    color: #2d3a4b;
    margin: 0 auto 0.5333rem auto;
    text-align: center;
    font-weight: bold;
    margin-bottom: 50px;
  }

  .textTitle {
    width: 50%;
    font-size: 45px;
  }

  .toptitle {
    color: #ffffff;
    text-align: center;
    margin-top: 132px;
    margin-bottom: -10px;
  }

  .topSubtitle {
    color: #fcd38b;
    text-align: center;
  }

  .login-form {
    //@include fxied-center;
    margin: 0px 100px auto auto;
    width: 50em;
    /*background-color: silver;*/
    /*background: #fff;*/
    padding: 10em 10em 15em 10em;
  }

  .el-form-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.1);
    border-radius: 0.0666rem;
    color: #454545;
  }

  .show-pwd {
    position: absolute;
    right: 0.1333rem;
    top: 0.09333rem;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
  }

  .thirdparty-button {
    /*position: absolute;*/
    /*right: .4666rem;*/
    /*bottom: .37333rem;*/
  }

  .box-card {
    margin-top: -20px;
    height: 550px;
    width: 490px;
  }
}
</style>