HM21St_Page_User/src/views/login.vue

<template>
  <div>
    <div class="login-container" v-if="!forgotPwdFlag">
      <h2 class="title-big">登录</h2>
      <p class="title-name">欢迎来到二十一世纪英语智慧阅读平台</p>
      <div class="tabs-box">
        <a
          :class="[tabsIndex === 0 ? 'active' : '']"
          @click="handleChangeTabs(0)"
          >账号密码登录</a
        >
        <a
          :class="[tabsIndex === 1 ? 'active' : '']"
          @click="handleChangeTabs(1)"
          >验证码登录</a
        >
      </div>
      <!-- <template v-if="tabsIndex===0"> -->
      <el-form
        label-position="top"
        label-width="80px"
        ref="loginPwdForm"
        :model="loginPwdForm"
        class="form"
        :hide-required-asterisk="true"
        :rules="rulesPassword"
        v-show="tabsIndex === 0"
      >
        <el-form-item label="账号" prop="userName">
          <el-input
            v-model="loginPwdForm.userName"
            autocomplete="off"
            placeholder="用户名/邮箱/手机号"
            @blur="handleTrim('loginPwdForm', 'userName')"
            maxlength="100"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="loginPwdForm.password"
            :type="passwordFlag ? 'text' : 'password'"
            autocomplete="off"
            placeholder="请输入密码"
            @blur="handleTrim('loginPwdForm', 'password')"
            maxlength="20"
          >
            <i
              slot="suffix"
              class="el-icon-view show-icon"
              @click="changeIcon('passwordFlag')"
              v-if="passwordFlag"
            ></i>
            <i
              slot="suffix"
              class="show-icon"
              @click="changeIcon('passwordFlag')"
              v-else
            >
              <svg-icon icon-class="eye-invisible"></svg-icon>
            </i>
          </el-input>
        </el-form-item>
        <el-form-item prop="userAgreeCheck" class="userAgree-box">
          <el-checkbox-group v-model="loginPwdForm.userAgreeCheck">
            <el-checkbox label="1" name="userAgreeCheck"
              ><a @click.prevent="lookUserAgreement"
                >阅读并同意《用户协议》</a
              ></el-checkbox
            >
          </el-checkbox-group>
          <a class="forgotPwd" @click="forgotPwd">忘记密码？</a>
        </el-form-item>
        <el-form-item class="btn-box">
          <el-button
            type="primary"
            @click="onSubmitPassword('loginPwdForm')"
            size="small"
            :loading="loading"
            >登录</el-button
          >
          <el-button @click="onCancel('loginPwdForm')" size="small"
            >取消</el-button
          >
        </el-form-item>
      </el-form>
      <!-- </template> -->
      <!-- <template v-if="tabsIndex===1"> -->
      <el-form
        label-position="top"
        label-width="80px"
        ref="loginCodeForm"
        :model="loginCodeForm"
        class="form"
        :hide-required-asterisk="true"
        :rules="rulesCode"
        v-show="tabsIndex === 1"
      >
        <el-form-item label="手机号" prop="phone">
          <el-input
            v-model="loginCodeForm.phone"
            autocomplete="off"
            placeholder="请输入完整手机号"
            @blur="handleTrim('loginCodeForm', 'phone')"
            maxlength="20"
          >
            <template slot="prepend">+86</template>
          </el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="code" class="code-box">
          <el-input
            v-model="loginCodeForm.code"
            autocomplete="off"
            placeholder="请输入验证码"
            class="code-input"
            @blur="handleTrim('loginCodeForm', 'code')"
            maxlength="20"
          >
          </el-input>
          <el-button
            type="primary"
            @click="sendCode('time', 'phone', 'verificationCodeShow')"
            size="small"
            class="sendCode"
          >
            {{ verificationCodeShow ? time + "s" : "发送验证码" }}
          </el-button>
        </el-form-item>
        <el-form-item prop="userAgreeCheck" class="userAgree-box">
          <el-checkbox-group v-model="loginCodeForm.userAgreeCheck">
            <el-checkbox label="1" name="userAgreeCheck"
              ><a @click.prevent="lookUserAgreement"
                >阅读并同意《用户协议》</a
              ></el-checkbox
            >
          </el-checkbox-group>
          <a class="forgotPwd" @click="forgotPwd">忘记密码？</a>
        </el-form-item>
        <el-form-item class="btn-box">
          <el-button
            type="primary"
            @click="onSubmitPassword('loginCodeForm')"
            size="small"
            :loading="loading"
            >登录</el-button
          >
          <el-button @click="onCancel('loginCodeForm')" size="small"
            >取消</el-button
          >
        </el-form-item>
      </el-form>
      <!-- </template> -->
    </div>
    <forgot-pwd @cancelFot="cancelFot" v-if="forgotPwdFlag"></forgot-pwd>
  </div>
</template>

<script>
import { getLogin } from "@/api/ajax";
import { setToken } from "@/utils/auth";
import ForgotPwd from "./forgotPwd.vue";
export default {
  name: "login",
  props: ["toUrl", "linkType"],
  components: { ForgotPwd },
  data() {
    const validatePhone = (rule, value, callback) => {
      if (this.tabsIndex === 1) {
        if (value === "") {
          callback(new Error("请输入手机号"));
        } else {
          let reg = /^1[3-9]\d{9}$/;
          let result = reg.test(value);
          if (result) {
            callback();
          } else {
            callback(new Error("请输入正确的手机号"));
          }
        }
      }
    };
    return {
      tabsIndex: 0,
      loginPwdForm: {
        userName: "",
        password: "",
        userAgreeCheck: [],
        type: "USER",
      },
      passwordFlag: false,
      rulesPassword: {
        userName: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        userAgreeCheck: [
          {
            type: "array",
            required: true,
            message: "请阅读并同意《用户协议》",
            trigger: "change",
          },
        ],
      },
      loginCodeForm: {
        phone: "",
        code: "",
        userAgreeCheck: [],
        type: "USER",
      },
      rulesCode: {
        phone: [{ required: true, validator: validatePhone, trigger: "blur" }],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
        userAgreeCheck: [
          {
            type: "array",
            required: true,
            message: "请阅读并同意《用户协议》",
            trigger: "change",
          },
        ],
      },
      time: 60, //获取验证码的时间
      verificationCodeShow: false, //是否已经获取了验证码
      loading: false,
      timer: null,
      forgotPwdFlag: false,
    };
  },
  watch: {},
  methods: {
    // 切换tabs
    handleChangeTabs(value) {
      this.tabsIndex = value;
    },
    changeIcon(flag) {
      this[flag] = !this[flag];
    },
    // 查看用户协议
    lookUserAgreement() {},
    // 密码登录提交表单
    onSubmitPassword(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
          let MethodName = "/OrgServer/LoginControl/Login";
          let data = null;
          if (this.tabsIndex === 0) {
            data = {
              user_type: this.loginPwdForm.type,
              user_name: this.loginPwdForm.userName,
              password: this.loginPwdForm.password,
            };
          } else {
            data = {
              user_type: this.loginCodeForm.type,
              user_name: this.loginCodeForm.phone,
              password: this.loginCodeForm.code,
              is_dynamic_verification_code_login: "true",
              dynamic_verification_code_send_type: "SMS",
            };
          }
          getLogin(MethodName, data)
            .then((res) => {
              this.loading = false;
              setToken(res);
              if (this.toUrl) {
                if (this.linkType === "url") {
                  window.location.href =
                    window.location.href.substring(
                      0,
                      window.location.href.indexOf("/#/")
                    ) +
                    "/#" +
                    this.toUrl;
                  window.location.reload();
                } else {
                  this.$router.push({
                    path: this.toUrl,
                  });
                }
              } else {
                if (this.$route.path !== "/register") {
                  window.location.reload();
                } else {
                  this.$router.push({
                    path: "/",
                  });
                }
              }
            })
            .catch(() => {
              this.loading = false;
              this.verificationCodeShow = false;
              clearInterval(this.timer);
              this.time = 60;
            });
        } else {
          return false;
        }
      });
    },
    // 取消 恢复到修改前状态
    onCancel(formName) {
      this.$refs[formName].resetFields();
      this.$emit("cancelLogin");
    },
    // 发送验证码
    sendCode(time, phone, flag, obj) {
      let this_ = this;
      if (this_[time] != 60) {
        return;
      }
      this_.timer = null;
      if (this_.loginCodeForm[phone]) {
        let reg = /^1[3-9]\d{9}$/;
        let result = reg.test(this_.loginCodeForm[phone]);
        if (!result) {
          this_.$message.warning("请输入正确的手机号");
          return;
        }
        this_[flag] = true;
        this_.timer = setInterval(() => {
          this_[time]--;
          if (this_[time] == 0) {
            this_[flag] = false;
            clearInterval(this_.timer);
            this_.timer = null;
            this_[time] = 60;
          }
        }, 1000);
        let MethodName = "/OrgServer/LoginControl/SendVerificationCode";
        let data = {
          send_type: "SMS",
          phone_or_email: this_.loginCodeForm.phone,
        };
        getLogin(MethodName, data)
          .then((res) => {})
          .catch(() => {
            this_[flag] = false;
            clearInterval(this_.timer);
            this_.timer = null;
            this_[time] = 60;
          });
      } else {
        this_.$message.warning("请先输入手机号");
      }
    },
    // 去掉前后空格
    handleTrim(form, fild) {
      this[form][fild] = this[form][fild].trim();
    },
    // 忘记密码
    forgotPwd() {
      this.forgotPwdFlag = true;
    },
    cancelFot() {
      this.forgotPwdFlag = false;
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.login-container {
  background: #ffffff;
  padding: 64px 72px;
  .title-big {
    font-weight: 400;
    font-size: 32px;
    line-height: 40px;
    margin: 0;
    color: #1d2129;
  }
  .title-name {
    font-size: 14px;
    line-height: 22px;
    color: #86909c;
    margin: 0 0 40px 0;
  }
  .tabs-box {
    display: flex;
    a {
      font-size: 14px;
      line-height: 22px;
      color: #4e5969;
      border-radius: 100px;
      padding: 5px 16px;
      margin-right: 16px;
      &:hover {
        background: #f2f3f5;
      }
      &.active {
        background: #f2f3f5;
        font-weight: 500;
        color: #165dff;
      }
    }
  }
  .form {
    margin-top: 40px;
    .show-icon {
      cursor: pointer;
      color: #4e5969;
    }
    .forgotPwd {
      font-size: 14px;
      line-height: 22px;
      color: #165dff;
    }
  }
}
</style>
<style lang="scss">
.login-container {
  .form {
    .el-form-item__label {
      font-weight: 400;
      font-size: 14px;
      line-height: 22px;
      color: #4e5969;
      padding-bottom: 8px;
    }
    .userAgree-box {
      .el-form-item__content {
        display: flex;
        justify-content: space-between;
        line-height: 22px;
      }
      .el-checkbox-group {
        flex: 1;
        .el-checkbox {
          color: rgba(0, 0, 0, 0.88);
          font-weight: 400;
        }
      }
    }
    .btn-box {
      .el-button {
        width: 100%;
      }
      .el-button + .el-button {
        margin-left: 0;
        margin-top: 8px;
      }
    }
    .el-button--primary {
      background: #165dff;
      border-color: #165dff;
      border-radius: 2px;
      &:hover {
        background: #4080ff;
        border-color: #4080ff;
      }
      &:focus {
        background: #0e42d2;
        border-color: #0e42d2;
      }
    }
    .el-button--default {
      background: #f2f3f5;
      border-radius: 2px;
      border: none;
      color: #4e5969;
      &:hover {
        background: #e5e6eb;
      }
      &:focus {
        background: #c9cdd4;
      }
    }
    .code-box {
      .el-form-item__content {
        display: flex;
      }
    }
    .code-input {
      height: 32px;
      .el-input__inner {
        border-radius: 4px 0 0 4px;
      }
    }
    .sendCode {
      border-radius: 0 4px 4px 0;
      margin-top: 1px;
      width: 92px;
      flex-shrink: 0;
    }
    .el-form-item__content,
    .el-input__icon {
      line-height: 32px;
      color: #4e5969 !important;
    }
    .el-input__inner {
      height: 32px;
      color: #1d2129;
      background: #f2f3f5;
      border: none;
    }
    .el-textarea__inner,
    .el-input-group__prepend {
      color: #1d2129;
    }
    .el-checkbox__input.is-checked + .el-checkbox__label {
      color: #165dff;
    }
    .el-checkbox__input.is-checked .el-checkbox__inner,
    .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      background: #165dff;
      border-color: #165dff;
    }
    .el-input-group__prepend {
      width: 54px;
      height: 32px;
      border: none;
      background: #f2f3f5;
      border-radius: 2px 0px 0px 2px;
      line-height: 32px;
      text-align: center;
      padding: 0;
    }
    .el-input-group--prepend {
      display: flex;
      .el-input__inner {
        margin-left: 8px;
        flex: 1;
      }
    }
  }
}
</style>