143 lines
3.3 KiB
Vue
143 lines
3.3 KiB
Vue
<template>
|
|
<div class="email-verify">
|
|
<div class="tip" v-html="$t('Login.verifyCodeHasSent', { email: props.email })"></div>
|
|
<input-code @submit="onVerify" v-model="code" ref="inputCodeRef" />
|
|
<p class="time" v-if="time > 0">{{ $t('Login.resendCodeIn', { time: timeStr }) }}</p>
|
|
<p class="time" v-if="time === 0">
|
|
<span @click="onResend">{{ $t('Login.resendCode') }}</span>
|
|
</p>
|
|
<button class="verify" custom="black" @click="onVerify">{{ $t('Login.verify') }}</button>
|
|
<other-login v-if="isShowOtherLogin" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import md5 from 'md5'
|
|
import { ElMessage } from 'element-plus'
|
|
import OtherLogin from './other-login.vue'
|
|
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
|
|
import { CountDown } from '@/utils/tools'
|
|
import InputCode from '@/components/input-code.vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { useI18n } from 'vue-i18n'
|
|
const { t } = useI18n()
|
|
const router = useRouter()
|
|
const emit = defineEmits(['submit-email-code'])
|
|
const props = defineProps({
|
|
email: { type: String, required: true },
|
|
type: {
|
|
type: String as () => 'LOGIN' | 'REGISTER' | 'FORGET_PWD',
|
|
required: true
|
|
},
|
|
password: { type: String, default: '' },
|
|
isShowOtherLogin: { type: Boolean, default: true }
|
|
})
|
|
const code = ref('')
|
|
const time = ref(60)
|
|
const timeStr = computed(() => CountDown(time.value))
|
|
const timeout = ref(null)
|
|
const setTime = (s = 120) => {
|
|
clearTime()
|
|
time.value = s
|
|
timeout.value = setInterval(() => {
|
|
time.value--
|
|
if (time.value <= 0) {
|
|
clearTime()
|
|
time.value = 0
|
|
}
|
|
}, 1000)
|
|
}
|
|
const clearTime = () => {
|
|
time.value = -1
|
|
clearTimeout(timeout.value)
|
|
}
|
|
onBeforeUnmount(() => {
|
|
clearTime()
|
|
})
|
|
onMounted(() => {
|
|
onSendCode()
|
|
})
|
|
const inputCodeRef = ref(null)
|
|
const resetCode = () => {
|
|
inputCodeRef.value?.resetCode?.()
|
|
}
|
|
const onSendCode = async () => {
|
|
resetCode()
|
|
const email = props.email
|
|
if (!email) {
|
|
console.warn('请输入邮箱')
|
|
return Promise.reject('请输入邮箱')
|
|
}
|
|
// const data = {
|
|
// email,
|
|
// type: props.type
|
|
// }
|
|
// if (props.type === 'LOGIN') {
|
|
// data['password'] = md5(props.password)
|
|
// }
|
|
// const res = await SendVerificationCode(data)
|
|
// if (!res) {
|
|
// ElMessage.error(t('Login.sendCodeError'))
|
|
// return Promise.reject('发送验证码失败')
|
|
// }
|
|
setTime()
|
|
return Promise.resolve()
|
|
}
|
|
const onResend = () => {
|
|
if (time.value > 0) return
|
|
onSendCode()
|
|
}
|
|
const onVerify = () => {
|
|
if (code.value.length !== 6) return
|
|
emit('submit-email-code', code.value)
|
|
}
|
|
defineExpose({
|
|
onSendCode
|
|
})
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.email-verify {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
> .tip {
|
|
text-align: center;
|
|
margin-top: 4.6rem;
|
|
line-height: 2.4rem;
|
|
font-family: KaiseiOpti-Regular;
|
|
font-size: 1.6rem;
|
|
color: #666;
|
|
&:deep(span) {
|
|
color: #252727;
|
|
font-family: KaiseiOpti-Medium;
|
|
}
|
|
}
|
|
> .input-code {
|
|
margin-top: 6rem;
|
|
}
|
|
> .verify {
|
|
margin-top: 5rem;
|
|
width: 100%;
|
|
height: 4rem;
|
|
--button-font-size: 1.4rem;
|
|
}
|
|
> .time {
|
|
font-family: KaiseiOpti-Regular;
|
|
user-select: none;
|
|
margin-top: 2.4rem;
|
|
font-size: 1.2rem;
|
|
color: #666;
|
|
> span {
|
|
color: #232323;
|
|
text-decoration: underline;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
> .other-login {
|
|
margin-top: 6rem;
|
|
}
|
|
}
|
|
</style>
|