登陆注册页面

src/views/login/visible-code.vue

@@ -0,0 +1,105 @@
+<template>
+	<div class="visible-code">
+		<div class="title">Verify your email address</div>
+		<div class="tip">
+			A verification code has been sent to <span>{{ email }}</span>
+		</div>
+		<input-code @submit="onVerify" v-model="code" />
+		<el-button class="verify" @click="onVerify">Verify</el-button>
+		<p class="time" v-if="time > -1">
+			<span @click="onResend">Resend Code </span> in {{ timeStr }}
+		</p>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+	import { CountDown } from '@/utils/tools'
+	import InputCode from '@/components/input-code.vue'
+	import { useRouter } from 'vue-router'
+	const router = useRouter()
+	const emit = defineEmits(['submit'])
+	const props = defineProps({
+		email: ''
+	})
+	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(() => {
+		setTime()
+	})
+	const onResend = () => {
+		if (time.value > 0) return
+		setTime()
+	}
+	const onVerify = () => {
+		if (code.value.length !== 6) return
+		emit('submit', code.value)
+	}
+</script>
+
+<style lang="less" scoped>
+	.visible-code {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		> .title {
+			font-weight: 600;
+			font-size: 4rem;
+			color: #252727;
+		}
+		> .tip {
+			margin-top: 2rem;
+			font-size: 1.8rem;
+			color: #666;
+			> span {
+				color: #252727;
+				font-weight: 600;
+			}
+		}
+		> .input-code {
+			margin: 8.6rem 0;
+		}
+		> .verify {
+			width: 100%;
+			height: 6rem;
+			background: #252727;
+			font-size: 2rem;
+			border-radius: 0.8rem;
+			color: #fff;
+			font-weight: 600;
+		}
+		> .time {
+			user-select: none;
+			margin-top: 2rem;
+			font-size: 1.6rem;
+			color: #666;
+			> span {
+				color: #ff7a50;
+				text-decoration: underline;
+				cursor: pointer;
+				font-weight: 500;
+			}
+		}
+	}
+</style>