liebao-web/src/views/login.vue

<template>
  <div class="login">
    <div class="login-bg" data-title="登录"></div>
    <img src="../../static/image/login-logo.png" class="login-logo" />
    <div class="login-box" v-loading="isLoading">
      <div class="login-content">
        <div class="top-icon">
          <img src="../../static/image/login-icon.png" />
        </div>
        <div class="pass-code">
          <div class="item" :class="activeIndex == 1 ? 'active' : ''" @click.stop=" activeIndex = 1 ">密码登录</div>
          <div class="item" :class="activeIndex == 2 ? 'active' : ''" @click.stop=" activeIndex = 2 ">验证码登录</div>
        </div>
        <div>
          <!-- 密码登录 -->
          <div class="login-password" v-if="activeIndex == 1">
            <div class="pass-item">
              <img src="../../static/image/phone-icon.png" class="phone-icon" />
              <el-input @keydown.enter.native="seachEnterFun" placeholder="请输入手机号" v-model="mobile" class="input-phone" :maxlength="11" />
            </div>
            <div class="pass-item">
              <img src="../../static/image/lock-icon.png" class="lock-icon" />
              <el-input @keydown.enter.native="seachEnterFun" name='1' placeholder="用户密码" v-model="password" class="input-phone" type="password" />
            </div>
          </div>
          <!-- 验证码登录 -->
          <div class="login-password" v-else>
            <div class="pass-item">
              <img src="../../static/image/phone-icon.png" class="phone-icon" />
              <el-input @keydown.enter.native="seachEnterFun" placeholder="请输入手机号" v-model="mobile" class="input-phone" :maxlength="11" />
            </div>
            <div class="pass-item">
              <img src="../../static/image/code-icon.png" class="phone-icon" />
              <el-input name="1" style="display:none;" />
              <el-input @keydown.enter.native="seachEnterFun" name="2" placeholder="验证码" v-model="code" class="input-phone" :maxlength="4" />
              <div class="get-code" v-if="!showCode" @click.stop="getCode">获取短信验证码</div>
              <div class="get-code" v-else>{{ count }}秒</div>
            </div>
          </div>
        </div>
        <div class="forgot-pass">
          <span @click.stop="$router.push('/resetPassword')">忘记密码？</span>
        </div>
        <div class="login-btn" @click.stop="toLogin">登录</div>
        <div class="xie-yi">
          <el-checkbox v-model="checked">我已阅读并同意 <a target="_blank" href="http://h5.liebaoai.cn/service.html">《用户协议》</a>与<a target="_blank" href="http://h5.liebaoai.cn/privacy.html">《隐私政策》</a>
          </el-checkbox>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapGetters } from "vuex";
import { getPhoneCode, loginPassword, loginVerification } from "../api/user.js";
export default {
  data() {
    return {
      activeIndex: 1,
      isLoading: false, // 请求解决展示loading
      mobile: "",
      password: "",
      code: "",
      count: 60,
      showCode: false,
      timer: null, // 计时器
      errCount: 0,
      checked: false,
    };
  },
  destroyed() {
    clearInterval(this.timer);
    this.timer = null;
  },
  computed: {
    ...mapState(["userInfo"]),
    ...mapGetters(["userInfo"]),
  },
  created() {
    console.log("vuex", this.userInfo);
  },
  methods: {
    ...mapMutations(["SET_USERINFO"]),
    seachEnterFun(e) {
      var keyCode = window.event ? e.keyCode : e.which;
      if (keyCode == 13) {
        this.toLogin();
      }
    },
    // 短信验证码登录
    loginOfCode() {
      let params = {
        mobile: this.mobile,
        code: this.code,
        platform: 4,
      };
      loginVerification(params).then((res) => {
        if (res.code == 200) {
          localStorage.setItem("token", res.data.token);
          this.SET_USERINFO(res.data.member);
          this.$router.push("/");
        } else {
          return this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    // 账号密码登录
    loginOfPassword() {
      let params = {
        mobile: this.mobile,
        password: this.password,
        platform: 4,
      };
      loginPassword(params).then((res) => {
        if (res.code == 200) {
          this.errCount = 0;
          localStorage.setItem("token", res.data.token);
          this.SET_USERINFO(res.data.member);
          this.$router.push("/");
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
          this.errCount = this.errCount + 1;
          if (this.errCount === 3) {
            this.$confirm(
              "您已连续3次输入密码错误，可以尝试点击忘记密码，重置密码！",
              "提示",
              {
                confirmButtonText: "我知道了",
                cancelButtonText: "取消",
                showCancelButton: false,
                type: "warning",
              }
            ).then(() => {
              this.errCount = 0;
            });
          }
        }
      });
    },
    // 登录
    toLogin() {
      if (!this.mobile.trim()) {
        return this.$message({
          message: "手机号码不能为空",
          type: "error",
        });
      }
      if (!this.checkPhone(this.mobile)) {
        return this.$message({
          message: "请输入正确的手机号",
          type: "error",
        });
      }
      if (!this.checked) {
        return this.$message({
          message: "请先勾选同意后再充值！",
          type: "info",
        });
      }
      if (this.activeIndex == 1) {
        // 账号密码登录
        if (!this.password.trim()) {
          return this.$message({
            message: "密码不能为空",
            type: "error",
          });
        }
        this.loginOfPassword();
      } else {
        // 短信验证码登录
        if (!this.code.trim()) {
          return this.$message({
            message: "验证码不能为空",
            type: "error",
          });
        }
        this.loginOfCode();
      }
    },
    checkPhone(phone) {
      if (!/^1\d{10}$/.test(phone)) {
        return false;
      } else {
        return true;
      }
    },
    // 获取验证码
    getCode() {
      if (!this.mobile.trim()) {
        return this.$message({
          message: "手机号码不能为空",
          type: "error",
        });
      }
      if (!this.checkPhone(this.mobile)) {
        return this.$message({
          message: "请输入正确的手机号",
          type: "error",
        });
      }
      let params = {
        mobile: this.mobile,
        type: 1,
      };
      // this.isLoading = true;
      getPhoneCode(params).then((res) => {
        if (res.code == 200) {
          // this.isLoading = false;
          this.showCode = true;
          this.$message({
            message: "验证码发送成功",
            type: "success",
          });
          this.timer = setInterval(() => {
            this.count--;
            if (this.count <= 1) {
              this.showCode = false;
              clearInterval(this.timer);
              this.count = 60;
            }
          }, 1000);
        } else {
          // this.isLoading = false;
          return this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .el-input__inner {
  border: none !important;
}

.login {
  position: relative;
  width: 100%;
  height: 100%;

  .login-bg {
    position: fixed;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-attachment: fixed;
    background: url("/static/image/login-bg.png") no-repeat #010836;
  }

  .login-logo {
    width: 158px;
    height: 24px;
    position: absolute;
    top: 32px;
    left: 32px;
  }

  .login-box {
    position: relative;
    z-index: 200;
    height: 100vh;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: center;

    .login-content {
      background-color: #fff;
      border-radius: 14px;
      width: 360px;
      box-sizing: border-box;
      align-self: center;
      padding: 30px;

      .top-icon {
        width: 100%;
        text-align: center;
        font-size: 0;
        padding-top: 14px;

        img {
          width: 194px;
          height: 52px;
        }
      }

      .pass-code {
        display: flex;
        padding-top: 44px;

        .item {
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #565656;
          cursor: pointer;

          &:nth-child(1) {
            margin-right: 30px;
          }

          &.active {
            font-weight: bold;
            color: #111111;
            padding-bottom: 10px;
            border-bottom: 3px solid #fc7200;
          }
        }
      }

      .login-password {
        padding-top: 30px;

        .pass-item {
          display: flex;
          align-items: center;
          padding-bottom: 2px;
          border-bottom: 1px solid #eee;

          .phone-icon {
            width: 14px;
            height: 17px;
            margin-right: 16px;
          }

          .lock-icon {
            width: 16px;
            height: 18px;
            margin-right: 14px;
          }

          .input-phone {
            flex: 1;
          }

          .get-code {
            min-width: 120px;
            box-sizing: border-box;
            text-align: center;
            padding: 0 6px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #175199;
            cursor: pointer;
          }
        }
      }

      .forgot-pass {
        text-align: right;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #8590a6;
        padding-top: 10px;

        span {
          cursor: pointer;
        }
      }

      .login-btn {
        height: 36px;
        line-height: 36px;
        text-align: center;
        background: #fc7200;
        border-radius: 3px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #ffffff;
        margin-top: 20px;
        cursor: pointer;
      }

      .xie-yi {
        font-size: 8px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #808080;
        text-align: center;
        margin-top: 20px;

        a {
          text-decoration: none;
          color: #175199;
        }
      }
    }
  }
}
</style>