350 lines
8.2 KiB
Vue
350 lines
8.2 KiB
Vue
<script setup>
|
|
import { ref } from "vue";
|
|
import { useI18n } from "vue-i18n";
|
|
|
|
import axios from "axios";
|
|
import { message } from "@/utils/message.js";
|
|
|
|
const { t } = useI18n();
|
|
const form = ref({
|
|
firstName: "",
|
|
lastName: "",
|
|
email: "",
|
|
company: "",
|
|
phone: "",
|
|
});
|
|
const submitted = ref(false);
|
|
|
|
async function handleSubmit(e) {
|
|
e.preventDefault();
|
|
if (
|
|
Object.values(form.value).some((value) => value === "" || value === null)
|
|
) {
|
|
message.warning(t("email_alerts.validation.complete_info"));
|
|
return;
|
|
}
|
|
if (Object.values(form.value).some((value) => value.length > 50)) {
|
|
message.warning(t("email_alerts.validation.field_length"));
|
|
return;
|
|
}
|
|
let url = "http://114.218.158.24:9020/api/fiee/emailalerts/submit";
|
|
// let url = 'https://erpapi-out.szjixun.cn/api/fiee/emailalerts/submit'
|
|
const res = await axios.post(url, form.value);
|
|
if (res.data.status === 0) {
|
|
submitted.value = true;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="alerts-container">
|
|
<!-- Title Section -->
|
|
<!-- 未提交 -->
|
|
<div v-if="!submitted" class="title-section">
|
|
<div class="title-decoration"></div>
|
|
<div class="title">{{ t("email_alerts.title") }}</div>
|
|
<div class="subtitle">{{ t("email_alerts.required_fields") }}</div>
|
|
</div>
|
|
<!-- 已提交 -->
|
|
<div v-else class="title-section">
|
|
<div class="title-decoration"></div>
|
|
<div class="title">{{ t("email_alerts.submitted_successfully") }}</div>
|
|
<div class="subtitle">{{ t("email_alerts.submitted_info") }}</div>
|
|
</div>
|
|
<!-- Form Card -->
|
|
<div
|
|
class="form-card relative"
|
|
:style="{
|
|
width: submitted ? '70%' : '100%',
|
|
height: submitted ? '448px' : 'auto',
|
|
}"
|
|
>
|
|
<template v-if="!submitted">
|
|
<form class="form-content" @submit="handleSubmit">
|
|
<div class="form-group">
|
|
<label for="firstName">{{
|
|
t("email_alerts.form.first_name")
|
|
}}</label>
|
|
<input
|
|
id="firstName"
|
|
v-no-space
|
|
v-model="form.firstName"
|
|
type="text"
|
|
required
|
|
/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="lastName">{{ t("email_alerts.form.last_name") }}</label>
|
|
<input
|
|
id="lastName"
|
|
v-no-space
|
|
v-model="form.lastName"
|
|
type="text"
|
|
required
|
|
/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="email">{{ t("email_alerts.form.email") }}</label>
|
|
<input
|
|
id="email"
|
|
v-no-space
|
|
v-model="form.email"
|
|
type="email"
|
|
required
|
|
/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="company">{{ t("email_alerts.form.company") }}</label>
|
|
<input
|
|
id="company"
|
|
v-no-space
|
|
v-model="form.company"
|
|
type="text"
|
|
required
|
|
/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="phone">{{ t("email_alerts.form.phone") }}</label>
|
|
<input id="phone" v-no-space v-model="form.phone" type="tel" />
|
|
</div>
|
|
<button type="submit" class="submit-btn">
|
|
{{ t("email_alerts.form.submit") }}
|
|
</button>
|
|
</form>
|
|
</template>
|
|
<template v-else>
|
|
<div class="submitted-data">
|
|
<div class="submitted-data-content">
|
|
<div class="submitted-row">
|
|
<span class="label">{{
|
|
t("email_alerts.submitted_data.first_name")
|
|
}}</span>
|
|
<span class="value">{{
|
|
form.firstName || t("email_alerts.submitted_data.not_filled")
|
|
}}</span>
|
|
</div>
|
|
<div class="submitted-row">
|
|
<span class="label">{{
|
|
t("email_alerts.submitted_data.last_name")
|
|
}}</span>
|
|
<span class="value">{{
|
|
form.lastName || t("email_alerts.submitted_data.not_filled")
|
|
}}</span>
|
|
</div>
|
|
<div class="submitted-row">
|
|
<span class="label">{{
|
|
t("email_alerts.submitted_data.email")
|
|
}}</span>
|
|
<span class="value">{{
|
|
form.email || t("email_alerts.submitted_data.not_filled")
|
|
}}</span>
|
|
</div>
|
|
<div class="submitted-row">
|
|
<span class="label">{{
|
|
t("email_alerts.submitted_data.company")
|
|
}}</span>
|
|
<span class="value">{{
|
|
form.company || t("email_alerts.submitted_data.not_filled")
|
|
}}</span>
|
|
</div>
|
|
<div class="submitted-row">
|
|
<span class="label">{{
|
|
t("email_alerts.submitted_data.phone")
|
|
}}</span>
|
|
<span class="value">{{
|
|
form.phone || t("email_alerts.submitted_data.not_filled")
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="submitted-bg"></div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.alerts-container {
|
|
width: 932px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.title-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
padding: 0 16px;
|
|
margin-bottom: 32px;
|
|
align-self: center;
|
|
}
|
|
|
|
.title-decoration {
|
|
width: 58px;
|
|
height: 7px;
|
|
background: #ff7bac;
|
|
margin: auto 0;
|
|
margin-top: 43px;
|
|
align-self: center;
|
|
}
|
|
|
|
.title {
|
|
font-family: "PingFang SC", sans-serif;
|
|
font-weight: 500;
|
|
font-size: 40px;
|
|
line-height: 56px;
|
|
color: #000000;
|
|
letter-spacing: 1.2px;
|
|
}
|
|
|
|
.subtitle {
|
|
font-family: "PingFang SC", sans-serif;
|
|
font-size: 16px;
|
|
line-height: 22px;
|
|
color: #455363;
|
|
letter-spacing: 0.48px;
|
|
align-self: center;
|
|
}
|
|
|
|
.form-card {
|
|
width: 100%;
|
|
background-color: white;
|
|
border-radius: 16px;
|
|
padding: 24px;
|
|
box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.16);
|
|
animation: fade-in 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.form-content {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.form-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
|
|
label {
|
|
font-family: "PingFang SC", sans-serif;
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
line-height: 22px;
|
|
color: #000000;
|
|
letter-spacing: 0.48px;
|
|
}
|
|
|
|
input {
|
|
height: 38px;
|
|
border: 1px solid #e0e0e6;
|
|
border-radius: 8px;
|
|
padding: 0 12px;
|
|
font-size: 16px;
|
|
outline: none;
|
|
transition: border-color 0.3s;
|
|
|
|
&:focus {
|
|
border-color: #ff7bac;
|
|
}
|
|
}
|
|
}
|
|
.submit-btn {
|
|
height: 60px;
|
|
background: #ff7bac;
|
|
border-radius: 8px;
|
|
border: none;
|
|
font-family: "PingFang SC", sans-serif;
|
|
font-weight: 500;
|
|
font-size: 24px;
|
|
line-height: 32px;
|
|
color: white;
|
|
letter-spacing: 1.2px;
|
|
cursor: pointer;
|
|
transition: opacity 0.3s;
|
|
margin-top: 8px; // 16px (from figma form-group gap) + 8px = 24px
|
|
|
|
&:hover {
|
|
opacity: 0.9;
|
|
}
|
|
}
|
|
|
|
.success-title {
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
color: #ff7bac;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.success-info {
|
|
margin-bottom: 24px;
|
|
color: #455363;
|
|
}
|
|
|
|
.submitted-data {
|
|
padding: 36px 24px 24px;
|
|
border-radius: 16px;
|
|
width: 678px;
|
|
height: 428px;
|
|
flex-shrink: 0;
|
|
}
|
|
.submitted-bg {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: url("@/assets/image/1920/email-alerts-submit.png");
|
|
background-repeat: no-repeat;
|
|
background-position: bottom;
|
|
background-size: 100%;
|
|
}
|
|
|
|
.submitted-data-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 16px;
|
|
padding: 16px 0;
|
|
}
|
|
|
|
.submitted-row {
|
|
display: flex;
|
|
font-family: "PingFang SC", sans-serif;
|
|
font-size: 16px;
|
|
line-height: 22px;
|
|
letter-spacing: 0.48px;
|
|
width: 280px;
|
|
}
|
|
|
|
.label {
|
|
font-weight: 500;
|
|
color: #000000;
|
|
width: 110px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.value {
|
|
font-weight: 400;
|
|
color: #455363;
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
</style>
|