Update index.html

index.html

@@ -4,6 +4,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <title>收款</title>
+    <!-- 引入二维码解析库 -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsQR/1.4.0/jsQR.js"></script>
     <style>
         * {
             margin: 0;
@@ -259,33 +261,22 @@
             transform: translateY(-1px);
         }
         
-        /* 二维码显示区域 */
-        .qr-container {
+        /* 隐藏的canvas用于二维码解析 */
+        #qrCanvas {
             display: none;
-            text-align: center;
-            padding: 20px;
-        }
-        
-        .qr-code-image {
-            width: 200px;
-            height: 200px;
-            margin: 0 auto 20px;
-            padding: 10px;
-            background-color: white;
-            border-radius: 10px;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
         }
         
-        .qr-code-image img {
-            width: 100%;
-            height: 100%;
-            display: block;
+        /* 错误提示样式 */
+        .error-state {
+            display: none;
+            padding: 20px;
+            text-align: center;
         }
         
-        .payment-tips {
-            font-size: 14px;
-            color: #666;
-            line-height: 1.6;
+        .error-icon {
+            font-size: 48px;
+            color: #f44336;
+            margin-bottom: 20px;
         }
         
         /* 响应式优化 */
@@ -365,48 +356,35 @@
     <!-- 支付处理覆盖层 -->
     <div class="payment-overlay" id="paymentOverlay">
         <div class="payment-processing">
-            <!-- 初始加载状态 -->
+            <!-- 加载状态 -->
             <div id="loadingState">
                 <div class="loading-spinner"></div>
                 <div class="payment-message">正在处理支付请求...</div>
-                <div class="payment-submessage">正在检测您的支付环境</div>
+                <div class="payment-submessage">系统正在识别支付方式</div>
             </div>
             
-            <!-- 二维码支付状态 -->
-            <div id="qrState" class="qr-container">
-                <div class="payment-message">请使用微信扫码支付</div>
-                <div class="qr-code-image">
-                    <!-- 在这里放置您的收款二维码图片 -->
-                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Crect width='200' height='200' fill='%23f0f0f0'/%3E%3Ctext x='100' y='100' text-anchor='middle' dy='.3em' font-size='14' fill='%23999'%3E请替换为二维码%3C/text%3E%3C/svg%3E" alt="支付二维码" id="paymentQR">
-                </div>
-                <div class="payment-tips">
-                    金额：¥<span id="qrAmount">0.00</span><br>
-                    请在微信中扫描上方二维码完成支付
-                </div>
+            <!-- 错误状态 -->
+            <div id="errorState" class="error-state">
+                <div class="error-icon">⚠️</div>
+                <div class="payment-message">无法完成支付</div>
+                <div class="payment-submessage">请确保您已安装微信并重试</div>
                 <div class="payment-actions">
-                    <button class="action-button primary" onclick="confirmPayment()">我已完成支付</button>
-                    <button class="action-button secondary" onclick="cancelPayment()">取消</button>
-                </div>
-            </div>
-            
-            <!-- 微信内支付提示 -->
-            <div id="wechatState" style="display: none;">
-                <div class="payment-message">正在跳转到微信支付...</div>
-                <div class="payment-submessage">请稍候，系统正在为您处理</div>
-                <div class="payment-actions" style="margin-top: 20px;">
+                    <button class="action-button secondary" onclick="retryPayment()">重试</button>
                     <button class="action-button secondary" onclick="cancelPayment()">取消</button>
                 </div>
             </div>
         </div>
     </div>
     
+    <!-- 隐藏的元素用于二维码处理 -->
+    <canvas id="qrCanvas"></canvas>
+    <img id="hiddenQRImage" style="display: none;">
+    
     <script>
         // 配置项
         const CONFIG = {
-            // 微信支付链接（从二维码解析得到的）
-            wechatPayUrl: 'wxp://f2f0uaoKZnUqDIp6w1BYLiXrLJjIntTdVoaTLkQhX8vsZfw',
-            // 备用二维码图片路径（请替换为您的实际二维码图片文件名）
-            qrCodeImagePath: 'wechat-qr.jpg'  // 例如：如果您的二维码文件名是 wechat-qr.jpg
+            // 二维码图片文件名（与HTML同目录）
+            qrCodeImagePath: '微信图片_20250609201923.jpg'
         };
         
         let selectedItems = new Set();
@@ -454,80 +432,92 @@
                 total += parseFloat(amount) * (itemQuantities[amount] || 1);
             });
             document.getElementById('totalAmount').textContent = total.toFixed(2);
-            
-            // 更新二维码显示中的金额
-            const qrAmountElement = document.getElementById('qrAmount');
-            if (qrAmountElement) {
-                qrAmountElement.textContent = total.toFixed(2);
-            }
         }
         
-        // 检测是否在微信内
-        function isWechat() {
-            const ua = navigator.userAgent.toLowerCase();
-            return ua.indexOf('micromessenger') !== -1;
-        }
-        
-        // 检测是否为移动设备
-        function isMobile() {
-            return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+        // 解析二维码图片
+        function decodeQRCode(imagePath) {
+            return new Promise((resolve, reject) => {
+                const img = document.getElementById('hiddenQRImage');
+                const canvas = document.getElementById('qrCanvas');
+                const ctx = canvas.getContext('2d');
+                
+                img.onload = function() {
+                    // 设置canvas尺寸
+                    canvas.width = img.width;
+                    canvas.height = img.height;
+                    
+                    // 绘制图片到canvas
+                    ctx.drawImage(img, 0, 0);
+                    
+                    // 获取图像数据
+                    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+                    
+                    // 使用jsQR解析
+                    const code = jsQR(imageData.data, imageData.width, imageData.height);
+                    
+                    if (code) {
+                        resolve(code.data);
+                    } else {
+                        reject(new Error('无法识别二维码'));
+                    }
+                };
+                
+                img.onerror = function() {
+                    reject(new Error('无法加载二维码图片'));
+                };
+                
+                // 设置图片源
+                img.src = imagePath;
+            });
         }
         
         // 处理支付
-        function processPayment() {
+        async function processPayment() {
             const overlay = document.getElementById('paymentOverlay');
             const loadingState = document.getElementById('loadingState');
-            const qrState = document.getElementById('qrState');
-            const wechatState = document.getElementById('wechatState');
+            const errorState = document.getElementById('errorState');
             
+            // 显示加载状态
             overlay.style.display = 'flex';
+            loadingState.style.display = 'block';
+            errorState.style.display = 'none';
             
-            // 获取当前金额
-            const currentAmount = document.getElementById('totalAmount').textContent;
-            document.getElementById('qrAmount').textContent = currentAmount;
-            
-            // 模拟加载过程
-            setTimeout(() => {
-                loadingState.style.display = 'none';
+            try {
+                // 解析二维码
+                const qrData = await decodeQRCode(CONFIG.qrCodeImagePath);
+                console.log('二维码解析结果:', qrData);
                 
-                if (isWechat()) {
-                    // 在微信内，尝试直接调用支付
-                    wechatState.style.display = 'block';
-                    
+                // 检查是否为微信支付链接
+                if (qrData.startsWith('wxp://')) {
                     // 尝试跳转到微信支付
-                    // 注意：wxp:// 协议通常只能在微信内部使用
                     setTimeout(() => {
-                        try {
-                            window.location.href = CONFIG.wechatPayUrl;
-                        } catch (e) {
-                            console.error('无法调用微信支付:', e);
-                            // 如果失败，显示二维码
-                            wechatState.style.display = 'none';
-                            qrState.style.display = 'block';
-                        }
+                        window.location.href = qrData;
+                        
+                        // 设置超时检查
+                        setTimeout(() => {
+                            // 如果3秒后页面还在，说明跳转失败
+                            loadingState.style.display = 'none';
+                            errorState.style.display = 'block';
+                        }, 3000);
                     }, 1000);
+                } else if (qrData.includes('weixin://') || qrData.includes('https://wx.tenpay.com')) {
+                    // 其他微信相关链接
+                    window.location.href = qrData;
                 } else {
-                    // 不在微信内，显示二维码
-                    qrState.style.display = 'block';
-                    
-                    // 如果有实际的二维码图片路径，替换占位符
-                    if (CONFIG.qrCodeImagePath && CONFIG.qrCodeImagePath !== 'your-qr-code.jpg') {
-                        document.getElementById('paymentQR').src = CONFIG.qrCodeImagePath;
-                    }
+                    // 不是微信支付链接
+                    throw new Error('非微信支付二维码');
                 }
-            }, 1500);
+            } catch (error) {
+                console.error('处理支付时出错:', error);
+                // 显示错误状态
+                loadingState.style.display = 'none';
+                errorState.style.display = 'block';
+            }
         }
         
-        // 确认支付完成
-        function confirmPayment() {
-            const overlay = document.getElementById('paymentOverlay');
-            overlay.style.display = 'none';
-            
-            // 显示支付成功提示
-            alert('感谢您的支付！如果支付遇到问题，请联系客服。');
-            
-            // 可以在这里添加支付成功后的处理逻辑
-            // 例如：跳转到成功页面、发送支付记录等
+        // 重试支付
+        function retryPayment() {
+            processPayment();
         }
         
         // 取消支付
@@ -537,21 +527,13 @@
             
             // 重置显示状态
             document.getElementById('loadingState').style.display = 'block';
-            document.getElementById('qrState').style.display = 'none';
-            document.getElementById('wechatState').style.display = 'none';
+            document.getElementById('errorState').style.display = 'none';
         }
         
         function goBack() {
             window.history.back();
         }
         
-        // 点击覆盖层外部区域关闭（仅在显示二维码时）
-        document.getElementById('paymentOverlay').addEventListener('click', function(event) {
-            if (event.target === this && document.getElementById('qrState').style.display === 'block') {
-                cancelPayment();
-            }
-        });
-        
         // 初始化页面
         updateTotalAmount();
     </script>