登录

src/views/login/email-verify.vue

@@ -0,0 +1,143 @@
+<template>
+	<div class="visible-code">
+		<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 />
+	</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' | 'FORGOT_PWD',
+			required: true
+		},
+		password: { type: String, default: '' }
+	})
+	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>
+	.visible-code {
+		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 {
+			user-select: none;
+			margin-top: 2.4rem;
+			font-size: 1.6rem;
+			color: #666;
+			font-family: Regular;
+			> span {
+				color: #ff7a50;
+				text-decoration: underline;
+				cursor: pointer;
+				font-weight: 500;
+				font-family: Medium;
+			}
+		}
+		> .other-login {
+			margin-top: 6rem;
+		}
+	}
+</style>