Hugging Face's logo

Spaces:
Ethscriptions
/
tingche
Sleeping

App Files Community
tingche
File size: 6,214 Bytes 
8f48def
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>停车优惠二维码</title>
    <script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
    <style>
        /* 样式与之前相同，这里省略以保持简洁... */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        html, body { height: 100%; width: 100%; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: #f0f2f5; }
        .container { display: flex; flex-direction: column; height: 100vh; width: 100vw; }
        .section { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; overflow: hidden; }
        #qr-section { background-color: #ffffff; padding: 20px; }
        h1 { font-size: 2.5em; color: #333; margin-bottom: 25px; font-weight: 500; }
        #qrcode-container { padding: 20px; background-color: white; border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); width: 80vw; max-width: 400px; aspect-ratio: 1 / 1; display: flex; justify-content: center; align-items: center; }
        #qrcode { display: flex; justify-content: center; align-items: center; }
        #status { margin-top: 20px; font-size: 1.5em; color: #666; min-height: 1.5em; text-align: center; }
        .status-error { color: #d9534f; }
        #video-section { background-color: #000; }
        #tutorial-video { width: 100%; height: 100%; object-fit: cover; }
    </style>
</head>
<body>

    <div class="container">
        <div id="qr-section" class="section">
            <h1>请扫描二维码优惠停车</h1>
            <div id="qrcode-container">
                <div id="qrcode"></div>
            </div>
            <p id="status">正在初始化...</p>
        </div>
        <div id="video-section" class="section">
            <!-- !重要! 视频路径已修改，它将从/static/目录加载 -->
            <video id="tutorial-video" autoplay muted loop playsinline>
                <source src="/static/YOUR_VIDEO_FILE.mp4" type="video/mp4">
                您的浏览器不支持播放视频。
            </video>
        </div>
    </div>

    <script>
        // --- 配置区域 ---
        const config = {
            // !重要! 这是请求体中的 qrCodeId
            qrCodeId: 'PQRCODE_fd2b2cf9673b4ca187f2f20b2abded40',
            
            // 最终生成的二维码 URL 的固定部分
            qrCodeUrlBase: 'https://parking.youboyun.com.cn/h5/parkpages/preferential/freeQrcodeResult',
            
            // 刷新间隔（毫秒），60000 = 1分钟
            refreshInterval: 60000 
        };
        // --- 配置区域结束 ---

        const qrcodeElement = document.getElementById('qrcode');
        const statusElement = document.getElementById('status');
        let qrcodeInstance = null;
        let countdownInterval = null;

        function generateQrCode(url) {
            qrcodeElement.innerHTML = '';
            qrcodeInstance = new QRCode(qrcodeElement, {
                text: url,
                width: Math.min(380, window.innerWidth * 0.7),
                height: Math.min(380, window.innerWidth * 0.7),
                colorDark: "#000000",
                colorLight: "#ffffff",
                correctLevel: QRCode.CorrectLevel.H
            });
        }

        function startCountdown() {
            if (countdownInterval) clearInterval(countdownInterval);
            let seconds = config.refreshInterval / 1000;
            const updateTimer = () => {
                statusElement.classList.remove('status-error');
                statusElement.textContent = `刷新成功 | 下次刷新倒计时: ${seconds} 秒`;
                seconds--;
                if (seconds < 0) clearInterval(countdownInterval);
            };
            updateTimer();
            countdownInterval = setInterval(updateTimer, 1000);
        }

        async function fetchAndUpdateQrCode() {
            statusElement.classList.remove('status-error');
            statusElement.textContent = '正在刷新二维码...';

            // *** 重大修改 ***
            // 请求我们自己的后端API，而不是外部API
            const requestUrl = '/api/get_qrcode'; 

            try {
                const response = await fetch(requestUrl, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    // 将 qrCodeId 发送给我们的后端
                    body: JSON.stringify({
                        qrCodeId: config.qrCodeId
                    })
                });

                const result = await response.json();

                if (!response.ok) {
                    // 如果后端返回错误 (如 502), result.detail 会有错误信息
                    throw new Error(result.detail || `HTTP 错误! 状态码: ${response.status}`);
                }
                
                if (result.code === 0 && result.data) {
                    const tempId = result.data;
                    const finalQrCodeUrl = `${config.qrCodeUrlBase}?qrCodeId=${config.qrCodeId}&tempId=${tempId}`;
                    generateQrCode(finalQrCodeUrl);
                    startCountdown();
                } else {
                    throw new Error(result.msg || '后端返回数据格式不正确');
                }

            } catch (error) {
                console.error('请求失败:', error);
                statusElement.classList.add('status-error');
                statusElement.textContent = `错误: ${error.message}`;
                qrcodeElement.innerHTML = '<p style="color: red; text-align: center; font-size: 1.2em;">二维码生成失败<br>请检查后端日志</p>';
            }
        }

        document.addEventListener('DOMContentLoaded', () => {
            fetchAndUpdateQrCode();
            setInterval(fetchAndUpdateQrCode, config.refreshInterval);
        });
    </script>
</body>
</html>