xinkeaboard/xinkeaboard-web/components/GetEmailCode.vue

<template>
  <div class="email-code">
    <span class="email-code-icon">
      <img src="/register/mail_success.png" alt="" />
    </span>
    <input
      type="text"
      v-model="emailCode"
      :placeholder="L['请输入验证码']"
      class="input"
      autocomplete="off"
    />
    <span class="email-code-accept">
      <el-button
        @click="getVerifyCode"
        :disabled="countDownNumer"
        :loading="getVerifyCodeLoading"
      >
        <span>{{ codeText }}</span>
        <span v-if="countDownNumer">{{ `(${countDownNumer})` }}</span>
      </el-button>
    </span>
  </div>
</template>

<script setup>
import { getCurLanguage } from "@/composables/common.js";
const L = getCurLanguage();

const emits = defineEmits(["success"]);

const props = defineProps({
  beforeAction: {
    type: Function | Promise,
    default: () => {},
  },
  afterAction: {
    type: Function | Promise,
    default: () => {},
  },
});

const emailCode = ref(""); // 邮箱验证码
// 倒计时展示
const countDownNumer = ref(0);

const getVerifyCodeLoading = ref(false);

// 重新获取验证码标识
const isReacquireCode = ref(false);

// 获取验证码的文案
const codeText = computed(() => {
  return isReacquireCode.value
    ? L["register"]["重新获取"]
    : L["register"]["获取验证码"];
});

const getVerifyCode = async () => {
  if (typeof beforeAction === "function") {
    beforeAction();
  }
  if (beforeAction instanceof Promise) {
    await beforeAction();
  }
};
</script>

<style lang="scss" scoped>
.email-code {
  display: flex;
  width: 100%;

  &-icon {
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #e8e8e8;
    border-right: none;
    background: #f8f8f8;

    img {
      width: 20px;
    }
  }

  input {
    border: 1px solid #e8e8e8;
    border-left: none;
    border-right: none;
    height: 40px;
    padding: 0 0 0 10px;
    width: 190px;
  }

  &-accept {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90px;

    .el-button {
      width: 100%;
      height: 100%;
      color: #666;
      background: #f8f8f8;
      border-left: none;
      border-radius: 0;
      font-size: 12px;

      &:hover {
        border-color: #e8e8e8;
        color: $colorMain;
      }
    }
  }
}
</style>