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

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

const { loginForm, sendEmail, backStep, errorTxt } = useLogin()
const ruleFormRef = ref<FormInstance>()

const rules = ref<FormRules>({
  email: [
    { required: true, message: 'Please enter a valid email.', trigger: 'blur' },
    {
      pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
      message: 'Please enter a valid email.',
    },
    {
      validator: (rule: any, value: any, callback: any) => {
        if (errorTxt.value)
          callback(new Error(errorTxt.value))

        else
          callback()
      },
    },
  ],
})
</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">
      Continue with Email
    </div>
    <div class="text-14px text-#1A1A1A lh-22px mb-20px">
      We’ll check if you have an account, and help create one if you don’t.
    </div>
    <el-form ref="ruleFormRef" :rules="rules" :model="loginForm" @submit.prevent>
      <el-form-item label="" prop="email" class="!mb-24px">
        <el-input v-model.trim="loginForm.email" class="!h-46px login-input !text-14px" placeholder="Enter email" />
      </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.prevent="sendEmail(ruleFormRef)">
          Continue
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style lang='less' scoped>
::v-deep(.login-input) {
   .el-input__wrapper{
    border-radius: 10px;
   }
}
</style>