111

src/components/email-box.vue

@@ -0,0 +1,82 @@
+<template>
+	<div class="email-box">
+		<h3 class="title">{{ title }}</h3>
+		<div class="tip">{{ tip }}</div>
+		<input
+			v-model="email"
+			@keydown.enter.prevent="submit"
+			type="email"
+			:placeholder="$t('EmailAddress')"
+		/>
+		<div v-show="error" class="error">{{ error }}</div>
+		<button custom @click="submit">{{ $t('Submit') }}</button>
+	</div>
+</template>
+<script setup lang="ts">
+	import { ref } from 'vue'
+	const emit = defineEmits(['submit'])
+	const props = defineProps({
+		title: { type: String },
+		tip: { type: String }
+	})
+	const email = ref('')
+	const error = ref('')
+	const submit = () => {
+		if (!validateEmail(email.value)) return
+		emit('submit', email.value)
+	}
+	// 验证邮箱
+	const validateEmail = (email: string) => {
+		if (email === '') {
+			error.value = 'Please fill out this field.'
+			return false
+		} else if (!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(email)) {
+			error.value = 'Please enter a valid email address.'
+			return false
+		}
+		error.value = ''
+		return true
+	}
+</script>
+
+<style scoped lang="less">
+	.email-box {
+		width: 100%;
+		padding: 80px;
+		margin: 0 auto;
+		background-color: #fff;
+		box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.2);
+		border-radius: 40px;
+		> .title {
+			font-size: 40px;
+			color: #222;
+			margin-bottom: 10px;
+		}
+		> .tip {
+			color: #4d4d4d;
+			margin-bottom: 20px;
+		}
+		> input {
+			width: 100%;
+			border-radius: 40px;
+			height: 40px;
+			padding: 0 20px;
+			border: 1px solid #e1e1e1;
+			outline: none;
+			color: #222;
+		}
+		> .error {
+			font-size: 14px;
+			color: #dc3232;
+		}
+		> button {
+			margin-top: 10px;
+			width: 100%;
+			border-radius: 50px;
+			height: 50px;
+			font-weight: bold;
+			text-transform: uppercase;
+			--hover-backcolor: #000;
+		}
+	}
+</style>