mzBigScreen/src/pages/login.vue

<template>
  <div class="bg">
    <!-- <div class="content">
      <img
        src="../assets/login/logo_new.png"
        style="position: relative;
                left: 50%;transform: translate(-50%);"
      />
      <p style="color: #666;font-size: 16px;  margin-bottom: 20px;">请用管理员账号密码登录</p>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
        <el-form-item prop="loginName">
          <el-input placeholder="请输入账号" clearable v-model="ruleForm.loginName"></el-input>
        </el-form-item>
        <el-form-item prop="loginPwd">
          <el-input placeholder="请输入密码" show-password clearable v-model="ruleForm.loginPwd"></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" style="width:100%;" @click="login">登录</el-button>
    </div>-->
    <div class="login_main">
      <div class="login_main_left"></div>
      <div class="login_main_right">
        <div class="login_box">
          <div class="login_box_top">系 统 登 录</div>
          <div class="login_box_main">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
              <el-form-item prop="loginName">
                <el-input placeholder="账号" clearable v-model="ruleForm.loginName"></el-input>
              </el-form-item>
              <el-form-item prop="loginPwd">
                <el-input placeholder="密码" show-password clearable v-model="ruleForm.loginPwd"></el-input>
              </el-form-item>
            </el-form>
            <el-button
              type="primary"
              style="width:100%;margin-top: 10%"
              @click="login"
              :loading="logining"
            >登录</el-button>
          </div>
          <div class="login_box_foot">
            技术支持：
            <span style="margin-right: 3%;color: #409EFF">盛创科技</span>联系电话：
            <span style="color: #409EFF">17004319000</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { userLogin } from "../api";
import storageUtil from "../util/storageUtil";
export default {
  data() {
    return {
      ruleForm: {
        loginName: "",
        loginPwd: ""
      }, //表单数据
      rules: {
        loginName: [
          { required: true, message: "请输入账号", trigger: "change" }
        ],
        loginPwd: [{ required: true, message: "请输入密码", trigger: "change" }]
      }
    };
  },
  methods: {
    login() {
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          this.loginSussess();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async loginSussess() {
      const result = await userLogin(
        {
          loginName: this.ruleForm.loginName,
          pwd: this.$md5(this.ruleForm.loginPwd)
        },
        `POST`
      );
      if (result.code == 0) {
        storageUtil.save("userInfo", result.data);
        storageUtil.save("name", this.ruleForm.loginName);
        storageUtil.save("pwd", this.$md5(this.ruleForm.loginPwd));
        console.log(storageUtil.read("userInfo"), "我存了吗");
        console.log(storageUtil.read("name"), "我存了吗");
        console.log(storageUtil.read("pwd"));
        this.$router.push("/home/home");
      } else {
        this.$message.error("登录失败，请核对账号和密码");
      }
      //this.$router.push('/home/home')
      // this.logining = true;
      // let result = await userLogin({
      //   loginName: this.formData.loginName,
      //   loginPwd: this.$md5(this.formData.loginPwd)
      // });
      // this.logining = false;
      // if (result.code == 0) {
      //   this.storageUtil.save("sessionId", result.data);
      //   this.$router.replace("/home");
      //   if (this.formData.loginPwd === this.$dict.defaultPassword) {
      //     const h = this.$createElement;
      //     this.$notify({
      //       title: '提示',
      //       message: h('b',
      //         '当前密码为初始密码,为了信息采集的安全，请尽快修改密码!'),
      //       type: 'warning',
      //       position: 'bottom-right',
      //       duration: 0
      //     });
      //   }
      // }
    },
    GetQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var r = window.atob(window.location.search.substr(1)).match(reg); //search,查询？后面的参数，并匹配正则
      console.log(r);
      if (r != null) return unescape(r[2]);
      return null;
    }
  },
  mounted() {
    console.log(this.GetQueryString("name"), "我是带过来的账号");
    console.log(this.GetQueryString("password"), "我是带过来的密码");
    var name = this.GetQueryString("name");
    var password = this.GetQueryString("password");
    if (name != null && password != null) {
      this.ruleForm = {
        loginName: name,
        loginPwd: password
      };
      this.loginSussess();
    }
  }
};
</script>

<style scoped>
.bg {
  height: 100vh;
  background: url("../../src/assets/login/login_bg.png") no-repeat;
  background-size: 100% 100%;
}
.login_main {
  position: absolute;
  width: 58.4375vw;
  height: 31.0416vw;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  background: #ffffff;
  box-shadow: 0 3px 25px 2px rgba(41, 125, 236, 0.2);
}
.login_main_left {
  flex: 4;
  background: url("../../src/assets/login/old.png") no-repeat;
  background-size: 100% 100%;
}
.login_main_right {
  flex: 6;
  position: relative;
}
.login_box {
  width: 65%;
  height: 80%;
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  text-align: center;
}
.login_box_top {
  flex: 2;
  font-size: 1.875vw;
  font-weight: bold;
  color: #484848;
}
.login_box_main {
  flex: 7;
}
.login_box_foot {
  flex: 1;
  font-size: 0.8333vw;
  font-weight: 400;
  color: #484848;
}
.el-form-item >>> .el-input__inner {
  height: 2.76vw;
  line-height: 2.76vw;
  background: #f1f8fd;
  border-radius: 1.354vw;
  font-size: 1.0416vw;
}
.el-button--primary {
  height: 3.333vw;
  background: #5f9bff;
  border-radius: 1.666vw;
  font-size: 1.302vw;
  font-weight: 400;
  color: #ffffff;
}
</style>