saas_pc/src/pages/login/index.vue

<template>
  <div class="reg">
    <header class="header">
      <div class="container">
        <div @click="go('/')" class="hasLogo" v-if="header.companyLogo">
          <img
            style="margin: 24px 0; width: 162px; height: 33px"
            :src="$tools.splitImgHost(header.companyLogo)"
            alt=""
          />
        </div>

        <div @click="go('/')" v-else class="logo"></div>
      </div>
    </header>
    <section class="section">
      <div class="container">
        <div class="container-in">
          <div class="left-box"></div>
          <div class="right-box">
            <div class="login" v-if="state == 1">
              <div class="login__header">
                <div class="tabs">
                  <div
                    class="tab"
                    :class="{ active: tabIndex == 0 }"
                    @click="tabIndex = 0"
                  >
                    普通登录
                  </div>
                  <div
                    class="tab"
                    :class="{ active: tabIndex == 1 }"
                    @click="tabIndex = 1"
                  >
                    手机快速登录
                  </div>
                </div>
              </div>
              <div class="login__body">
                <div class="normal" v-if="tabIndex == 0">
                  <el-form
                    ref="loginForm"
                    :rules="loginRules"
                    :model="loginForm"
                  >
                    <div class="input">
                      <el-form-item prop="account">
                        <el-input
                          autocomplete="off"
                          placeholder="手机号/身份证号"
                          v-model="loginForm.account"
                        ></el-input>
                      </el-form-item>
                    </div>
                    <div class="input">
                      <el-form-item prop="pwd"
                        ><el-input
                          autocomplete="off"
                          placeholder="密码"
                          :type="loginPwdShow ? 'text' : 'password'"
                          v-model="loginForm.pwd"
                        >
                          <i
                            @click="loginPwdShow = !loginPwdShow"
                            slot="suffix"
                            :class="{ btn: loginPwdShow ? true : false }"
                            class="el-icon-view"
                          ></i> </el-input
                      ></el-form-item>
                    </div>
                    <div class="text">
                      <a @click="state = 2">立即注册</a>
                      <a @click="state = 3">找回密码</a>
                    </div>
                    <el-button
                      class="submit"
                      @click="login"
                      type="primary"
                      round
                      :loading="islogin"
                      >登录</el-button
                    >
                  </el-form>
                </div>
                <div class="phone" v-if="tabIndex == 1">
                  <el-form
                    ref="loginSmsForm"
                    :rules="loginSmsRules"
                    :model="loginSmsForm"
                  >
                    <div class="input">
                      <el-form-item prop="tel"
                        ><el-input
                          autocomplete="off"
                          placeholder="手机号"
                          v-model="loginSmsForm.tel"
                        ></el-input
                      ></el-form-item>
                    </div>
                    <div class="input">
                      <el-form-item prop="code"
                        ><el-input
                          autocomplete="off"
                          placeholder="短信验证码"
                          v-model="loginSmsForm.code"
                        >
                          <span
                            slot="suffix"
                            @click="getLoginSms"
                            class="btn"
                            >{{
                              countDown == 0
                                ? "获取验证码"
                                : `${countDown}秒重新获取`
                            }}</span
                          >
                        </el-input></el-form-item
                      >
                    </div>
                    <div class="text">
                      <a @click="state = 2">立即注册</a>
                      <a @click="state = 3">找回密码</a>
                    </div>
                    <el-button
                      class="submit"
                      @click="loginSms"
                      :loading="isloginSms"
                      type="primary"
                      round
                      >登录</el-button
                    >
                  </el-form>
                </div>
              </div>
            </div>

            <div class="register" v-if="state == 2">
              <el-form
                :model="registerForm"
                ref="registerForm"
                :rules="registerRules"
              >
                <div class="register__header">
                  <div class="title">账号注册</div>
                </div>
                <div class="register__body">
                  <div class="input">
                    <el-form-item prop="tel"
                      ><el-input
                        autocomplete="off"
                        placeholder="手机号"
                        v-model="registerForm.tel"
                      ></el-input
                    ></el-form-item>
                  </div>
                  <div class="input">
                    <el-form-item prop="code">
                      <el-input
                        autocomplete="off"
                        placeholder="获取验证码"
                        v-model="registerForm.code"
                      >
                        <span class="btn" slot="suffix" @click="getRegisterSms">
                          {{
                            registerCountDown == 0
                              ? "获取验证码"
                              : `${registerCountDown}秒重新获取`
                          }}
                        </span>
                      </el-input>
                    </el-form-item>
                  </div>
                  <div class="input">
                    <el-form-item prop="pwd"
                      ><el-input
                        autocomplete="off"
                        placeholder="密码"
                        :type="registerPwdShow ? 'text' : 'password'"
                        v-model="registerForm.pwd"
                      >
                        <i
                          class="el-icon-view"
                          @click="registerPwdShow = !registerPwdShow"
                          slot="suffix"
                          :class="{ btn: registerPwdShow ? true : false }"
                        ></i> </el-input
                    ></el-form-item>
                  </div>
                  <div class="text">
                    已有账号？
                    <a @click="state = 1">去登录</a>
                  </div>
                  <div class="checkbox">
                    <el-form-item prop="read">
                      <div>
                        <input type="checkbox" v-model="registerForm.read" />
                        我已认真阅读并同意
                      </div>

                      <div>
                        <a>《用户使用协议》</a>
                        及
                        <a>《个人信息保护政策》</a>
                      </div>
                    </el-form-item>
                  </div>
                  <el-button
                    class="submit"
                    @click="register"
                    type="primary"
                    round
                    :loading="isRegister"
                    >注册</el-button
                  >
                </div>
              </el-form>
            </div>

            <div class="findpwd" v-if="state == 3">
              <el-form
                :model="forgetForm"
                :rules="forgetRules"
                ref="forgetForm"
              >
                <div class="findpwd__header">
                  <div class="title">找回密码</div>
                </div>
                <div class="findpwd__body">
                  <div class="input">
                    <el-form-item prop="tel"
                      ><el-input
                        placeholder="手机号"
                        autocomplete="off"
                        v-model="forgetForm.tel"
                      >
                      </el-input
                    ></el-form-item>
                  </div>
                  <div class="input">
                    <el-form-item prop="code">
                      <el-input
                        placeholder="短信验证码"
                        autocomplete="off"
                        v-model="forgetForm.code"
                      >
                        <span class="btn" slot="suffix">获取验证码</span>
                      </el-input></el-form-item
                    >
                  </div>
                  <div class="input">
                    <el-form-item prop="pwd">
                      <el-input
                        placeholder="密码"
                        autocomplete="off"
                        :type="forgetPwdShow ? 'text' : 'password'"
                        v-model="forgetForm.pwd"
                      >
                        <i
                          class="el-icon-view"
                          @click="forgetPwdShow = !forgetPwdShow"
                          :class="{ btn: forgetPwdShow ? true : false }"
                          slot="suffix"
                        ></i>
                      </el-input>
                    </el-form-item>
                  </div>
                  <div class="input">
                    <el-form-item prop="pwdAgain"
                      ><el-input
                        placeholder="再次输入密码"
                        autocomplete="off"
                        :type="forgetPwdShow ? 'text' : 'password'"
                        v-model="forgetForm.pwdAgain"
                      >
                        <i
                          class="el-icon-view"
                          @click="forgetPwdShow = !forgetPwdShow"
                          :class="{ btn: forgetPwdShow ? true : false }"
                          slot="suffix"
                        ></i> </el-input
                    ></el-form-item>
                  </div>
                  <div class="text">
                    <a @click="state = 1">登录</a>
                    <a @click="state = 2">注册</a>
                  </div>
                  <el-button
                    class="submit"
                    type="primary"
                    :loading="isForget"
                    round
                    @click="forget"
                    >确定</el-button
                  >
                </div>
              </el-form>
            </div>

            <div class="findpwd" v-if="state == 4">
              <el-form :model="bindForm" :rules="bindRules" ref="bindForm">
                <div class="findpwd__header">
                  <div class="title">关联学员身份</div>
                </div>
                <div class="findpwd__body">
                  <div class="input">
                    <el-form-item prop="realname"
                      ><el-input
                        placeholder="真实姓名"
                        v-model="bindForm.realname"
                      >
                      </el-input
                    ></el-form-item>
                  </div>
                  <div class="input">
                    <el-form-item prop="idCard">
                      <el-input
                        placeholder="身份证号码"
                        v-model="bindForm.idCard"
                      >
                      </el-input
                    ></el-form-item>
                  </div>
                  <el-button
                    class="submit"
                    type="primary"
                    :loading="isBind"
                    round
                    @click="bind"
                    >确定</el-button
                  >
                  <div class="bind-next" @click="nextBind">下次再关联</div>
                </div>
              </el-form>
            </div>
          </div>
        </div>
      </div>
    </section>

    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "@/components/footer/index";
import { mapGetters } from "vuex";
import { mapMutations } from "vuex";
export default {
  name: "login",
  components: {
    Footer,
  },
  data() {
    const pwdAgainCheck = async (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请再次输入新密码"));
      } else if (this.forgetForm.pwd != this.forgetForm.pwdAgain) {
        return callback(new Error("两次输入密码不一致！"));
      } else {
        callback();
      }
    };
    return {
      state: 1, //1登录 2注册  3找回密码 4绑定学员身份
      tabIndex: 0,
      loginForm: {},
      loginSmsForm: {},
      registerForm: {},
      forgetForm: {},
      bindForm: {},
      countDown: 0,
      countDownTimer: null,
      registerCountDown: 0,
      registerCountDownTimer: null,
      forgetCountDown: 0,
      forgetCountDownTimer: null,
      getLoginCodeLock: false,
      getRegisterCodeLock: false,
      getForgetCodeLock: false,
      getBindCodeLock: false,
      loginRules: {
        account: [
          { required: true, trigger: "blur", message: "请输入手机号/身份证号" },
        ],
        pwd: [{ required: true, trigger: "blur", message: "请输入密码" }],
      },
      loginSmsRules: {
        code: [{ required: true, trigger: "blur", message: "请输入验证码" }],
        tel: [{ required: true, trigger: "blur", message: "请输入手机号" }],
      },
      forgetRules: {
        code: [{ required: true, trigger: "blur", message: "请输入验证码" }],
        tel: [{ required: true, trigger: "blur", message: "请输入手机号" }],
        pwd: [{ required: true, trigger: "blur", message: "请输入新密码" }],
        pwdAgain: [
          {
            required: true,
            validator: pwdAgainCheck,
            trigger: "blur",
          },
        ],
      },
      registerRules: {
        code: [{ required: true, trigger: "blur", message: "请输入验证码" }],
        tel: [{ required: true, trigger: "blur", message: "请输入手机号" }],
        pwd: [{ required: true, trigger: "blur", message: "请输入密码" }],
        read: [{ required: true, trigger: "blur", message: "请勾选服务协议" }],
      },

      bindRules: {
        realname: [
          { required: true, trigger: "blur", message: "请输入真实姓名" },
        ],
        idCard: [
          { required: true, trigger: "blur", message: "请输入身份证号" },
        ],
      },
      islogin: false,
      isloginSms: false,
      isRegister: false,
      isForget: false,
      isBind: false,
      user_account: "",
      token: "",
      loginPwdShow: false,
      registerPwdShow: false,
      forgetPwdShow: false,
    };
  },
  computed: {
    ...mapGetters(["header", "currentRouter"]),
  },
  mounted() {
    this.state = this.$route.query.state || 1;
  },
  methods: {
    ...mapMutations(["setUserInfo", "setCurrentRouter"]),
    /**
     * 账号密码登录
     */
    go(path) {
      this.$router.push(path);
    },
    login() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.islogin = true;
          this.$request
            .login(this.loginForm)
            .then((res) => {
              if (res.data.full_info) {
                localStorage.setItem("user_account", res.data.user_account);
                localStorage.setItem("token", res.data.token);

                this.getInfo();
              } else {
                this.user_account = res.data.user_account;
                this.token = res.data.token;
                this.islogin = false;
                this.state = 4;
              }
            })
            .catch((err) => {
              this.islogin = false;
              this.$message({
                message: err.msg,
                type: "error",
              });
            });
        }
      });
    },
    /**
     * 获取登录短信
     */
    getLoginSms() {
      this.$refs.loginSmsForm.validateField("tel", (valid) => {
        if (!valid) {
          if (this.countDown == 0) {
            if (this.getLoginCodeLock) {
              return;
            }
            this.getLoginCodeLock = true;
            this.$request
              .getLoginSms({ tel: this.loginSmsForm.tel })
              .then((res) => {
                this.getLoginCodeLock = false;
                this.$message({
                  message: `验证码已发送`,
                  type: "success",
                });
                this.countDown = 60;
                this.countDownTimer = setInterval(() => {
                  if (this.countDown == 0) {
                    clearInterval(this.countDownTimer);
                  } else {
                    this.countDown--;
                  }
                }, 1000);
              })
              .catch((err) => {
                this.getLoginCodeLock = false;
              });
          }
        }
      });
    },
    /**
     * 手机号登录
     */
    loginSms() {
      this.$refs.loginSmsForm.validate((valid) => {
        if (valid) {
          this.isloginSms = true;
          this.$request
            .loginSms(this.loginSmsForm)
            .then((res) => {
              if (res.data.full_info) {
                localStorage.setItem("user_account", res.data.user_account);
                localStorage.setItem("token", res.data.token);
                this.getInfo();
              } else {
                this.user_account = res.data.user_account;
                this.token = res.data.token;
                this.isloginSms = false;
                this.state = 4;
              }
            })
            .catch((err) => {
              this.isloginSms = false;
              this.$message({
                message: err.msg,
                type: "error",
              });
            });
        }
      });
    },
    /**
     * 获取用户登录信息
     */
    getInfo() {
      this.$request
        .getInfo()
        .then((res) => {
          this.isRegister = false;
          this.islogin = false;
          this.isloginSms = false;
          this.setUserInfo(res.data);
          if (JSON.stringify(this.currentRouter) != "{}") {
            this.$router.push(this.currentRouter);
            this.setCurrentRouter({});
          } else {
            this.$router.replace("/");
          }
        })
        .catch((err) => {
          this.isRegister = false;
          this.islogin = false;
          this.isloginSms = false;
          this.$message({
            message: err.msg,
            type: "error",
          });
        });
    },

    /**
     * 注册
     */
    register() {
      this.$refs.registerForm.validate((valid) => {
        if (valid) {
          this.isRegister = true;
          this.$request
            .registerUser(this.registerForm)
            .then((res) => {
              //自动登录
              this.autoLogin();
            })
            .catch((err) => (this.isRegister = false));
        }
      });
    },
    /**
     * 获取注册验证码
     */
    getRegisterSms() {
      this.$refs.registerForm.validateField("tel", (valid) => {
        if (!valid) {
          if (this.registerCountDown == 0) {
            if (this.getRegisterCodeLock) {
              return;
            }
            this.getRegisterCodeLock = true;
            this.$request
              .getLoginSms({ tel: this.loginSmsForm.tel })
              .then((res) => {
                this.getRegisterCodeLock = false;
                this.$message({
                  message: `验证码已发送`,
                  type: "success",
                });
                this.registerCountDown = 60;
                this.registerCountDownTimer = setInterval(() => {
                  if (this.registercountDown == 0) {
                    clearInterval(this.registerCountDownTimer);
                  } else {
                    this.registerCountDown--;
                  }
                }, 1000);
              })
              .catch((err) => {
                this.$message({
                  message: err.msg,
                  type: "error",
                });
                this.getRegisterCodeLock = false;
              });
          }
        }
      });
    },
    /**
     * 注册后自动登录并跳转绑定身份信息
     */
    autoLogin() {
      let loginForm = JSON.parse(JSON.stringify(this.registerForm));
      loginForm.account = loginForm.tel;
      this.$request
        .login(loginForm)
        .then((res) => {
          if (res.data.full_info) {
            //信息完善，获取用户信息
            localStorage.setItem("user_account", res.data.user_account);
            localStorage.setItem("token", res.data.token);
            this.getInfo();
          } else {
            //不完善，跳转完善信息页面
            this.user_account = res.data.user_account;
            this.token = res.data.token;
            this.isRegister = false;
            this.state = 4;
          }
        })
        .catch((err) => {
          this.isRegister = false;
          this.$message({
            message: err.msg,
            type: "error",
          });
        });
    },

    forget() {
      this.$refs.forgetForm.validate((valid) => {
        if (valid) {
          this.isForget = true;
          this.$request
            .forgetUser(this.forgetForm)
            .then((res) => {
              this.isForget = false;
              this.$message({
                message: "修改成功",
                type: "success",
              });
              this.$refs.forgetForm.resetFields();
            })
            .catch((err) => (this.isForget = false));
        }
      });
    },

    nextBind() {
      this.state = 1;
      this.user_account = "";
      this.token = "";
    },

    bind() {
      this.$refs.bindForm.validate((valid) => {
        if (valid) {
          this.isBind = true;
          let bindForm = JSON.parse(JSON.stringify(this.bindForm));
          bindForm.token = this.token;
          this.$request
            .bindIdCard(this.bindForm)
            .then((res) => {
              this.isBind = false;
              this.$message({
                message: "关联成功",
                type: "success",
              });

              localStorage.setItem("user_account", this.user_account);
              localStorage.setItem("token", this.token);
              this.getInfo();
              if (JSON.stringify(this.currentRouter) != {}) {
                this.$router.push(this.currentRouter);
                this.setCurrentRouter({});
              } else {
                this.$router.replace("/");
              }
            })
            .catch((err) => {
              this.isBind = false;
              this.$message({
                message: err.msg,
                type: "error",
              });
            });
        }
      });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.reg {
  .header {
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    .hasLogo {
      img {
        cursor: pointer;
      }
    }
    .logo {
      cursor: pointer;
      margin: 24px 0;
      width: 162px;
      height: 33px;
      background: url("~@/assets/logo.png") no-repeat center;
    }
  }

  .section {
    background: #f2f7ff;

    .container-in {
      width: 100%;
      height: 507px;
    }
    .left-box {
      float: left;
      width: 496px;
      height: 318px;
      background: url("~@/assets/pic.png") no-repeat center;
      background-size: cover;
      margin-top: 95px;
      margin-left: 152px;
    }

    .right-box {
      float: right;
      width: 348px;
      height: 427px;
      background: #ffffff;
      box-shadow: 0px 0px 13px 3px rgba(63, 141, 253, 0.1);
      border-radius: 8px;
      margin-top: 40px;
      margin-right: 140px;

      .el-icon-view {
        cursor: pointer;
      }

      .el-form-item {
        margin: 0;
      }

      .login {
        &__header {
          border-bottom: 2px solid #eee;

          .tabs {
            display: flex;
            width: 100%;

            .tab {
              cursor: pointer;
              text-align: center;
              color: #999;
              flex: 1;
              height: 42px;
              line-height: 42px;
              position: relative;

              &.active {
                &::after {
                  content: "";
                  display: block;
                  position: absolute;
                  width: 138px;
                  height: 2px;
                  background: #3f8dfd;
                  border-radius: 0px;
                  bottom: -2px;
                  left: 50%;
                  margin-left: -69px;
                }
              }
            }
          }
        }

        &__body {
          padding: 16px 24px 0;
          overflow: hidden;

          .input {
            margin-top: 24px;

            .btn {
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #3f8dfd;
              white-space: nowrap;
              cursor: pointer;
            }
          }

          .text {
            margin-top: 24px;
            display: flex;
            justify-content: space-between;
          }

          .submit {
            margin-top: 40px;
            width: 300px;
          }
        }
      }

      .register {
        &__header {
          border-bottom: 2px solid #eee;
          .title {
            height: 42px;
            line-height: 42px;
            text-align: center;
            color: #999;
          }
        }

        &__body {
          padding: 0 24px;
          overflow: hidden;

          .input {
            margin-top: 24px;
            .btn {
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #3f8dfd;
              white-space: nowrap;
              cursor: pointer;
            }
          }

          .text {
            margin-top: 10px;
            text-align: right;
            a {
              color: #3f8dfd;
            }
          }

          .checkbox {
            margin-top: 10px;
            a {
              color: #3f8dfd;
            }
            /deep/ .el-form-item__content {
              line-height: 20px;
            }
          }

          .submit {
            margin-top: 20px;
            width: 300px;
          }
        }
      }
    }

    .findpwd {
      &__header {
        border-bottom: 2px solid #eee;
        .title {
          height: 42px;
          line-height: 42px;
          text-align: center;
          color: #999;
        }
      }

      &__body {
        padding: 0 24px;
        overflow: hidden;

        .input {
          margin-top: 24px;
          .btn {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #3f8dfd;
            white-space: nowrap;
            cursor: pointer;
          }
        }

        .text {
          margin-top: 14px;
          display: flex;
          justify-content: space-between;
        }

        .submit {
          margin-top: 30px;
          width: 300px;
        }

        .bind-next {
          font-size: 14px;
          text-align: center;
          color: #999;
          margin-top: 10px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>