GCLS_Page_ROOT/src/components/login/login.vue

<template>
  <!-- 登录 -->
  <div class="login_content">
    <div class="title">
      <p>{{ $t("Key539") }}</p>
    </div>
    <!-- 先择老师还是学生 -->
    <div class="teacherAndStudent">
      <div
        @click="selectTS('teacher')"
        :class="TorS == 'teacher' ? 'select' : ''"
      >
        <p>
          {{ $t("Key11") }}
          <!-- 我是老师</p> -->
        </p>
      </div>

      <div
        @click="selectTS('student')"
        :class="TorS == 'teacher' ? '' : 'select'"
      >
        <p>{{ $t("Key12") }}</p>

        <!-- 我是学生</p> -->
      </div>
    </div>
    <div class="main" @keydown="downLogin">
      <!-- 账号登录 -->
      <template v-if="loginType == '密码'">
        <div>
          <img
            v-if="TorS == 'teacher'"
            :class="['leftimg', language_type == 'AR' ? 'posRight' : '']"
            src="../../assets/login/email.png"
            alt=""
          />
          <img
            v-else
            :class="['leftimg', language_type == 'AR' ? 'posRight' : '']"
            src="../../assets/login/email.png"
            alt=""
          />
          <input
            :class="accountError ? 'inputError' : 'input'"
            :placeholder="$t('Key13')"
            v-model="email_phone"
            @input="Changeemail_phone"
          />
          <!-- <img
            @click="showLoginType"
            class="rightimg"
            src="../../assets/login/Frame3.png"
            alt=""
          /> -->
          <div class="selectLoginType" v-show="ShowloginType">
            <div @click="selectLoginType('密码')">
              <img src="../../assets/login/lock.png" alt="" />
              {{ $t("Key14") }}
            </div>
            <div @click="selectLoginType('验证码')">
              <img src="../../assets/login/phone2.png" alt="" />
              {{ $t("Key36") }}
            </div>
          </div>
        </div>
        <div>
          <img
            :class="['leftimg', language_type == 'AR' ? 'posRight' : '']"
            src="../../assets/login/yaoshi.png"
            alt=""
          />
          <input
            :type="parsswordType"
            :class="passwordError ? 'inputError' : 'input'"
            :placeholder="$t('Key14')"
            v-model="password"
            @input="ChangePassword"
          />
          <img
            v-show="parsswordType == 'password'"
            @click="lookParssowrd"
            :class="['rightimg', language_type == 'AR' ? 'posLeft' : '']"
            src="../../assets/login/password1.png"
            alt=""
          />
          <img
            v-show="parsswordType == 'text'"
            @click="lookParssowrd"
            :class="['rightimg', language_type == 'AR' ? 'posLeft' : '']"
            src="../../assets/login/password2.png"
            alt=""
          />
        </div>
        <div class="verificationCode-box">
          <input
            type="text"
            :class="'input'"
            :placeholder="$t('Key36')"
            v-model="verificationCode"
            @input="ChangeVericationCode"
            maxlength="20"
          />
          <div class="verificationCode-img">
            <img
              v-if="verificationCodeimg"
              :src="verificationCodeimg"
              :alt="$t('Key36')"
              @click="getVerificationCodeimg"
            />
          </div>
        </div>
        <div class="verificationCode-box" v-if="dynamicVerificationShow">
          <input
            type="text"
            :class="'input'"
            :placeholder="'邮箱验证码'"
            v-model="emailCode"
            @input="ChangeVericationCode"
            maxlength="20"
          />
          <div
            class="verificationCode-btn"
            @click="getVerificationCode"
            :class="VerificationCodeShow ? 'waitTime' : 'getVerification'"
          >
            {{ VerificationCodeShow ? time + "s" : $t("Key93") }}
          </div>
        </div>
      </template>
      <!-- 验证码登录   v-show="loginType == '验证码'"
       -->
      <template v-else>
        <div>
          <img class="leftimg" src="../../assets/login/singin6.png" alt="" />
          <input
            :class="accountError ? 'inputError' : 'input'"
            :placeholder="$t('Key494')"
            v-model="email_phone"
          />
          <!-- <img
            @click="showLoginType"
            class="rightimg"
            src="../../assets/login/Frame3.png"
            alt=""
          /> -->
          <div class="selectLoginType" v-show="ShowloginType">
            <div @click="selectLoginType('密码')">
              <img src="../../assets/login/lock.png" alt="" />{{ $t("Key14") }}
              <!-- 密码 -->
            </div>
            <div @click="selectLoginType('验证码')">
              <img src="../../assets/login/phone2.png" alt="" />{{
                $t("Key36")
              }}
              <!-- 验证码 -->
            </div>
          </div>
        </div>
        <div class="Verification">
          <img
            :class="['leftimg', language_type == 'AR' ? 'posRight' : '']"
            src="../../assets/login/diandian.png"
            alt=""
          />
          <input style="width: 202px" class="input" type="text" />
          <button
            @click="getVerificationCode"
            :class="VerificationCodeShow ? 'waitTime' : 'getVerification'"
          >
            {{ VerificationCodeShow ? "59s" : $t("Key542") }}
          </button>
        </div>
      </template>

      <!-- 记住我 忘记密码 -->
      <div class="remeberMeAndForgetparssword">
        <el-checkbox v-model="rememberMe">
          <!-- 记住我 -->
          <span style="color: black">{{ $t("Key19") }}</span>
        </el-checkbox>
        <!-- 忘记密码？ -->
        <p @click="cutLoginReg('Forget password')">{{ $t("Key20") }}</p>
      </div>
      <!-- 登录 -->
      <div class="btnLogin">
        <img v-if="isLogin" src="../../assets/login/Ellipse87.png" alt="" />
        <!-- 登录 -->
        <p @click="gotoLogin" v-else>{{ $t("Key9") }}</p>
      </div>
      <!-- 同意协议 -->
      <div class="agreement">
        <el-checkbox v-model="ageeemnt">
          <!-- 我已阅读并同意   用户协议-->
          <span style="color: black">{{ $t("Key21") }} </span>
        </el-checkbox>
        <span class="userAgree" @click="viewUserAgreement">{{
          $t("Key22")
        }}</span>
      </div>
    </div>
    <div v-show="shadow" class="shadow"></div>
    <el-dialog
      :visible.sync="showUseragreement"
      width="80%"
      append-to-body
      :show-close="false"
      :close-on-click-modal="false"
      class="login-userAgree"
    >
      <UserAgreement
        class="userAgree-login"
        :changeAgreement="changeAgreement"
      />
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
import { getLogin, getStaticContent } from "@/api/api";
import { setToken } from "@/utils/auth";
import { mapGetters } from "vuex";
import UserAgreement from "./UserAgreement.vue"; // 用户协议
import md5 from "js-md5";
import { setI18nLang } from "@/utils/i18n";
import { getConfigInfor } from "@/utils/index";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { UserAgreement },
  props: [
    "ForgetType",
    "changeLoginReg",
    "changeLoginType",
    "getChildSysList",
    "changeEmailTips",
  ],
  data() {
    //这里存放数据
    return {
      TorS: this.ForgetType, //老师还是学生
      ShowloginType: false, //显示登录方式
      parsswordType: "password",
      loginType: "密码",
      VerificationCodeShow: false, //是否已经获取了验证码
      isLogin: false, //是否点击登录
      accountError: false, //账号错误
      passwordError: false, //密码错误
      shadow: false, //登录过程中的遮盖层
      rememberMe: false, //记住我
      ageeemnt: true,
      email_phone: "",
      password: "",
      showUseragreement: false, // 是否显示用户协议
      verificationCode: "",
      verificationCodeimg: "", // 图形验证码
      verificationCodeimgID: "", // 图形验证码ID
      verificationCodeLoading: true, // 图形验证码的flag
      time: 60, //获取验证码的时间
      emailCode: "",
      dynamicVerificationShow:
        getConfigInfor() &&
        getConfigInfor().is_enable_dynamic_verification_code_for_user_login ==
          "true"
          ? true
          : false,
    };
  },
  //计算属性 类似于data概念
  computed: {
    ...mapGetters(["language_type"]),
  },
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    //   选择老师或者学生
    selectTS(user_type) {
      this.TorS = user_type;
      this.changeLoginType(this.TorS);
    },
    // 显示选择登录方式
    showLoginType() {
      this.ShowloginType = !this.ShowloginType;
    },
    // 去除前后空格
    Changeemail_phone() {
      this.email_phone = this.email_phone.trim();
    },
    ChangePassword() {
      this.password = this.password.trim();
    },
    ChangeVericationCode() {
      this.verificationCode = this.verificationCode.trim();
      this.emailCode = this.emailCode.trim();
    },
    //选择密码登录和验证码登录
    selectLoginType(type) {
      if (this.loginType != type) {
        this.loginType = type;
      }
      this.ShowloginType = false;
    },
    // 查看密码
    lookParssowrd() {
      if (this.parsswordType == "text") {
        this.parsswordType = "password";
      } else {
        this.parsswordType = "text";
      }
    },
    // 获取验证码
    getVerificationCode() {
      let this_ = this;
      if (this_.time != 60) {
        return;
      }
      let timer;
      if (this_.email_phone) {
        this_.VerificationCodeShow = true;
        timer = setInterval(() => {
          this_.time--;
          if (this_.time == 0) {
            this_.VerificationCodeShow = false;
            clearInterval(timer);
            timer = null;
            this_.time = 60;
          }
        }, 1000);
        let MethodName = "user_manager-SendVerificationCode";
        let data = {
          verification_type: "EMAIL",
          phone_or_email: this_.email_phone,
        };
        getLogin(MethodName, data)
          .then((res) => {})
          .catch(() => {
            this_.VerificationCodeShow = false;
            clearInterval(timer);
            timer = null;
            this_.time = 60;
          });
      } else {
        this_.$message.warning(this.$t("Key546"));
      }
    },
    // 登录
    gotoLogin() {
      let flag = true;
      if (this.loginType == "密码") {
        if (!this.email_phone || !this.password) {
          // this.$message.warning("账号密码不能为空");
          this.$message.warning(this.$t("Key653"));

          flag = false;
          return;
        }
        if (!this.verificationCode) {
          this.$message.warning(this.$t("Key37"));
          flag = false;
          return;
        }
        if (!this.ageeemnt) {
          this.$message.warning(this.$t("Key543"));
          flag = false;
          return;
        }
      }
      if (!flag) {
        return;
      }
      this.isLogin = true;
      let MethodName = "login_control-Login";
      let data = {
        user_type: this.TorS.toUpperCase(),
        user_name: this.email_phone,
        is_password_md5: "true",
        password: md5(this.password).toUpperCase(),
        verification_code_image_text: this.verificationCode,
        verification_code_image_id: this.verificationCodeimgID,
        dynamic_verification_type: "EMAIL",
        phone_or_email: this.email_phone,
        dynamic_verification_code: this.emailCode,
      };
      if (this.rememberMe) {
      } else {
        localStorage.removeItem("user_name");
      }
      getLogin(MethodName, data)
        .then((res) => {
          this.isLogin = false;
          if (res.status == -5) {
            this.$message.error(res.error);
            return;
          }
          this.changeLoginReg("", res);
          if (this.rememberMe) {
            let obj = {
              email_phone: this.email_phone,
              user_type: res.user_type,
            };
            localStorage.setItem("user_name", JSON.stringify(obj));
          }
          setToken(res);
          let isShare = this.$route.query.temporary_link
            ? decodeURIComponent(this.$route.query.temporary_link)
            : "";
          // if (
          //   res.last_update_password_days >=
          //     res.sys_recommend_password_update_days &&
          //   !isShare
          // ) {
          //   this.changeEmailTips(res.last_update_password_days);
          // } else {
          this.$message.success(this.$t("Key442"));
          setI18nLang(this.language_type).then(() => {
            if (isShare) {
              location.href = isShare;
            } else if (localStorage.getItem("testLink")) {
              location.href = localStorage.getItem("testLink");
              localStorage.removeItem("testLink");
            } else if (
              res.popedom_code_list.indexOf(2000001) > -1 ||
              res.user_type == "STUDENT"
            ) {
              this.$message.warning(this.$t("Key247") + "....");
              location.href = `/GCLS-Learn/#/EnterSys`;
            } else {
              this.getChildSysList();
            }
          });
          // }
        })
        .catch((err) => {
          this.isLogin = false;
          setTimeout(() => {
            this.getVerificationCodeimg();
          }, 1000);
        });
    },
    // 回车登录
    downLogin(e) {
      if (e.keyCode == 13) {
        this.gotoLogin();
      }
    },
    // 切换忘记密码
    cutLoginReg(value) {
      this.changeLoginReg(value);
    },
    viewUserAgreement() {
      this.showUseragreement = true;
    },
    changeAgreement(flag) {
      this.ageeemnt = flag;
      this.showUseragreement = false;
    },
    // 图形验证码
    getVerificationCodeimg() {
      if (!this.verificationCodeLoading) return;
      this.verificationCodeLoading = false;
      let MethodName = "login_control-GetVerificationCodeImage";
      let data = {};
      getStaticContent(MethodName, data)
        .then((res) => {
          if (res) {
            this.verificationCodeLoading = true;
            this.verificationCodeimgID = res.image_id;
            this.verificationCodeimg =
              "data:image/jpeg;base64," + res.image_content_base64;
          } else {
            this.verificationCodeLoading = true;
          }
        })
        .catch(() => {
          this.verificationCodeLoading = true;
        });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getVerificationCodeimg();
    let user_name = JSON.parse(localStorage.getItem("user_name"));
    if (user_name) {
      this.email_phone = user_name.email_phone;
      this.rememberMe = true;
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.login_content {
  width: 462px;
  background: #fff;
  border-radius: 8px;
  margin-left: 30px;
  padding-bottom: 47px;
  .title {
    height: 100px;
    line-height: 100px;
    p {
      text-align: center;
      font-size: 20px;
      color: #ff9900;
      font-weight: bold;
      margin: 0;
    }
  }
  .teacherAndStudent {
    margin: 0 auto;
    width: 334px;
    height: 40px;
    background: #f0f0f0;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    > div {
      width: 164px;
      height: 36px;
      border-radius: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: #a6a6a6;
    }
    .select {
      background: #ffffff;
      box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
      border-radius: 2px;
      font-weight: bold;
      color: #ff9900;
    }
  }
  .main {
    > div {
      margin: 24px auto;
      width: 334px;
      position: relative;
      .input {
        width: 334px;
        height: 48px;
        border: 1px solid #d9d9d9;
        box-sizing: border-box;
        border-radius: 4px;
        outline: none;
        padding-left: 45px;
        padding-right: 45px;
      }
      .inputError {
        width: 334px;
        height: 48px;
        border: 1px solid #ff0000;
        box-sizing: border-box;
        border-radius: 4px;
        outline: none;
        padding-left: 45px;
        padding-right: 45px;
      }
      .input:focus {
        border: 1px solid #ff9900;
      }
      .leftimg {
        width: 24px;
        position: absolute;
        top: 10px;
        left: 10px;
        &.posRight {
          right: 10px;
          left: auto;
        }
      }
      .rightimg {
        width: 24px;

        position: absolute;
        right: 10px;
        top: 10px;
        cursor: pointer;
        &.posLeft {
          left: 10px;
          right: auto;
        }
      }
      .selectLoginType {
        position: absolute;
        right: 0;
        z-index: 1;
        width: 132px;
        height: 96px;
        background: #ffffff;
        box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
        border-radius: 4px;
        transition: all 2s;

        > div {
          width: 132px;
          height: 40px;
          font-size: 16px;
          line-height: 40px;
          text-align: center;
          margin-top: 8px;
          cursor: pointer;
          img {
            width: 24px;
            position: relative;
            top: 5px;
          }
        }
        > div:hover {
          background: #f6f6f6;
        }
      }
      &.verificationCode-box {
        display: flex;
        > .input {
          width: 164px;
          flex: 1;
          padding-left: 10px;
        }
        > div {
          &.verificationCode-img {
            width: 128px;
            height: 48px;
            margin-left: 5px;
            background: #c5c5c5;
            border-radius: 4px;
            overflow: hidden;
            > img {
              height: 48px;
              cursor: pointer;
            }
          }
          &.verificationCode-btn {
            width: 128px;
            margin-left: 5px;
            background: #ff9900;
            border-radius: 4px;
            color: #fff;
            font-weight: 700;
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            &.waitTime {
              background: #f0f0f0;
              color: #6c6c6c;
            }
          }
        }
      }
    }
    .Verification {
      button {
        width: 116px;
        height: 48px;
        margin-left: 16px;
        border-radius: 4px;
        cursor: pointer;
        box-sizing: border-box;
      }
      .getVerification {
        background: #ff9900;
        border: 1px solid #ff9900;
        color: white;
      }
      .waitTime {
        background: #f0f0f0;
        color: black;
        border: none;
      }
    }
    .remeberMeAndForgetparssword {
      display: flex;
      justify-content: space-between;
      p {
        margin: 0;
        color: #ff9900;
        cursor: pointer;
        font-size: 16px;
        font-weight: bold;
      }
    }
    .btnLogin {
      position: relative;
      width: 334px;
      height: 48px;
      background: #ff9900;
      border-radius: 4px;
      color: white;
      line-height: 48px;
      text-align: center;
      cursor: pointer;
      z-index: 2;
      p {
        width: 100%;
        height: 100%;
        font-weight: bold;
      }
      img {
        vertical-align: middle;
        animation: rotated 1s linear infinite;
      }
    }
    .agreement {
      font-size: 16px;
      span {
        color: #ff9900;
        cursor: pointer;
      }
    }
  }
  @keyframes rotated {
    0% {
      transform: rotateZ(0deg);
    }
    100% {
      transform: rotateZ(360deg);
    }
  }
  .shadow {
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background: #ffffff;
    opacity: 0.6;
    border-radius: 8px;
  }
}
</style>
<style lang="scss">
.login_content {
  input::-ms-reveal {
    display: none;
  }
  .el-checkbox__inner::after {
    box-sizing: content-box;
    content: "";
    border: 1px solid black;
    border-left: 0;
    border-top: 0;
    height: 7px;
    left: 4px;
    position: absolute;
    top: 1px;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: white;
    border-color: black;
  }
  .remeberMeAndForgetparssword {
    .el-checkbox__label {
      padding: 0 10px;
    }
  }
  .agreement {
    .el-checkbox__label {
      padding: 0 10px;
    }
  }
}
.login-userAgree {
  .el-dialog {
    border-radius: 8px;
    height: 70%;
  }
  .el-dialog__header {
    padding: 0;
  }
  .el-dialog__body {
    padding: 0;
    border-radius: 8px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    height: 100%;
  }
}
.v-modal {
  opacity: 0.1;
}
</style>