fashion-ssr-vue3/components/common/login/comp/email/code.vue

<script lang='ts' setup>
import type { FormInstance, FormRules } from 'element-plus'
import useLogin from '../../useLogin'

const { loginForm, finishCode, errorCodeTxt, seconds, showCode, getMailCode, backStep } = useLogin()
const ruleFormRef = ref<FormInstance>()

const rules = ref<FormRules>({
  captcha: [
    { required: true, message: 'Please enter a valid email.', trigger: 'blur' },
  ],
})
</script>

<template>
  <div>
    <div class="custom-title-font text-24px fw-800 text-#333 mb-10px flex items-center">
      <img src="@/assets/images/login_back_arrow.png" alt="" class="w-16px h-16px mr-4px cursor-pointer" @click="backStep">
      Finish Signing In
    </div>
    <div class="text-14px text-#1A1A1A lh-22px mb-20px">
      Once you enter the code we sent to <span class="text-#1A1A1A fw-700">{{ loginForm.email }}</span>, you’ll be signed in.
    </div>

    <div v-if="showCode" class="my-10px text-14px text-#9B6CFF underline cursor-pointer fw-bold" :class="seconds && '!text-#999'" @click="getMailCode">
      Get a Code
    </div>
    <el-form ref="ruleFormRef" :rules="rules" :model="loginForm" @submit.prevent>
      <el-form-item label="" prop="captcha" class="!mb-24px">
        <el-input v-model.trim="loginForm.captcha" type="number" :maxlength="6" :class="!!errorCodeTxt && 'error-txt'" class="!h-46px login-input !text-14px" placeholder="Enter email" />
        <div v-if="errorCodeTxt" class="text-red mt-10px">
          {{ errorCodeTxt }}
        </div>
      </el-form-item>

      <el-form-item>
        <el-button class="!w-full !h-50px !text-16px !fw-500 !b-rd-10px !bg-#9B6CFF !text-#fff" @click="finishCode(ruleFormRef)">
          Continue
        </el-button>
      </el-form-item>
    </el-form>
    <div class="mt-20px text-14px text-#767676">
      <div v-if="!seconds && !showCode" class="mb-8px">
        Didn't get the code? <span class="text-#9B6CFF cursor-pointer underline " :class="seconds && '!text-#999'" @click="getMailCode">Resend code</span>⁠.
      </div>
      <div v-if="seconds && !showCode">
        Didn't get the code? Resend in {{ seconds }} seconds.
      </div>
    </div>
  </div>
</template>

<style lang='less' scoped>
::v-deep(.login-input) {
  &.error-txt{
    .el-input__wrapper{
      border: 1px solid red!important;
   }
  }
   .el-input__wrapper{
    border-radius: 10px;
   }
}
</style>