EvenManage/src/components/login.vue

<template>
  <div class="login_content">
    <div class="login_box" v-show="islogin">
      <div style="padding: 0px 20px">
        <div class="login_title">
          <span>广东省案例征集</span>
        </div>
        <el-form
          label-position="right"
          label-width="80px"
          style="margin-top: 30px"
        >
          <el-form-item label="账号">
            <el-input
              v-model="phoneNum"
              auto-complete="off"
              placeholder="请输入账号"
              style="width: 100%"
              @keyup.enter.native="findPhone"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input
              v-model="password"
              auto-complete="off"
              placeholder="请输入密码"
              type="password"
              style="width: 100%"
              @keyup.enter.native="findPhone"
            ></el-input>
          </el-form-item>
        </el-form>
        <div style="display: flex; justify-content: flex-end">
          <el-button type="text" @click="noRegister">立即注册</el-button>
          <!-- @click="goTo('/register')" -->
        </div>
        <div class="login_button">
          <button @click="findPhone()">登录</button>
        </div>
      </div>
    </div>
    <div class="login_box" v-show="!islogin">
      <div style="padding: 0px 20px">
        <div class="login_title">
          <span>PBL项目平台注册</span>
        </div>
        <!-- <div class="userLogin">
          <img src="../assets/username.png" />
          <el-input v-model="phoneNum" placeholder="手机号码"></el-input>
        </div>
        <div class="userLogin">
          <img src="../assets/password.png" />
          <el-input v-model="password" placeholder="密码" type="password"></el-input>
        </div> -->
        <el-form
          label-position="right"
          label-width="80px"
          style="margin-top: 30px"
          :rules="rules2"
          ref="ruleForm2"
          :model="registerForm"
        >
          <el-form-item label="手机号码" prop="phone">
            <el-input
              v-model="registerForm.rphoneNum"
              auto-complete="off"
              placeholder="请输入手机号码"
              style="width: 100%"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="pass">
            <el-input
              v-model="registerForm.rpassword"
              auto-complete="off"
              placeholder="请输入密码"
              type="password"
              style="width: 100%"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input
              v-model="registerForm.repassword"
              auto-complete="off"
              placeholder="请再输入一遍密码"
              type="password"
              style="width: 100%"
            ></el-input>
          </el-form-item>
          <el-form-item label="学校" prop="school">
            <el-select v-model="registerForm.school" placeholder="请选择学校">
              <el-option
                v-for="(item, index) in schoolArray"
                :key="index"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div style="display: flex; justify-content: flex-end">
          <el-button type="text" @click="islogin = true">返回登录</el-button>
        </div>
        <div class="login_button">
          <button @click="register()">注册</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      var _this = this;
      if (_this.registerForm.rpassword === "") {
        callback(new Error("请输入密码"));
      } else {
        if (_this.registerForm.rpassword.length < 6) {
          callback(new Error("输入的密码需不少于6位"));
        } else if (_this.registerForm.repassword !== "") {
          _this.$refs.ruleForm2.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      var _this = this;
      if (_this.registerForm.repassword === "") {
        callback(new Error("请再次输入密码"));
      } else if (
        _this.registerForm.repassword !== _this.registerForm.rpassword
      ) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    // 验证手机
    var checkPhone = (rule, value, callback) => {
      var _this = this;
      let reg = /^1\d{10}$/;
      if (_this.registerForm.rphoneNum === "") {
        callback(new Error("请输入手机号码"));
      } else {
        if (!reg.test(_this.registerForm.rphoneNum)) {
          callback(new Error("请输入11位手机号"));
        } else {
          let params = { un: _this.registerForm.rphoneNum };
          this.ajax
            .get(this.$store.state.api + "findPhone", params)
            .then((res) => {
              if (res.data[0].length > 0) {
                callback(new Error("此手机号已注册"));
              } else {
                callback();
              }
              console.log(res.data[0]);
            })
            .catch((err) => {
              callback();
              console.error(err);
            });
        }
      }
    };
    return {
      islogin: true,
      phoneNum: "",
      password: "",
      sqlPassword: "",
      registerForm: {
        rphoneNum: "",
        rpassword: "",
        repassword: "",
        school: "",
      },
      schoolArray: [],
      now: "",
      rules2: {
        phone: [
          {
            required: true,
            type: "number",
            validator: checkPhone,
            trigger: ["blur", "change"],
          },
        ],
        pass: [{ required: true, validator: validatePass, trigger: "blur" }],
        checkPass: [
          { required: true, validator: validatePass2, trigger: "blur" },
        ],
        school: [
          { required: true, message: "请选择活动区域", trigger: "blur" },
        ],
      },
      userInfo: [],
    };
  },
  created() {
    // this.getOrg();
    this.getSchool();
  },
  methods: {
    time() {
      if (!this.now) {
        this.now = new Date().getTime();
        return true;
      } else {
        let time = new Date().getTime();
        if (time - this.now > 3000) {
          this.now = time;
          return true;
        } else {
          return false;
        }
      }
    },
    register() {
      this.$refs.ruleForm2.validate((valid) => {
        if (valid) {
          if (this.time()) {
            let params = [
              {
                username: this.registerForm.rphoneNum,
                userpassword: this.registerForm.repassword,
                oid: this.registerForm.school,
              },
            ];
            this.ajax
              .post(this.$store.state.api + "register", params)
              .then((res) => {
                this.$message({
                  message: "注册成功",
                  type: "success",
                });
                this.registerForm = {
                  rphoneNum: "",
                  rpassword: "",
                  repassword: "",
                  school: "",
                };
                this.islogin = true;
              })
              .catch((err) => {
                this.$message.error("注册失败");
                console.error(err);
              });
          }
        } else {
          return false;
        }
      });
    },
    goTo(path) {
      this.$router.push(path);
    },
    findPhone() {
      let params = { un: this.phoneNum };
      this.ajax
        .get(this.$store.state.api + "findUsername", params)
        .then((res) => {
          if (res.data[0].length > 0) {
            // if (res.data[0][0].type == 0) {
            //   this.$message.error("此账号已被屏蔽登录,请咨询管理员");
            //   return;
            // }
            this.isU = res.data[0][0].type;
            this.login();
          } else {
            this.$message.error("此账号不存在");
            return;
            this.isU = false;
          }
          console.log(res.data[0][0]);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    login() {
      if (this.time()) {
        var _this = this;
        let isU = _this.isU;
        let params = [
          {
            uname: this.phoneNum,
            password: this.password,
            // sqlpassword: this.sqlPassword,
          },
        ];
        _this.ajax
          .post(_this.$store.state.api + "loginRace", params)
          .then((res) => {
            if (res.data.status == "1") {
              _this.$message({
                message: "登录成功",
                type: "success",
              });

              _this.userInfo = res.data[0][0];
              _this.$cookies.set("tlogin", "1", -1);

              _this.$cookies.set("tuserid", _this.userInfo.userid, -1);
              _this.$cookies.set("teacherInfo", _this.userInfo, -1);
              // window.sessionStorage.setItem("login", true);
              // window.sessionStorage.setItem("userInfo", JSON.stringify(this.userInfo));
              _this.$store.commit("update", ["isLogin", true]);
              _this.$store.commit("update", ["userInfo", _this.userInfo]);
              if (isU == 1) {
                this.$router.push("/eventCenter?steps=" + "1");
              } else if (isU == 2 || isU == 4) {
                //市级账号 munAdmin
                this.$router.push("/anliList");
              } else if (isU == 5 || isU == 6) {
                //区县账号 disAdmin
                this.$router.push("/anliList1");
              } else if (isU == 3) {
                //省级账号 proAdmin
                this.$router.push("/anliList2");
              } else if (isU == 0) {
                //admin账号
                this.$router.push("/eventCenter?steps=" + "1");
              }
              // console.log(_this.$store.state);
            } else {
              this.$message.error("密码错误");
            }
            console.log(res.data);
          })
          .catch((err) => {
            this.$message.error("登录失败");
            console.error(err);
          });
      }

      //   sessionStorage.removeItem("key");
    },
    //查询学校
    // getOrg() {
    //   this.ajax
    //     .get(this.$store.state.api + "getAllOrg", "")
    //     .then((res) => {
    //       this.schoolArray = res.data[0];
    //       console.log(res.data[0]);
    //     })
    //     .catch((err) => {
    //       console.error(err);
    //     });
    // },
    getSchool() {
      this.ajax
        .get(this.$store.state.api + "selectOrg", "")
        .then((res) => {
          this.schoolArray = res.data[0];
        })
        .catch((err) => {
          console.error(err);
        });
    },
    noRegister() {
      this.$message({
        message: "暂未开放注册，提交资料请与各地区负责人联系。",
        type: "warning",
      });
    },
  },
};
</script>

<style scoped>
.login_content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  /* position: absolute; */
  width: 100%;
}
.login_box {
  width: 23%;
  min-width: 400px;
  margin: 0 auto;
  background: #fff;
  padding: 20px;
  box-shadow: 0 0 20px #eee;
}

/* .userLogin img {
	  width: 50%;
	  display: inline-block;
	  width: 18px;
	  padding-right: 5px;
	  border-right: 1px solid #2a97ff;
	  position: absolute;
	  top: 8px;
	  left: 10px;
	  z-index: 999;
	} */

/* .el-input >>> input {
	  width: 100%;
	  padding: 15px 0 15px 40px;
	  outline: none;
	  border: 1px solid #ccc;
	  font-size: 14px;
	} */
/* .userLogin {
	  margin-top: 25px;
	  position: relative;
	} */
.login_button {
  margin-top: 10px;
}
.login_button button {
  width: 100%;
  color: #fff;
  background: #2a97ff;
  padding: 10px;
  border-radius: 10px;
  border: none;
  font-size: 18px;
  text-align: center;
  outline: none;
  cursor: pointer;
}
.login_title {
  text-align: center;
  font-size: 26px;
  font-weight: 600;
}
</style>