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

<template>
  <div class="center">
    <div class="item account">
      <span class="icon">
        <img src="/login/User.png" alt="">
      </span>
      <input
        type="text"
        v-model="phone"
        :placeholder="L['请输入手机号']"
        class="input"
        @blur="validatePhone"
        autocomplete="off"
      />
      <div data-type="userName" class="cancel" @click="clearInputVal('phone')">
        <span class="iconfont icon-cuowu"></span>
      </div>
    </div>
    <div class="error">
      <span
        v-if="phoneErrorMsg"
        class="iconfont icon-jubao"
      ></span>
      {{ phoneErrorMsg }}
    </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 phone = ref(""); //手机号
const password = ref(""); //密码
const phoneCalc = ref();
const pwdCalc = ref();
const phoneErrorMsg = ref("");
const loginLoding = ref(false);
const loginType = ref(1); //登陆类型：1-账号密码登陆，2-手机验证码登陆

const L = getCurLanguage();

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

// 校验邮箱
const validatePhone = () => {
  //邮箱非空的验证
  if (!phone.value) {
    phoneErrorMsg.value = L["请输入手机号"];
    return false;
  }

  // 邮箱格式验证
  phoneCalc.value = checkPhone(phone.value);
  if (phoneCalc.value !== true) {
    phoneErrorMsg.value = phoneCalc.value;
    return false;
  }
  phoneErrorMsg.value = "";

  return true;
};

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

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

  //邮箱验证
  if (!validatePhone()) 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>