cpdm_manage/src/views/loginNew.vue

<template>
  <div class="login-wrapper-new">
    <div class="login-left-new">
      <div class="cpdm_left">
        <p class="aab">郑州大学大学生心理健康测评系统</p>
        <!-- <img class="logo" src="../assets/img/login/login_logo.png" /> -->
        <img class="ye1" src="../assets/img/login/ye1.png" />
        <img class="ye2" src="../assets/img/login/ye2.png" />
      </div>
      <div class="cpdm_right">
        <el-form
          class="login-left-middle-new"
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          :label-position="'left'"
          label-width="10px"
          size="mini"
        >
          <div class="cpdm_right_top">
            <div class="cpdm_right_top_des">欢迎登录</div>
            <img
              class="cpdm_right_top_img"
              src="../assets/img/login/login-left-top.png"
            />
          </div>
          <el-form-item label="" prop="account" class="account-new">
            <el-input
              class="input-account-new"
              type="text"
              v-model="ruleForm.account"
              placeholder="请输入账号"
              autocomplete="off"
            >
              <template slot="prefix">
                <div class="account-inner">
                  <img
                    style="height: 20px; margin-left: 10px"
                    src="../assets/img/login/persion1.png"
                  />
                  <div class="account-inner-line"></div>
                </div>
              </template>
            </el-input>
            <!-- <img src="../assets/img/login/persion.png" /> -->
          </el-form-item>
          <el-form-item label="" class="account-two-new" prop="pass">
            <el-input
              class="input-password-new"
              type="password"
              placeholder="请输入密码"
              v-model="ruleForm.pass"
              autocomplete="off"
            >
              <template slot="prefix">
                <div class="account-inner">
                  <img
                    style="height: 20px; margin-left: 10px"
                    src="../assets/img/login/password1.png"
                  />
                  <div class="account-inner-line"></div>
                </div>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item class="button-new-parent_login">
            <!-- <el-button class="button-new" type="primary" @click="submitForm('ruleForm')"
              >登&nbsp;录</el-button
            > -->
            <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
            <div class="button-new" @click="submitForm('ruleForm')">登录</div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import md5 from "md5";
import { oSessionStorage } from "@/utils/utils";
// import Footer1 from "@/components/Footer1";
// import Footer from '../components/Footer.vue';

export default {
  // components: { Footer1 },
  name: "loginNew",
  // components:[Footer1],
  data() {
    var validateAccount = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入账号"));
      } else {
        // if (this.ruleForm.account !== '') {
        //   this.$refs.ruleForm.validateField('account');
        // }
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        // if (this.ruleForm.pass !== '') {
        //   this.$refs.ruleForm.validateField('pass');
        // }
        callback();
      }
    };
    var validateType = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入账号"));
      } else {
        // if (this.ruleForm.type !== '') {
        //   this.$refs.ruleForm.validateField('type');
        // }
        callback();
      }
    };
    var validateImgText = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入验证码"));
      } else {
        // if (this.ruleForm.type !== '') {
        //   this.$refs.ruleForm.validateField('type');
        // }
        callback();
      }
    };
    return {
      input1: "",
      imageUrl: "",
      ruleForm: {
        account: "",
        pass: "",
        type: "0",
        imgText: "",
      },
      rules: {
        account: [{ validator: validateAccount, trigger: "blur" }],
        pass: [{ validator: validatePass, trigger: "blur" }],
        type: [{ validator: validateType, trigger: "change" }],
        imgText: [{ validator: validateImgText, trigger: "blur" }],
      },
    };
  },
  mounted() {
    // this.getCode();
  },
  methods: {
    getCode() {
      this.$http.getImg(`/user/getCode`, {}, (res) => {
        let blob = new Blob([res.data], { type: "image/jpeg" });
        this.imageUrl = window.URL.createObjectURL(blob);
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //?userNo=${this.ruleForm.account}&password=${md5(this.ruleForm.pass)}
          this.$http.get(
            `/system/login?userNo=${this.ruleForm.account}&password=${md5(
              this.ruleForm.pass
            )}`,
            //"/v1/system/login",
            {
              // userNo: this.ruleForm.account,
              // password: md5(this.ruleForm.pass),
              // imgText: this.ruleForm.imgText,
              // type: 0,
            },
            (res) => {
              console.log(res, "登录返回");
              if (res && res.code == 200) {
                // type等于3  超级管理员
                // type等于2  普通管理员
                // type等于1  普通用户等不能登录
                oSessionStorage.setItem("userInfo", JSON.stringify(res.data.user));
                oSessionStorage.setItem("token", res.data.token);
                // oSessionStorage.setItem("invitationCode", res.data.user.invitationCode);
                //如果类型返回的是0则为普通用户
                //如果类型返回的是1则为管理员用户
                // this.$router.push({ path: "/manage/adminHome" });
                if (res.data.user.roleType == "5") {
                  this.$router.push({ path: "/manage/generalSituation" });
                  // this.$router.push({ path: "/manage/userManage" });
                } else if (res.data.user.roleType == "4") {
                  // this.$router.push({ path: "/manage/userManage" });
                  this.$router.push({ path: "/manage/generalSituation" });
                } else if (res.data.user.roleType == "3") {
                  this.$router.push({ path: "/manage/generalSituation" });
                } else {
                  this.$message({
                    message: "请使用管理账号登录",
                    type: "error",
                  });
                }

                // if (res.data.user.roleType === "0") {
                //   this.$message.warning("账号密码错误");
                //   // this.$router.push({ path: "/home" });
                //   // this.$router.push({ path: "/manageMain" });
                // } else {
                //   this.$router.push({ path: "/manage/adminHome" });
                // }
              } else if (res && res.code == 2001) {
                //调用刷新的方法
                this.getCode();
                this.$message({
                  message: res.msg,
                  type: "error",
                });
              } else {
                this.$message({
                  message: res.msg,
                  type: "error",
                });
              }
            }
          );
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
<style scoped>
.input-account-new >>> .el-input__inner {
  background-color: #f7f7f7 !important;
  background-image: none;
  border-radius: 30px;
  border: 0px solid #dcdfe6;
  box-sizing: border-box;
  border: 0px;
  box-shadow: none;

  outline: none;
  /*color: #fff;*/
  color: #000;
  display: inline-block;
  height: 45px;
  line-height: 45px;
  outline: 0;
  padding-left: 60px;
  -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
}

.account-new >>> .el-input {
  display: table !important;
}

.input-account-new >>> .el-input__inner::placeholder {
  /*color: #f9f9f9;*/
  color: #9a9a9a;
}

.input-password-new >>> .el-input__inner::placeholder {
  /*color: #f9f9f9;*/
  color: #9a9a9a;
}

.input-password-new >>> .el-input__inner {
  background-color: #f7f7f7 !important;
  background-image: none;
  border-radius: 30px;
  border: 0px solid #dcdfe6;
  box-sizing: border-box;
  /*color: #fff;*/
  color: #000;
  display: inline-block;
  height: 45px;
  line-height: 45px;
  outline: 0;
  padding-left: 60px;
  -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
}

.button-new-parent >>> .el-form-item__content {
}
</style>

<style lang="less" scoped>
@import "../styles/theme.less";

.login-wrapper-new {
  width: 100%;
  overflow: hidden;
  height: 100%;
  background: url("../assets/img/login/login_bg.png") no-repeat left;
  background-size: 100% 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  .login-left-new {
    display: flex;
    // background-color: #0263c4;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 1080px;
    height: 600px;
    box-sizing: border-box;
    border-radius: 40px;

    .cpdm_left {
      position: relative;
      width: 50%;
      height: 100%;
      background: url("../assets/img/login/login_left.png") no-repeat;
      background-size: 100% 100%;

      .logo {
        height: 60px;
        margin-left: 10%;
        margin-top: 5%;

        width: auto;
      }

      .ye1 {
        width: 40px;
        margin-left: -20px;
        position: absolute;
        margin-top: 25%;
      }

      .ye2 {
        position: absolute;
        margin-left: calc(100% - 20px);
        width: 40px;
        margin-top: 40%;
      }
    }

    .cpdm_right {
      background-color: #fff;
      width: 50%;
      height: 100%;
      // border-radius: 40px;
      border-top-right-radius: 40px;
      border-bottom-right-radius: 40px;
    }

    .login-left-top-new {
      margin-left: 10%;
      width: 80%;
      padding-top: 10%;
      padding-bottom: 12%;
    }

    .login-left-middle-new {
      width: 78%;
      margin-left: 11%;

      .cpdm_right_top {
        margin-top: 50px;
        margin-bottom: 60px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        .cpdm_right_top_des {
          letter-spacing: 3px;
          font-size: 30px;
          font-weight: 700;
          margin-left: 10px;
        }

        .cpdm_right_top_img {
          width: 100px;
        }
      }

      .account-new {
        color: #fff;
        margin-bottom: 10%;

        .login-label {
          display: inline-block;
          margin-top: 8px;
          //color: #fff;

          font-size: 16px;
          font-weight: bold;
        }

        .input-account-new {
          background: rgba(255, 255, 255, 0.2);
          border-radius: 30px 30px 30px 30px;
          opacity: 1;
          //border: 1px solid #ffffff;
          // border: 1px solid #0263c4;
          width: 100%;
        }
      }

      .account-two-new {
        color: #fff;

        margin-bottom: 10%;

        .login-label {
          display: inline-block;
          margin-top: 8px;
          //color: #fff;
          color: #0263c4;
          font-size: 16px;
          font-weight: bold;
        }

        .input-password-new {
          background: rgba(255, 255, 255, 0.2);
          border-radius: 30px 30px 30px 30px;
          opacity: 1;
          //border: 1px solid #ffffff;
          // border: 1px solid #0263c4;
          width: 100%;
        }
      }
    }
  }
}

.beian {
  position: fixed;
  left: 50%;
  //  top:50%;
  transform: translate(-50%, -50%);
  bottom: 20px;
  font-size: 15px;
  z-index: 1000;
}

.beianDetail {
  display: flex;
  justify-items: center;
  align-items: center;
}

.login-title-p {
  text-align: center;
  font-size: 20px;
  margin-bottom: 40px;
}

.code-class {
  height: 100%;
  border-radius: 20px;
}

.account-inner {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 50px;
}

.account-inner-line {
  width: 1px;
  background-color: #b5c8ff;
  height: 30px;
  margin-left: 10px;
}

.button-new-parent_login {
  margin-top: 80px;
  display: flex;
  justify-content: center;

  .button-new {
    text-align: center;
    border-radius: 50px;
    border: 3px solid #48d68e;
    color: #ffffff;
    background-color: #000000;
    // margin-right: 20px;
    padding: 10px 90px;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 24px;
  }
}
.aab {
  color: #48d68e;
  margin-left: 20px;
  margin-top: 40px;
  font-weight: 700;
  font-size: 24px;
  -webkit-transform: skew(-10deg);
  letter-spacing: 2px;
  /* for Chrome||Safari */
  -ms-transform: skew(-10deg);
  /* for IE */
  -moz-transform: skew(-10deg);
  /* for Firefox */
  -o-transform: skew(-10deg);
  /* for Opera */
}
</style>