xinkeaboard/xinkeaboard-web/components/login/Email.vue

<template>
  <div class="center">
    <div class="item account">
      <span class="icon">
        <img src="/login/Mail.png" alt="">
      </span>
      <input
        type="text"
        v-model="name"
        :placeholder="L['请输入邮箱']"
        class="input"
        @blur="validateEmail"
        autocomplete="off"
      />
      <div data-type="userName" class="cancel" @click="clearInputVal('name')">
        <span class="iconfont icon-cuowu"></span>
      </div>
    </div>
    <div class="error">
      <span
        v-if="emailErrorMsg"
        class="iconfont icon-jubao"
      ></span>
      {{ emailErrorMsg }}
    </div>
    <div class="item password">
      <span class="icon">
        <img src="/login/Password.png" alt="">
      </span>
      <input
        type="password"
        v-model="password"
        :placeholder="L['请输入密码']"
        class="input"
        autocomplete="new-password"
      />
      <div
        data-type="password"
        class="cancel"
        @click="clearInputVal('password')"
      >
        <span  class="iconfont icon-cuowu"></span>
      </div>
    </div>

    <div class="error">
      <span
        v-if="errorMsg"
        class="iconfont icon-jubao"
      ></span>
      {{ errorMsg }}
    </div>
    <el-button
      @click="login"
      :class="{ submit: true, disabled: loginDisabled }"
      :disabled="loginDisabled"
      :loading="props.loginLoding"
      >{{ L["登录"] }}</el-button
    >
  </div>
</template>

<script setup>
const props = defineProps({
  loginLoding: {
    type: Boolean,
    default: false
  },
});
const emits = defineEmits(["login"]);
const errorMsg = ref(); //错误提示
const name = ref(""); //账户
const password = ref(""); //密码
const emailCalc = ref();
const pwdCalc = ref();
const emailErrorMsg = ref("");
const loginType = ref(1); //登陆类型：1-账号密码登陆，2-手机验证码登陆

const L = getCurLanguage();

const loginDisabled = computed(() => !name.value || !password.value);

// 校验邮箱
const validateEmail = () => {
  //邮箱非空的验证
  if (!name.value) {
    emailErrorMsg.value = L["请输入邮箱"];
    return false;
  }

  // 邮箱格式验证
  emailCalc.value = checkEmail(name.value);
  if (emailCalc.value !== true) {
    emailErrorMsg.value = emailCalc.value;
    return false;
  }
  emailErrorMsg.value = "";

  return true;
};

//清空输入框内容
const clearInputVal = (type) => {
  if (type == "name") {
    name.value = "";
  } else if (type == "password") {
    password.value = "";
  }
};

const login = () => {
  let param = {};
  param.username = name.value;
  param.password = password.value;
  param.loginType = loginType.value;

  //邮箱验证
  if (!validateEmail()) return;

  //密码校验
  if (!param.password) {
    errorMsg.value = L["请输入密码"];
    return false;
  } else {
    pwdCalc.value = checkPwd(param.password);
    if (pwdCalc.value !== true) {
      errorMsg.value = pwdCalc.value;
      return false;
    }
  }
  errorMsg.value = "";
  emits("login", param);
};

const updateErrorMsg = (val) => {
  errorMsg.value = val
}

defineExpose({
  updateErrorMsg
})
</script>