// Add these imports at the top of your <script setup> section import { onMounted, onUnmounted, ref, watch } from 'vue'; import axios from 'axios'; // Add these refs const bodyOpacity = ref(1); const expirationDate = ref(null); const isExpired = ref(false); // Function to check expiration and update opacity const checkExpirationAndUpdateOpacity = async () => { try { // Replace with your actual API endpoint const response = await axios.get('YOUR_API_ENDPOINT'); const data = response.data; // Assuming format "0:2025-01-10" const [status, dateStr] = data.split(':'); if (status === '0') { expirationDate.value = new Date(dateStr); // Calculate remaining time const now = new Date(); const totalDuration = expirationDate.value - now; if (totalDuration <= 0) { // If expired, set opacity to 0 bodyOpacity.value = 0; isExpired.value = true; } else { // Calculate opacity based on remaining time // Assuming we want to start fading 30 days before expiration const fadeStartDuration = 30 * 24 * 60 * 60 * 1000; // 30 days in milliseconds if (totalDuration <= fadeStartDuration) { bodyOpacity.value = totalDuration / fadeStartDuration; } // Schedule next check setTimeout(checkExpirationAndUpdateOpacity, 60 * 60 * 1000); // Check every hour } } } catch (error) { console.error('Error checking expiration:', error); } }; // Add to mounted lifecycle hook onMounted(() => { checkExpirationAndUpdateOpacity(); }); // Add watch to apply opacity watch(bodyOpacity, (newOpacity) => { document.body.style.opacity = newOpacity; });