fiee-official-website/src/views/email-alerts/size1440/index.vue

<script setup>
import { ref } from "vue";
import axios from "axios";
const form = ref({
  firstName: "",
  lastName: "",
  email: "",
  company: "",
  phone: "",
  alertType: "all",
});
const submitted = ref(false);

async function handleSubmit(e) {
  e.preventDefault();
  const res = await axios.post(
    "https://erpapi-out.szjixun.cn/api/stock/submit/data",
    form.value
  );
  if (res.data.status === 0) {
    submitted.value = true;
  } else {
  }
}
</script>

<template>
  <main ref="main" class="relative min-h-[80vh] flex-center overflow-hidden">
    <!-- 粒子背景 -->
    <div class="absolute inset-0 z-0 pointer-events-none animate-bg-move"></div>
    <!-- 表单卡片/提交成功卡片 -->
    <div
      class="relative z-10 w-[600px] max-w-[90vw] p-8 bg-white/80 rounded-2xl shadow-xl backdrop-blur-md animate-bounce-in"
    >
      <template v-if="!submitted">
        <h2 class="text-2xl font-bold text-#ff7bac mb-2 tracking-wide">
          E-Mail Alerts
        </h2>
        <p class="text-sm text-gray-500 mb-5">* Required Fields</p>
        <form class="space-y-3" @submit="handleSubmit">
          <div>
            <label class="block text-gray-700 font-semibold mb-1"
              >* First Name</label
            >
            <input
              v-model="form.firstName"
              type="text"
              class="w-full px-3 py-2 rounded-lg ring-2 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
            />
          </div>
          <div>
            <label class="block text-gray-700 font-semibold mb-1"
              >* Last Name</label
            >
            <input
              v-model="form.lastName"
              type="text"
              class="w-full px-3 py-2 rounded-lg ring-2 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
            />
          </div>
          <div>
            <label class="block text-gray-700 font-semibold mb-1"
              >* Email</label
            >
            <input
              v-model="form.email"
              type="email"
              class="w-full px-3 py-2 rounded-lg ring-2 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
            />
          </div>
          <div>
            <label class="block text-gray-700 font-semibold mb-1"
              >* Company</label
            >
            <input
              v-model="form.company"
              type="text"
              class="w-full px-3 py-2 rounded-lg ring-2 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
            />
          </div>
          <div>
            <label class="block text-gray-700 font-semibold mb-1">Phone</label>
            <input
              v-model="form.phone"
              type="tel"
              class="w-full px-3 py-2 rounded-lg ring-2 ring-#ff7bac/20) transition-all duration-300 outline-none bg-white/90 border-none"
            />
          </div>
          <button
            type="submit"
            class="w-full py-2.5 rounded-xl text-white font-bold text-base active:scale-95 transition-all duration-200 animate-bounce-in animate-delay-200 submit-btn"
          >
            Submit
          </button>
        </form>
      </template>
      <template v-else>
        <div
          class="flex flex-col items-center justify-center min-h-[280px] animate-bounce-in"
        >
          <span
            class="i-mdi:check-circle-outline text-green-500 text-4xl mb-3"
          ></span>
          <h2 class="text-xl font-bold text-#ff7bac mb-2">
            Submitted successfully!
          </h2>
          <div class="text-gray-700 text-sm mb-3">
            The information you submitted is as follows:
          </div>
          <div
            class="w-full bg-white/80 rounded-xl shadow p-3 space-y-2 text-gray-800 text-sm"
          >
            <div>
              <span class="font-semibold">First Name：</span
              >{{ form.firstName }}
            </div>
            <div>
              <span class="font-semibold">Last Name：</span>{{ form.lastName }}
            </div>
            <div>
              <span class="font-semibold">Email：</span>{{ form.email }}
            </div>
            <div>
              <span class="font-semibold">Company：</span>{{ form.company }}
            </div>
            <div>
              <span class="font-semibold">Phone：</span
              >{{ form.phone || "Not filled in" }}
            </div>
            <div>
              <span class="font-semibold">Alert Type：</span
              >{{
                form.alertType === "all" ? "All Alerts" : "Customize Alerts"
              }}
            </div>
          </div>
        </div>
      </template>
    </div>
  </main>
</template>

<style scoped lang="scss">
/* 可选：自定义粒子或渐变动画背景 */
.submit-btn {
  background: linear-gradient(to right, #ff7bac, #00ffff);
}
</style>